Product cards Aliexpress Style html css
product card in aliexpress style. Bootstrap 4.
Super
0
1539
A simple block with a list of goods on the site, a mobile version of the site in the style of aliexpress.
CSS
body {
font-size: 12px;
font-family: Open Sans,Roboto,Arial,Helvetica,sans-serif,SimSun;
line-height: 1.3;
background-color: #f2f2f2;
}
.product-container {
margin-left: 0;
}
.product-container {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-sizing: border-box;
margin: 4px;
text-decoration: none;
}
.product-image-container {
position: relative;
height: 0;
overflow: hidden;
}
.product-image-container .product-image {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%,-50%);
}
.product-dscr-container {
padding: 0 10px 10px;
}
.product-title {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
height: 18px;
line-height: 18px;
font-size: 12px;
color: #000;
margin: 5px 0;
}
.product-price {
font-size: 14px;
color: #000;
font-weight: 700;
margin: 4px 0;
}
.oriArea {
display: inline-block;
color: #999;
font-size: 12px;
text-decoration: line-through;
}
.oriArea .discount-block {
display: inline-block;
margin: 0 10px;
height: 20px;
line-height: 20px;
color: #ff4747;
border-radius: 4px;
background-color: #fff1f1;
padding: 0 5px;
}
.sold-area {
font-size: 10px;
line-height: 14px;
color: #999;
}
.star-icon {
display: inline-block;
background: url(http://ae01.alicdn.com/kf/Hdfcf30e2ffca4b43a31b455805f64db0H.png) no-repeat;
background-size: 100% 100%;
width: 14px;
height: 14px;
margin-right: 3px;
transform: translateY(2px);
}
.product-sold-count {
display: inline-block;
line-height: 14px;
margin: 4px 0 4px 4px;
}
._2DdIz {
position: absolute;
z-index: 1;
width: 38px;
height: 20px;
background: #f90;
color: #fff;
font-weight: 700;
line-height: 20px;
border-radius: 12px 0 12px 0;
text-align: center;
}HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid">
<h1>Hello, world!</h1>
<div class="col-12">
<div class="row">
<div class="col-2">
<div class="recommendation-column recommendation-column-first" >
<div class="product-container">
<div class="product-image-container" style="padding-bottom: 100%;">
<img class="product-image" src="https://ae01.alicdn.com/kf/H1a871931b12a4fa380d6945397bb2f69O.jpg_220x220q90.jpg" alt="AV Out">
</div>
<div class="product-dscr-container">
<div class="product-title">Super pupper test block product</div>
<div class="product-price">US $15.99</div>
<div class="oriArea">US $19.99
<div class="discount-block">-20%</div>
</div>
<div class="sold-area">
<div class="star-icon">
</div>4.4 |<div class="product-sold-count">236 Sold</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-2">
<div class="product-container">
<div class="product-image-container" style="padding-bottom: 100%;">
<img class="product-image" src="https://ae01.alicdn.com/kf/H1a871931b12a4fa380d6945397bb2f69O.jpg_220x220q90.jpg" alt="AV Out">
</div>
<div class="product-dscr-container">
<div class="product-title">Super pupper test block product</div>
<div class="product-price">US $15.99</div>
<div class="oriArea">US $19.99
<div class="discount-block">-20%</div>
</div>
<div class="sold-area">
<div class="star-icon">
</div>4.4 |<div class="product-sold-count">236 Sold</div>
</div>
</div>
</div>
</div>
<div class="col-2">
<div class="product-container">
<div class="product-image-container" style="padding-bottom: 100%;">
<img class="product-image" src="https://ae01.alicdn.com/kf/H1a871931b12a4fa380d6945397bb2f69O.jpg_220x220q90.jpg" alt="AV Out">
</div>
<div class="product-dscr-container">
<div class="product-title">Super pupper test block product</div>
<div class="product-price">US $15.99</div>
<div class="oriArea">US $19.99
<div class="discount-block">-20%</div>
</div>
<div class="sold-area">
<div class="star-icon">
</div>4.4 |<div class="product-sold-count">236 Sold</div>
</div>
</div>
</div>
</div>
<div class="col-2">
<div class="product-container">
<div class="_2DdIz">-32%</div>
<div class="product-image-container" style="padding-bottom: 100%;">
<img class="product-image" src="https://ae01.alicdn.com/kf/H1a871931b12a4fa380d6945397bb2f69O.jpg_220x220q90.jpg" alt="AV Out">
</div>
<div class="product-dscr-container">
<div class="product-title">Super pupper test block product</div>
<div class="product-price">US $15.99</div>
<div class="oriArea">US $19.99
<div class="discount-block">-20%</div>
</div>
<div class="sold-area">
<div class="star-icon">
</div>4.4 |<div class="product-sold-count">236 Sold</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Our website is for sale! The domain and website has been running for more than 3 years, but it's time to part with it. There is no price, so I consider any offer. Contact us if you are interested in buying in the feedback form, we will discuss options, price and details for transferring the site. (script, database and everything else for the site to work).
