Professional Documents
Culture Documents
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smoothie Bar</title>
</head>
<body>
<div class="container">
<div class="navbar">
<nav>
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Cart">Cart</a></li>
<li><a href="About">About</a></li>
<li><a href="Contact">Contact</a></li>
</ul>
</nav>
</div>
<div class="row">
<div class="col1">
<p>(Protein 1.5g)</p>
<h4>₹90 </h4>
</div>
<div class="col2">
<div class="color-box"></div>
</div>
</div>
<div class="classrow">
<div class="col3">
<p>(Protein 19.6g)</p>
<h4>₹ 90 </h4>
</div>
<div class="col4">
<div class="color-box2"></div>
</div>
</div>
<div class="social">
</div>
</body>
</html>
CSS
.container
padding-left: 10%;
padding-right: 10%;
box-sizing: border-box;
overflow: hidden;
.navbar
width: 100%;
display: flex;
align-items: center;
.logo
width: 150px;
cursor: pointer;
margin: 30px;
nav
flex: 1;
text-align: right;
nav ul li
list-style: none;
display: inline-block;
margin-right: 30px;
nav ul li a
text-decoration: none;
color: #000;
font-size: 20px;
nav ul li a:hover
.row
display: flex;
justify-content: space-between;
align-items: center;
margin: 80px;
.col1
flex-basis: 100%;
position: relative;
margin-left: 30px;
.col1 h2
font-size: 25px;
.col1 p
font-size: 15px;
font-weight: 200;
.col1 h4
margin: 20px 0;
font-size: 20px;
.button
{
width: 150px;
border: none;
border-radius: 10px;
outline:none;
color:#fff;
cursor: pointer;
overflow: hidden;
transition-duration: 1s;
font-size: 20px;
.button
color: white;
.button:hover
background:linear-gradient(to left,#fca957,#ff0000);
.col1::after
content:'';
width:10px;
height:50%;
position: absolute;
left: -40px;
top: 8px;
.col2
position: relative;
flex-basis: 100%;
display: flex;
align-items: center;
.col2 .apreecot
height: 350px;
width:450px;
border-radius: 50%;
.color-box
position: absolute;
background:linear-gradient(to left,#fca957,#ff0000);
height: 100%;
width: 100%;
z-index: -1;
transform: translateX(250px);
}
/* second product */
.classrow
display: flex;
justify-content: space-between;
align-items: center;
margin: 80px;
.col3
flex-basis: 100%;
position: relative;
margin-left: 30px;
.col3 h2
font-size: 25px;
.col3 p
font-size: 15px;
font-weight: 200;
.col3 h4
{
margin: 20px 0;
font-size: 20px;
.button
width: 150px;
border: none;
border-radius: 10px;
outline:none;
color:#fff;
cursor: pointer;
overflow: hidden;
transition-duration: 1s;
font-size: 20px;
.button
color: white;
.button:hover
background:linear-gradient(to left,#fca957,#ff0000);
.col3::after
{
content:'';
width:10px;
height:50%;
position: absolute;
left: -40px;
top: 8px;
.col4
position: relative;
flex-basis: 100%;
display: flex;
align-items: center;
.col4 .choco
height: 400px;
width: 450px;
border-radius: 50%;
.color-box2
position: absolute;
background:linear-gradient(to left,#990000,#0e0d0d);
width: 100%;
z-index: -1;
transform: translateX(250px);
.social img
height: 25px;
margin:20px;
cursor: pointer;
.social
text-align: center;