Как создать адаптивный раздел ‘Наша команда’. Для создания этого адаптивного дизайна нам понадобятся HTML и чистый CSS. Нам не нужен какой-либо фреймворк или библиотека для реализации этого дизайна.
Прежде чем мы начнем кодировать, давайте сначала создадим структуру папок проекта. Мы создаем папку проекта под названием “Адаптивный раздел нашей команды”. В этой папке у нас есть пять файлов. Из этих пяти файлов три являются файлами изображений. Мы будем использовать их в качестве изображений профиля.
Далее у нас есть файлы с именами – ‘index.html’ и ‘style.css’. Это HTML-документ и таблица стилей.
Мы начинаем с HTML-кода. Пожалуйста, скопируйте приведенный ниже код и вставьте его в свой HTML-документ. HTML создает структуру, необходимую для наших карточек.
Далее, чтобы оформить и сделать эти карточки адаптивными, мы используем CSS. Теперь скопируйте приведенный ниже код и вставьте его в свою таблицу стилей.
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Our Team Section</title>
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section>
<div class="row">
<h1>Our Team</h1>
</div>
<div class="row">
<!-- Column 1-->
<div >
<div class="card">
<div class="img-container">
<img src="profile-img-1.png" />
</div>
<h3>Luna Turner</h3>
<p>Founder</p>
<div >
<a href="#">
<i class="fab fa-twitter"></i>
</a>
<a href="#">
<i class="fab fa-linkedin"></i>
</a>
<a href="#">
<i class="fab fa-github"></i>
</a>
<a href="#">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
</div>
<!-- Column 2-->
<div >
<div class="card">
<div class="img-container">
<img src="profile-img-2.png" />
</div>
<h3>Bryant Hall</h3>
<p>Developer</p>
<div >
<a href="#">
<i class="fab fa-twitter"></i>
</a>
<a href="#">
<i class="fab fa-linkedin"></i>
</a>
<a href="#">
<i class="fab fa-github"></i>
</a>
<a href="#">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
</div>
<!-- Column 3-->
<div >
<div class="card">
<div class="img-container">
<img src="profile-img-3.png" />
</div>
<h3>Hope Watkins</h3>
<p>Designer</p>
<div >
<a href="#">
<i class="fab fa-twitter"></i>
</a>
<a href="#">
<i class="fab fa-linkedin"></i>
</a>
<a href="#">
<i class="fab fa-github"></i>
</a>
<a href="#">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>CSS КОД:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #f5f5f5;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 2em 1em;
text-align: center;
}
.column {
width: 100%;
padding: 0.5em 0;
}
h1 {
width: 100%;
text-align: center;
font-size: 3.5em;
color: #1f003b;
}
.card {
box-shadow: 0 0 2.4em rgba(25, 0, 58, 0.1);
padding: 3.5em 1em;
border-radius: 0.6em;
color: #1f003b;
cursor: pointer;
transition: 0.3s;
background-color: #ffffff;
}
.card .img-container {
width: 8em;
height: 8em;
background-color: #a993ff;
padding: 0.5em;
border-radius: 50%;
margin: 0 auto 2em auto;
}
.card img {
width: 100%;
border-radius: 50%;
}
.card h3 {
font-weight: 500;
}
.card p {
font-weight: 300;
text-transform: uppercase;
margin: 0.5em 0 2em 0;
letter-spacing: 2px;
}
.icons {
width: 50%;
min-width: 180px;
margin: auto;
display: flex;
justify-content: space-between;
}
.card a {
text-decoration: none;
color: inherit;
font-size: 1.4em;
}
.card:hover {
background: linear-gradient(#6045ea, #8567f7);
color: #ffffff;
}
.card:hover .img-container {
transform: scale(1.15);
}
@media screen and (min-width: 768px) {
section {
padding: 1em 7em;
}
}
@media screen and (min-width: 992px) {
section {
padding: 1em;
}
.card {
padding: 5em 1em;
}
.column {
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 0 1em;
}
}Теперь ваш адаптивный раздел "Наша команда" готов. Теперь вы можете продолжить и настроить его так, как хотите.
Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.
