Здравствуйте! Сегодня мы продемонстрируем, как создать полностью адаптивную страницу карточки товара, используя только 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
Написал: Арун
Автор кода: Аюб Макира