Адаптивный раздел «Наши услуги» с использованием HTML и CSS

Здравствуйте и добро пожаловать на сегодняшний урок. В сегодняшнем уроке мы научимся создавать - адаптивный раздел наших услуг. Для создания этого проекта мы будем использовать HTML и CSS. Мы используем комбинацию гибкого макета и медиа-запросов для создания этого адаптивного дизайна. 

Структура папки проекта:

Прежде чем мы начнем кодирование, давайте сначала создадим структуру папок проекта. Папка проекта называется — Responsive Services Section. Внутри этой папки у нас есть два файла — index.htmlи style.css. Эти файлы представляют собой HTML-документ и таблицу стилей.

Пример:

Начнем с HTML. Сначала скопируйте приведенный ниже код и вставьте его в HTML-файл.

HTML-код состоит из sectionтега. Внутри секции у нас есть два div с именами классов row. Каждая строка состоит из column. Колонка закручивается cards. Внутри каждой карточки у нас есть теги iconи .headingp

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-basis0 50%.

В точке min-width 992pxостанова мы разделяем раздел на три столбца, устанавливая значение flex-basis0 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%; } }

Надеюсь, вам понравился сегодняшний урок. Если вы это сделали, оставьте свои комментарии ниже. Кроме того, все ваши вопросы, предложения и отзывы приветствуются. Если у вас возникнут проблемы при создании этого кода, загрузите исходный код, нажав кнопку загрузки кода ниже. Удачного кодирования!