Furniture Store web page using HTML & CSS
Sorce Code :-
......................
HTML :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="fs.css">
<title>Document</title>
</head>
<body>
<div class="container">
<nav>
<h2>LOGO</h2>
<ul>
<li>Home</li>
<li>Services</li>
<li>Product</li>
<li>Store</li>
<li>Search</li>
</ul>
</nav>
<section class="showD">
<div class="left">
<h1>Exotic minimal furniture</h1>
<p>
Choose from a wide range of well-crafted premium quality wooden furniture online
</p>
<button>Explore</button>
</div>
<div class="right">
<img src="meanimg.png" alt="" class="meanimg">
</div>
</section>
<section class="showM">
<div>
<img src="1.png" alt="">
<div class="info">
<h4>Bruna Cush</h4>
<b>$145.60</b>
</div>
</div>
<div>
<img src="2.png" alt="">
<div class="info">
<h4>Drop Type</h4>
<b>$265.50</b>
</div>
</div>
<div>
<img src="3.png" alt="">
<div class="info">
<h4>Backboard</h4>
<b>$160.00</b>
</div>
</div>
</section>
</div>
</body>
</html>
CSS:-
*{
margin: 0;
padding: 0;
}
h1{
font-size: 40px;
}
.container{
width: 100%;
height: 41rem;
background-color: aliceblue;
}
h2{
cursor: pointer;
}
nav{
width: 100%;
height: 5rem;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
font-size: 16px;
font-family: monospace;
}
nav>ul{
width: 30%;
display: flex;
justify-content: space-around;
list-style: none;
}
nav>ul>li{
margin-top: 20px;
cursor: pointer;
display: inline;
border-bottom: 2px solid black;
padding-bottom: 3px;
transition: 0.5s;
}
nav>ul>li:hover{
color: darkslategray;
font-size: 16px;
border-bottom: 1px solid darkslategray;
}
.showD{
width: 100%;
height: 20.5rem;
}
.left{
float: left;
width: 27%;
height: 85%;
margin-left: 16%;
margin-top: 2%;
}
button{
width: 115px;
height: 35px;
background-color: #1b2c2c;
color: white;
font-size: 19px;
border: none;
border-radius: 5px;
margin: 60px 0px 0px 0px;
box-shadow: 15px 15px 35px 10px #88888898;
cursor: pointer;
transition: 0.5s;
}
button:hover{
width: 120px;
height: 38px;
background-color: #172020;
font-size: 20px;
border-radius: 10px;
box-shadow: 15px 15px 35px 10px #888888;
}
.right{
float: right;
width: 50%;
height: 100%;
background-color: rgba(252,252,252,0.65);
border-radius: 350px 0px 0px 0px;
}
.meanimg{
width: 50%;
height: 100%;
margin: 0% 25%;
}
.showM{
width: 100%;
height: 15.5rem;
background-color: darkslategray;
display: flex;
justify-content: space-around;
align-items: center;
}
.showM>div{
cursor: pointer;
position: relative;
width: 15%;
height: 50%;
border-radius: 15px;
background-color: aliceblue;
}
.showM>div>img{
position: absolute;
width: 65%;
height: 100%;
margin: -27% 17%;
transition: 0.5s;
}
.showM>div:hover img{
position: absolute;
width: 80%;
height: 100%;
margin: -27% 10%;
}
.showM>div>.info{
text-align: center;
position: absolute;
right: 10px;
left: 10px;
bottom: 0%;
height: 55px;
}
Comments
Post a Comment