Responsive using css
Hello, everyone! My name is Aditya Gupta, and I'm thrilled to welcome you to my programming language blog and project. As a passionate web developer, I've dedicated myself to exploring the vast world of programming languages and sharing my knowledge with fellow enthusiasts like you. Through my blog, I aim to provide informative and engaging content that will help you navigate the intricacies of various programming languages, including Python, JavaScript, Java, and more. Additionally, I'm actively working on an exciting project that combines my expertise in web development and programming languages. Join me on this thrilling journey as we delve into the fascinating realm of code and unleash our creativity together. Let's write beautiful and functional programs that empower us to shape the digital landscape.
<!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;
}
}
