Hello fellow developers !!!
Craft a standout Digital Media Agency using HTML and CSS.
Copy, paste, and watch your vision materialize into a captivating online presence. Customize effortlessly, create an immersive experience, and ensure your agency thrives in the digital landscape.
Feel free to adjust the text further to suit your preferences!!!
Preview
Click here to download images :- Download
HTML Code Structure :-
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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar">
<div class="left">
<h1>BlazeBlend </h1>
</div>
<div class="right">
<input type="checkbox" id="check">
<label for="check" class="checkBtn">
<i class="fa fa-bars"></i>
</label>
<ul class="list">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
<section id="home">
<div class="leftHome">
<h3> Digital media agency </h3>
<h2> We Boost Your Website Traffic </h2>
<p class="desc">Unleash Your Potential: Ignite Brilliance with us.<br>
<span style="color: rgb(82, 82, 222);">Elevate, Captivate, Dominate – Where Ideas Take Flight!</span></p>
<button class="btn"> free quote </button>
</div>
<img class="rightHome" src="image.png" alt="">
</section>
</body>
</html>
CSS Code Structure :-
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 {
background-color: rgb(22, 7, 36);
display: flex;
justify-content: space-around;
align-items: center;
line-height: 5rem;
}
#check {
display: none;
}
.checkBtn {
display: none;
cursor: pointer;
font-size: 30px;
float: right;
color: #ed1e79;
line-height: 80px;
}
.right ul {
display: flex;
list-style: none;
}
.right ul li a {
padding: 10px 20px;
font-size: 1.2rem;
color: white;
cursor: pointer;
text-decoration: none;
transition: all 1s;
}
.right ul li a:hover {
background-color: #fff;
border-radius: 7px;
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 {
line-height: 1.3;
font-size: 1rem;
font-weight: bold;
margin-bottom: 1rem;
color: rgb(106, 102, 102);
}
.rightHome {
width: 50%;
margin: 1rem;
position: static;
}
.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) {
.left h1 {
font-size: 1.5rem;
}
.list {
width: 100%;
height: 100vh;
background-color: rgb(22, 7, 36);
text-align: center;
display: flex;
flex-direction: column;
position: fixed;
top: 4rem;
left: 100%;
transition: all 1s;
}
#check {
display: none;
}
.checkBtn {
display: block;
}
#check:checked~ul {
left: 0%;
}
#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;
}
}
Follow Us