В сегодняшнем уроке мы научимся создавать - адаптивный раздел наших услуг. Для создания этого проекта мы будем использовать HTML и CSS. Мы используем комбинацию гибкого макета и медиа-запросов для создания этого адаптивного дизайна.
Структура папки проекта:
Прежде чем мы начнем кодирование, давайте сначала создадим структуру папок проекта. Папка проекта называется — Responsive Services Section. Внутри этой папки у нас есть два файла — index.htmlи style.css. Эти файлы представляют собой HTML-документ и таблицу стилей.
Пример:
Начнем с HTML. Сначала скопируйте приведенный ниже код и вставьте его в HTML-файл. HTML-код состоит из section тега. Внутри секции у нас есть два div с именами классов row. Каждая строка состоит из column. Колонка закручивается cards. Внутри каждой карточки у нас есть теги icon и .heading
HTML КОД:
<section>
<div class="row">
<h2 class="section-heading">Our Services</h2>
</div>
<div class="row">
<div class="column">
<div class="card">
<div class="icon-wrapper">
<i class="fas fa-hammer"></i>
</div>
<h3>Service Heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam consequatur necessitatibus eaque.</p>
</div>
</div>
<div class="column">
<div class="card">
<div class="icon-wrapper">
<i class="fas fa-brush"></i>
</div>
<h3>Service Heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam consequatur necessitatibus eaque.</p>
</div>
</div>
<div class="column">
<div class="card">
<div class="icon-wrapper">
<i class="fas fa-wrench"></i>
</div>
<h3>Service Heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam consequatur necessitatibus eaque.</p>
</div>
</div>
<div class="column">
<div class="card">
<div class="icon-wrapper">
<i class="fas fa-truck-pickup"></i>
</div>
<h3>Service Heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam consequatur necessitatibus eaque.</p>
</div>
</div>
<div class="column">
<div class="card">
<div class="icon-wrapper">
<i class="fas fa-broom"></i>
</div>
<h3>Service Heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam consequatur necessitatibus eaque.</p>
</div>
</div>
<div class="column">
<div class="card">
<div class="icon-wrapper">
<i class="fas fa-plug"></i>
</div>
<h3>Service Heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam consequatur necessitatibus eaque.</p>
</div>
</div>
</div>
</section>
Теперь, чтобы добавить стиль и адаптивное поведение каждой из этих карточек, мы используем CSS. Теперь скопируйте приведенный ниже код и вставьте его в свою таблицу стилей.
В CSS мы центрируем строки, устанавливая отображение части сетки и устанавливая значение place-items в center. Мы устанавливаем отображение строки на flex и flex-wrap для переноса.
Столбец width установлен на 100%. Мы также устанавливаем высоту и ширину карты на 100%.
Мы используем медиа-запросы с точкой останова min-width: 768px. Здесь мы делим раздел на два столбца, установив значение flex-basis 0 50%.
В точке min-width 992px останова мы разделяем раздел на три столбца, устанавливая значение flex-basis 0 0 33,33%.
CSS КОД:
section {
height: 100vh;
width: 100%;
display: grid;
place-items: center;
}
.row {
display: flex;
flex-wrap: wrap;
}
.column {
width: 100%;
padding: 0 1em 1em 1em;
text-align: center;
}
.card {
width: 100%;
height: 100%;
padding: 2em 1.5em;
background: linear-gradient(#ffffff 50%, #2c7bfe 50%);
background-size: 100% 200%;
background-position: 0 2.5%;
border-radius: 5px;
box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
cursor: pointer;
transition: 0.5s;
}
h3 {
font-size: 20px;
font-weight: 600;
color: #1f194c;
margin: 1em 0;
}
p {
color: #575a7b;
font-size: 15px;
line-height: 1.6;
letter-spacing: 0.03em;
}
.icon-wrapper {
background-color: #2c7bfe;
position: relative;
margin: auto;
font-size: 30px;
height: 2.5em;
width: 2.5em;
color: #ffffff;
border-radius: 50%;
display: grid;
place-items: center;
transition: 0.5s;
}
.card:hover {
background-position: 0 100%;
}
.card:hover .icon-wrapper {
background-color: #ffffff;
color: #2c7bfe;
}
.card:hover h3 {
color: #ffffff;
}
.card:hover p {
color: #f0f0f0;
}
@media screen and (min-width: 768px) {
section {
padding: 0 2em;
}
.column {
flex: 0 50%;
max-width: 50%;
}
}
@media screen and (min-width: 992px) {
section {
padding: 1em 3em;
}
.column {
flex: 0 0 33.33%;
max-width: 33.33%;
}
}
Надеюсь, вам понравился сегодняшний урок. Если вы это сделали, оставьте свои комментарии ниже. Кроме того, все ваши вопросы, предложения и отзывы приветствуются. Если у вас возникнут проблемы при создании этого кода, загрузите исходный код, нажав кнопку загрузки кода ниже. Удачного кодирования!