Best Selling Product Angular
app.component.html
<section class="best-selling">
<div class="container">
<div class="best-selling-container">
<div class="sale-peice">
Sale <strong>14%</strong> Off
</div>
<div class="selling-col-1">
<div class="selling-left">
<ul>
<li>
<span class="count-date">194</span>
<span class="count-day">Days</span>
</li>
<li>
<span class="count-date">01</span>
<span class="count-day">Hours</span>
</li>
<li>
<span class="count-date">22</span>
<span class="count-day">Mins</span>
</li>
<li>
<span class="count-date">24</span>
<span class="count-day">Secs</span>
</li>
</ul>
</div>
</div>
<div class="selling-col-2">
<div class="selling-img">
<img src="../assets/bestSelling/bestSelling.jpg" alt="Best Selling">
</div>
</div>
<div class="selling-col-3">
<div class="selling-heading">
<a href="javascript:void(0);">Enim Picanha Enim</a>
<div class="selling-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos
dolores et quas molestias excepturi sint occaecati cupiditate non
ovident...
</p>
<h3><span class="selling-amount">$231.00</span> <span class="selling-discount">$256.00</span></h3>
<div class="selling-button">
<a href="javascript:void:0;" class="cart-button"><i class="fa fa-shopping-cart"></i> Add To Cart</a>
<button type="button" class="main-btn">
<a href="javascript:void:(0);"><i class="fa fa-heart"></i></a>
<a href="javascript:void:(0);"><i class="fa fa-search"></i></a>
</button>
</div>
</div>
</div>
</div>
</section>
app.component.css
.best-selling{
position: relative;
top: -60px;
z-index: 1;
}
.best-selling-container{
position: relative;
background: #fff;
padding: 0 40px 0 0;
border-radius: 10px;
}
.sale-peice{
position: absolute;
top: 40px;
left: 0;
background-color: #ff4000;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
padding: 12px;
text-transform: uppercase;
color: #fff;
font-size: 26px;
width: 260px;
text-align: center;
}
.selling-col-1{
width: 16%;
display: inline-block;
vertical-align: middle;
}
.selling-col-2{
width: 42%;
display: inline-block;
vertical-align: middle;
}
.selling-col-3{
width: 42%;
display: inline-block;
vertical-align: middle;
}
.selling-left ul{
padding: 0;
margin: 0;
}
.selling-left ul li{
display: block;
padding: 22px;
background: #f5f5f5;
text-align: center;
border-bottom: 1px solid #dbdbdb;
}
.selling-left ul li:first-child{
padding-top: 130px;
border-top-left-radius: 10px;
}
.selling-left ul li:last-child{
border-bottom: none;
border-bottom-left-radius: 10px;
}
.selling-left ul li .count-date{
color: #000;
font-size: 30px;
font-weight: 800;
display: block;
letter-spacing: 0.6px;
}
.selling-left ul li .count-day{
color: #555;
display: block;
font-size: 18px;
}
.selling-img img{
width: 100%;
height: 100%;
}
.selling-heading{
padding-bottom: 20px;
border-bottom: 1px solid #dbdbdb;
}
.selling-heading a{
color: #555;
font-size: 28px;
text-transform: capitalize;
font-weight: 600;
text-decoration: none;
transition: .3s all ease;
}
.selling-heading a:hover{
color: #ff4000;
}
.selling-rating{
margin-top: 4px;
}
.selling-rating i{
color: #ff4000;
margin-right: 4px;
font-size: 12px;
}
.selling-col-3 p{
color: #777;
line-height: 22px;
margin: 22px 0;
}
.selling-col-3 h3 .selling-amount{
font-weight: 700;
font-size: 30px;
color: #ff4000;
font-style: italic;
}
.selling-col-3 h3 .selling-discount{
color: #555;
font-size: 22px;
line-height: 18px;
font-weight: 600;
text-decoration: line-through;
margin-left: 10px;
font-style: italic;
}
.selling-button{
margin-top: 34px;
}
.cart-button{
background: #ff4000;
color: #fff;
text-decoration: none;
margin-right: 14px;
text-transform: uppercase;
padding: 12px 34px;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
text-align: center;
display: inline-block;
transition: .3s all ease;
}
.cart-button i{
margin-right: 4px;
}
.cart-button:hover{
background: #c30;
}
.main-btn{
border: none;
outline: none;
text-align: center;
background: #000;
padding: 11px 10px;
border-radius: 4px;
}
.main-btn a{
background: #000;
padding: 11px 10px;
}
.main-btn i{
color: #fff;
}
.main-btn a{
border-right: 1px solid rgb(73, 73, 73);
transition: .3s all ease;
}
.main-btn a:hover{
background: #ff4000;
}
.main-btn a:last-child{
border-right: none;
}
.main-btn .fa-heart, .main-btn .fa-search{
padding: 0 10px!important;
display: inline-block!important;
}
YouTube -