Product cards Aliexpress Style html css

product card in aliexpress style. Bootstrap 4.

Product cards Aliexpress Style html css
Product cards Aliexpress Style html css

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/popper.js@1.16.0/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>

 



on the site are taken from open sources. The site does not contain files for download. All links to files from open sources. Owners of copyrights to the material may request removal of the post from the site.