Live demo
Projects
Nunc luctus in metus eget fringilla. Aliquam sed justo ligula. Vestibulum nibh erat, pellentesque ut laoreet vitae.
Project #1
Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu gravida.
Project #2
Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu gravida.
Project #3
Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu gravida.
Project #4
Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu gravida.
Markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_news
* @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="text-center intro">
<h3 class="display-4">Projects </h3>
<p>Nunc luctus in metus eget fringilla. Aliquam sed justo ligula. Vestibulum nibh erat, pellentesque ut laoreet vitae. </p>
</div>
<div class="row projects">
<?php foreach ($list as $item) : ?>
<div class="col-sm-6 item">
<div class="row">
<div class="col-md-12 col-lg-5">
<!-- 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">
<h3 class="name">
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
</h3>
<?php if (!$params->get('intro_only')) : ?>
<p class="description"><?php echo $item->afterDisplayTitle; ?></p>
<?php endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<?php if ($params->get('show_introtext', 1)) : ?>
<p class="description"><?php echo $item->introtext; ?></p>
<?php endif; ?>
<?php echo $item->afterDisplayContent; ?>
</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;
}
@media (max-width:991px) {
.projects-horizontal .item .name {
margin-top:22px;
}
}
.projects-horizontal .item .description {
font-size:15px;
margin-bottom:0;
}Inspiration: https://epicbootstrap.com/snippets/projects-compact
