<!doctype html>
Fitness Yoga and Gym </div>
<div class="right-navbar">
<ul>
<li ><a href="#">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Equipment</a></li>
<li><a href="#">Suplements</a></li>
</ul></li>
<li><a href="#">Program</a>
<ul>
<li><a href="#">Fatlose</a></li>
<li><a href="#">Muscle gain</a></li>
</ul></li>
<li><a href="#">AboutUs</a></li>
<li><a href="#">ContactUs</a></li>
<li><a href="#">User</a></li>
<li><a href="#">Cart</a></li>
</ul>
<form class="search-bar">
<input type="text" name="" placeholder="search here">
<button>Search</button>
</form>
</div>
</div>
<div class="bigimg"> <a href=""><h1>For training click here</h1></a></div>
<div class="product">
<div id="product"><div class="Suplement1"></div>
<p> Raw Grass Fed Whey - happy Healthy Cows, COLD PROCESSED Undenatured 100% ...</p>
<h2>₹ 3,999</h2>
<button class="btn">Add to Cart</button><br>
<button class="btn"> Buy</button>
</div>
<div id="product"><div class="Suplement2"></div>
<p> Raw Grass Fed Whey - happy Healthy Cows, COLD PROCESSED Undenatured 100% ...</p>
<h2>₹ 3,999</h2>
<button class="btn">Add to Cart</button><br>
<button class="btn"> Buy</button>
</div>
<div id="product"><div class="Suplement3"></div>
<p> Raw Grass Fed Whey - happy Healthy Cows, COLD PROCESSED Undenatured 100% ...</p>
<h2>₹ 3,999</h2>
<button class="btn">Add to Cart</button><br>
<button class="btn"> Buy</button>
</div>
<div id="product"><div class="equipment1"></div>
<p> Raw Grass Fed Whey - happy Healthy Cows, COLD PROCESSED Undenatured 100% ...</p>
<h2>₹ 3,999</h2>
<button class="btn">Add to Cart</button><br>
<button class="btn"> Buy</button>
</div>
<div id="product"><div class="equipment2"></div>
<p> Raw Grass Fed Whey - happy Healthy Cows, COLD PROCESSED Undenatured 100% ...</p>
<h2>₹ 3,999</h2>
<button class="btn">Add to Cart</button><br>
<button class="btn"> Buy</button>
</div>
<div id="product"><div class="equipment3"></div>
<p> Raw Grass Fed Whey - happy Healthy Cows, COLD PROCESSED Undenatured 100% ...</p>
<h2>₹ 3,999</h2>
<button class="btn">Add to Cart</button><br>
<button class="btn"> Buy</button>
</div>
</div>
</div>
<div class="footer">
<div class="footer1">
<ul>
<li>AboutUs</li>
<li>Newsletters</li>
<li>Health News</li>
<li>Our Sponsors</li>
<li>Editorial Policy</li>
<li>FeedBack</li>
</ul>
<ul>
<li>Careers</li>
<li>Terms of Use</li>
<li>Privacy Policy</li>
<li>Accessibility</li>
<li>Statement</li>
<li>ContactUs</li>
</ul>
<ul>
<li>Yoga</li>
<li>HIIT Traning</li>
<li>Healthy diet</li>
<li>Gym Training</li>
<li>Cardio</li>
<li>Athletic Training</li>
</ul>
</div>
</div>
</div>
</body>
// css file
*{
margin: 0;
padding: 0;
}
body{
background-color:lightblue;
}
#main{
position: relative;
}
#navbar{
width: 100%;
background-color: #142b47;
overflow: auto;
}
#navbar .right-navbar ul{
margin:0;
padding:0;
list-style:none;
line-height: 60px;
}
.right-navbar li{
float:left;
}
.right-navbar ul li a{
background-color: #142b47;
text-decoration: none;
width: 130px;
display: block;
text-align: center;
color: #f2f2f2;
font-size:18px;
font-family: sans-serif;
letter-spacing: 0.5px;
}
.right-navbar ul li ul{
background-color: #669900;
}
.right-navbar ul li ul li{
float: none;
}
.right-navbar ul li ul {
display: none;
}
.right-navbar ul li:hover > ul {
position: relative;
background-color: rgba(0,0,0,0.8);
display:block;
z-index: 1;
}
}
.right-navbar li a:hover{
color: #fff;
opacity:0.5;
font-size:19px;
}
.search_bar{
margin-top:15px;
float:right;
margin-right: 100px;
}
.right-navbar input[type=“text”]{
position: relative;
top:10px;
left: 180px;
right: 0px;
padding: 7px;
border:none;
font-size:16px;
height: 20px;
border-radius: 5px 0 0 5px;
font-family:sans-serif;
}
.right-navbar button{
float:right;
background-color: orange;
border-radius: 0 5px 5px 0;
cursor: pointer;
position: relative;
right: 30px;
top:10px;
padding:7px;
font-family: sans-serif;
border:none;
font-size:17px;}
.bigimg{
width:100%;
height: 550px;
position: absolute;
top:50px;
background-image: url(‘Sahil.jpg’);
background-size:100% 100%;
animation: slider 30s infinite linear;
}
@keyframes slider{
0%{background-image: url(‘Sahil.jpg’);}
35%{background-image:url(Diet.jpg)}
50%{background-image:url(training2.jpg);}
75%{background-image:url(workout.jpg);}
90%{background-image:url(equipment.jpg);}
}
…bigimg{
position: absolute;
}
.bigimg h1{
position: absolute;
bottom: 0px;
top:480px;
text-align: center;
}
.product{
width: 95%;
margin:50px auto;
border:none;
color:white;
display:grid;
grid-template-rows: 460px 460px 460px 460px 460px;
/*grid-template-columns: 1fr 1fr 1fr; */
grid-template-columns:repeat(3,1fr);/FRICTIONAL UNIT/
/* grid-row-gap: 10px;
grid-column-gap: 10px;*/
grid-gap: 20px;
border-radius: 5px;;
}
.product{
position: absolute;
top:600px;
left:50px;
height:300px;
}
#product{
height:460px;
background-color: white;
}
.Suplement1{
width:300px;
height: 300px;
background-image: url(‘wheyorganic.jpg’);
background-size: 100% 100%;
transform: translateX(20%);
}
.Suplement2{
width:300px;
height: 300px;
background-image: url(‘fatburrning.jpg’);
background-size: 100% 100%;
transform: translateX(20%);
}
.Suplement3{
width:300px;
height: 300px;
background-image: url('shopping.png');
background-size: 100% 100%;
transform: translateX(20%);
}
.equipment1{
width:300px;
height: 300px;
background-image: url('dumbell.jpg');
background-size: 100% 100%;
transform: translateX(20%);
}
.equipment2{
width:300px;
height: 300px;
background-image: url('plates.jpg');
background-size: 100% 100%;
transform: translateX(20%);
}
.equipment3{
width:300px;
height: 300px;
background-image: url('equipment.jpg');
background-size: 100% 100%;
transform: translateX(20%);
}
.main-form{
position : relative;
width:60%;
}
.login{
width:30%;
float: left;
margin:10px;
padding:10px;
}
.login input{
position: relative;
top:20px;
margin:5px;
padding:5px ;
}
.signup{
position: relative;
top:20px;
width:30%;
height: 300px;
float: right;
}
.signup input{
position: relative;
top:20px;
margin:5px;
padding:5px ;
}
.signup input[type=“submit”]{
width: 185px;
height:30px;
background-color: orange;
color:black;
font-family: sans-serif;
font-size: 17px;
border:none;
}
.login input[type=“submit”]{
width: 185px;
height:30px;
background-color: orange;
color:black;
font-family: sans-serif;
font-size: 17px;
border:none;
}
.btn{
position: relative;
bottom:0;
width: 410px;
height: 40px;
font-family: sans-serif;
font-size: 17px;
background-color: orangered;
color: black;
}
p{
color:black;
margin:5px;
font-family: sans-serif;
}
h2{
text-align: center;
color:black;
margin:5px;
font-family: sans-serif;
}
.footer{
/position: relative;/
left: 0;
bottom: 0;
width: 100%;
display: flex;
justify-content:space-between;
}
.footer1 ul li {
font-style: none;
text-decoration: none;
}