Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS, JavaScript, React) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
You can also visit my GitHub where I upload all the code I have.
In this tutorial topic "How To Create a Complete Fitness Website Design Using HTML CSS & JavaScript", we will learn how to create it following these simple easy steps.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
Get Source Code.
If interested in watching the video before running the code below, you can click the play button to get started.
Code Begins
- First, create a folder with any name you like. Then, make the necessary files inside it.
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Create a file called script.js for the JavaScript code.
- Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
HTML
<!-- Header Section -->
<header>
<a href="" class="logo"><img id="logoImg" src="./img/logo-light-header.png" alt=""></a>
<div>
<nav class="links">
<div class="nav-item"><a href="">Home</a></div>
<div class="nav-item"><a href="">Pages</a>
<div class="drop-down">
<a href="">About Us</a>
<a href="">Meet the Team</a>
<a href="">Our Services</a>
<a href="">Our Products</a>
</div>
</div>
<div class="nav-item"><a href="">Events</a></div>
<div class="nav-item"><a href="">Shops</a></div>
<div class="nav-item"><a href="">Portfolio</a>
<div class="drop-down">
<a href="">Standards</a>
<a href="">Layouts</a>
<a href="">Gallery</a>
<a href="">Single</a>
</div>
</div>
<div class="nav-item"><a href="">Blogs</a></div>
</nav>
<div class="others">
<button class="search"><ion-icon name="search"></ion-icon></button>
<button class="cart"><ion-icon name="cart"></ion-icon></button>
<button class="menu"><ion-icon name="menu"></ion-icon></button>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="hero-slider-1"></div>
<div class="hero-slider-2"></div>
<div class="hero-texts">
<div class="text-1">
<h1>Strong</h1>
<p>beat the routine. train at the caliber of world champions and get in the best shape of your life.</p>
<div class="hero-images">
<img src="./img/hero-slider-3.png" alt="">
<img src="./img/hero-slider-3.png" alt="">
</div>
</div>
<div class="text-2">
<h2>What we have to offer</h2>
</div>
</div>
</section>
<!-- About Section -->
<section class="about">
<h2>Push your limits forward</h2>
<p>Train with the best experts in bodybuilding field. Your results will speak to themselves. Try the latest exercising trends, innovative equipment and special nutrition plans.</p>
<div class="about-details">
<div class="detail">
<img src="/img/about-1.png" alt="">
<h3>Quality Equipment</h3>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipisc.</p>
</div>
<div class="detail">
<img src="/img/about-2.png" alt="">
<h3>Quality Equipment</h3>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipisc.</p>
</div>
<div class="detail">
<img src="/img/about-3.png" alt="">
<h3>Quality Equipment</h3>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipisc.</p>
</div>
<div class="detail">
<img src="/img/about-4.png" alt="">
<h3>Quality Equipment</h3>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipisc.</p>
</div>
</div>
</section>
<!-- Build Section -->
<section class="build-section">
<div>
<span>01</span>
<h3>built to bring best results</h3>
<p>Tune up your shoulders, legs and lower back. Choose a workout that can improve your balance, strength and overall condition. Our team of experts will follow you through the whole workout process. Your body will thank you.</p>
<button><span>Read more</span><ion-icon name="arrow-forward-outline"></ion-icon></button>
</div>
<div><img src="./img/build.jpg" alt=""></div>
</section>
<!-- Testimonial Section -->
<section class="testimonials">
<button class="left"><ion-icon name="chevron-back-outline"></ion-icon></button>
<button class="right"><ion-icon name="chevron-forward-outline"></ion-icon></button>
<div class="overlay"></div>
<div class="wrapper">
<div class="slider">
<div class="slide">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti, omnis itaque sapiente possimus dignissimos pariatur numquam at, sint natus adipisci, cum illum?</p>
<span>Henry Walker, nutruiionalist</span>
</div>
<div class="slide">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti, omnis itaque sapiente possimus dignissimos pariatur numquam at, sint natus adipisci, cum illum? Suscipit laudantium amet autem, repellat sapiente adipisci ea?</p>
<span>Alan Smith, body builder</span>
</div>
<div class="slide">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti, omnis itaque sapiente possimus dignissimos pariatur numquam at, sint natus adipisci, cum illum?</p>
<span>John Smith, Fitness Coach</span>
</div>
<div class="slide">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti, omnis itaque sapiente possimus dignissimos pariatur numquam at, sint natus adipisci, cum illum?</p>
<span>John McCurly, Humanatrian</span>
</div>
</div>
</div>
</section>
<!-- Product Section -->
<section class="product-section">
<h2>Protein Products</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis Theme natoque.</p>
<div class="products">
<div class="product">
<img src="./img/product-1.png" alt="">
<div><button>Add To Cart</button></div>
<h4>Protein 100% Green</h4>
<span>$85</span>
</div>
<div class="product">
<img src="./img/product-2.png" alt="">
<div><button>Add To Cart</button></div>
<h4>Protein 100% Purple</h4>
<span>$85</span>
</div>
<div class="product">
<img src="./img/product-3.png" alt="">
<div><button>Add To Cart</button></div>
<h4>Protein 100%</h4>
<span>$85</span>
</div>
<div class="product">
<img src="./img/product-4.png" alt="">
<div><button>Add To Cart</button></div>
<h4>Protein 100% Red</h4>
<span>$85</span>
</div>
</div>
</section>
<!-- Price Section -->
<section class="price-section">
<div class="price-tab">
<div class="tab-item">
<span>04</span>
<h3>choose your pricing plan</h3>
</div>
<button><span>read more</span><ion-icon name="arrow-forward-outline"></ion-icon></button>
</div>
<div class="price-cards">
<div class="card">
<h3><sup>$</sup>33</h3>
<span>single class</span>
<h4>class drop-in</h4>
<p>Lorem ipsum dolor sit.</p>
<p>Aenean massa.</p>
<p>Quisque rutrum.</p>
<button><span>Choose Plan</span><ion-icon name="arrow-forward-outline"></ion-icon></button>
</div>
<div class="card">
<h3><sup>$</sup>45</h3>
<span>unlimited class</span>
<h4>class drop-in</h4>
<p>Lorem ipsum dolor sit.</p>
<p>Aenean massa.</p>
<p>Quisque rutrum.</p>
<button><span>Choose Plan</span><ion-icon name="arrow-forward-outline"></ion-icon></button>
</div>
<div class="card">
<h3><sup>$</sup>99</h3>
<span>3 months class</span>
<h4>class drop-in</h4>
<p>Lorem ipsum dolor sit.</p>
<p>Aenean massa.</p>
<p>Quisque rutrum.</p>
<button><span>Choose Plan</span><ion-icon name="arrow-forward-outline"></ion-icon></button>
</div>
</div>
</section>
<!-- Client Section -->
<section class="client-section">
<div class="clients">
<img src="./img/client-1.png" alt="">
<img src="./img/client-2.png" alt="">
<img src="./img/client-3.png" alt="">
<img src="./img/client-4.png" alt="">
<img src="./img/client-5.png" alt="">
<!-- Duplicate Logos -->
<img src="./img/client-1.png" alt="">
<img src="./img/client-2.png" alt="">
<img src="./img/client-3.png" alt="">
<img src="./img/client-4.png" alt="">
<img src="./img/client-5.png" alt="">
</div>
</section>
<!-- Footer Section -->
<footer>
<div class="footer-content">
<div class="footer-logo">
<img src="./img/logo-light-header.png" alt="">
<p>Cum sociis Theme natoque penatibus et magnis dis parturie montes, nascetur ridiculus mus. Curabitur ullamcorper.</p>
<div><ion-icon name="call-outline"></ion-icon><span>1-677225-124-44227-84</span></div>
<div><ion-icon name="location-outline"></ion-icon><span>84 Main Collins Street</span></div>
<div><ion-icon name="time-outline"></ion-icon><span>Mon - Sat 8:00 - 18:00</span></div>
</div>
<div class="footer-news">
<h3>Latest news</h3>
<div>
<h4>Fitness class for you</h4>
<span>october 22, 2017</span>
</div>
<div>
<h4>gym exercise to boost your football</h4>
<span>october 22, 2017</span>
</div>
<div>
<h4>boost performace</h4>
<span>november 22, 2017</span>
</div>
</div>
<div class="footer-projects">
<h3>recent projects</h3>
<div>
<a href="">january 2018</a>
<a href="">february 2018</a>
<a href="">march 2018</a>
<a href="">april 2018</a>
<a href="">may 2018</a>
<a href="">june 2018</a>
</div>
</div>
<div class="footer-contact">
<h3>Contact</h3>
<form action="">
<input type="text" placeholder="Name" required>
<input type="email" placeholder="E-mail" required>
<textarea rows="3" placeholder="Comment" required></textarea>
<button type="submit">Send Message</button>
</form>
</div>
</div>
<div class="footer-bottom">
<p>© 2018 Powress. All rights reserved. | Design by <a href="" target="_blank">u-gine media</a></p>
<div class="social-icons">
<a href=""><ion-icon name="logo-facebook"></ion-icon></a>
<a href=""><ion-icon name="logo-twitter"></ion-icon></a>
<a href=""><ion-icon name="logo-instagram"></ion-icon></a>
<a href=""><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</footer>
<!-- Scroll To Top BTN -->
<a href="#" class="scroll-to-top"><ion-icon name="arrow-up-outline"></ion-icon></a>
<script src="script.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
Next, add the following CSS codes to your style.css file to make your AI image generator website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website.
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
*::selection {
background: #F34E3A;
color: #fff;
}
body {
font-family: 'Poppins', sans-serif;
background: #000;
color: #fff;
overflow-x: hidden;
}
/*
Header Design */
header {
position: relative;
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2.5em 0;
z-index: 30;
animation: animate-top 1s forwards;
}
header > div {
display: flex;
gap: 3em;
}
.logo img {
width: 160px;
}
.links {
display: flex;
gap: 50px;
list-style: none;
}
.links .nav-item {
position: relative;
display: inline-block;
padding-bottom: 10px;
}
.links .nav-item a {
text-decoration: none;
color: #fff;
font-weight: 500;
transition: color 0.3s ease;
}
.links .nav-item a:hover {
color: #F34E3A;
}
.drop-down {
position: absolute;
top: 100%;
left: 0;
background: #1C1C1C;
padding: 10px 0;
min-width: 200px;
display: none;
}
.drop-down a {
display: block;
padding: 10px 20px;
}
.links .nav-item:hover .drop-down {
display: block;
}
.others {
display: flex;
align-items: center;
gap: 10px;
}
.others button {
background: transparent;
border: none;
outline: none;
color: #fff;
font-size: 1.5em;
cursor: pointer;
transition: all 0.3s ease;
}
.others button:hover {
color: #F34E3A;
}
.others .menu {
display: none;
}
/*
Header End */
/* Hero Design */
.hero {
position: relative;
top: 0;
left: 0;
width: 100%;
min-height: 100vh;
background-image: url(./img/hero.jpg);
background-size: 120%;
background-position: center;
background-repeat: no-repeat;
background-color: #000;
}
.hero-slider-1 {
position: absolute;
top: 50%;
left: 0;
height: 50%;
width: 100%;
background-image: url(./img/hero-slider-1.png);
background-repeat: no-repeat;
background-size: 80%;
animation: animate-bottom 0.3s forwards;
}
.hero-slider-2 {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-image: url(./img/hero-slider-2.png);
background-repeat: no-repeat;
animation: zoom 3s infinite alternate;
}
@keyframes zoom {
0% {background-size: 100%;}
100% {background-size: 110%;}
}
.hero-texts {
position: relative;
display: flex;
justify-content: space-between;
width: 90%;
margin: 0 auto;
text-transform: uppercase;
}
.text-1 h1 {
width: auto;
font-size: 100px;
letter-spacing: 40px;
color: #F34E3A;
animation: animate-right 0.7s forwards;
}
.text-1 p {
max-width: 370px;
width: 100%;
position: relative;
top: -65px;
left: 25px;
font-weight: 700;
font-size: 1.2em;
line-height: 2.1em;
animation: animate-right 0.7s forwards;
}
.hero-images {
position: relative;
top: -45px;
left: 25px;
display: flex;
flex-direction: column;
align-items: start;
gap: 5px;
animation: animate-right 0.7s forwards;
animation-delay: 0.3s;
}
.text-2 h2 {
font-size: 2.5em;
writing-mode: vertical-rl;
max-height: 320px;
animation: animate-right 0.7s forwards;
animation-delay: 0.1s;
}
/* Hero Design End */
/* About Design */
.about {
padding: 7em 5em;
background: #111111;
}
.about h2 {
text-align: center;
font-size: 2.5em;
text-transform: uppercase;
}
.about > p {
color: rgba(255, 255, 255, .5);
max-width: 1000px;
width: 100%;
text-align: center;
margin: 20px auto;
font-size: 1.1em;
line-height: 30px;
}
.about-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 3em;
}
.about-details .detail {
text-align: center;
}
.about-details .detail h3 {
font-size: 1.1em;
margin-bottom: 10px;
text-transform: uppercase;
}
.about-details .detail p {
font-size: 1em;
color: rgba(255, 255, 255, .5);
}
/* About End */
/* Build Section Design */
.build-section {
display: flex;
height: 70vh;
}
.build-section > div {
width: 50%;
height: 100%;
}
.build-section > div:first-child {
background: #1C1C1C;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 3em;
}
.build-section > div:first-child > span {
font-size: 7em;
color: rgba(255, 255, 255, .3);
line-height: 0;
}
.build-section > div:first-child > h3 {
text-transform: uppercase;
font-size: 2.3em;
max-width: 300px;
width: 100%;
}
.build-section > div:first-child > p {
color: rgba(255, 255, 255, .5);
margin-top: 10px;
font-size: 1em;
}
.build-section > div:first-child > button {
display: flex;
align-items: center;
gap: 10px;
width: fit-content;
margin-top: 30px;
padding: 15px 30px;
border: none;
outline: none;
font-size: 1em;
border-radius: 2px;
cursor: pointer;
text-transform: uppercase;
background: #F34E3A;
color: #fff;
transition: all 0.3s ease;
}
.build-section > div:first-child > button:hover {
letter-spacing: 3px;
}
.build-section > div > img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Build Section End */
/* Testimonial Section Design */
.testimonials {
position: relative;
height: 80vh;
background-image: url("./img/testimonial.jpg");
background-attachment: fixed;
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.testimonials button {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 6em;
background: transparent;
color: #fff;
cursor: pointer;
border: none;
z-index: 10;
}
.testimonials .left {
left: 5%;
}
.testimonials .right {
right: 5%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
}
.wrapper {
width: 90%;
position: relative;
overflow: hidden;
}
.slider {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
text-align: center;
}
.slide p {
max-width: 80%;
width: 100%;
margin: 0 auto;
font-size: 1.5em;
margin-bottom: 50px;
}
.slide span {
text-transform: uppercase;
}
/* Testimonial End */
/* Product Section Design */
.product-section {
padding: 7em 5em;
background: #111111;
}
.product-section h2 {
text-align: center;
font-size: 2.5em;
text-transform: uppercase;
}
.product-section > p {
color: rgba(255, 255, 255, .5);
max-width: 1000px;
width: 100%;
text-align: center;
margin: 20px auto;
font-size: 1.1em;
line-height: 30px;
}
.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 3em;
}
.product {
position: relative;
text-align: center;
}
.product img {
width: 100%;
}
.product div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
display: flex;
justify-content: center;
align-items: center;
transition: all 0.5s ease;
opacity: 0;
overflow: hidden;
}
.product div button {
text-transform: uppercase;
padding: 10px 15px;
cursor: pointer;
background: #F34E3A;
color: #fff;
border: none;
}
.product:hover div {
opacity: 1;
}
.product:hover img {
filter: grayscale(100%);
}
.product h4 {
font-size: 1.5em;
text-transform: uppercase;
}
.product span {
color: rgba(255, 255, 255, .5);
display: block;
padding-bottom: 20px;
}
/* Product Section End */
/* Price Section Design */
.price-section {
padding: 7em 5em;
background: #1C1C1C;
}
.price-tab {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.tab-item span {
font-size: 7em;
line-height: 0;
color: rgba(255, 255, 255, .3);
}
.tab-item h3 {
text-transform: uppercase;
font-size: 2.3em;
max-width: 300px;
width: 100%;
position: relative;
top: -40px;
}
.price-tab button {
background: #F34E3A;
border: none;
color: #fff;
cursor: pointer;
text-transform: uppercase;
border-radius: 2px;
padding: 15px 30px;
font-size: 1em;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
}
.price-tab button:hover {
letter-spacing: 3px;
}
.price-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 3em;
}
.card {
padding: 5em 0;
background: #29282D;
border-radius: 2px;
text-align: center;
}
.card h3 {
font-size: 3em;
}
.card span {
text-transform: uppercase;
color: #F34E3A;
}
.card h4 {
font-size: 1.5em;
margin: 20px 0;
text-transform: uppercase;
}
.card p {
color: rgba(255, 255, 255, .5);
font-size: 1.1em;
padding: 20px 0;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.card button {
margin: 0 auto;
margin-top: 40px;
padding: 15px 30px;
background: #F34E3A;
color: #fff;
border: none;
cursor: pointer;
text-transform: uppercase;
border-radius: 2px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
}
.card button span {
color: #fff;
}
.card button:hover {
letter-spacing: 3px;
}
/* Price Section End */
/* Client Section Design */
.client-section {
padding: 3em 0;
background: #F34E3A;
width: 100%;
overflow: hidden;
}
.clients {
display: inline-flex;
animation: scroll 20s linear infinite;
}
.clients img {
height: 60px;
margin-right: 2rem;
flex-shrink: 0;
}
@keyframes scroll {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
/* Client Section End */
/* Footer Section Design */
footer {
padding: 7em 5em;
padding-bottom: 0;
background: #1C1C1C;
color: #fff;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
color: rgba(255, 255, 255, .5);
}
.footer-content h3 {
font-size: 1.5em;
margin-bottom: 20px;
color: #fff;
text-transform: uppercase;
}
.footer-logo img {
width: 160px;
}
.footer-logo p {
color: rgba(255, 255, 255, .5);
font-size: 1em;
font-weight: 200;
margin: 30px 0;
}
.footer-logo > div {
display: flex;
gap: 10px;
margin: 15px 0;
}
.footer-logo > div ion-icon {
font-size: 1.5em;
}
.footer-news div {
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, .1);
text-transform: uppercase;
}
.footer-news div:last-child {
border: none;
}
.footer-news div h4 {
font-size: 1.1em;
font-weight: 500;
margin-bottom: 10px;
line-height: 25px;
}
.footer-news div span {
font-size: 0.9em;
}
.footer-projects div {
display: flex;
flex-direction: column;
gap: 15px;
}
.footer-projects div a {
color: rgba(255, 255, 255, .5);
text-decoration: none;
font-size: 1em;
transition: color 0.3s ease;
text-transform: uppercase;
}
.footer-contact form {
display: flex;
flex-direction: column;
gap: 20px;
}
.footer-contact form input,
.footer-contact form textarea {
width: 100%;
padding: 15px;
border: none;
outline: none;
border-radius: 2px;
background: rgba(255, 255, 255, .1);
color: #fff;
font-size: 1em;
resize: none;
}
.footer-contact form input::placeholder,
.footer-contact form textarea::placeholder {
font-family: "Poppins", sans-serif;
}
.footer-contact form button {
background: #F34E3A;
color: #fff;
cursor: pointer;
border: none;
padding: 10px 30px;
font-size: 1em;
text-transform: uppercase;
border-radius: 2px;
transition: all 0.3s ease;
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2em 0;
margin-top: 40px;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.footer-bottom p {
line-height: 25px;
color: rgba(255, 255, 255, .5);
}
.footer-bottom a {
color: #F34E3A;
text-decoration: none;
text-transform: uppercase;
transition: all 0.3s ease;
}
.footer-bottom a:hover {
color: #fff;
}
.social-icons {
display: flex;
align-items: center;
gap: 20px;
}
.social-icons a {
font-size: 1.3em;
}
/* Footer Section End */
/* Scroll To Top Design */
.scroll-to-top {
position: fixed;
bottom: 5%;
right: 5%;
padding: 10px 15px;
display: flex;
justify-content: center;
align-items: center;
background: #F34E3A;
color: #fff;
font-size: 1.2em;
opacity: 0;
pointer-events: none;
transition: all 0.5s ease;
}
.scroll-to-top.active {
opacity: 1;
pointer-events: all;
}
/* End of Scroll to Top */
/* Global Animations */
@keyframes animate-right {
0% {transform: translateX(999px);}
100% {transform: translateX(0);}
}
@keyframes animate-left {
0% {transform: translateX(-999px);}
100% {transform: translateX(0);}
}
@keyframes animate-bottom {
0% {transform: translateY(999px); opacity: 0; pointer-events: none;}
100% {transform: translateY(0); opacity: 1; pointer-events: all;}
}
@keyframes animate-top {
0% {transform: translateY(-999px); opacity: 0; pointer-events: none;}
100% {transform: translateY(0); opacity: 1; pointer-events: all;}
}
header.active {
position: fixed;
width: 100%;
margin: 0 auto;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2.5em;
z-index: 30;
animation: animate-top 1s forwards;
}
header.active .links .nav-item a {
color: #111111;
}
header.active .drop-down {
background: #fff;
}
header.active .others button {
color: #111111;
}
/* Media Queries */
@media (max-width: 1000px) {
.links {
gap: 20px;
}
}
@media (max-width: 900px) {
header {
width: 100%;
padding: 2.3em 5%;
background: #fff;
height: max-content;
}
.links {
position: absolute;
top: 100%;
left: 50%;
width: 0;
overflow: hidden;
background: #fff;
align-items: center;
transform: translateX(-50%);
flex-direction: column;
padding-bottom: 2.5em;
transition: all 0.5s ease;
}
.links .nav-item {
width: 70%;
border-bottom: 1px solid rgba(0, 0, 0, .2);
}
.links .nav-item a {
color: #1C1C1C;
}
.drop-down {
position: relative;
background: transparent;
}
.drop-down a {
border-bottom: 1px solid rgba(0, 0, 0, .2);
}
.drop-down a:last-child {
border: none;
}
.others button {
color: #1C1C1C;
}
.others .menu {
display: block;
}
.links.active {
width: 100%;
}
.text-2 {
display: none;
}
.hero-slider-1 {
background-size: 90%;
top: 85%;
height: 15%;
}
.hero-texts {
top: 100px;
}
.text-1 h1 {
font-size: 2em;
letter-spacing: 20px;
}
.text-1 p {
top: -28px;
left: 15px;
font-size: 1.1em;
max-width: 300px;
}
.hero-images {
top: -10px;
left: 15px;
}
.about {
padding: 7em 2.5em;
}
.about h2 {
font-size: 2em;
}
.build-section {
flex-direction: column;
height: auto;
}
.build-section > div {
width: 100%;
}
.build-section > div:first-child {
padding: 7em 2.5em;
}
.build-section > div:first-child > h3 {
font-size: 2em;
}
.testimonials button {
font-size: 3.5em;
}
.testimonials .left {
left: 2%;
}
.testimonials .right {
right: 2%;
}
.slide p {
font-size: 1.4em;
line-height: 40px;
}
.product-section {
padding: 7em 2.5em;
}
.product-section h2 {
font-size: 2em;
}
.price-section {
padding: 7em 2.5em;
}
.price-tab {
flex-direction: column;
align-items: start;
}
.tab-item h3 {
font-size: 2em;
}
footer {
padding: 7em 2.5em;
padding-bottom: 0;
}
.footer-content {
gap: 10px;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 1em;
}
}
Finally, add the following JavaScript code to your script.js file to make your work functional. This code handles various functions, even listeners, input handling, etc.
JAVASCRIPT
const logoImg = document.getElementById("logoImg")
// Change logo based on window size
window.addEventListener("resize", (e) => {
if(e.target.innerWidth <= 900) {
logoImg.src = "./img/logo-dark-header.png"
}else {
logoImg.src = "./img/logo-light-header.png"
}
})
const menuBtn = document.querySelector(".menu");
const links = document.querySelector(".links");
// Toggle navigation links visibility
const handleNavLinks = () => {
links.classList.toggle("active")
}
menuBtn.addEventListener("click", handleNavLinks);
// Close navigation links when clicking outside
document.addEventListener("click", (e) => {
if(!menuBtn.contains(e.target) && !links.contains(e.target)) {
links.classList.remove("active");
}
});
// Initialize the slider
const slider = document.querySelector(".slider");
const leftBtn = document.querySelector(".left");
const rightBtn = document.querySelector(".right");
let currentIndex = 0;
// Function to update the slider position based on current index
const updateSlider = () => {
const slideWidth = slider.clientWidth;
slider.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
}
// Function to handle next and previous slide actions
const nextSlide = () => {
if(currentIndex < 3) {
currentIndex++;
updateSlider();
}
}
// Function to handle previous slide actions
const prevSlide = () => {
if(currentIndex > 0) {
currentIndex--;
updateSlider()
}
}
leftBtn.addEventListener("click", prevSlide);
rightBtn.addEventListener("click", nextSlide);
// Initialize the slider on page load
document.addEventListener("DOMContentLoaded", (e) => {
updateSlider();
//Change the current logo if window is less than 900
if(window.innerWidth <= 900) {
logoImg.src = "./img/logo-dark-header.png"
}else {
logoImg.src = "./img/logo-light-header.png"
}
});
// Scroll to top functionality
const scrollToTop = document.querySelector(".scroll-to-top");
const header = document.querySelector("header");
// Change header background on scroll
window.addEventListener("scroll", (e) => {
if(window.scrollY >= 700) {
scrollToTop.classList.add("active");
header.classList.add("active");
logoImg.src = "./img/logo-dark-header.png"
}else {
scrollToTop.classList.remove("active");
header.classList.remove("active");
}
})
Get Source Code Here
Conclusion and Final word
Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can create "a Complete Fitness Website Design Using HTML CSS & JavaScript". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS & JavaScript, its gonna be fun, trust me 😃.
Happy Coding Journey 🚀
0 Comments
We are happy to hear from you.