Здравствуйте! Сегодня мы продемонстрируем, как создать полностью адаптивную страницу карточки товара, используя только HTML и CSS. Изображение или фотография товара, которые каким-либо образом связаны с сопутствующими товарами, отображаются в Карте товара. Он предоставляет информацию о технических характеристиках продукта.
Адаптивная карточка товара с использованием HTML и CSS[/caption]
Карточка продукта в этом блоге разделена на две части: в левой части находится изображение продукта, а в правой части — название продукта, цена и кнопка «Купить сейчас».
Вы можете скопировать исходный код этого приложения, если хотите; он представлен ниже вместе с дизайном карточки товара. Этот код дизайна карточки продукта, наряду с вашим творчеством, может быть использован для повышения уровня этой карточки продукта.
Шаг 1: Добавление HTML-разметки
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Product Card</title>
</head>
<body>
<section class="section-card">
<div class="card">
<div class="img-container">
<img src="https://www.downloadclipart.net/large/sony-headphone-png-photos.png" alt="">
</div>
<div class="infos">
<h3 class="name">
Wirless Headphone
</h3>
<h2 class="price">
$255.3
</h2>
<button class="btn btn-buy">Buy now</button>
</div>
</div>
</section>
</body>
</html>
Мы создадим два отдельных файла HTML и CSS в нашем редакторе кода, чтобы обеспечить оптимальную организацию кода. HTML и CSS будут использоваться для создания нашей формы входа. Добавьте ссылку CSS в наш HTML сейчас.
<link rel="stylesheet" href="style.css" />
Добавление структуры для нашей карточки продукта:
- Сделаем секцию с классом «section-card» с помощью тега «section», затем сделаем контейнер для карточки с помощью тега «div».
- Мы создадим контейнер для изображения внутри нашего контейнера карты и, используя тег ‹img›, мы добавим изображение предмета внутри нашей карты.
- Тег ‹h3› теперь будет использоваться для включения сведений о продукте. Название продукта будет добавлено, а цена будет добавлена с тегом ‹h2›. Мы также добавим кнопку «Купить сейчас» в нашу карточку продукта, используя тег кнопки.
Давайте посмотрим на структуру.
Вывод:
Адаптивная карточка товара с использованием HTML и CSS[/caption]
Шаг 2: Добавление кода CSS
В свою таблицу стилей скопируйте и вставьте приведенный ниже код CSS.
@import url("https://fonts.googleapis.com/css2?family=Radio+Canada:wght@700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Radio Canada", sans-serif;
background-color: #f2f2f2;
}
img {
width: 100%;
display: block;
}
.section-card {
padding: 0 30px;
height: 100vh;
display: flex;
align-items: center;
}
.section-card .card {
margin: 20px auto;
max-width: 300px;
border-radius: 10px;
overflow: hidden;
background-image: linear-gradient(
140deg,
#132936,
#132936 20%,
#2196f3 20.5%,
#2196f3
);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
.section-card .card .img-container {
padding: 10px 0 0 0;
}
.section-card .card .img-container img {
filter: drop-shadow(0px -5px 25px rgba(0, 0, 0, 0.7));
transform: scale(1.15);
}
.section-card .card .infos {
padding: 30px 15px;
text-align: center;
}
.section-card .card .infos .name,
.section-card .card .infos .price {
color: #fff;
}
.section-card .card .infos .name {
font-size: 1.1rem;
}
.section-card .card .infos .price {
margin: 10px 0 15px 0;
font-size: 2rem;
}
.section-card .card .infos .btn {
font-family: "Radio Canada", sans-serif;
padding: 0.8rem 1.6rem;
border-radius: 50px;
border: 1px solid #f2f2f2;
font-size: 1rem;
font-weight: 300;
min-width: 150px;
cursor: pointer;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
background-color: #f2f2f2;
transition: all 0.2s ease-in;
}
.section-card .card .infos .btn:hover {
background-color: transparent;
color: #fff;
box-shadow: none;
}
@media screen and (min-width: 700px) {
.section-card .card {
display: flex;
align-items: center;
min-width: 550px;
padding: 15px 20px;
}
.section-card .card .img-container {
padding-top: 0;
width: 60%;
}
}
Базовый стиль:
Шрифты Google сначала будут импортированы с помощью ссылки импорта шрифтов Google, после чего отступы и поля будут установлены на «ноль» с помощью универсального селектора, а свойство box-sizing будет использоваться для изменения размера поля на «border-size». коробка."
Теперь внутри тела мы будем использовать селектор тега body, чтобы установить семейство шрифтов «Radio Canada», а свойство цвета фона — серый. Ширина изображения установлена на 100%, а его отображение установлено на «блок».
@import url("https://fonts.googleapis.com/css2?family=Radio+Canada:wght@700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Radio Canada", sans-serif;
background-color: #f2f2f2;
}
img {
width: 100%;
display: block;
}
Стиль карты:
Мы дадим нашей карточке отступ 30px, используя селектор класса (.section-card), высоту 100vh, используя свойство height, и настройку отображения «flex». Мы выровняем объекты, используя атрибут align-item.
Радиус границы теперь будет установлен на 10 пикселей с помощью дочернего селектора (.card), свойство переполнения будет установлено на «скрытый», а фоновое изображение будет использоваться для установки фона в виде линейного градиента «черного и синего». ”
.section-card {
padding: 0 30px;
height: 100vh;
display: flex;
align-items: center;
}
.section-card .card {
margin: 20px auto;
max-width: 300px;
border-radius: 10px;
overflow: hidden;
background-image: linear-gradient(
140deg,
#132936,
#132936 20%,
#2196f3 20.5%,
#2196f3
);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
Информация о стиле:
Для этого мы добавим отступы по 30 пикселей сверху и снизу и по 15 пикселей слева и справа с помощью селектора классов (.infos), а цвет шрифта изменится на «серый». Мы установим размер шрифта на «2 rem», используя атрибут font-size.
Наша кнопка будет иметь сплошную серую рамку толщиной 1 пиксель при применении стиля. Используя свойство цвета фона, мы зададим нашей кнопке серый фон и радиус порядка 50 пикселей, чтобы создать кривизну краев.
Мы будем использовать свойство hover, чтобы присвоить нашей кнопке свойство hover, чтобы при наведении на нее курсора цвет фона становился прозрачным, а цвет шрифта кнопки устанавливался белым.
.section-card .card .infos {
padding: 30px 15px;
text-align: center;
}
.section-card .card .infos .name,
.section-card .card .infos .price {
color: #fff;
}
.section-card .card .infos .name {
font-size: 1.1rem;
}
.section-card .card .infos .price {
margin: 10px 0 15px 0;
font-size: 2rem;
}
.section-card .card .infos .btn {
font-family: "Radio Canada", sans-serif;
padding: 0.8rem 1.6rem;
border-radius: 50px;
border: 1px solid #f2f2f2;
font-size: 1rem;
font-weight: 300;
min-width: 150px;
cursor: pointer;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
background-color: #f2f2f2;
transition: all 0.2s ease-in;
}
.section-card .card .infos .btn:hover {
background-color: transparent;
color: #fff;
box-shadow: none;
}
Адаптивная карточка товара с использованием HTML и CSS[/caption]
Отзывчивость:
Теперь мы будем использовать медиа-запрос, чтобы добавить отзывчивости нашему продукту. Если размер экрана равен или превышает указанную ширину, мы устанавливаем минимальную ширину. Когда размер экрана изменится, отображение нашей карточки изменится на гибкое, а нашей карточке продукта будет задана минимальная ширина 550 пикселей. Кроме того, мы добавим отступ по 20 пикселей слева и справа и 15 пикселей сверху.
@media screen and (min-width: 700px) {
.section-card .card {
display: flex;
align-items: center;
min-width: 550px;
padding: 15px 20px;
}
.section-card .card .img-container {
padding-top: 0;
width: 60%;
}
}
Теперь мы завершили нашу Карточку товара, используя html и css. Надеюсь, вы поняли весь проект. Давайте посмотрим на наш Live Preview.
Если вы обнаружите, что этот блог полезен, обязательно поищите в Google код со случайным кодом для интерфейсных проектов с исходными кодами и обязательно следуйте коду со случайной страницей в Instagram.
Следуйте: codewithrandom
Написал: Арун
Автор кода: Аюб Макира
