Hello Coders, Hope you guys are doing good. In this article I will be teaching you how to build this responsive agency website using HTML, CSS and JavaScript. All the Images and Source code of this project can be downloaded by clicking on the download button at the bottom of this article.
If you haven’t read our previous article where we built an responsive start up website using html, css and javascript. Click here to read it. These tutorials will take your frontend skills to the next level.
Note : All the Images and source code of this project can be downloaded by clicking on the download button at the bottom of this article.
What we will be building in this Article?
- Responsive Header or Navigation Bar
- Custom Scrollbar
- Responsive Home Section
- Responsive About Section
- Responsive Services Section
- Responsive Projects Section
- Responsive Contact Section
- Responsive Footer Section
I will be teaching you how to build each of these sections step by step with source code. I will also be providing you a step by step video tutorial along with this article. If you want to see a demo of this website, Please refer the video blow where I have shown complete demo of this website.
Build a Responsive Agency Website Using HTML, CSS and JavaScript | Video Tutorial
In the above video I have shown how to build this website step by step explaining each and every line of code. If you are having trouble understanding this article and if you are a complete beginner, then this video is for you.
Responsive Agency Website Using HTML, CSS, JavaScript | Step by Step Guide with Source Code
Project Setup :
Before we start building this project, we need to make some necessary Imports which are required and are important for building this website.
Importing Custom Font : Head over to Google Fonts and Import The Font “Monstserrat”. The required font weights are 100, 200, 300, 400, 500, 600, 700, 900. Copy and paste the import code inside styles.css.
Importing Ionicons CDN : Go to ionic.io/ionicons, Head over to usage and copy those two script tags and paste them inside our index.html.
Importing Font Awesome CDN : Go to cdnjs.com. Search for font awesome. Copy paste the CDN link tag inside our index.html.
So, These were all the required Imports for this project. Refer the code below.
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 Website</title>
<!-- font awesome cdn -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- local css file -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- ionicons cdn -->
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<!-- local js file -->
<script src="script.js"></script>
</body>
</html>
Once we are done with all the imports. We will do a clean up process where we clear out the default margin and padding that is applied the browser and also do add some reusable styles such as section, btn, heading which are used repeatedly. We will also declare css variables and reduce the base font size of the whole html document.
styles.css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;900&display=swap');
* {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: 0.2s linear;
}
:root {
--black: #16161d;
--white: #fff;
--light-color: #808080;
--light-bg: #f5f5f8;
--google-color: #4285f4;
--twitter-color: #1da1f2;
--youtube-color: #ff0000;
--linkedin-color: #0e76a8;
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 6rem;
}
html::-webkit-scrollbar {
width: 1rem;
}
html::-webkit-scrollbar-track {
background: var(--white);
}
html::-webkit-scrollbar-thumb {
background: var(--black);
}
section {
padding: 5rem 9%;
}
.btn {
color: var(--white);
font-weight: 400;
font-size: 1.7rem;
border: 0.1rem solid var(--white);
border-radius: 10rem;
padding: 1.5rem 4rem;
}
.btn:hover {
background: var(--black);
color: var(--white);
}
.heading {
font-size: 3.5rem;
font-weight: 500;
margin-bottom: 5rem;
text-align: center;
}
Building Responsive Home Section :
This is where we will be adding our parallax effect. Home section will container a big heading followed by a paragraph and a button. Please note that all the images used in this project can be downloaded by clicking on the download button at the bottom of this article. Start following the below code.
index.html
<!-- home section starts --> <section class="home" id="home"> <h1>your story begins from here</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, voluptatibus.</p> <a href="#" class="btn">learn more</a> </section> <!-- home section ends -->
styles.css
/* home */
.home {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url('images/hero.jpg') no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
text-align: center;
}
.home h1 {
font-size: 6rem;
font-weight: 400;
margin-bottom: 3rem;
color: var(--white);
}
.home p {
font-size: 1.7rem;
font-weight: 400;
margin-bottom: 3rem;
text-transform: none;
color: var(--white);
}
/* home */
Building Responsive Header or Navigation Section :
For the header, Its will contain our logo, mobile menu Icon which is imported from the font awesome and below that we will have the navigation links. We will make the header always fixed at the top of the screen, and when we scroll the website we will turn the header background to white. To do this we need to add javascript as well. Follow the code below.
index.html
<!-- header section starts -->
<header class="header">
<a href="#" class="logo">agency<span>Website</span></a>
<a class="menu fas fa-bars"></a>
<nav class="navbar">
<a href="#">home</a>
<a href="#about">about</a>
<a href="#services">services</a>
<a href="#works">works</a>
<a href="#contact">contact</a>
</nav>
</header>
<!-- header section ends -->
Inside styles.css we will have a separate class called as active which will be activated when we scroll down.
styles.css
/* header */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 5rem 9%;
display: flex;
align-items: center;
z-index: 100;
}
.header.active {
background: var(--white);
padding: 3rem 9%;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.header.active .logo,
.header.active .navbar a,
.header.active .menu {
color: var(--black);
}
.header .logo {
margin-right: auto;
font-size: 2rem;
color: var(--white);
font-weight: 700;
}
.header .logo span {
font-weight: normal;
}
.header .navbar a {
font-size: 1.7rem;
color: var(--white);
margin-left: 3rem;
}
.header .menu {
font-size: 2rem;
color: var(--white);
display: none;
}
/* header */
Once we scroll down we will add that active class to the header using javascript. JavaScript will be used to determine if we have scrolled or not. Depending on that we will add or remove the active class.script.js
document.onscroll = () => {
if (window.scrollY > 0) {
document.querySelector('.header').classList.add('active');
} else {
document.querySelector('.header').classList.remove('active');
}
};
document.onload = () => {
if (window.scrollY > 0) {
document.querySelector('.header').classList.add('active');
} else {
document.querySelector('.header').classList.remove('active');
}
};
Building Responsive About Section :
About section will have two columns, One for the Image and another one for the Information. We will be suing css grid to create two column responsive layout.
index.html
<!-- about section starts -->
<section class="about" id="about">
<div class="box-container">
<div class="box">
<h1 class="heading">about us</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet corporis alias itaque sunt
aliquid reprehenderit, perferendis quia dolorum laudantium esse autem vel ea ullam quam
deleniti sed excepturi maiores illum!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet corporis alias itaque sunt
aliquid reprehenderit, perferendis quia dolorum laudantium esse autem vel ea ullam quam
deleniti sed excepturi maiores illum!
</p>
</div>
<div class="box">
<div class="image">
<img src="images/about.jpeg" alt="" />
</div>
</div>
</div>
</section>
<!-- about section ends -->
styles.css
/* about */
.about .box-container .box .image {
height: 40rem;
}
.about .box-container .box .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap: 2rem;
}
.about .box-container .box p {
font-size: 1.7rem;
line-height: 1.5;
margin-bottom: 1.5rem;
color: var(--light-color);
text-transform: none;
}
/* about */
Building Responsive Services Section :
In services section we will be using svg icons. We will use CSS grid to create three column responsive layout. A cool hover effect will be added. Follow the code below.
index.html
<!-- services section starts -->
<section class="services" id="services">
<h1 class="heading">our services</h1>
<div class="box-container">
<div class="box">
<img src="images/icon-1.svg" alt="" />
<h3>branding</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus repellat ipsam neque
voluptates ipsum officia repellendus quis perferendis sunt veritatis!
</p>
</div>
<div class="box">
<img src="images/icon-2.svg" alt="" />
<h3>design</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus repellat ipsam neque
voluptates ipsum officia repellendus quis perferendis sunt veritatis!
</p>
</div>
<div class="box">
<img src="images/icon-3.svg" alt="" />
<h3>development</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus repellat ipsam neque
voluptates ipsum officia repellendus quis perferendis sunt veritatis!
</p>
</div>
<div class="box">
<img src="images/icon-4.svg" alt="" />
<h3>photography</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus repellat ipsam neque
voluptates ipsum officia repellendus quis perferendis sunt veritatis!
</p>
</div>
<div class="box">
<img src="images/icon-5.svg" alt="" />
<h3>support</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus repellat ipsam neque
voluptates ipsum officia repellendus quis perferendis sunt veritatis!
</p>
</div>
<div class="box">
<img src="images/icon-6.svg" alt="" />
<h3>marketing</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus repellat ipsam neque
voluptates ipsum officia repellendus quis perferendis sunt veritatis!
</p>
</div>
</div>
</section>
<!-- services section ends -->
styles.css
/* services */
.services {
background: var(--light-bg);
}
.services .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 5rem;
}
.services .box-container .box {
background: var(--white);
text-align: center;
border-radius: 1rem;
padding: 3rem;
}
.services .box-container .box img {
margin-bottom: 2rem;
}
.services .box-container .box h3 {
margin-bottom: 2rem;
font-size: 2rem;
}
.services .box-container .box p {
font-size: 1.5rem;
line-height: 2;
color: var(--light-color);
}
.services .box-container .box:hover {
background: var(--black);
}
.services .box-container .box:hover h3,
.services .box-container .box:hover p {
color: var(--white);
}
.services .box-container .box:hover img {
filter: invert(100%);
}
/* services */
Building Responsive Projects Section :
For this article I will be calling it works section. CSS grid will be used to create responsive three column layout. And we will be adding an hover effect.
index.html
<!-- works section starts -->
<section class="works" id="works">
<h1 class="heading">our works</h1>
<div class="box-container">
<div class="box">
<div class="image">
<img src="images/portfolio-1.jpg" alt="" />
<div class="content">
<h3>project 01</h3>
</div>
</div>
</div>
<div class="box">
<div class="image">
<img src="images/portfolio-2.jpg" alt="" />
<div class="content">
<h3>project 02</h3>
</div>
</div>
</div>
<div class="box">
<div class="image">
<img src="images/portfolio-3.jpg" alt="" />
<div class="content">
<h3>project 03</h3>
</div>
</div>
</div>
<div class="box">
<div class="image">
<img src="images/portfolio-4.jpg" alt="" />
<div class="content">
<h3>project 04</h3>
</div>
</div>
</div>
<div class="box">
<div class="image">
<img src="images/portfolio-5.jpg" alt="" />
<div class="content">
<h3>project 05</h3>
</div>
</div>
</div>
<div class="box">
<div class="image">
<img src="images/portfolio-6.jpg" alt="" />
<div class="content">
<h3>project 06</h3>
</div>
</div>
</div>
</div>
</section>
<!-- works section ends -->
styles.css
/* works */
.works .box-container .box .image {
height: 30rem;
overflow: hidden;
position: relative;
}
.works .box-container .box .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.works .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 5rem;
}
.works .box-container .box .image .content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
background: var(--black);
color: var(--white);
font-size: 1.7rem;
padding: 2rem;
z-index: 90;
transform: translateY(100%);
}
.works .box-container .box:hover .image .content {
transform: translateY(0);
}
/* works */
Building Responsive Contact Section :
Till now we have used css crid to create our responsive layout. But for the contact section, I will be using flexbox only. Form will have one information container and an form.
index.html
<!-- contact section starts -->
<section class="contact" id="contact">
<h1 class="heading">contact us</h1>
<div class="box-container">
<div class="box">
<h3>address</h3>
<p>Sydney, Australia 100 Mainstreet Center</p>
<h3>email</h3>
<p>simpleemail@gmail.com</p>
<h3>phone</h3>
<p>+91 123456789</p>
<h3>fax</h3>
<p>(121) 219 2121</p>
</div>
<form>
<div class="inputBox">
<input type="text" placeholder="your name" />
<input type="text" placeholder="your number" />
</div>
<textarea name="" placeholder="your message" id="" cols="30" rows="10"></textarea>
<input type="submit" value="send message" class="btn" />
</form>
</div>
</section>
<!-- contact section ends -->
styles.css
/* contact */
.contact {
background: var(--light-bg);
}
.contact .box-container {
display: flex;
flex-wrap: wrap;
gap: 3rem;
}
.contact .box-container .box {
width: 30rem;
}
.contact .box-container .box h3 {
font-size: 1.7rem;
margin-bottom: 1rem;
}
.contact .box-container .box p {
font-size: 1.5rem;
color: var(--light-color);
margin-bottom: 2rem;
}
.contact .box-container form {
flex: 1 1 42rem;
}
.contact .box-container form .inputBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contact .box-container form .inputBox input {
width: 49%;
}
.contact .box-container form .inputBox input,
.contact .box-container form textarea {
border-radius: 5rem;
padding: 1.2rem 1.8rem;
font-size: 1.5rem;
color: var(--black);
margin: 0.7rem 0;
}
.contact .box-container form textarea {
width: 100%;
border-radius: 1rem;
resize: none;
height: 25rem;
}
.contact .box-container form .btn {
color: var(--black);
background: var(--white);
border: 0.1rem solid var(--black);
margin-top: 1rem;
}
.contact .box-container form .btn:hover {
background: var(--black);
color: var(--white);
}
/* contact */
Building Responsive Footer Section :
Finally Websites are incomplete without footer section. For this tutorial we will be creating a colorful footer which will contain social media icons with hover effects.
index.html
<!-- footer section starts -->
<section class="footer">
<a href="#" class="logo">agency<span>Website</span></a>
<p>
Lorem ipsum dolor sit amet consectetur <br />
adipisicing elit. Et maiores sint similique repellat! <br />
Voluptates tempore voluptatum error, dolor cum quae.
</p>
<div class="socials">
<ion-icon name="logo-google"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-youtube"></ion-icon>
<ion-icon name="logo-linkedin"></ion-icon>
</div>
</section>
<!-- footer section ends -->
styles.css
/* footer */
.footer {
text-align: center;
}
.footer .logo {
font-size: 2rem;
color: var(--black);
font-weight: 700;
}
.footer .logo span {
font-weight: normal;
}
.footer p {
margin-top: 2rem;
margin-bottom: 2rem;
font-size: 1.7rem;
color: gray;
}
.footer .socials ion-icon {
font-size: 2.5rem;
color: var(--black);
background: var(--light-bg);
border-radius: 50%;
padding: 1rem;
margin: 0.5rem;
cursor: pointer;
}
.footer .socials ion-icon:nth-child(1) {
color: var(--google-color);
}
.footer .socials ion-icon:nth-child(1):hover {
background: var(--google-color);
color: var(--white);
}
.footer .socials ion-icon:nth-child(2) {
color: var(--twitter-color);
}
.footer .socials ion-icon:nth-child(2):hover {
background: var(--twitter-color);
color: var(--white);
}
.footer .socials ion-icon:nth-child(3) {
color: var(--youtube-color);
}
.footer .socials ion-icon:nth-child(3):hover {
background: var(--youtube-color);
color: var(--white);
}
.footer .socials ion-icon:nth-child(4) {
color: var(--linkedin-color);
}
.footer .socials ion-icon:nth-child(4):hover {
background: var(--linkedin-color);
color: var(--white);
}
/* footer */
Making the Website Responsive :
Since we have used css grid to create responsive layout, By default our website will be responsive but still we need to fix some things. We will also be adding mobile navigation. I have provided both css code and javascript code below. Follow the code below to complete this responsive website.
styles.css
/* media queries */
@media (max-width: 1200px) {
.header {
padding: 2rem;
}
.header.active {
padding: 2rem;
}
section {
padding: 3rem 2rem;
}
.home h1 {
font-size: 5rem;
}
}
@media (max-width: 991px) {
html {
font-size: 60%;
}
}
@media (max-width: 768px) {
.header .menu {
display: block;
}
.header .navbar {
position: fixed;
top: 6.4rem;
left: 0;
right: 0;
background: var(--white);
display: flex;
flex-flow: column;
text-align: center;
transform: translateX(100%);
}
header .navbar.show {
transform: translateX(0);
}
.header .navbar a {
color: var(--black);
margin: 0;
font-size: 2rem;
margin: 2rem 0;
}
}
@media (max-width: 450px) {
html {
font-size: 55%;
}
}
script.js
const navbar = document.querySelector('.header .navbar');
const menuButton = document.querySelector('.header .menu');
menuButton.addEventListener('click', () => {
navbar.classList.toggle('show');
menuButton.classList.toggle('fa-close');
});
document.onscroll = () => {
navbar.classList.remove('show');
menuButton.classList.remove('fa-close');
if (window.scrollY > 0) {
document.querySelector('.header').classList.add('active');
} else {
document.querySelector('.header').classList.remove('active');
}
};
document.onload = () => {
if (window.scrollY > 0) {
document.querySelector('.header').classList.add('active');
} else {
document.querySelector('.header').classList.remove('active');
}
};
That’s it. Congratulations on completing this Responsive Website. Give yourself a pat on your back. Hope You learnt something new from this article. If you have any doubts, Please feel free to ask them in comments.
Download Source Code of Responsive Agency Website Built using HTML, CSS and JavaScript
