Product Design Blog HTML CSS
Html Code
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=2, minimum-scale=1">
<title></title>
<link rel="stylesheet" id="google-font-css-css" href="https://fonts.googleapis.com/css?family=Poppins%3A400%2C500%2C600" type="text/css" media="all">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" media="all">
</head>
<body>
<section class="product-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="titaleProduct"> Product List </h3>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="product-Box">
<div class="product-img">
<img src="./images/beach-1854076_960_720.jpg" alt="">
</div>
<div class="product-content">
<h3>Beach Decoration </h3>
<p> Accessories </p>
<div class="priceTag">
₹.300
</div>
<div class="contenbox">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, debitis. Sed laudantium cumque cum qui dignissimos facilis consequatur, sequi excepturi nam, quam fuga. Ea voluptate, suscipit magni laborum tenetur voluptates!
</p>
<ul class="bottom-Link">
<li>
<a href="#" class="fa fa-shopping-cart"> </a>
</li>
<li> <a href="#" class="ReadMore">ReadMore </a> </li>
<li>
<a href="#" class="fa fa-search"> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="product-Box">
<div class="product-img">
<img src="./images/bouquet-of-flowers-1149099_960_720.jpg" alt="">
</div>
<div class="product-content">
<h3>Beach Decoration </h3>
<p> Accessories </p>
<div class="priceTag">
₹.300
</div>
<div class="contenbox">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, debitis. Sed laudantium cumque cum qui dignissimos facilis consequatur, sequi excepturi nam, quam fuga. Ea voluptate, suscipit magni laborum tenetur voluptates!
</p>
<ul class="bottom-Link">
<li>
<a href="#" class="fa fa-shopping-cart"> </a>
</li>
<li> <a href="#" class="ReadMore">ReadMore </a> </li>
<li>
<a href="#" class="fa fa-search"> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="product-Box">
<div class="product-img">
<img src="./images/cappuccino-756490_960_720.webp" alt="">
</div>
<div class="product-content">
<h3>Beach Decoration </h3>
<p> Accessories </p>
<div class="priceTag">
₹.300
</div>
<div class="contenbox">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, debitis. Sed laudantium cumque cum qui dignissimos facilis consequatur, sequi excepturi nam, quam fuga. Ea voluptate, suscipit magni laborum tenetur voluptates!
</p>
<ul class="bottom-Link">
<li>
<a href="#" class="fa fa-shopping-cart"> </a>
</li>
<li> <a href="#" class="ReadMore">ReadMore </a> </li>
<li>
<a href="#" class="fa fa-search"> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="product-Box">
<div class="product-img">
<img src="./images/chairs-2181960_960_720.webp" alt="">
</div>
<div class="product-content">
<h3>Beach Decoration </h3>
<p> Accessories </p>
<div class="priceTag">
₹.300
</div>
<div class="contenbox">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, debitis. Sed laudantium cumque cum qui dignissimos facilis consequatur, sequi excepturi nam, quam fuga. Ea voluptate, suscipit magni laborum tenetur voluptates!
</p>
<ul class="bottom-Link">
<li>
<a href="#" class="fa fa-shopping-cart"> </a>
</li>
<li> <a href="#" class="ReadMore">ReadMore </a> </li>
<li>
<a href="#" class="fa fa-search"> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="product-Box">
<div class="product-img">
<img src="./images/chairs-2181980_960_720.webp" alt="">
</div>
<div class="product-content">
<h3>Beach Decoration </h3>
<p> Accessories </p>
<div class="priceTag">
₹.300
</div>
<div class="contenbox">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, debitis. Sed laudantium cumque cum qui dignissimos facilis consequatur, sequi excepturi nam, quam fuga. Ea voluptate, suscipit magni laborum tenetur voluptates!
</p>
<ul class="bottom-Link">
<li>
<a href="#" class="fa fa-shopping-cart"> </a>
</li>
<li> <a href="#" class="ReadMore">ReadMore </a> </li>
<li>
<a href="#" class="fa fa-search"> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="product-Box">
<div class="product-img">
<img src="./images/chairs-2181980_960_720.webp" alt="">
</div>
<div class="product-content">
<h3>Beach Decoration </h3>
<p> Accessories </p>
<div class="priceTag">
₹.300
</div>
<div class="contenbox">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, debitis. Sed laudantium cumque cum qui dignissimos facilis consequatur, sequi excepturi nam, quam fuga. Ea voluptate, suscipit magni laborum tenetur voluptates!
</p>
<ul class="bottom-Link">
<li>
<a href="#" class="fa fa-shopping-cart"> </a>
</li>
<li> <a href="#" class="ReadMore">ReadMore </a> </li>
<li>
<a href="#" class="fa fa-search"> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Css code
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
body {
font-family: 'Open Sans', sans-serif;
color: #292929;
background-color: #fff
}
.product-Box {
overflow: hidden;
position: relative;
padding: 15px;
background-color: #fff;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);
}
.product-img>img {
max-width: 100%;
height: auto;
transform-origin: 65% 75%;
transition: transform 1s, filter 0.5s ease-in-out;
}
.product-img {
width: 100%;
height: 200px;
overflow: hidden;
transition: ease-in 0.5 all;
position: relative;
}
.product-img>img:hover {
transform: scale(1.3);
}
.product-img:hover::before {
content: "";
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
left: 0px;
right: 0;
top: 0px;
bottom: 0;
width: 100%;
height: 100%;
}
.product-content {
text-align: center;
padding: 15px;
}
.product-content h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 4px;
}
.product-content p {
text-align: center;
font-size: 14px;
margin-bottom: 4px;
}
.product-content .priceTag {
font-size: 25px;
font-weight: 600;
color: #f75f05;
}
.product-section {
padding: 100px 0px;
}
.titaleProduct {
position: relative;
text-align: center;
margin-bottom: 30px;
text-transform: uppercase;
font-size: 30px;
padding-bottom: 20px;
font-weight: 600;
}
.titaleProduct::before {
content: "";
width: 50px;
height: 4px;
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
background-color: tomato;
}
.bottom-Link {
margin: 20px 0 0 0;
padding: 10px 0;
list-style: none;
display: flex;
justify-content: center;
border-top: 1px solid #f4f4f4;
border-bottom: 1px solid #f4f4f4;
}
.bottom-Link>li {
flex: 1;
}
.bottom-Link>li>a {
color: tomato;
}
.bottom-Link>li>a:hover {
text-decoration: none;
}
.bottom-Link>li>a.ReadMore {
background-color: tomato;
color: #fff;
padding: 10px 30px;
color: #fff;
}
.bottom-Link>li:first-child {
text-align: left;
}
.bottom-Link>li:last-child {
text-align: right;
}
.contenbox {
visibility: hidden;
opacity: 0;
position: absolute;
transition: ease-in 0.2s all;
}
.product-Box:hover .contenbox {
visibility: visible;
opacity: 1;
position: relative;
}
.product-Box:hover {
position: absolute;
top: -20px;
left: 15px;
right: 15px;
z-index: 99;
}
.product-Box {
margin-bottom: 30px;
}
No comments:
Post a Comment