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 × два =