Creative Agency Website Using HTML CSS JS 2024 With Free Source Code
Introduction
Hello coders, i hope you all are doing unique and creative. As you know our today’s project is about a creative agency website. This website is about a software company which provides different type of services like web design, app design , SEO etc.
This website contains four sections that are home, services, projects and contact section. All these section of the project are made using HTML CSS and JS . Home section contains navbar, some heading, text , a button and a image. The services, projects and contact section also contains some data to show. The basic structure is made using HTML and then applied CSS to style our website. At last, added small JavaScript for menu section of the website. Media queries are used to make our website responsive.
Overall the website looks pretty good and all of its components are made using HTML CSS and JS.
index.html
This code is our HTML code which creates the basic structure of our website. Using this code we’ve build basic structure of our website. We’ve first created our header section which contains our navbar and social links. Navbar is created inside the a div tag and social bar is also created inside a div tag. Div tag contains the ul in which the list of navbar is created. Images are also added to give the best look to navbar.
After creating the navbar we build our home section. Our home section contains a image on the right side of the screen. We created a home-content section which contains a heading , paragraph and a button which makes home page of our website.
Next, we added a service section to our website which shows all the provided services by agency. We created a major div in which all the small service div are added. Every div with class service contains some icon, heading and some text. To create all of this, we’ve used heading, paragraph and div tags. Every section contains all of these attributes.
Work section is build to show the best work of the company. We’ve used a heading at the top and some text below the heading for a quick info about our work. After that we’ve created a major div which contains all the child div which showcase the work of agency and a <a> tag is added for the link of the project. An image is also added .
Contact us section is created for the interaction between company and customer. A form tag is used to create our contact form. All the necessary input tags are used to create the basic structure of contact form. A send button is added to send the information to the agency. At last contact info section is created that shows contact info of company or agency. This section contains address, email and a contact number. And this is how our basic structure of our website is created.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Agency</title><link rel="preload" as="image" imagesrcset="https://developergoutam.com/wp-content/uploads/2024/08/post12-768x362.png 768w, https://developergoutam.com/wp-content/uploads/2024/08/post12-300x141.png 300w, https://developergoutam.com/wp-content/uploads/2024/08/post12-1024x483.png 1024w, https://developergoutam.com/wp-content/uploads/2024/08/post12-1536x724.png 1536w, https://developergoutam.com/wp-content/uploads/2024/08/post12-150x71.png 150w, https://developergoutam.com/wp-content/uploads/2024/08/post12-450x212.png 450w, https://developergoutam.com/wp-content/uploads/2024/08/post12-1200x565.png 1200w, https://developergoutam.com/wp-content/uploads/2024/08/post12.png 1878w" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergoutam.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.0" type="font/woff2" crossorigin="anonymous" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo"><h1>Creative Agency</h1></div>
<div class="toggle"></div>
<div class="navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="social-bar">
<ul>
<li>
<a href="https://facebook.com" target="_blank" rel="noopener">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/facebook.png?raw=true"
target="_blank"
alt=""
/>
</a>
</li>
<li>
<a href="https://twitter.com" target="_blank" rel="noopener">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/twitter.png?raw=true"
target="_blank"
alt=""
/>
</a>
</li>
<li>
<a href="https://instagram.com" target="_blank" rel="noopener">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/instagram.png?raw=true"
target="_blank"
alt=""
/>
</a>
</li>
</ul>
<a href="mailto:you@email.com" class="email-icon">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/email.png?raw=true"
alt=""
/>
</a>
</div>
</div>
</header>
<!-- home -->
<section class="home" id="home">
<img decoding="async"
src="https://images.unsplash.com/photo-1507206130118-b5907f817163?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=768&q=80"
class="home-img"
alt=""
/>
<div class="home-content">
<h2>
We help <span class="highlight">you</span> to achieve <br />
<span class="highlight">your goals</span>
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo itaque
nam saepe vero voluptatem vel fuga a eaque earum alias ipsam
aspernatur culpa maxime laboriosam, impedit quae officiis consectetur
</p>
<a href="#services" class="btn">Get Started</a>
</div>
</section>
<!-- services -->
<section id="services">
<div class="title">
<h2>Services that we can help you with</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus
iusto molestias accusamus rem nobis est, et laborum harum doloremque
nemo non, minima quos totam labore maxime iste alias ut esse? Repellat
eaque reiciendis laboriosam corporis fuga vero ratione veritatis
numquam, libero magni voluptatum omnis molestiae officiis
exercitationem qui quidem nam.
</p>
</div>
<div class="services">
<div class="service">
<div class="icon">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/001.png?raw=true"
alt=""
/>
</div>
<h3>Design</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
</p>
</div>
<div class="service">
<div class="icon">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/002.png?raw=true"
alt=""
/>
</div>
<h3>Development</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
</p>
</div>
<div class="service">
<div class="icon">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/003.png?raw=true"
alt=""
/>
</div>
<h3>SEO</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
</p>
</div>
<div class="service">
<div class="icon">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/004.png?raw=true"
alt=""
/>
</div>
<h3>Marketing</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
</p>
</div>
<div class="service">
<div class="icon">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/005.png?raw=true"
alt=""
/>
</div>
<h3>App Development</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
</p>
</div>
<div class="service">
<div class="icon">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/006.png?raw=true"
alt=""
/>
</div>
<h3>Error Fixing</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
</p>
</div>
</div>
</section>
<!-- work -->
<section id="work">
<div class="title">
<h1>Some of our finest work</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus
iusto molestias accusamus rem nobis est, et laborum harum doloremque
nemo non, minima quos totam labore maxime iste alias ut esse? Repellat
eaque reiciendis laboriosam corporis fuga vero ratione veritatis
numquam, libero magni voluptatum omnis molestiae officiis
exercitationem qui quidem nam.
</p>
</div>
<div class="portfolio">
<div class="item">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item1.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item2.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item3.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item4.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item5.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item6.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item7.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item8.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item9.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item10.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item11.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item12.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item13.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item14.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item15.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item16.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
</div>
</section>
<!-- contact -->
<section id="contact">
<div class="title">
<h2>Contact us</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus
iusto molestias accusamus rem nobis est, et laborum harum doloremque
nemo non, minima quos totam labore
</p>
</div>
<div class="contact">
<div class="contact-form">
<form>
<div class="row">
<div class="input50">
<input type="text" placeholder="First Name" />
</div>
<div class="input50">
<input type="text" placeholder="Last Name" />
</div>
</div>
<div class="row">
<div class="input50">
<input type="text" placeholder="Email" />
</div>
<div class="input50">
<input type="text" placeholder="Subject" />
</div>
</div>
<div class="row">
<div class="input100">
<textarea placeholder="Message"></textarea>
</div>
</div>
<div class="row">
<div class="input100">
<input type="submit" value="Send" />
</div>
</div>
</form>
</div>
<div class="contact-info">
<div class="info-box">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/address.png?raw=true"
class="contact-icon"
alt=""
/>
<div class="details">
<h4>Address</h4>
<p>28 Neon Tower, New York City, USA</p>
</div>
</div>
<div class="info-box">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/email.png?raw=true"
class="contact-icon"
alt=""
/>
<div class="details">
<h4>Email</h4>
<a href="mailto:anyone@example.com">anyone@example.com</a>
</div>
</div>
<div class="info-box">
<img decoding="async"
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/call.png?raw=true"
class="contact-icon"
alt=""
/>
<div class="details">
<h4>Call</h4>
<a href="tel:+19785555555">+1 978 555 5555</a>
</div>
</div>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
styles.css
This is our CSS code which makes our website beautiful. CSS is used to make webpages stylish. We’ve used this code to style our website and make it user interactive. First of all, a google font is imported for the components of the website.
The :root pseudo-class is used to define CSS variables for –main-color, –secondary-color, –highlight-color, and –text-color. In such a way, it is easier to change the color scheme of the website and assists in reusability and maintenance of styles. Having defined the variables, any modification in color may be implemented everywhere by simply changing variable values.
The universal selector * is used to make box-sizing, margin, and padding for all elements the same so that the consistency in layout remains. Then comes the html and body, which provides imported font and smooth scrolling for a better user experience.
The .btn class is used to style buttons with a specific background color, white text, and padding for good looks. During its hover effect, the button reduces in size marginally, giving it an interactive appearance. The .logo class absolutely positions the logo of the website so that it stays in one place even when scrolling.
The .toggle class changes how a menu icon looks when it is active. The .navigation class controls whether the navigation menu is visible, sliding it in from the right on active. This design offers a modern and mobile-friendly menu experience.
Sections are supposed to be flexible and responsive. The section tag was set up to default to a vertical layout, which changes into a horizontal layout in the class .home section for a more vibrant look. Sections .services and .portfolio make use of grid layouts, which ensure the content will be neatly presented, while media queries will help the design adapt to different screen sizes.
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;500;700&display=swap");
:root {
--main-color: #f60f20;
--secondary-color: #1b206e;
--highlight-color: #c4a2fc;
--text-color: #111;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
font-family: "Rubik", sans-serif;
color: var(--text-color);
scroll-behavior: smooth;
}
.btn {
cursor: pointer;
display: inline-block;
background-color: var(--main-color);
color: #fff;
font-size: 1.1rem;
text-decoration: none;
padding: 10px 30px;
margin: 20px 0;
border: 0;
}
.btn:hover {
transform: scale(0.98);
}
.logo {
position: absolute;
top: 16px;
left: 40px;
z-index: 20;
}
.logo h1 {
font-size: 1.6rem;
font-weight: 700;
}
/* NAVIGATION */
.toggle {
cursor: pointer;
position: fixed;
top: 0;
right: 0;
width: 60px;
height: 60px;
background: var(--main-color)
url("https://github.com/bradtraversy/creative-agency-website/blob/master/images/menu.png?raw=true");
background-position: center;
background-repeat: no-repeat;
background-size: 30px;
z-index: 20;
}
.toggle.active {
background: var(--main-color)
url("https://github.com/bradtraversy/creative-agency-website/blob/master/images/close.png?raw=true");
background-position: center;
background-repeat: no-repeat;
background-size: 25px;
}
.navigation {
position: fixed;
top: 0;
left: 100%;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 15;
display: flex;
justify-content: center;
align-items: center;
}
.navigation.active {
left: 0;
}
.navigation ul {
position: relative;
list-style-type: none;
}
.navigation ul li {
position: relative;
text-align: center;
padding-bottom: 5px;
}
.navigation ul li a {
font-size: 2rem;
color: var(--text-color);
text-decoration: none;
font-weight: 300;
}
.navigation ul li a:hover {
color: var(--main-color);
}
.navigation .social-bar {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.navigation .social-bar a {
display: inline-block;
transform: scale(0.5);
}
.navigation .email-icon {
position: absolute;
bottom: 20px;
}
/* SECTIONS */
section {
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
padding: 100px 40px;
margin-top: 60px;
}
h2 {
font-size: 2rem;
font-weight: 500;
}
p {
margin: 20px 0 10px;
font-size: 1.2rem;
line-height: 1.5;
font-weight: 300;
}
/* HOME SECTION */
section.home {
flex-direction: row;
margin-top: 0;
}
.home-content {
position: relative;
z-index: 10;
max-width: 600px;
}
/* Reference: https://stackoverflow.com/questions/43683187/how-can-i-create-custom-underline-or-highlight-for-text-in-html-or-css */
.highlight {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 50%,
var(--highlight-color) 50%
);
padding: 0 0.25rem;
}
.home-img {
display: none;
}
/* SERVICES */
.services {
margin-top: 40px;
display: grid;
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.services .service .icon img {
max-width: 100px;
}
.services .service {
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.services .service h3 {
font-size: 1.6rem;
font-weight: 500;
margin-top: 20px;
color: var(--secondary-color);
}
.services .service p {
line-height: normal;
font-size: 1.1rem;
margin: 10px 0;
}
/* WORK */
.portfolio {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 20px;
}
.portfolio .item {
position: relative;
width: 300px;
height: 300px;
margin: 5px;
}
.portfolio .item img {
width: 100%;
height: 100%;
}
.portfolio .item .action {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.portfolio .item .action a {
display: inline-block;
color: #fff;
text-decoration: none;
border: 1px solid #fff;
padding: 5px 15px;
}
.portfolio .item .action:hover {
opacity: 1;
}
/* CONTACT */
.contact {
position: relative;
width: 100%;
margin-top: 50px;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: column;
}
.contact-form {
position: relative;
background-color: #f9f9f9;
width: 100%;
padding: 30px 30px 20px;
}
.contact-form form {
width: 100%;
}
.contact-form .row {
display: flex;
flex-direction: column;
width: 100%;
}
.contact-form .input50,
.contact-form .input100 {
width: 100%;
margin: 0;
}
.contact-form .row input,
.contact-form .row textarea {
position: relative;
border: 1px solid rgba(0, 0, 0, 0.2);
color: #111;
background: transparent;
width: 100%;
padding: 10px;
outline: none;
font-size: 1rem;
font-family: inherit;
font-weight: 300;
margin: 10px 0;
resize: none;
}
.contact-form .row textarea {
height: 150px;
}
.contact-form .row input[type="submit"] {
background-color: var(--secondary-color);
color: #fff;
margin: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 300;
border: 0;
cursor: pointer;
}
.contact-info {
width: 100%;
margin-top: 20px;
background: #f9f9f9;
padding: 30px 30px 20px;
}
.contact-info .info-box {
display: flex;
align-items: flex-start;
margin-bottom: 40px;
}
.contact-info .info-box .contact-icon {
width: 20px;
margin-right: 40px;
}
.contact-info .info-box .details h4 {
color: var(--secondary-color);
}
.contact-info .info-box .details p,
.contact-info .info-box .details a {
color: var(--text-color);
}
/* MEDIA QUERIES */
@media (min-width: 768px) {
.services {
grid-template-columns: repeat(2, 1fr);
}
.services .service {
box-shadow: none;
}
.services .service:hover {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
}
@media (min-width: 1068px) {
.home-img {
display: block;
position: absolute;
bottom: 0;
right: 0;
height: 110%;
}
.logo {
top: 30px;
left: 100px;
}
.logo h1 {
font-size: 2.1rem;
}
.navigation ul li a {
font-size: 2.3rem;
}
section {
padding: 100px;
}
.services {
grid-template-columns: repeat(3, 1fr);
}
.contact {
flex-direction: row;
}
.contact-form {
width: calc(100% - 400px);
padding: 60px 40px 20px;
}
.contact-form .row {
flex-direction: row;
}
.contact-form .input50 {
width: 50%;
margin: 0 10px;
}
.contact-form .input100 {
margin: 0 10px;
}
.contact-info {
width: 350px;
margin-top: 0;
padding: 60px 40px 20px;
}
}
script.js
The JavaScript code is to make the toggle button active. In this code first of all, we’ve accessed the toggleButton and navigation using DOM concept of the JavaScript. After accessing them we’ve add an event listener on toggle button. Whenever a user clicks on toggle button the toggle classlist actives on both the variables.
An event listener is added on navigation to active the toggle class when user clicks on the navigation. The navigation is accessed from the HTML using DOM model concept.
This was all about our little JavaScript code.
const toggleButton = document.querySelector(".toggle");
const navigation = document.querySelector(".navigation");
toggleButton.addEventListener("click", () => {
toggleButton.classList.toggle("active");
navigation.classList.toggle("active");
});
navigation.addEventListener("click", () => {
toggleButton.classList.toggle("active");
navigation.classList.toggle("active");
});