Здравствуйте, друзья, в этом блоге мы собираемся поделиться еще одним CSS-фрагментом адаптивной карточки товара. Карточка товара для электронной коммерции используется для отображения деталей товара на снимке. Я предлагаю вам посмотреть видео, чтобы получить лучшее представление о том, что представляет собой исходный код. Это даст вам представление о том, как будет выглядеть код.
Многие из нас совершают покупки онлайн. Перед покупкой любого товара мы хотим узнать краткую информацию о продукте. Это дает нам представление об этом продукте. Наш сегодняшний фрагмент посвящен этой карточке товара. Чтобы карточки товара выглядели немного модно, изображения товара расположены немного выше на карточке товара в абсолютном положении.
Мы использовали HTML и CSS для создания карточек товаров. Наконец, мы использовали медиа-запросы css, чтобы придать этому фрагменту адаптивный вид. Посмотрите видео выше, чтобы увидеть, как было выполнено кодирование фрагмента.
Исходный код
Первое, что вы должны сделать, это создать несколько файлов. Есть два файла, один HTML, а другой CSS. Файл необходимо прикрепить к документу. Если вы хотите проверить, работает ли проект, вы можете открыть его в браузере.
Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.
<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
<meta charset="UTF-8">
<title>Responsive E-Commerce product card ui design using HTML CSS</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="single-box">
<div class="img"><img alt="Round_neck" src="img/1.png"></div>
<h3>Product Name</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur doloremque adipisci quaerat consequatur esse</p>
<div class="price">
<p>$12</p>
</div>
<a href="#">Add to Cart</a>
</div>
<div class="single-box">
<div class="img"><img alt="Round_neck" src="img/2.png"></div>
<h3>Product Name</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur doloremque adipisci quaerat consequatur esse</p>
<div class="price">
<p>$14</p>
</div>
<a href="#">Add to Cart</a>
</div>
<div class="single-box">
<div class="img"><img alt="Round_neck" src="img/3.png"></div>
<h3>Product Name</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur doloremque adipisci quaerat consequatur esse</p>
<div class="price">
<p>$15</p>
</div>
<a href="#">Add to Cart</a>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
background: #ffcc9d;
color: #7f8db0;
}
.wrapper {
width: 100%;
height: 100%;
}
.box {
display: flex;
width: 950px;
margin: 140px auto;
}
.single-box {
width: 300px;
background: #fff;
margin-right: 20px;
padding: 25px;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
position: relative;
}
.single-box:last-child {
margin-right: 0;
}
.single-box .img img {
width: 200px;
margin-bottom: 10px;
}
.single-box .price {
font-weight: 600;
font-size: 45px;
}
.img {
position: absolute;
top: -25%;
left: 20%;
}
.single-box h3 {
margin-top: 25%;
margin-bottom: 15px;
}
.single-box p {
line-height: 1.9;
}
.single-box a {
background: #f57e20;
color: #fff;
text-decoration: none;
border-radius: 50px;
padding: 10px 20px;
display: inline-block;
margin-top: 30px;
}
@media(max-width:991px) {
.box {
width: 100%;
}
}
@media (max-width:767px) {
.box {
width: 100%;
flex-direction: column;
}
.single-box {
margin-right: 0;
width: 100%;
margin-bottom: 110px;
}
}
0 Комментарии