If you are starting the web development journey, then this could be your turning point because in this article you will learn how to create an agency website using HTML, CSS and JavaScript.
In this article we will learn so this think so read all this tell the end.
For build an agency website create a folder
First create a index.html for html structure and create a style.css which is style you website and javascript create in html with script tags.
and paste below code in each file like html code paste in index.html and css code paste in style.css file and link style file with html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creating An Agency Website | The Web Decode</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.css"/>
<link href="https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<a href="" class="logo">A<span>gency</span></a>
<ul id="menu">
<li><a href="" class="navLink">Home</a></li>
<li><a href="" class="navLink">Project</a></li>
<li><a href="" class="navLink">Testimonials</a></li>
<li><a href="" class="navLink">Service</a></li>
<li><a href="" class="navLink">About</a></li>
</ul>
<i class="ri-menu-line" id="menubar"></i>
<button class="cta">Contact Us</button>
</nav>
</header>
<section class="hero-section">
<div class="inner">
<div class="contentContainer">
<h1 class="title">We Help to <br>Grow your Business in<br> <span>Google</span></h1>
<p>We solve issue of the website and Boost Traffic of your website</p>
<button>Conntect For Growth</button>
</div>
<div class="imageContainer">
<div>
<div class="profile">
<img src="images/2.jpg" alt="">
</div>
<div class="profile">
<img src="images/3.jpg" alt="">
</div>
</div>
<div class="profile">
<img src="images/1.jpg" alt="">
</div>
</div>
</div>
</section>
<script>
var menuBar = document.getElementById("menubar");
var navLink = document.getElementById("menu");
menuBar.onclick = function() {
this.classList.toggle("turn");
navLink.classList.toggle("show");
}
</script>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Cal Sans", sans-serif;
text-decoration: none;
}
body{
background-color: white;
overflow-x: hidden;
}
header{
width: 100%;
min-height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
nav{
width: 1200px;
display: flex;
justify-content: space-between;
padding: 0 15px;
align-items: center;
}
nav .logo{
font-size: 30px;
color: rgb(3, 223, 131);
position: relative;
}
.logo span{
color: black;
}
#menu{
display: flex;
list-style: none;
}
#menu li a{
font-size: 16px;
color: black;
padding: 10px 20px;
transition: 0.3s;
}
#menu li a:hover{
background: rgb(3, 223, 131);
border-radius: 5px;
}
nav .cta{
padding: 10px 20px;
border: none;
border-radius: 5px;
background: rgb(8, 201, 120);
transition: 0.5s ease;
cursor: pointer;
}
nav .cta:hover{
background: rgb(3, 223, 131);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
nav i{
font-size: 25px;
display: none;
cursor: pointer;
transition: 0.3s;
}
.hero-section{
width: 100%;
min-height: calc(100vh - 70px);
display: flex;
justify-content: center;
}
.hero-section .inner{
width: 1200px;
min-height: 500px;
display: flex;
padding: 0 20px;
/* overflow: hidden; */
}
.inner .contentContainer{
width: 100%;
min-height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
animation: sideLeft 3s 1;
}
.contentContainer h1{
font-size: 55px;
}
.contentContainer h1 span{
background-color: rgb(8, 201, 120);
padding: 0 25px;
color: white;
border-radius: 50px 50px 50px 10px;
}
.contentContainer p{
width: 50%;
font-weight: 200;
}
.contentContainer button{
width: 200px;
height: 40px;
border: none;
background: rgb(3, 223, 131);
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.contentContainer button:hover{
background: rgb(3, 223, 131);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.inner .imageContainer{
width: 100%;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
animation: sideRight 3s 1;
}
.imageContainer > div{
display: flex;
flex-direction: column;
gap: 20px;
}
.imageContainer > div .profile:nth-child(1){
overflow: hidden;
border-radius: 100px 100px 30px 100px;
position: relative;
}
.imageContainer > div .profile:nth-child(2){
overflow: hidden;
border-radius: 100px 30px 100px 100px;
}
.imageContainer .profile{
width:200px;
height: 280px;
overflow: hidden;
border-radius: 100px 100px 100px 30px;
}
.profile img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* ============ Animation ============== */
@keyframes sideLeft{
0%{transform: translateX(-100%);}
100%{transform: translateX(0);}
}
@keyframes sideRight{
0%{transform: translateX(100%);}
100%{transform: translateX(0);}
}
@media screen and (max-width:768px){
nav #menu{
display: none;
}
nav #menu{
display: none;
flex-direction: column;
align-items: center;
gap: 30px;
justify-content: center;
position: absolute;
top: 70px;
left: 0;
width: 100%;
min-height: 400px;
background-color: rgb(255, 255, 255);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
z-index: 10000;
overflow: hidden;
}
#menu.show{
display: flex;
}
#menubar.turn{
transform: rotate(25deg);
}
nav i{
display: block;
}
nav .cta{
display: none;
}
.hero-section .inner{
flex-direction: column;
}
.inner .contentContainer{
justify-content: center;
align-items: center;
min-height: 300px;
}
.contentContainer h1{
text-align: center;
}
.contentContainer p{
text-align: center;
}
.imageContainer {
flex-direction: column;
padding: 20px 0;
}
}
@media screen and (max-width:500px){
.contentContainer h1{
font-size: 25px;
}
.contentContainer p{
width: 100%;
}
}