Digital Marketing Agency website Using HTML, CSS and JavaScript
Introduction
Hello coders, welcome to another new blog. Today in this project we’ll build a digital marketing agency website. In this digital era, we can get each and every service online and small to big each business taking its place in this digital era. A digital marketing agency is something which provides online services like web designing, graphic designing, SEO and many more. We’ve used frontend technologies to build this project.
To create this project we’ve used basic three frontend technologies which are HTML, CSS and JavaScript. HTML sets up the basic structure of our website. In other word we can say it builds skeleton of our website. CSS adds styling to our project and make it interacting and visually appealing. JavaScript adds some minor functionality to our webpage. All these three technologies completes our digital marketing agency website.
If you guys also want to create this type of website then all you need is the knowledge of HTML, CSS and JavaScript. If you’ve basic knowledge of these technologies and idea then you’re good to go. These type of project usually enhances our programming skills and makes good our logic building mind. Let’s move forward to our code and understand it.
HTML (index.html)
Get Discount on Top Educational Courses
This is our HTML code. HTML stands for hyper text markup language. This code sets up the basic structure of our website. Using this code file we built all the necessary elements for our digital marketing agency website. Let’s breakdown our code.
- <!DOCTYPE html> : This ensures the document type of our code file as a html file.
- <title> : It sets the title of our webpage as Hype agency.
- <link> : This tag links all our CSS files and a favicon icon for our website.
- <nav> : It builds the navbar for our website which include a logo and some menu buttons.
- <header> : It contains a heading, a paragraph, two button and a image for the hero section. This is divided into two div’s one is header right and other is header left.
- <div id=”services”> : This contains two heading which represents serive section headings.
- <section class=”big-feature-section”> : This section contains information about each services and it contains a image, service heading and some information with a view more button.
- <div class=”feature-text flex”> : it contains the text and all the descriptive information about the specific service which is provided by digital marketing agency.
- <section id=”portfolio”> : This contains all the project which are previously done or completed by the agency. It contains a heading at the top then a previous work button along with the project’s image and some descriptive heading text. All these are wrapped in some kind of div.
- <section class=”cta-section”> : It contains a div with a class container, the div has one heading, one small paragraph with a Let’s talk button. All these are call to action section.
- <footer> : footer contains all the quick links, services and navbar buttons. All these are included in footer section of the page.
- <div class=”subfooter”> : This sub footer is for the smaller screens.
- <script> : It links all the script file to the page.
<title>Hype.Agency</title>
<!-- nav bar -->
<nav id="home">
<div class="container main-nav flex">
<a href="#" class="company-logo">
<img decoding="async" src="Images/logo.svg" alt="company logo" /><span>Hype.Agency</span>
</a>
<div class="nav-links" id="nav-links">
<ul class="flex">
<li>
<a href="#" class="hover-link">Home</a>
</li>
<li>
<a href="#services" class="hover-link">Services</a>
</li>
<li>
<a href="#portfolio" class="hover-link">Portfolio</a>
</li>
<li>
<a href="#" class="hover-link primary-button">Let’s Talk 👋</a>
</li>
</ul>
</div>
<a href="#" class="nav-toggle hover-link" id="nav-toggle"><i class="fa-solid fa-bars"></i></a>
</div>
</nav>
<!-- header -->
<header>
<div class="container header-section flex">
<div class="header-left">
<h1>Designing Tomorrow</h1>
<p>
We are a team of enthusiastic individuals who help brands grow by
unleashing the potential of social media
</p>
<a href="#" class="primary-button">Contact us</a>
<a href="#" class="secondary-button">Download Brochure</a>
</div>
<div class="header-right">
<img decoding="async" src="Images/companylogo.png" alt="Hero image" />
</div>
</div>
</header>
<!-- big feature section -->
<div id="services" class="features-header">
<h2>Your Brand, Our Canvas</h2>
<h3>Our Services</h3>
</div>
<section class="big-feature-section">
<div class="container flex big-feature-container">
<div class="feature-img">
<img decoding="async" class="feature-img-odd" src="Images/service (6).png" alt="" />
</div>
<div class="feature-text flex">
<h3>Web Development</h3>
<h4>Dynamic and functional websites</h4>
<p>
Crafting captivating websites that seamlessly blend creativity and
functionality. Our team ensures a unique online experience tailored
to your business needs, utilizing cutting-edge technology and design
principles for impactful results.
</p>
<!-- services box-->
<span class="button button-flex button-small button-link services-button">
View more
<i class="fa-solid fa-arrow-right button-icon"></i>
</span>
<div class="services-box">
<div class="services-box-content">
<h2 class="services-box-title">
Web <br />
Development
</h2>
<i class="fa-solid fa-xmark services-box-close"></i>
<ul class="services-box-services grid">
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Responsive Web Design</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Interactive User Interfaces</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>SEO-Friendly Implementations</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Ongoing support and maintenance</p>
</li>
</ul>
</div>
</div>
<!-- services box end -->
</div>
</div>
</section>
<section class="big-feature-section">
<div class="container flex big-feature-container" id="second-big-feature">
<div class="feature-img">
<img decoding="async" src="Images/service (1).png" alt="" />
</div>
<div class="feature-text flex">
<h3>Web Designing</h3>
<h4>Aesthetically engaging websites</h4>
<p>
Creating visually compelling websites that reflect your unique
identity. Whether you seek a sleek corporate aesthetic or a vibrant
portfolio showcase, our team is committed to translating your vision
into an engaging online presence.
</p>
<!-- services box-->
<span class="button button-flex button-small button-link services-button">
View more
<i class="fa-solid fa-arrow-right button-icon"></i>
</span>
<div class="services-box">
<div class="services-box-content">
<h2 class="services-box-title">
Web <br />
Designing
</h2>
<i class="fa-solid fa-xmark services-box-close"></i>
<ul class="services-box-services grid">
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Creative and visually appealing designs</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>UI/UX focused for intuitive interfaces</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Custom graphics and illustrations</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Mobile-responsive designs</p>
</li>
</ul>
</div>
</div>
<!-- services box end -->
</div>
</div>
</section>
<section class="big-feature-section">
<div class="container flex big-feature-container">
<div class="feature-img">
<img decoding="async" class="feature-img-odd" src="Images/service (2).png" alt="" />
</div>
<div class="feature-text flex">
<h3>Graphics Designing</h3>
<h4>Multipurpose designing</h4>
<p>
Enhance your brand with versatile and customized graphic design
services, delivering striking visuals for marketing, branding, and
social media.
</p>
<!-- services box-->
<span class="button button-flex button-small button-link services-button">
View more
<i class="fa-solid fa-arrow-right button-icon"></i>
</span>
<div class="services-box">
<div class="services-box-content">
<h2 class="services-box-title">
Graphics <br />
Design
</h2>
<i class="fa-solid fa-xmark services-box-close"></i>
<ul class="services-box-services grid">
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Eye-catching visual elements for branding</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Professional logo design</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Print and digital media designs</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Infographics and illustrations</p>
</li>
</ul>
</div>
</div>
<!-- services box end -->
</div>
</div>
</section>
<section class="big-feature-section">
<div class="container flex big-feature-container" id="second-big-feature">
<div class="feature-img">
<img decoding="async" src="Images/service (3).png" alt="" />
</div>
<div class="feature-text flex">
<h3>Video Editing</h3>
<h4>Vlogs, Tutorials, Educational etc.</h4>
<p>
Turn your unprocessed footage into captivating videos using our
expert video editing services. We bring your story to life, managing
the process from concept to delivery.
</p>
<!-- services box-->
<span class="button button-flex button-small button-link services-button">
View more
<i class="fa-solid fa-arrow-right button-icon"></i>
</span>
<div class="services-box">
<div class="services-box-content">
<h2 class="services-box-title">
Video <br />
Editing
</h2>
<i class="fa-solid fa-xmark services-box-close"></i>
<ul class="services-box-services grid">
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Seamless edits for storytelling</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Professional transitions and editing</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Tailored content for social media</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Fast turnaround without compromising quality</p>
</li>
</ul>
</div>
</div>
<!-- services box end -->
</div>
</div>
</section>
<section class="big-feature-section">
<div class="container flex big-feature-container">
<div class="feature-img">
<img decoding="async" class="feature-img-odd" src="Images/service (4).png" alt="" />
</div>
<div class="feature-text flex">
<h3>Social Media Management</h3>
<h4>For Brands and Influencers</h4>
<p>
Enhance your social media influence with our professional management
services. We craft compelling strategies to boost engagement,
increase followers, and expand your reach.
</p>
<!-- services box-->
<span class="button button-flex button-small button-link services-button">
View more
<i class="fa-solid fa-arrow-right button-icon"></i>
</span>
<div class="services-box">
<div class="services-box-content">
<h2 class="services-box-title">
Social Media <br />
Management
</h2>
<i class="fa-solid fa-xmark services-box-close"></i>
<ul class="services-box-services grid">
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Daily monitoring and engagement across platforms</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Content calendar planning and scheduling</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Community building and fostering brand loyalty</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>
Performance tracking and reporting for continuous
improvement
</p>
</li>
</ul>
</div>
</div>
<!-- services box end -->
</div>
</div>
</section>
<section class="big-feature-section">
<div class="container flex big-feature-container" id="second-big-feature">
<div class="feature-img">
<img decoding="async" src="Images/service (5).png" alt="" />
</div>
<div class="feature-text flex">
<h3>Advertising</h3>
<h4>Facebook, Instagram and Google</h4>
<p>
Strengthen your brand through advertising on Facebook, Instagram,
Google, and YouTube. Expand your reach, increase sales, and optimize
visibility to millions.
</p>
<!-- services box-->
<span class="button button-flex button-small button-link services-button">
View more
<i class="fa-solid fa-arrow-right button-icon"></i>
</span>
<div class="services-box">
<div class="services-box-content">
<h2 class="services-box-title">Advertising</h2>
<i class="fa-solid fa-xmark services-box-close"></i>
<ul class="services-box-services grid">
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Targeted campaigns for specific audiences</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Creative Ad copies and visuals</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>A/B testing for optimization</p>
</li>
<li class="services-box-list">
<i class="fa-regular fa-circle-check services-list-icon"></i>
<p>Comprehensive analytics for informed decisions</p>
</li>
</ul>
</div>
</div>
<!-- services box end -->
</div>
</div>
</section>
<section id="portfolio" class="examples-section">
<div class="container">
<div class="examples-header flex">
<h2 class="examples-heading-text">Portfolio</h2>
<a href="#portfolio" class="secondary-button">Our previous work <i class="fa-solid fa-arrow-right-long"></i></a>
</div>
<div class="examples-area flex">
<a href="#" class="examples-card ex-card-img1">
<h3 class="card-text">Wazwaan Stories' Website</h3>
</a>
<a href="#" class="examples-card ex-card-img2">
<h3 class="card-text">Brand logo for Inkwell Designs</h3>
</a>
<a href="#" class="examples-card ex-card-img3">
<h3 class="card-text">Marketing Campaigns for Taaza</h3>
</a>
<a href="#" class="examples-card ex-card-img4">
<h3 class="card-text">Discovery's Thumbnail</h3>
</a>
</div>
</div>
</section>
<section class="cta-section">
<div class="container flex cta-section-container">
<h2>Contact Us</h2>
<p>Let’s talk about ideas</p>
<a href="#" class="primary-button"> Let’s Talk 👋</a>
</div>
</section>
<!-- footer -->
<footer>
<div class="container flex footer-container">
<a href="#" class="company-logo">
<img decoding="async" src="Images/logo.svg" alt="company logo" /><span>Hype.Agency</span>
</a>
<div class="link-column flex">
<h4>Hype.Agency</h4>
<a href="#" class="hover-link">About Us</a>
<a href="#" class="hover-link">Our Team</a>
<a href="#" class="hover-link">Contact us</a>
<a href="#" class="hover-link">Careers</a>
</div>
<div class="link-column flex">
<h4>Our Services</h4>
<a href="#" class="hover-link">Web development</a>
<a href="#" class="hover-link">Web designing</a>
<a href="#" class="hover-link">Graphics design</a>
<a href="#" class="hover-link">Video editing</a>
<a href="#" class="hover-link">Social media management</a>
<a href="#" class="hover-link">Advertising</a>
</div>
<div class="link-column flex">
<h4>Portfolio</h4>
<a href="#portfolio" class="hover-link">Previous Work</a>
<a href="#" class="hover-link">Testimonials</a>
<a href="#" class="hover-link">Acheivements</a>
</div>
</div>
</footer>
<div class="subfooter">
<div class="container flex subfooter-container">
<a href="#" class="hover-link">Privacy Policy</a>
<a href="#" class="hover-link">Terms & Condition</a>
<a href="#" class="hover-link">Security Information</a>
<a href="#" class="hover-link"><i class="fa-brands fa-linkedin"></i></a>
<a href="#" class="hover-link"><i class="fa-brands fa-square-instagram"></i></a>
</div>
</div>
<!-- scroll to top -->
<a href="#home" class="scrollup" id="scroll-up">
<i class="fa-solid fa-arrow-up scroll-up-icon"></i>
</a>
CSS (Style.css)
This is our CSS code which makes our website visually appealing and more interactive. CSS increases user experience to the website. It styles all the elements of a website and make it look beautiful. Let’s breakdown our CSS code and understand briefly what it is.
- Code starts by importing the google font Jost.
- Universal selector resets default margins and paddings for all elements and ensures padding doesn’t affect element size.
- The root selector defines global variable for the primary text, theme color and other variables which we can use later in our code.
- Body sets the Jost font by default. All the headings font size are increased for the better view and p tag use secondary color variable for the better readability.
- In the utility class section small text’s font size is increased. The .container centers content with a max-width of 1180px.
- The .flex used display flex for the alignment of elements and layouts. On the hover it change its color.
- Navigation section uses flexbox to center and space evenly to the elements. The .nav-links manages link space using a gap of 40px. The buttons are styled interactive and hover effect is added on them.
- Header section uses gap of 50px to separate text and image. Header is divided into 2 section left and right. Header left sets max width to control the text width and image in header right increase the image width to 90%.
- In the company section .logo uses flexbox properties. It distribute space evenly using justify content.
- Features section controls all the spacing between feature in the .big-feature-container. The .feature-img section manages the image size in our website.
- Example section ensures the card sizes in our websites and aligns them center of the section and adds a shadow effect on hover. Using nth child property it styles specific elements.
- In the CTA section both section and container uses flexbox to align center with a purple background and white text.
- Footer container ensure that all the links are organized well using the flexbox properties.
- Scroll effect is added to elements using the webkit property of CSS. A scroll up button displays when we reach bottom of the website.
- Lastly .services-box creates a hidden modal that becomes visible with .active-box.
- For the responsive ness and smaller screen media queries are used and creates a different file for it which you can get in the code folder.
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
:root {
--primary-text-color: #28282f;
--secondary-text-color: #797e8d;
--accent-color: #5a58e9;
--accent-color-dark: #1d69a3;
--padding-inline-section: 20px;
}
/* resets */
body {
font-family: "Jost", sans-serif;
color: var(--primary-text-color);
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
}
p {
font-family: "Jost", sans-serif;
font-size: 1.5rem;
color: var(--secondary-text-color);
line-height: 1.8rem;
}
a {
text-decoration: none;
display: inline-block;
}
/* utility class */
.small-bold-text {
font-size: 1rem;
font-weight: 500;
}
.container {
max-width: 1180px;
margin-inline: auto;
overflow: hidden;
}
.hover-link {
color: var(--primary-text-color);
}
.hover-link:hover {
color: var(--accent-color);
}
.flex {
display: flex;
align-items: center;
}
ul {
list-style: none;
}
/* nav bar */
.main-nav {
margin-top: 20px;
justify-content: space-between;
position: relative;
}
.company-logo {
display: flex;
align-items: center;
justify-content: center;
cursor: default;
}
.company-logo img {
margin-left: 10px;
margin-right: 5px;
width: 50px;
}
.company-logo span {
font-size: 24px;
color: #28282f;
font-weight: 600;
}
.nav-links {
flex-basis: 730px;
}
.nav-links ul {
justify-content: end;
gap: 40px;
}
.nav-toggle {
display: none;
}
.primary-button {
background-color: var(--accent-color);
border-radius: 6px;
font-weight: 500;
color: white !important;
padding: 12px 24px;
box-shadow: 0 0 2px var(--secondary-text-color);
transition: 0.2s ease-out;
text-align: center;
}
.primary-button:hover {
background-color: var(--accent-color-dark);
}
.secondary-button {
border: 0.5px solid var(--secondary-text-color);
border-radius: 6px;
font-weight: 500;
color: var(--primary-text-color) !important;
padding: 12px 24px;
transition: 0.2s ease-out;
}
.secondary-button:hover {
border-color: var(--accent-color);
color: var(--accent-color) !important;
}
/* header */
header {
padding: 30px var(--padding-inline-section);
}
.header-section {
justify-content: center;
gap: 50px;
}
.header-left {
max-width: 40vw;
}
.header-left h1 {
margin-top: 10px;
}
.header-right img {
width: 90%;
}
.get-started-button {
margin-top: 20px;
}
/* companies section */
.companies-header {
text-align: center;
margin-block: 30px;
color: var(--primary-text-color);
}
.logos {
justify-content: space-evenly;
flex-wrap: wrap;
gap: 20px;
}
.logo {
height: 46px;
}
.features-header {
text-align: center;
margin-bottom: 40px;
}
.features-header h2 {
margin-bottom: 20px;
}
.features-header h3 {
color: var(--secondary-text-color);
}
/* big features section */
.big-features-section {
padding: 30px var(--padding-inline-section) 0;
}
.big-features-container {
gap: 30px;
}
.feature-img img {
width: 80%;
}
.feature-img-odd {
width: 65% !important;
}
.feature-text {
flex-direction: column;
align-items: flex-start;
}
.feature-text h4 {
color: #434f57;
}
#second-big-feature {
flex-direction: row-reverse;
}
/* examples section */
.examples-section {
padding: 80px var(--padding-inline-section);
}
.examples-header {
flex-direction: column;
gap: 20px;
text-align: center;
}
.examples-card {
width: 23%;
position: relative;
height: 300px;
transition: 0.3s ease-out;
border-radius: 5px;
}
.examples-card:hover {
box-shadow: 0 0 10px #888;
}
.examples-area {
justify-content: space-between;
margin-block: 30px;
flex-wrap: wrap;
}
.ex-card-img1 {
background: black;
background: linear-gradient(rgb(0, 0, 0, 0.1), rgb(0, 0, 0, 0.8)),
url("Images/portfolio-website.png");
background-size: cover;
}
.ex-card-img2 {
background: black;
background: linear-gradient(rgb(0, 0, 0, 0.1), rgb(0, 0, 0, 0.8)),
url("Images/portfolio-logo.png");
background-size: cover;
}
.ex-card-img3 {
background: black;
background: linear-gradient(rgb(0, 0, 0, 0.1), rgb(0, 0, 0, 0.8)),
url("Images/portfolio-ad.png");
background-size: cover;
}
/* alt way - nth child */
.examples-card:nth-child(4) {
background: black;
background: linear-gradient(rgb(0, 0, 0, 0.1), rgb(0, 0, 0, 0.8)),
url("Images/portfolio-thumb.png");
background-size: cover;
}
.card-text {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
color: white;
}
/* cta section */
.cta-section-container {
flex-direction: column;
gap: 30px;
color: white;
text-align: center;
}
.cta-section-container p {
color: white;
margin-top: 20px;
}
.cta-section {
padding: 120px 30px 80px;
background-color: #9e88ed;
}
/* footer */
footer {
padding-block: 80px;
background-color: #f1e7ff;
}
.link-column {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.footer-container {
align-items: flex-start;
justify-content: space-between;
}
/* sub footer */
.subfooter {
background-color: #beadfa;
padding: 30px;
}
.subfooter-container {
justify-content: center;
gap: 30px;
}
/* reusable */
.button {
display: inline-block;
background-color: #d0bfff;
color: #fff;
padding: 1rem;
border-radius: 0.5rem;
font-weight: 500;
}
.button-flex {
display: inline-flex;
align-items: center;
}
.button-small {
padding: 0.75rem 1rem;
}
.button-link {
padding: 0;
background-color: transparent;
color: #5b0888;
}
.button-link:hover {
background-color: transparent;
color: #5a58e9;
}
.services-button {
cursor: pointer;
font-size: 1rem;
margin: 2% 0;
}
.services-button i {
margin-left: 5px;
}
.services-button:hover .button-icon {
transform: translateX(0.25rem);
}
.services-box {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
z-index: var(--z-model);
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
.services-box-content {
position: relative;
background-color: #fff;
padding: 1.5rem;
border-radius: 0.5rem;
}
.services-box-services li {
display: flex;
align-items: center;
}
.services-box-services li p {
font-size: 1.25rem;
}
.services-box-services {
row-gap: 1rem;
}
.services-box-list {
display: flex;
}
.services-box-title {
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 1.5rem;
}
.services-box-close {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 1.5rem;
color: #5b0888;
cursor: pointer;
}
.services-list-icon {
color: #5b0888;
margin-top: 0.25rem;
margin-right: 0.25rem;
}
.active-box {
opacity: 1;
visibility: visible;
}
/* scroll thumb and bar */
::-webkit-scrollbar {
width: 0.6rem;
background-color: #d8d8ff;
border-radius: 0.5rem;
}
::-webkit-scrollbar-thumb {
background-color: #c2c1ff;
border-radius: 0.5rem;
}
/* scroll to top */
.scrollup {
position: fixed;
right: 1rem;
bottom: -20%;
background-color: #5a58e9;
opacity: 0.8;
padding: 0.2rem 0.4rem;
border-radius: 0.4rem;
z-index: 10;
transition: 0.4s;
}
.scrollup:hover {
background-color: #4341ba;
}
.scroll-up-icon {
font-size: 1.25rem;
color: #fff;
}
.show-scroll {
bottom: 5rem;
}
Javascript (Script.js)
This is our JavaScript code which adds some minor functionality to our page. We’ve used latest JavaScript version and it is used for scrolling and menu bar when we visits our site in smaller screens. Let’s briefly understand it.
- When we click on the menu bar icon it display or hides the navigation menu using the .active class.
- If we click on a service button it will open its related modal which shows some services using the .active-box class.
- Same happens if we click on close button it will hide modal by removing that active class.
- When you scroll down past 200px, the header gets a new background color. Scrolling back up removes it.
- When we scroll down to 560px, then the scroll to top button display or appears in the website. Scrolling back up hides it.
const toggleButton = document.getElementById("nav-toggle");
const navLinks = document.getElementById("nav-links");
toggleButton.addEventListener("click", () => {
navLinks.classList.toggle("active");
});
// services box
const boxViews = document.querySelectorAll(".services-box"),
boxBtns = document.querySelectorAll(".services-button"),
boxCloses = document.querySelectorAll(".services-box-close");
let box = function (boxClick) {
boxViews[boxClick].classList.add("active-box");
};
boxBtns.forEach((boxBtn, i) => {
boxBtn.addEventListener("click", () => {
box(i);
});
});
boxCloses.forEach((boxClose) => {
boxClose.addEventListener("click", () => {
boxViews.forEach((boxView) => {
boxView.classList.remove("active-box");
});
});
});
// change bg header
function scrollHeader() {
const nav = document.getElementById("home");
// When the scroll is greater than 200 viewport height, add the scroll-header class to the header tag
if (this.scrollY >= 200) nav.classList.add("scroll-header");
else nav.classList.remove("scroll-header");
}
window.addEventListener("scroll", scrollHeader);
// scroll to top
function scrollUp() {
const scrollUp = document.getElementById("scroll-up");
// When the scroll is higher than 560 viewport height, add the show-scroll class to the a tag with the scroll-top class
if (this.scrollY >= 560) scrollUp.classList.add("show-scroll");
else scrollUp.classList.remove("show-scroll");
}
window.addEventListener("scroll", scrollUp);
Output:
Disclaimer: The code provided in this post is sourced from GitHub and is distributed under the MIT License. All credits for the original code go to the respective owner. We have shared this code for educational purposes only. Please refer to the original repository for detailed information and any additional usage rights or restrictions.
electronics Store website using html CSS and JavaScript Introduction Hello coders, welcome to another new project. As you know our today’s project …
Digital Marketing Agency website Using HTML, CSS and JavaScript Introduction Hello coders, welcome to another new blog. Today in this project we’ll …
Fruit Slicer Game Using HTML CSS And JavaScript Introduction Hey coders, welcome to another new blog. Today in this blog we’ve created …
Event Organizers Website Using Html Css And JavaScript Introduction Hello coders, welcome to another new blog. As you know that our today’s …
Get Huge Discounts
More Python Projects
