Blog layout

Live demo

Blog layout

49ers Agree To Record $54 Million Deal With LB Kwon Alexander

Lorem ipsum dolor sit amet, consectetur adipiscing...

EPA Settles With Tesla Over Hazardous Waste Violations At Fremont Factory

Lorem ipsum dolor sit amet, consectetur adipiscing...

All California Crab Fisheries Closing In April To Protect Whales

Lorem ipsum dolor sit amet, consectetur adipiscing...

Kamala Harris Campaign: $12 Million Raised In 1st Quarter

Lorem ipsum dolor sit amet, consectetur adipiscing...

Giants Rally To Beat Rival Dodgers 4-2 In Series Opener

Lorem ipsum dolor sit amet, consectetur adipiscing...

Sales Taxes Rising In Several Bay Area Communities

Lorem ipsum dolor sit amet, consectetur adipiscing...

Markup

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_articles_latest
		* @Author	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	
	defined('_JEXEC') or die;
	
?>  

<div class="projects-horizontal">
	<div class="container">		
		<div class="row projects">				
			
			<?php foreach ($list as $item) : ?>
			
			<div class="col-sm-6 pb-5">  
				<div class="row">
					<div class="col-md-12 col-lg-6">
						
						<!-- Intro image -->
						<?php
							$article_images  = json_decode($item->images);
							$article_image   = '';
							$article_image_alt   = '';
							if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
								$article_image  = $article_images->image_intro;
								$article_image_alt  = $article_images->image_intro_alt;
							}?> 
							<a href="/<?php echo $item->link; ?>">
								<img class="img-fluid" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
							</a>
							 
					</div>
					
					<div class="col">									
						<h5 class="nam">								
							<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
						</h5>
						<p class="description"><?php echo JHTML::_('string.truncate', $item->introtext, 50, false, false) ; ?></p>	
					</div>
					
				</div>
			</div>	
			<?php endforeach; ?>
			
		</div>
	</div>
</div>

CSS

.projects-horizontal {
  color:#313437;
  background-color:#fff;
}
.projects-horizontal p {
  color:#7d8285;
}
.projects-horizontal h2 {
  font-weight:bold;
  margin-bottom:40px;
  padding-top:40px;
  color:inherit;
}
@media (max-width:767px) {
  .projects-horizontal h2 {
    margin-bottom:25px;
    padding-top:25px;
    font-size:24px;
  }
}
.projects-horizontal .intro {
  font-size:16px;
  max-width:500px;
  margin:0 auto 10px;
}
.projects-horizontal .projects {
  padding-bottom:40px;
}
.projects-horizontal .item {
  padding-top:60px;
  min-height:160px;
}
@media (max-width:767px) {
  .projects-horizontal .item {
    padding-top:40px;
    min-height:160px;
  }
}
.projects-horizontal .item .name {
  font-size:18px;
  font-weight:bold;
  margin-top:10px;
  margin-bottom:15px;
  color:inherit;
}

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.