<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="main">
<div class="nav">
<h2>LOGO</h2>
<div class="nav-part2">
<h4>store</h4>
<h4>courses</h4>
<h4>blog</h4>
<h4>account</h4>
<button>Sign in</button>
<i class="ri-menu-line"></i>
</div>
</div>
<div class="content">
<div class="left">
<h1>Learn From the <span>coolest</span> plateform in India.</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque sapiente cupiditate doloremque dolore!</p>
<button>Explore Now</button>
</div>
<div class="right"><img src="./vecteezy_3d-character-person-doing-online-store-digital-marketing_11665514_72.png" alt=""></div>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height:100%;
width: 100%;
}
.main{
height: 100%;
width: 100%;
position: relative;
}
.nav{
height:100px ;
width: 100%;
border-bottom: 2px solid #dadada;
display: flex;
align-items: center;
justify-content: space-between;
padding:0 5vw ;
}
.nav-part2{
display: flex;
gap: 4vw;
align-items: center;
}
.nav h2{
font-size: 2vw;
font-weight:700 ;
}
.nav h4{
font-size: 2vw;
}
.nav i {
font-size: 1.2vw;
font-weight: 800;
display: none;
}
.content{
height: 90%;
width: 100%;
display: flex;
}
.left{
height: 100%;
width:55% ;
padding: 5vw 5vw;
}
.left h1{
font-size: 4.2vw;
line-height: 4.4vw;
}
.left h1 span{
color:#DA3A66;
}
.left p{
font-size: 1.2vw;
font-weight: 600;
color: #666;
width:80% ;
margin-top: 2vw;
margin-bottom: 4vw;
}
button{
font-size: 1.5vw;
padding: 1vw 2vw;
background-color:#DA3A66;
color: #fff;
border: none;
border-radius: 5px;
font-weight: 700;
cursor: pointer;
}
.right{
height: 100%;
width:45% ;
}
.right img{
width: 100%;
}
.content button{
button{
font-size: 1.5vw;
padding: 1vw 2vw;
background-color:#DA3A66;
color: #fff;
border: none;
border-radius: 5px;
font-weight: 700;
cursor: pointer;
}
}
@media(max-width:600px){
.nav{
background-color: #DA3A66;
color: #fff;
padding: 0 5vw;
}
.nav h2{
font-size: 5vw;
}
.nav h4{
font-size: 4vw;
display: none;
}
.nav button{
display: none;
}
.nav i{
display: block;
font-size: 30px;
cursor: pointer;
}
.content{
flex-direction: column;
align-items: center;
}
.right{
width: 80%;
}
.left{
width: 100%;
font-size: 50px;
}
.left h1{
font-size: 30px;
}
.left p{
font-size: 20px;
}
.left button{
align-items: center;
margin-left: 20%;
width: 50%;
font-size: 20px;
}
}
