Code's
HTML
<!DOCTYPE html>
<html>
<head>
<title>Project-2</title>
<link rel="stylesheet" href="project-2.css" />
<link
rel="shortcut icon"
href="/Project-1/Images/baby.jpg"
type="image/x-icon"
/>
</head>
<body>
<!-- section 1 -->
<section class="main-section">
<div class="main-header">
<div class="brand">
<div class="brand-logo">e!</div>
</div>
<div class="btn-right">
<button class="btn">Login</button>
<button class="btn create-an-account">Create an account</button>
</div>
</div>
</section>
<!-- section 2 -->
<section class="section-2">
<div class="total-area">
<div class="main-heading">
Breakfast Places in Mumbai
</div>
<div class="section-area">
<div class="section-3">
</div>
<div class="section-4">
</div>
</div>
</div>
</section>
</body>
</html>
CSS
body{
margin: 0px;
}
/* section - 1 */
.main-section{
width: 100%;
height: 12vh;
/* border: 1px solid red; */
background-color: #CE0505;
display: flex;
justify-content: center;
}
.main-header{
/* border: 1px blue solid; */
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
}
.brand{
width: 42px;
height: 42px;
padding: 10px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 42px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border-radius:50px ;
}
.brand-logo{
color: red;
}
.btn-right{
/* border: 1px solid red; */
padding: 10px;
margin: 10px;
}
.btn{
border: transparent;
background: transparent;
color: white;
}
.create-an-account{
border: 1px solid white;
margin-left: 15px;
padding: 10px;
}
/* section - 2 */
.section-2{
/* border:5px solid green; */
display: flex;
justify-content: center;
}
.total-area{
width: 90%;
height: 80vh;
/* border: 3px solid black; */
margin-top: 10px;
/* display: flex;
justify-content: center; */
}
.main-heading{
font-size: 32px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #192F60;
}
.section-area{
border: 3px solid green;
width: 100%;
height: 93%;
display: flex;
justify-content:space-between;
}
.section-3{
border: 2px solid red;
width: 100px;
height: 100px;
}
.section-4{
border: 2px solid black;
width: 100px;
height: 100px;
}