Hey, developers welcome to Day 28 of our 90Days 90Projects challenge. And in Day 28 we are going to create a Responsive Agency Landing Page Design using HTML and CSS
So to run the code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
Image Resource - Download Now
HTML Code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Agency Landing Page </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<h2> Navbar Goes Here </h2>
</nav>
<section id="home">
<div class="leftHome">
<h3> Digital media agency </h3>
<h2> We Boost Your Website Traffic </h2>
<p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quasi assumenda alias neque
facilis. Eos voluptas perspiciatis unde repellendus, soluta cumque eveniet sunt quod voluptate eius
debitis quae incidunt placeat dolore rem sit? Recusandae!</p>
<button class="btn"> free quote </button>
</div>
<img class="rightHome" src="image.png" alt="">
</section>
</body>
</html>
CSS Code
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Ubuntu:wght@300;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #fff;
font-family: 'Ubuntu', sans-serif;
}
.navbar {
line-height: 5rem;
text-align: center;
background-color: rgb(22, 7, 36);
}
.left h1 {
font-size: 2.5rem;
cursor: pointer;
}
#home {
width: 80%;
margin: 1rem auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.leftHome {
width: 500px;
}
.leftHome h3 {
color: #de2639;
font-size: 1.5rem;
margin-bottom: 0.7rem;
text-transform: uppercase;
}
.leftHome h2 {
color: rgb(26, 25, 25);
font-size: 2.5rem;
margin-bottom: 1rem;
}
.desc {
margin-bottom: 1rem;
color: rgb(106, 102, 102);
}
.rightHome {
width: 50%;
margin: 1rem;
position: relative;
}
.btn {
cursor: pointer;
color: #de2639;
font-weight: bold;
border-radius: 3rem;
padding: .7rem 1.5rem;
text-transform: uppercase;
border: 1.5px solid #de2639;
background-color: transparent;
}
@media screen and (max-width:810px) {
#home {
flex-direction: column-reverse;
}
.rightHome {
width: 90%;
}
.leftHome {
margin: 0;
width: 100%;
}
.leftHome h3 {
font-size: 1rem;
}
.leftHome h2 {
font-size: 2rem;
}
.btn {
display: block;
margin: 0 auto;
text-align: center;
}
}
