Section About

bootstrap 4 Section About
Пример

В этом разделе мы будем использовать Bootstrap Grid, чтобы разделить раздел на две части.

Чтобы начать нашу сетку, мы должны назначить родителю
div класс . .row

<div class="row"></div>

Первый раздел будет слева и будет содержать изображение, второй раздел будет справа и будет содержать описание.

В первом div  на левой стороне:

<div class="row"> 
 // left side
<div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/team-3.jpg" class="img-fluid">
    <span class="text-justify">S.Web Developer</span>
 </div>
 
</div>
<section class="about">
  <div class="container">
    <div class="row">
	<div class="col-lg-4 col-md-4 col-sm-12">
         <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIvnxYD0nBod8zd-VULS-l8cdNTzvNTF203U9NleBYcphMbO35" class="img- 
          fluid">
    <span class="text-justify">S.WebDeveloper</span>
 </div>		
     </div>
   </div>
</section>

После добавления HTML-элементов с правой стороны структура кода будет выглядеть следующим образом:

<section class="about">
<h2 class="text-center">О нас</h2>
  <div class="container">
    <div class="row">
	<div class="col-lg-4 col-md-4 col-sm-12">
         <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIvnxYD0nBod8zd-VULS-l8cdNTzvNTF203U9NleBYcphMbO35" class="img- 
          fluid">
    <span class="text-justify">S.WebDeveloper</span>
 </div>	
<div class="col-lg-8 col-md-8 col-sm-12 desc">
     
    <h3>D.John</h3>
    <p>
       ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
   </div>	
     </div>
   </div>
</section>

В css добавим:

.about{
 height: 100vh;
 margin: 1em 0;
 padding: 1em;
 position: relative;
}
.about h2{
 color:#F97300;
 margin: 2em;
}
.about img{
 height: 100%;
 width: 100%;
    border-radius: 50%
}
.about span{
 display: block;
 color: #888;
 position: absolute;
 left: 115px;
}
.about .desc{
 padding: 2em;
 border-left:4px solid #10828C;
}
.about .desc h3{
 color: #10828C;
}
.about .desc p{
 line-height:2;
 color:#888;
}

Вот что у нас получилось:

bootstrap 4 Section About

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

три − два =