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;
}
Download this override
override-blog-layout.zipAlready downloaded 16 times