float image in a div

Question

Привет Я работаю над преобразованием макета в HTML/CSS.

Как я могу плавать изображение человека внутри третьего окна? Я попытался использовать изображения и прозрачно в верхней части, поэтому фоновые изображения каждого столбца будут равны, но когда я нахожу его, верхняя часть содержит пустое/белое пространство, которое не очень хорошо. видеть изображение буквой В

B

.home-sections .left-side .title{ 
 
\t \t \t background: #3666af; 
 
\t \t \t height: 130px; 
 
\t \t \t padding: 0 30px; 
 
\t \t \t position: relative; 
 
\t \t \t z-index: 2; 
 
\t \t \t overflow: hidden; 
 
\t \t } 
 
\t \t .home-sections .left-side .title h2{ 
 
\t \t \t margin: 0; 
 
\t \t \t line-height: 130px; 
 
\t \t } 
 
\t \t .home-sections .left-side .title span{ 
 
\t \t \t font-size: 18px; 
 
\t \t \t color: #f8f8f8; 
 
\t \t \t padding-left: 10px; 
 
\t \t } 
 

 

 
\t \t .home-sections .left-side .item .team-title{ 
 
\t \t \t font-size: 25px; 
 
\t \t \t font-weight: 400; 
 
\t \t \t font-family: ralewaylight; 
 
\t \t \t margin-top:0; 
 
\t \t \t padding-bottom: 10px; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .team-title span{ 
 
\t \t \t display: block; 
 
\t \t \t font-size: 50px; 
 
\t \t \t font-weight: 900; 
 
\t \t \t font-family: 'ralewayextrabold'; 
 
\t \t \t position: relative; 
 
\t \t \t top: -5px; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .team-position{ 
 
\t \t \t font-size: 19px; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .info{ 
 
\t \t \t max-width: 75%; 
 
\t \t \t margin: 0 auto; 
 
\t \t \t color: #b1b1b1; 
 
\t \t \t font-size: 1.1em; 
 
\t \t \t padding: 34px 0 15px 0; 
 
\t \t \t position: relative; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .info:before{ 
 
\t \t \t content: ''; 
 
\t \t \t position: absolute; 
 
\t \t \t top:0; 
 
\t \t \t left: 50%; 
 
\t \t \t width: 20%; 
 
\t \t \t margin-left: -10%; 
 
\t \t \t height: 4px; 
 
\t \t \t background:#8ead42; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .info .description p:last-child{ 
 
\t \t \t margin-bottom: 0; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .social-icons{ 
 
\t \t \t margin: 0; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .social-icons li{ 
 
\t \t \t list-style: none; 
 
\t \t \t display: inline-block; 
 
\t \t \t font-size: 20px; 
 
\t \t \t padding: 0 5px; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .social-icons li a{ 
 
\t \t \t color: #797979; 
 
\t \t \t font-size: 20px; 
 
\t \t \t -webkit-transition: all 0.3s ease; 
 
\t \t \t -moz-transition: all 0.3s ease; 
 
\t \t \t \t -ms-transition: all 0.3s ease; 
 
\t \t \t \t -o-transition: all 0.3s ease; 
 
\t \t \t \t \t transition: all 0.3s ease; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .social-icons li a:hover{ 
 
\t \t \t color: #fff; 
 
\t \t } 
 

 
\t \t .home-sections .home-sections-item{ 
 
\t \t \t position: relative; 
 
\t \t \t text-align: center; 
 

 
\t \t } 
 
\t \t .home-sections .home-sections-head{ 
 
\t \t \t position: relative; 
 
\t \t } 
 
\t \t .home-sections .home-sections-head > img{ 
 
\t \t \t width: 100%; 
 
\t \t } 
 
\t \t .home-sections .home-sections-head:after{ 
 
\t \t \t content: ''; 
 
\t \t \t position: absolute; 
 
\t \t \t top: 0; 
 
\t \t \t left:0; 
 
\t \t \t width: 100%; 
 
\t \t \t height: 100%; 
 
\t \t \t /*background: #dedede; 
 
\t \t \t opacity: 0.2;*/ 
 
\t \t \t -webkit-transition: all .25s ease; 
 
\t \t \t -moz-transition: all .25s ease; 
 
\t \t \t \t -ms-transition: all .25s ease; 
 
\t \t \t \t -o-transition: all .25s ease; 
 
\t \t \t \t \t transition: all .25s ease; 
 
\t \t } 
 
\t \t .home-sections-item .home-sections-content{ 
 
\t \t \t background: #fafafa; 
 
\t \t \t padding: 30px; 
 
\t \t \t border: 1px solid #ebebeb; 
 
\t \t \t border-top: none; 
 
\t \t \t box-shadow: inset 0px 1px 8px -4px rgba(0,0,0,0.2); 
 
\t \t } 
 

 
\t \t .home-sections-item .home-sections-content .title{ 
 
\t \t \t font-size: 25px; 
 
\t \t \t color: #474747; 
 
\t \t \t font-weight: 500; 
 
\t \t \t font-family: 'ralewaymedium'; 
 
\t \t \t margin-top: 0; 
 
\t \t \t margin-bottom: 10px; 
 

 
\t \t } 
 

 
\t \t .home-sections-item .home-sections-content .subtitle{ 
 
\t \t \t text-transform: uppercase; 
 
\t \t \t color: #adadad; 
 
\t \t \t font-size: 16px; 
 
\t \t \t position: relative; 
 
\t \t \t margin: 0; 
 
\t \t \t padding-top: 15px; 
 
\t \t } 
 
\t \t .home-sections-item .home-sections-content .subtitle:after{ 
 
\t \t \t content: ''; 
 
\t \t \t position: absolute; 
 
\t \t \t top:0; 
 
\t \t \t left: 50%; 
 
\t \t \t width: 60px; 
 
\t \t \t height: 2px; 
 
\t \t \t background: #8ead42; 
 
\t \t \t margin-left: -30px; 
 

 
\t \t } 
 

 
\t \t .home-sections-button{ 
 
\t \t \t margin: 0; 
 
\t \t \t padding: 0; 
 
\t \t \t list-style: none; 
 
\t \t \t position: absolute; 
 
\t \t \t bottom: 10px; 
 
\t \t \t left: 0; 
 
\t \t \t width: 100%; 
 
\t \t \t z-index: 1; 
 
\t \t \t opacity: 0; 
 

 
\t \t \t -webkit-transition: all .75s ease; 
 
\t \t \t -moz-transition: all .75s ease; 
 
\t \t \t \t -ms-transition: all .75s ease; 
 
\t \t \t \t -o-transition: all .75s ease; 
 
\t \t \t \t \t transition: all .75s ease; 
 

 
\t \t } 
 

 
\t \t .home-sections-button li{ 
 
\t \t \t display: inline-block; 
 
\t \t \t margin-right: 10px; 
 

 
\t \t } 
 

 
\t \t .home-sections-button li:last-child{ 
 
\t \t \t margin-right: 0; 
 
\t \t } 
 
\t \t .home-sections-button li a{ 
 
\t \t \t display: block; 
 
\t \t \t color: #8ead42; 
 
\t \t \t text-align: center; 
 
\t \t } 
 
\t \t .home-sections-button li a i{ 
 
\t \t \t width: 50px; 
 
\t \t \t height: 50px; 
 
\t \t \t border-radius: 50%; 
 
\t \t \t border:1px solid #8ead42; 
 
\t \t \t text-align: center; 
 
\t \t \t line-height: 50px; 
 
\t \t \t font-size: 20px; 
 
\t \t \t box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.2), inset 1px 1px 3px -1px rgba(0,0,0,0.2); 
 
\t \t \t text-shadow: 1px 1px 2px rgba(0,0,0,0.2); 
 

 

 
\t \t } 
 

 
\t \t .home-sections-button li a:hover i,.home-sections-button li a:focus i{ 
 
\t \t \t background: #8ead42; 
 
\t \t \t box-shadow: 1px 1px 3px -1px rgba(0,0,0,0), inset 1px 1px 3px -1px rgba(0,0,0,0); 
 
\t \t \t text-shadow: 1px 1px 2px rgba(0,0,0,0); 
 
\t \t \t color: #fff; 
 
\t \t } 
 

 
\t \t .home-sections-item:hover .home-sections-head:after,.home-sections-item:focus .home-sections-head:after{ 
 
\t \t \t opacity: 0.5; 
 
\t \t \t background:#000; 
 
\t \t } 
 
\t \t .home-sections-item:hover .home-sections-button,.home-sections-item:focus .home-sections-button{ 
 
\t \t \t bottom: 80px; 
 
\t \t \t opacity: 1; 
 
\t \t \t -webkit-transition: all .25s ease, color 0.75s ease; 
 
\t \t \t -moz-transition: all .25s ease, color 0.75s ease; 
 
\t \t \t \t -ms-transition: all .25s ease, color 0.75s ease; 
 
\t \t \t \t -o-transition: all .25s ease, color 0.75s ease; 
 
\t \t \t \t \t transition: all .25s ease, color 0.75s ease; \t 
 
\t \t } 
 

 
\t \t .row > :first-child,.section > :first-child, div[class^='col-'] > :first-child{ 
 
\t \t \t margin-top: 0 !important; 
 
\t \t } 
 
\t \t .row > :last-child,.section > :last-child, div[class^='col-'] > :last-child{ 
 
\t \t \t margin-bottom: 0 !important; 
 
\t \t }

<div class="row mb-xlarge"> 
 
\t \t <div class="home-sections"> \t 
 
\t \t \t \t <div class="col-md-4"> 
 
\t \t \t \t \t <div class="home-sections-item"> 
 
\t \t \t \t \t \t <div class="home-sections-head"> 
 
\t \t \t \t \t \t \t <img src="images/gallery/thumbs/thumb_01.png" alt=""> 
 
\t \t \t \t \t \t \t <ul class="home-sections-button"> 
 
\t \t \t \t \t \t \t \t <li><a href="#"><img src="images/icon-hover.png"></a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </div> 
 

 
\t \t \t \t \t \t <div class="home-sections-content"> 
 
\t \t \t \t \t \t \t <h3 class="title">Nos projets domiciliaire</h3> 
 
\t \t \t \t \t \t \t <h4 class="subtitle">PLUS DE DÉTAILS </h4> 
 
\t \t \t \t \t \t </div> \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t \t \t 
 
\t \t \t \t <div class="col-md-4"> 
 
\t \t \t \t \t <div class="home-sections-item"> 
 
\t \t \t \t \t \t <div class="home-sections-head"> 
 
\t \t \t \t \t \t \t <img src="images/gallery/thumbs/thumb_02.png" alt=""> 
 
\t \t \t \t \t \t \t \t <ul class="home-sections-button"> 
 
\t \t \t \t \t \t \t \t \t <li><a href="#"><img src="images/icon-hover.png"></a></li> 
 
\t \t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </div> 
 

 
\t \t \t \t \t \t <div class="home-sections-content"> 
 
\t \t \t \t \t \t \t <h3 class="title">Modèles disponible</h3> 
 
\t \t \t \t \t \t \t <h4 class="subtitle">VOIR LES MODÈLES</h4> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="col-md-4"> 
 
\t \t \t \t \t <div class="home-sections-item"> 
 
\t \t \t \t \t \t <div class="home-sections-head"> 
 
\t \t \t \t \t \t \t <img src="images/gallery/thumbs/thumb_03.png" alt=""> 
 
\t \t \t \t \t \t \t <ul class="home-sections-button"> 
 
\t \t \t \t \t \t \t \t <li><a href="#"><img src="images/icon-hover.png"></a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </div> 
 

 
\t \t \t \t \t \t <div class="home-sections-content"> 
 
\t \t \t \t \t \t \t <h3 class="title">Qualité de construction</h3> 
 
\t \t \t \t \t \t \t <h4 class="subtitle">lIRE PLUS </h4> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> \t \t \t 
 
\t \t </div> \t \t \t 
 
</div>

Answer 1

Сделайте свой образ display: block

.home-sections-head img{ 
    display: block; 
} 

JSFIDDLE DEMO

Answer 2

Вертикальные выравнивания: сверху решает проблему вы изображенную в B части.

Вам не нужно всплывать изображение, так как сами изображения и его описание находятся внутри .col-mid-4. Добавление значения свойства inline-block в .cols-mid-4 будет выглядеть так, как будто оно плавает, а также имеет вид, который вы хотите с точки зрения размещения изображения и его описания.

Добавьте блок кода CSS ниже вам ваш

.col-md-4 { 
     display: inline-block; 
     vertical-align: top; /* solves the problem in B part */ 
     margin: 0 20px 20px 0; /* Adjust as needed */ 
     } 

Примечание: Для достижения равномерного взгляд, добавить ширина, высота и переполнение с значением свойства скрыто.

.col-md-4 { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin: 0 20px 20px 0; /* Adjust as needed */ 
 
    } 
 

 

 

 
.home-sections .left-side .title{ 
 
\t \t \t background: #3666af; 
 
\t \t \t height: 130px; 
 
\t \t \t padding: 0 30px; 
 
\t \t \t position: relative; 
 
\t \t \t z-index: 2; 
 
\t \t \t overflow: hidden; 
 
\t \t } 
 
\t \t .home-sections .left-side .title h2{ 
 
\t \t \t margin: 0; 
 
\t \t \t line-height: 130px; 
 
\t \t } 
 
\t \t .home-sections .left-side .title span{ 
 
\t \t \t font-size: 18px; 
 
\t \t \t color: #f8f8f8; 
 
\t \t \t padding-left: 10px; 
 
\t \t } 
 

 

 
\t \t .home-sections .left-side .item .team-title{ 
 
\t \t \t font-size: 25px; 
 
\t \t \t font-weight: 400; 
 
\t \t \t font-family: ralewaylight; 
 
\t \t \t margin-top:0; 
 
\t \t \t padding-bottom: 10px; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .team-title span{ 
 
\t \t \t display: block; 
 
\t \t \t font-size: 50px; 
 
\t \t \t font-weight: 900; 
 
\t \t \t font-family: 'ralewayextrabold'; 
 
\t \t \t position: relative; 
 
\t \t \t top: -5px; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .team-position{ 
 
\t \t \t font-size: 19px; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .info{ 
 
\t \t \t max-width: 75%; 
 
\t \t \t margin: 0 auto; 
 
\t \t \t color: #b1b1b1; 
 
\t \t \t font-size: 1.1em; 
 
\t \t \t padding: 34px 0 15px 0; 
 
\t \t \t position: relative; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .info:before{ 
 
\t \t \t content: ''; 
 
\t \t \t position: absolute; 
 
\t \t \t top:0; 
 
\t \t \t left: 50%; 
 
\t \t \t width: 20%; 
 
\t \t \t margin-left: -10%; 
 
\t \t \t height: 4px; 
 
\t \t \t background:#8ead42; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .info .description p:last-child{ 
 
\t \t \t margin-bottom: 0; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .social-icons{ 
 
\t \t \t margin: 0; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .social-icons li{ 
 
\t \t \t list-style: none; 
 
\t \t \t display: inline-block; 
 
\t \t \t font-size: 20px; 
 
\t \t \t padding: 0 5px; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .social-icons li a{ 
 
\t \t \t color: #797979; 
 
\t \t \t font-size: 20px; 
 
\t \t \t -webkit-transition: all 0.3s ease; 
 
\t \t \t -moz-transition: all 0.3s ease; 
 
\t \t \t \t -ms-transition: all 0.3s ease; 
 
\t \t \t \t -o-transition: all 0.3s ease; 
 
\t \t \t \t \t transition: all 0.3s ease; 
 
\t \t } 
 
\t \t .home-sections .left-side .item .social-icons li a:hover{ 
 
\t \t \t color: #fff; 
 
\t \t } 
 

 
\t \t .home-sections .home-sections-item{ 
 
\t \t \t position: relative; 
 
\t \t \t text-align: center; 
 

 
\t \t } 
 
\t \t .home-sections .home-sections-head{ 
 
\t \t \t position: relative; 
 
\t \t } 
 
\t \t .home-sections .home-sections-head > img{ 
 
\t \t \t width: 100%; 
 
\t \t } 
 
\t \t .home-sections .home-sections-head:after{ 
 
\t \t \t content: ''; 
 
\t \t \t position: absolute; 
 
\t \t \t top: 0; 
 
\t \t \t left:0; 
 
\t \t \t width: 100%; 
 
\t \t \t height: 100%; 
 
\t \t \t /*background: #dedede; 
 
\t \t \t opacity: 0.2;*/ 
 
\t \t \t -webkit-transition: all .25s ease; 
 
\t \t \t -moz-transition: all .25s ease; 
 
\t \t \t \t -ms-transition: all .25s ease; 
 
\t \t \t \t -o-transition: all .25s ease; 
 
\t \t \t \t \t transition: all .25s ease; 
 
\t \t } 
 
\t \t .home-sections-item .home-sections-content{ 
 
\t \t \t background: #fafafa; 
 
\t \t \t padding: 30px; 
 
\t \t \t border: 1px solid #ebebeb; 
 
\t \t \t border-top: none; 
 
\t \t \t box-shadow: inset 0px 1px 8px -4px rgba(0,0,0,0.2); 
 
\t \t } 
 

 
\t \t .home-sections-item .home-sections-content .title{ 
 
\t \t \t font-size: 25px; 
 
\t \t \t color: #474747; 
 
\t \t \t font-weight: 500; 
 
\t \t \t font-family: 'ralewaymedium'; 
 
\t \t \t margin-top: 0; 
 
\t \t \t margin-bottom: 10px; 
 

 
\t \t } 
 

 
\t \t .home-sections-item .home-sections-content .subtitle{ 
 
\t \t \t text-transform: uppercase; 
 
\t \t \t color: #adadad; 
 
\t \t \t font-size: 16px; 
 
\t \t \t position: relative; 
 
\t \t \t margin: 0; 
 
\t \t \t padding-top: 15px; 
 
\t \t } 
 
\t \t .home-sections-item .home-sections-content .subtitle:after{ 
 
\t \t \t content: ''; 
 
\t \t \t position: absolute; 
 
\t \t \t top:0; 
 
\t \t \t left: 50%; 
 
\t \t \t width: 60px; 
 
\t \t \t height: 2px; 
 
\t \t \t background: #8ead42; 
 
\t \t \t margin-left: -30px; 
 

 
\t \t } 
 

 
\t \t .home-sections-button{ 
 
\t \t \t margin: 0; 
 
\t \t \t padding: 0; 
 
\t \t \t list-style: none; 
 
\t \t \t position: absolute; 
 
\t \t \t bottom: 10px; 
 
\t \t \t left: 0; 
 
\t \t \t width: 100%; 
 
\t \t \t z-index: 1; 
 
\t \t \t opacity: 0; 
 

 
\t \t \t -webkit-transition: all .75s ease; 
 
\t \t \t -moz-transition: all .75s ease; 
 
\t \t \t \t -ms-transition: all .75s ease; 
 
\t \t \t \t -o-transition: all .75s ease; 
 
\t \t \t \t \t transition: all .75s ease; 
 

 
\t \t } 
 

 
\t \t .home-sections-button li{ 
 
\t \t \t display: inline-block; 
 
\t \t \t margin-right: 10px; 
 

 
\t \t } 
 

 
\t \t .home-sections-button li:last-child{ 
 
\t \t \t margin-right: 0; 
 
\t \t } 
 
\t \t .home-sections-button li a{ 
 
\t \t \t display: block; 
 
\t \t \t color: #8ead42; 
 
\t \t \t text-align: center; 
 
\t \t } 
 
\t \t .home-sections-button li a i{ 
 
\t \t \t width: 50px; 
 
\t \t \t height: 50px; 
 
\t \t \t border-radius: 50%; 
 
\t \t \t border:1px solid #8ead42; 
 
\t \t \t text-align: center; 
 
\t \t \t line-height: 50px; 
 
\t \t \t font-size: 20px; 
 
\t \t \t box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.2), inset 1px 1px 3px -1px rgba(0,0,0,0.2); 
 
\t \t \t text-shadow: 1px 1px 2px rgba(0,0,0,0.2); 
 

 

 
\t \t } 
 

 
\t \t .home-sections-button li a:hover i,.home-sections-button li a:focus i{ 
 
\t \t \t background: #8ead42; 
 
\t \t \t box-shadow: 1px 1px 3px -1px rgba(0,0,0,0), inset 1px 1px 3px -1px rgba(0,0,0,0); 
 
\t \t \t text-shadow: 1px 1px 2px rgba(0,0,0,0); 
 
\t \t \t color: #fff; 
 
\t \t } 
 

 
\t \t .home-sections-item:hover .home-sections-head:after,.home-sections-item:focus .home-sections-head:after{ 
 
\t \t \t opacity: 0.5; 
 
\t \t \t background:#000; 
 
\t \t } 
 
\t \t .home-sections-item:hover .home-sections-button,.home-sections-item:focus .home-sections-button{ 
 
\t \t \t bottom: 80px; 
 
\t \t \t opacity: 1; 
 
\t \t \t -webkit-transition: all .25s ease, color 0.75s ease; 
 
\t \t \t -moz-transition: all .25s ease, color 0.75s ease; 
 
\t \t \t \t -ms-transition: all .25s ease, color 0.75s ease; 
 
\t \t \t \t -o-transition: all .25s ease, color 0.75s ease; 
 
\t \t \t \t \t transition: all .25s ease, color 0.75s ease; \t 
 
\t \t } 
 

 
\t \t .row > :first-child,.section > :first-child, div[class^='col-'] > :first-child{ 
 
\t \t \t margin-top: 0 !important; 
 
\t \t } 
 
\t \t .row > :last-child,.section > :last-child, div[class^='col-'] > :last-child{ 
 
\t \t \t margin-bottom: 0 !important; 
 
\t \t }

<div class="row mb-xlarge"> 
 
\t \t <div class="home-sections"> \t 
 
\t \t \t \t <div class="col-md-4"> 
 
\t \t \t \t \t <div class="home-sections-item"> 
 
\t \t \t \t \t \t <div class="home-sections-head"> 
 
\t \t \t \t \t \t \t <img src="images/gallery/thumbs/thumb_01.png" alt=""> 
 
\t \t \t \t \t \t \t <ul class="home-sections-button"> 
 
\t \t \t \t \t \t \t \t <li><a href="#"><img src="images/icon-hover.png"></a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </div> 
 

 
\t \t \t \t \t \t <div class="home-sections-content"> 
 
\t \t \t \t \t \t \t <h3 class="title">Nos projets domiciliaire</h3> 
 
\t \t \t \t \t \t \t <h4 class="subtitle">PLUS DE DÉTAILS </h4> 
 
\t \t \t \t \t \t </div> \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t \t \t 
 
\t \t \t \t <div class="col-md-4"> 
 
\t \t \t \t \t <div class="home-sections-item"> 
 
\t \t \t \t \t \t <div class="home-sections-head"> 
 
\t \t \t \t \t \t \t <img src="images/gallery/thumbs/thumb_02.png" alt=""> 
 
\t \t \t \t \t \t \t \t <ul class="home-sections-button"> 
 
\t \t \t \t \t \t \t \t \t <li><a href="#"><img src="images/icon-hover.png"></a></li> 
 
\t \t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </div> 
 

 
\t \t \t \t \t \t <div class="home-sections-content"> 
 
\t \t \t \t \t \t \t <h3 class="title">Modèles disponible</h3> 
 
\t \t \t \t \t \t \t <h4 class="subtitle">VOIR LES MODÈLES</h4> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="col-md-4"> 
 
\t \t \t \t \t <div class="home-sections-item"> 
 
\t \t \t \t \t \t <div class="home-sections-head"> 
 
\t \t \t \t \t \t \t <img src="images/gallery/thumbs/thumb_03.png" alt=""> 
 
\t \t \t \t \t \t \t <ul class="home-sections-button"> 
 
\t \t \t \t \t \t \t \t <li><a href="#"><img src="images/icon-hover.png"></a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </div> 
 

 
\t \t \t \t \t \t <div class="home-sections-content"> 
 
\t \t \t \t \t \t \t <h3 class="title">Qualité de construction</h3> 
 
\t \t \t \t \t \t \t <h4 class="subtitle">lIRE PLUS </h4> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> \t \t \t 
 
\t \t </div> \t \t \t 
 
</div>