Section Portfolio

bootstrap 4 Section Portfolio

Теперь давайте перейдем к следующему фрагменту и создадим раздел портфолио, который будет содержать галерею.

Структура нашего HTML-кода для раздела Portfolio выглядит следующим образом:

<!-- portfolio -->
<section class="portfolio">
     <h1 class="text-center">Портфолио</h1>
 <div class="container">
  <div class="row">
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port13.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port1.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port6.png" class="img-fluid">
   </div>
      
<div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port3.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port11.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/electric.png" class="img-fluid">
   </div>
      
<div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/Classic.jpg" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port1.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port8.png" class="img-fluid">
   </div>
  </div>
 </div>
</section>

Добавление  .img-fluid к каждому изображению делает его отзывчивым.

Каждый элемент в нашей галерее будет занимать 4 столбца (помните,  col-md-4 для средних устройств,  col-lg-4 для больших устройств). Это равно 33,33333% на больших устройствах, таких как настольные компьютеры и большие планшеты, а 12 колонок на маленьком устройстве (например, iPhone, мобильные устройства) будут занимать 100% контейнера.


Давайте добавим немного стилей в нашу Галерею:

/*Portfolio*/
.portfolio{
 margin: 4em 0;
 position: relative; 
}
.portfolio h2{
 color:#F97300;
 margin: 2em; 
}
.portfolio img{
  height: 15rem;
  width: 100%;
  margin: 1em;
  
}

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

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

два × 1 =