Scribd
Upload
3 views

Mini Project

This project outlines the development of a modern, feature-rich website aimed at enhancing user experience through innovative web design techniques. Key features include a responsive navigation menu, dynamic header effects, section-based navigation, and scroll animations, all designed to improve accessibility and usability. The project showcases the integration of JavaScript and CSS to create an engaging platform for users, highlighting the transformative potential of web development.

Uploaded by

palsaksham305
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Mini Project

This project outlines the development of a modern, feature-rich website aimed at enhancing user experience through innovative web design techniques. Key features include a responsive navigation menu, dynamic header effects, section-based navigation, and scroll animations, all designed to improve accessibility and usability. The project showcases the integration of JavaScript and CSS to create an engaging platform for users, highlighting the transformative potential of web development.

Uploaded by

palsaksham305
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 41

Introduction to the Project

The digital landscape has revolutionized the way businesses operate, enabling
them to connect with customers globally. In this project, we present a modern,
feature-rich website designed to provide a seamless user experience with
interactive navigation, dynamic visual effects, and responsive design principles.
The goal of this project is to demonstrate the integration of innovative web
development techniques to create a functional and aesthetically appealing
website.

Key Features of the Website

1. Responsive Navigation Menu


The website features a dynamic navigation menu that can be toggled on and off,
providing users with a smooth browsing experience. The menu is designed to
adapt to mobile screens, allowing for an optimal user interface across all
devices.

2. Dynamic Header and Scroll-to-Top Button


The header changes its background when the user scrolls, improving visibility
and focus. Additionally, a scroll-to-top button becomes visible after scrolling
down, allowing users to quickly return to the top of the page.

3. Section-Based Navigation
Each section of the website is linked to the navigation menu. As users scroll
through the site, the corresponding navigation link is highlighted, helping them
keep track of their current location on the page.

4. Scroll Animations
To create a visually captivating experience, the website incorporates animations
using the ScrollReveal library. Elements like images, text, and headers
gracefully appear as users scroll, enhancing the overall design.

5. Accessibility and User Experience


The website is crafted with a focus on user accessibility, ensuring that all
features are easy to use and intuitive. The use of clean code and a structured
layout enhances performance and usability.

This project represents the fusion of creativity and technical expertise to


develop a cutting-edge website. By leveraging modern web technologies,
such as JavaScript for interactivity and CSS for styling, the website offers
a
dynamic and engaging platform for users. This approach not only ensures a
delightful user experience but also highlights the potential of web
development in transforming digital interactions.

--- HTMLCODE ---


Explain Every Thing in this Code in Brief
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-


scale=1.0">

<!--=============== FAVICON ===============-->

<link rel="shortcut icon" href="assets/img/favicon.png"


type="image/x-icon">

<!--=============== REMIX ICONS ===============-->

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
rel="stylesheet">

<!--=============== CSS LINK ===============-->

<link rel="stylesheet" href="./home.css">

<title>product Site</title>

</head>

<body>

<!--=============== HEADER ===============-->

<header class="header" id="header">

<nav class="nav container">

<a href="#" class="nav__logo">

<img src="assets/img/logo.png" alt="">

</a>

<!-- First Div -->

<div class="nav__menu" id="nav-menu">

<ul class="nav__list">

<li class="nav__item">

<a href="#home" class="nav__link active-link">


<b>Home</b></a>

</li>

<li class="nav__item">

<a href="#specs" class="nav__link"><b>Product


Detail</b></a>

</li>
<li class="nav__item">

<a href="#case" class="nav__link"> <b>Case</b></a>

</li>

<li class="nav__item">

<a href="#products" class="nav__link"><b>Colour</b></a>

</li>

</ul>

<div class="nav__close" id="nav-close">

<i class="ri-close-line"></i>

</div>

</div>

<div class="nav__toggle" id="nav-toggle">

<i class="ri-function-line"></i>

</div>

</nav>

</header>

<main class="main">

<!--=============== HOME ===============-->

<section class="home section" id="home">

<div class="home__container container grid">

<div>
<img src="img/head.jpg" alt="" class="home__img">

</div>

<div class="home__data">

<div class="home__header">

<h1 class="home__title">Forest</h1>

<h2 class="home__subtitle">Watch</h2>

</div>

<div class="home__footer">

<h3 class="home__title-description">About This Item</h3>

<p class="home__description">👑【 ERGONOMIC DOUBLE


BRIDGE DESIGN】TSAR BOMBA watch was born in the Sino-German Force
Lab.

Based on mechanical mechanics, innovative materials, and


precision manufacturing,

it integrates oriental aesthetics and strives to make


continuous breakthroughs in tech.

Adopts an ergonomic double bridge design. Each case has


undergone 202 processes to make the watch more fit the human wrist,
greatly enhance the matching experience

</p>

<a href="#" class="button button--flex">

<span class="button--flex">

<i class="ri-shopping-bag-line button__icon"></i></i>


Add to Bag

</span>

<span class="home__price">1899</span>

</a>
</div>

</div>

</div>

</section>

<!--=============== SPONSOR ===============-->

<section class="sponsor section">

<div class="sponsor__container container grid">

<img src="img/715J-vDY43L._SX569_.jpg" alt=""


class="sponsor__img">

<img src="img/71CenPnsRlL._SX569_.jpg" alt=""


class="sponsor__img">

<img src="img/71KjY-0caLL._SX569_.jpg" alt=""


class="sponsor__img">

<img src="img/71P8PLnn-nL._SX569_.jpg" alt=""


class="sponsor__img">

</div>

</section>

<!--=============== SPECS ===============-->

<section class="specs section grid" id="specs">

<h2 class="section__title section__title-gradient">Product Details


</h2>

<div class="specs__container container grid">

<div class="specs__content grid">

<div class="specs__data">

<i class="ri-bluetooth-line specs__icon"></i>


<h3 class="specs__title">Case Diameter</h3>

<span class="specs__subtitle">5.05 Centimetres</span>

</div>

<div class="specs__data">

<i class="ri-battery-charge-line specs__icon"></i>

<h3 class="specs__title">Band colour</h3>

<span class="specs__subtitle">Black</span>

</div>

<div class="specs__data">

<i class="ri-plug-line specs__icon"></i>

<h3 class="specs__title">Watch movement type</h3>

<span class="specs__subtitle">Japanese Quartz</span>

</div>

<div class="specs__data">

<i class="ri-mic-line specs__icon"></i>

<h3 class="specs__title">Item weight</h3>

<span class="specs__subtitle">126.3 <br> Grams</span>

</div>

</div>

<div>

<img src="img/71KHfvCrJYL._SX569_.jpg" alt=""


class="specs__img">
</div>

</div>

</section>

<!--=============== CASE ===============-->

<section class="case section grid" id="case">

<h2 class="section__title section__title-gradient">Case</h2>

<div class="case__container container grid">

<div>

<img src="assets/img/case.png" alt="" class="case__img">

</div>

<div class="case__data">

<p class="case__description">With a comfortable and


adaptable case so that you can

store it whenever you want, and keep your durability


forever.

</p>

<a href="#" class="button button--flex">

<i class="ri-information-line button__icon"></i> More info

</a>

</div>

</div>

</section>
<!--=============== DISCOUNT ===============-->

<section class="discount section">

<div class="discount__container container grid">

<div class="discount__animate">

<h2 class="discount__title">Immerse yourself in <br> your


music</h2>

<p class="discount__description">Get it now, up to 50%


off.</p>

<a href="#" class="button button--flex">

<i class="ri-shopping-bag-line button__icon"></i> Shop Now

</a>

</div>

<img src="assets/img/discount.png" alt=""


class="discount__img">

</div>

</section>

<!--=============== PRODUCTS ===============-->

<section class="products section" id="products">

<h2 class="section__title section__title-gradient products__line">

Choose <br> Your Style

</h2>

<div class="products__container container grid">

<article class="products__card">

<div class="products__content">
<img src="img/715J-vDY43L._SX569_.jpg" alt=""
class="products__img">

<h3 class="products__title">White</h3>

<span class="products__price">1899</span>

<button class="button button--flex products__button">

<i class="ri-shopping-bag-line button__icon"></i>

</button>

</div>

</article>

<article class="products__card">

<div class="products__content">

<img src="img/71CenPnsRlL._SX569_.jpg" alt=""


class="products__img">

<h3 class="products__title">Blue</h3>

<span class="products__price">1949</span>

<button class="button button--flex products__button">

<i class="ri-shopping-bag-line button__icon"></i>

</button>

</div>

</article>

<article class="products__card">

<div class="products__content">
<img src="img/71KjY-0caLL._SX569_.jpg" alt=""
class="products__img">

<h3 class="products__title">Orange Silver</h3>

<span class="products__price">1899</span>

<button class="button button--flex products__button">

<i class="ri-shopping-bag-line button__icon"></i>

</button>

</div>

</article>

<article class="products__card">

<div class="products__content">

<img src="img/71P8PLnn-nL._SX569_.jpg" alt=""


class="products__img">

<h3 class="products__title">Blue Silver</h3>

<span class="products__price">1899</span>

<button class="button button--flex products__button">

<i class="ri-shopping-bag-line button__icon"></i>

</button>

</div>

</article>

<article class="products__card">
<div class="products__content">

<img src="img/71vsUoTEYML._SX569_.jpg" alt=""


class="products__img">

<h3 class="products__title">Red Silver</h3>

<span class="products__price">1899</span>

<button class="button button--flex products__button">

<i class="ri-shopping-bag-line button__icon"></i>

</button>

</div>

</article>

</div>

</section>

</main>

<!--=============== FOOTER ===============-->

<footer class="footer section">

<div class="footer__container container grid">

<a href="#" class="footer__logo">

<img src="assets/img/logo.png" alt="">

</a>

<div class="footer__content">

<h3 class="footer__title">Products</h3>
<ul class="footer__links">

<li>

<a href="#" class="footer__link">Headphones</a>

</li>

<li>

<a href="#" class="footer__link">Earphones</a>

</li>

<li>

<a href="#" class="footer__link">Earbuds</a>

</li>

<li>

<a href="#" class="footer__link">Accesories</a>

</li>

</ul>

</div>

<div class="footer__content">

<h3 class="footer__title">Support</h3>

<ul class="footer__links">

<li>

<a href="#" class="footer__link">Product help</a>

</li>

<li>

<a href="#" class="footer__link">Register</a>


</li>

<li>

<a href="#" class="footer__link">Updates</a>

</li>

<li>

<a href="#" class="footer__link">Provides</a>

</li>

</ul>

</div>

<div class="footer__content">

<form action="" class="footer__form">

<input type="email" placeholder="Email"


class="footer__input">

<button class="button button--flex">

<i class="ri-send-plane-line button__icon"></i> Subscribe

</button>

</form>

<div class="footer__social">

<a href="" target="_blank" class="footer__social-link">

<i class="ri-facebook-fill"></i>

</a>

<a href="" target="_blank" class="footer__social-link">

<i class="ri-instagram-line"></i>

</a>
<a href="" target="_blank" class="footer__social-link">

<i class="ri-twitter-line"></i>

</a>

</div>

</div>

</div>

<p class="footer__copy">

<a href="" target="_blank" class="footer__copy-link">&#169;


Bharat Bazzar. All right reserved</a>

</p>

</footer>

<!--=============== SCROLL UP ===============-->

<a href="#" class="scrollup" id="scroll-up">

<i class="ri-arrow-up-s-line scrollup__icon"></i>

</a>

<!--=============== SCROLL REVEAL ===============-->

<script src="https://unpkg.com/scrollreveal"></script>

<!--=============== MAIN JS ===============-->

<script src="./home.js"></script>

</body>

</html>
This HTML code is a complete webpage structure that includes various
sections and elements commonly used in modern web design. Here's a brief
explanation of each part:

1. DOCTYPE Declaration:
html
Copy code
<!DOCTYPE html>

 Specifies the document type and version of HTML being used. <!DOCTYPE
html> indicates that the page is using HTML5.

2. <html> Tag:
html
Copy code
<html lang="en">

 Defines the root element of the HTML document and specifies the
language used (lang="en" for English).

3. <head> Section:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">

<!-- Favicon -->


<link rel="shortcut icon"
href="assets/img/favicon.png" type="image/x-icon">

<!-- Remix Icons -->


<link
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remix
icon.css" rel="stylesheet">
<!-- CSS Link -->
<link rel="stylesheet" href="./home.css">

<title>Product Site</title>
</head>

 <meta> tags define character encoding and viewport settings for responsive design.
 Favicon link for the browser icon.
 Remix Icons stylesheet for icon usage throughout the site.
 CSS link to the site's main stylesheet.
 <title> defines the title of the webpage.

4. <body> Section:
html
Copy code
<body>
<!-- Header -->
<header class="header" id="header">
...
</header>

<!-- Main Content -->


<main class="main">
...
</main>

<!-- Footer -->


<footer class="footer section">
...
</footer>

<!-- Scroll Up Button -->


<a href="#" class="scrollup" id="scroll-up">
...
</a>

<!-- Scripts -->


<script
src="https://unpkg.com/scrollreveal"></script>
<script src="./home.js"></script>
</body>

 Header: Contains the navigation menu, logo, and toggle button for the
menu.
 Main: The main content of the page including various sections like
Home, Specs, Case, Discount, and Products.
 Footer: Contains links to various product categories, support links,
a subscription form, and social media icons.
 Scroll Up Button: A button that allows users to quickly scroll to the top
of the page.
 Scripts: External scripts for scroll reveal animations and custom
JavaScript.

5. Sections in the Main Content:


 Home: Contains an image and a description of the product.
 Specs: Lists technical details about the product.
 Case: Information about the product case.
 Discount: A promotional section with an image and discount offer.
 Products: A grid of product options with images, titles, prices, and a
button to add them to the shopping bag.

6. Footer:
 Contains links to different sections (Products, Support), a subscription
form, and social media icons.
 <p class="footer copy">: Displays copyright information.

7. Additional Scripts:
 Scroll Reveal: For animating elements on scroll.
 Custom JavaScript: For interactivity such as adding items to the
shopping bag.
--- CSS CODE ---

/*=============== GOOGLE FONTS ===============*/


@import url("https://fonts.googleapis.com/css2?
family=Poppins:wght@400;500;600&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
--header-height: 3rem;
/*========== Colors ==========*/
--hue-color: 206;
--black-color: hsl(var(--hue-color), 4%, 4%);
--black-color-alt: hsl(var(--hue-color), 4%, 8%);
--title-color: hsl(var(--hue-color), 4%, 95%);
--text-color: hsl(var(--hue-color), 4%, 75%);
--text-color-light: hsl(var(--hue-color), 4%, 65%);
--white-color: #FFF;
--body-color: hsl(var(--hue-color), 4%, 6%);
--container-color: hsl(var(--hue-color), 4%, 10%);
--text-gradient: linear-gradient(hsl(var(--hue-color), 4%, 24%), hsl(var(--hue-color), 4%, 8%));
--scroll-thumb-color: hsl(var(--hue-color), 4%, 16%);
--scroll-thumb-color-alt: hsl(var(--hue-color), 4%, 20%);
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--biggest-font-size: 5rem;
--bigger-font-size: 3.5rem;
--big-font-size: 2.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1.125rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
--text-line-height: 2rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== Margenes Bottom ==========*/
--mb-0-5: .5rem;
--mb-0-75: .75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}

@media screen and (min-width: 968px) {


:root {
--biggest-font-size: 7.5rem;
--bigger-font-size: 4.5rem;
--big-font-size: 4rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}

/*=============== BASE ===============*/


*{
box-sizing: border-box;
padding: 0;
margin: 0;
}

html {
scroll-behavior: smooth;
}

body {
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}

h1, h2, h3 {
color: var(--title-color);
}

ul {
list-style: none;
}

a{
text-decoration: none;
}

button,
input {
border: none;
outline: none;
}

button {
cursor: pointer;
}

img {
max-width: 100%;
height: auto;
}
/*=============== REUSABLE CSS CLASSES ===============*/
.section {
padding: 4rem 0 2rem;
}

.section__title {
font-size: var(--bigger-font-size);
text-align: center;
margin-bottom: var(--mb-2-5);
}

.section__title-gradient {
background: var(--text-gradient);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}

/*=============== LAYOUT ===============*/


.main {
overflow: hidden;
}

.container {
max-width: 968px;
margin-left: var(--mb-1-5);
margin-right: var(--mb-1-5);
}

.grid {
display: grid;
}

/*=============== HEADER ===============*/


.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background: transparent;
}

/*=============== NAV ===============*/


.nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}

.nav__logo {
display: flex;
width: 1.5rem;
}

.nav__toggle {
font-size: 1.2rem;
color: var(--white-color);
cursor: pointer;
}

@media screen and (max-width: 767px) {


.nav__menu {
position: fixed;
background-color: var(--body-color);
top: -100%;
left: 0;
width: 100%;
padding: 4rem 0 3rem;
transition: .4s;
}
}

.nav__list {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 1rem;
}

.nav__link {
color: var(--white-color);
font-size: var(--h2-font-size);
text-transform: uppercase;
font-weight: var(--font-semi-bold);
background: var(--text-gradient);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
transition: .4s;
}

.nav__link:hover {
background: var(--white-color);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}

.nav__close {
position: absolute;
font-size: 1.5rem;
top: 1rem;
right: 1rem;
color: var(--white-color);
cursor: pointer;
}
/* show menu */
.show-menu {
top: 0;
}

/* Change background header */


.scroll-header {
background-color: var(--body-color);
}

/* Active link */
.active-link {
background: var(--white-color);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}

/*=============== HOME ===============*/


.home__img {
width: 250px;
position: absolute;
top: -16rem;
right: 1.5rem;
}

.home__data {
padding-top: 5rem;
}

.home__header {
position: relative;
}

.home__title {
position: absolute;
top: -4rem;
left: 1rem;
line-height: 6rem;
font-size: var(--biggest-font-size);
background: var(--text-gradient);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}

.home__subtitle {
font-size: var(--big-font-size);
margin-bottom: var(--mb-2-5);
}

.home__title-description {
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
margin-bottom: var(--mb-1);
}

.home__description {
margin-bottom: var(--mb-2-5);
line-height: var(--text-line-height);
}

.home__price {
font-size: var(--h3-font-size);
font-weight: var(--font-semi-bold);
margin-left: var(--mb-0-75);
}

/*=============== BUTTONS ===============*/


.button {
display: inline-block;
background-color: var(--black-color);
color: var(--white-color);
padding: 1rem 1.25rem;
border-radius: .5rem;
transition: .3s;
}

.button:hover {
background-color: var(--black-color-alt);
}

.button__icon {
font-size: 1.2rem;
}

.button--flex {
display: inline-flex;
align-items: center;
column-gap: .75rem;
}

/*=============== SPONSOR ===============*/


.sponsor__img {
width: 90px;
}

.sponsor__container {
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
row-gap: 5rem;
justify-items: center;
align-items: center;
}

/*=============== SPECS ===============*/


.specs__container {
position: relative;
}

.specs__content {
row-gap: 1.5rem;
}

.specs__data {
display: grid;
row-gap: .25rem;
}

.specs__icon {
font-size: 1.2rem;
color: var(--white-color);
}

.specs__title {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}

.specs__subtitle {
font-size: var(--smaller-font-size);
}

.specs__data:nth-child(1), .specs__data:nth-child(4) {
margin-left: 1.5rem;
}

.specs__img {
width: 250px;
position: absolute;
top: 2rem;
right: -4rem;
}

/*=============== CASE ===============*/


.case__container {
position: relative;
grid-template-columns: repeat(2, 1fr);
}

.case__data {
padding: 5rem 0 3rem;
}

.case__img {
width: 250px;
position: absolute;
left: -7rem;
}

.case__description {
margin-bottom: var(--mb-1-5);
line-height: var(--text-line-height);
}

/*=============== DISCOUNT ===============*/


.discount__container {
position: relative;
background-color: var(--container-color);
padding: 2rem 1.5rem;
border-radius: .75rem;
}

.discount__title {
font-size: var(--h3-font-size);
margin-bottom: var(--mb-0-75);
}

.discount__description {
margin-bottom: var(--mb-1);
}

.discount__img {
width: 300px;
position: absolute;
top: 4rem;
right: -11rem;
}

/*=============== PRODUCTS ===============*/


.products__line {
line-height: 4rem;
}

.products__container {
grid-template-columns: repeat(2, 1fr);
gap: 5rem 1.5rem;
padding-top: 3rem;
}

.products__card {
position: relative;
height: 132px;
background-color: var(--container-color);
padding: .75rem;
border-radius: .5rem;
display: grid;
}

.products__img {
width: 80px;
position: absolute;
inset: 0;
margin-right: auto;
margin-left: auto;
top: -3rem;
}

.products__content {
align-self: flex-end;
}
.products__title, .products__price {
font-size: var(--small-font-size);
}

.products__price {
font-weight: var(--font-semi-bold);
}

.products__button {
position: absolute;
right: .5rem;
bottom: .5rem;
padding: .5rem;
border-radius: .35rem;
}

/*=============== FOOTER ===============*/


.footer__container {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
row-gap: 2rem;
}

.footer__logo {
width: 2rem;
}

.footer__title {
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
margin-bottom: var(--mb-1);
}

.footer__links {
display: flex;
flex-direction: column;
row-gap: .5rem;
}

.footer__link {
color: var(--text-color);
}

.footer__link:hover {
color: var(--white-color);
}

.footer__form {
display: flex;
column-gap: .5rem;
background-color: var(--container-color);
padding: .5rem .75rem;
border-radius: .5rem;
margin-bottom: var(--mb-2);
}
.footer__input {
background-color: var(--container-color);
width: 90%;
color: var(--white-color);
}

.footer__input::placeholder {
color: var(--text-color);
font-size: var(--normal-font-size);
font-family: var(--body-font);
}

.footer__social {
display: flex;
column-gap: 1.25rem;
}

.footer__social-link {
display: inline-flex;
color: var(--white-color);
background-color: var(--container-color);
padding: .5rem;
border-radius: .25rem;
font-size: 1rem;
}

.footer__social-link:hover {
background-color: var(--black-color);
}

.footer__copy {
margin-top: 5rem;
text-align: center;
}

.footer__copy-link {
font-size: var(--smaller-font-size);
color: var(--text-color-light);
}

/*=============== SCROLL UP ===============*/


.scrollup {
position: fixed;
right: 1rem;
bottom: -20%;
display: flex;
background-color: var(--container-color);
border-radius: .25rem;
padding: .45rem;
opacity: 9;
z-index: var(--z-tooltip);
transition: .4s;
}
.scrollup:hover {
background-color: var(--black-color);
opacity: 1;
}

.scrollup__icon {
color: var(--white-color);
font-size: 1.35rem;
}

/* Show Scroll Up*/


.show-scroll {
bottom: 5rem;
}

/*=============== SCROLL BAR ===============*/


::-webkit-scrollbar {
width: .60rem;
border-radius: .5rem;
}

::-webkit-scrollbar-thumb {
background-color: var(--scroll-thumb-color);
border-radius: .5rem;
}

::-webkit-scrollbar-thumb:hover {
background-color: var(--scroll-thumb-color-alt);
}

/*=============== MEDIA QUERIES ===============*/


/* For small devices */
@media screen and (max-width: 340px) {
.container {
margin-left: var(--mb-1);
margin-right: var(--mb-1);
}
.section__title {
font-size: var(--big-font-size);
}
.home__img {
width: 200px;
top: -13rem;
}
.home__title {
top: -4rem;
font-size: var(--bigger-font-size);
}
.home__data {
padding-top: 1rem;
}
.home__description {
font-size: var(--small-font-size);
}
.specs__img {
width: 200px;
}
.case__container {
grid-template-columns: .6fr 1fr;
}
.case__img {
width: 220px;
top: -2rem;
left: -9rem;
}
.case__data {
padding: 0;
}
.products__container {
grid-template-columns: 142px;
justify-content: center;
}
}

/* For medium devices */


@media screen and (min-width: 576px) {
.home__container {
grid-template-columns: .8fr 1fr;
}
.home__data {
padding-top: 2rem;
}
.home__img {
top: -7rem;
left: 0;
}
.specs__img {
position: initial;
}
.specs__container {
grid-template-columns: repeat(2, 1fr);
justify-items: center;
align-items: center;
}
.case__img {
position: initial;
}
.case__data {
padding: 0;
}
.case__container {
grid-template-columns: max-content 250px;
justify-content: center;
align-items: center;
column-gap: 2rem;
}
.discount__img {
position: initial;
}
.discount__container {
grid-template-columns: repeat(2, 1fr);
justify-items: center;
align-items: center;
}
.products__container {
grid-template-columns: repeat(3, 142px);
justify-content: center;
}
}

@media screen and (min-width: 767px) {


body {
margin: 0;
}
.section {
padding: 6rem 0 2rem;
}
.nav {
height: calc(var(--header-height) + 1.5rem);
}
.nav__logo {
width: 2rem;
}
.nav__list {
flex-direction: row;
column-gap: 3.5rem;
}
.nav__link {
font-size: var(--normal-font-size);
text-transform: initial;
}
.nav__toggle, .nav__close {
display: none;
}
.home__container {
position: relative;
grid-template-columns: repeat(2, 1fr);
}
.home__img {
top: -9rem;
left: 4rem;
}
.home__data {
padding-top: 8rem;
}
.specs__img {
width: 300px;
}
.case__container {
column-gap: 5rem;
}
.case__img {
width: 300px;
}
.case__description {
margin-bottom: var(--mb-2);
}
.discount__container {
grid-template-columns: 250px max-content;
justify-content: center;
column-gap: 5rem;
padding: 3rem 0;
}
.discount__title {
font-size: var(--h2-font-size);
margin-bottom: var(--mb-1);
}
.discount__description {
margin-bottom: var(--mb-2);
}
.products__container {
grid-template-columns: repeat(3, 162px);
gap: 6rem 3rem;
padding-top: 5rem;
}
.products__card {
height: 152px;
padding: .85rem;
}
.products__img {
width: 95px;
}
.footer__container {
grid-template-columns: .4fr .7fr .7fr 1fr;
}
}

/* For large devices */


@media screen and (min-width: 1024px) {
.container {
margin-left: auto;
margin-right: auto;
}
.home__img {
width: 300px;
top: -15rem;
}
.home__title {
top: -5rem;
left: 3.5rem;
}
.home__description {
padding-right: 5rem;
}
.sponsor__img {
width: 100px;
}
.discount__img {
width: 350px;
}
.footer__container {
padding-top: 3rem;
}
.footer__copy {
margin-top: 9rem;
}
}
This CSS file is a well-organized and detailed stylesheet for a modern,
responsive website. Here’s a detailed explanation of each section:

1. Google Fonts
 The @import rule loads the "Poppins" font family from Google Fonts
in different font weights (400, 500, 600).

2. Variables (CSS Custom Properties)


 The :root defines reusable variables to maintain design consistency:
o Header Height: --header-height controls the top margin
for sections to accommodate the header.
o Colors:
 --hue-color sets the base hue for HSL colors.
 Variants like --black-color, --text-color, and
gradients like --text-gradient ensure harmonious
color schemes.
o Typography:
 --body-font is the primary font, "Poppins."
 Font sizes range from --biggest-font-size
(large headings) to --smaller-font-size (small
text).
 Line height (--text-line-height) enhances
readability.
o Font Weights: --font-medium (500) and --font-
semi- bold (600) for text emphasis.
o Margins (--mb-*): Commonly used vertical spacing for margins
or padding.
o z-index: Controls layering for elements like tooltips or fixed
headers.

3. Media Queries
 Breakpoints:
o Adjust styles for different screen sizes.
o Increase font sizes and padding for larger devices, while
optimizing layouts for smaller screens.

4. Base Styles
 Reset defaults (padding, margin) and set global styles:
o * { box-sizing: border-box; } ensures
padding doesn’t affect element dimensions.
o body uses custom colors and fonts with smooth
scrolling (scroll-behavior).
o Links, buttons, and inputs are styled with no default decorations.

5. Reusable CSS Classes


 .section provides consistent padding for sections.
 .section title and .section title-gradient
style section headings, including gradient text.

6. Layout
 .main ensures overflow content is hidden.
 .container centers and limits content width for readability.
 .grid applies grid layout, crucial for responsive designs.

7. Header
 Fixed header (position: fixed) at the top of the page.
 Adjusts background dynamically based on scroll (.scroll-header).

8. Navigation
 .nav flexibly arranges the logo, toggle button, and menu.
 Includes styles for hover effects and animations to show/hide menus.
 Responsive design ensures the menu adapts to mobile screens.

9. Home Section
 .home img positions an image creatively using absolute positioning.
 .home title and .home subtitle style headings
with gradients for impact.

10. Buttons
 .button uses rounded corners, padding, and hover effects
for interactivity.

11. Sponsor, Specs, Case, and Discount Sections


 Grid layouts ensure flexibility in arranging content.
 Images and descriptions are positioned dynamically for an engaging
layout.
 .discount container uses a rounded rectangle design
with background and padding.

12. Product Section


 .products card organizes products in a grid with
responsive sizing.
 Buttons are positioned relative to the card for functionality.

13. Footer
 Grid layout organizes links, forms, and social media icons.
 .footer form styles subscription forms for a clean and
minimalistic look.

14. Scroll Features


 .scrollup button appears after scrolling, providing quick access to
the top.
 Smooth transitions and hover effects enhance user experience.

15. Scrollbar
 Customizes the scrollbar for better aesthetics with ::-webkit-
scrollbar.
 16. Media Queries
 Tailor layouts for:
o Small Devices (<340px): Adjust grid columns, reduce image sizes.
o Medium Devices (576px+): Rearrange grids, ensure better
spacing.
o Large Devices (1024px+): Increase margins, improve spacing and
image sizes.
--- JAVA CODE ---

/*=============== SHOW MENU ===============*/


const navMenu = document.getElementById('nav-menu'),
navToggle = document.getElementById('nav-toggle'),
navClose = document.getElementById('nav-close')

/*===== MENU SHOW =====*/


/* Validate if constant exists */
if(navToggle){
navToggle.addEventListener('click', () =>{
navMenu.classList.add('show-menu')
})
}

/*===== MENU HIDDEN =====*/


/* Validate if constant exists */
if(navClose){
navClose.addEventListener('click', () =>{
navMenu.classList.remove('show-menu')
})
}

/*=============== REMOVE MENU MOBILE ===============*/


const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
const navMenu = document.getElementById('nav-menu')
// When we click on each nav__link, we remove the show-menu class
navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))

/*=============== CHANGE BACKGROUND HEADER ===============*/


function scrollHeader(){
const header = document.getElementById('header')
// When the scroll is greater than 50 viewport height, add the scroll-header class to the header
tag
if(this.scrollY >= 50) header.classList.add('scroll-header'); else
header.classList.remove('scroll-header')
}
window.addEventListener('scroll', scrollHeader)

/*=============== SHOW SCROLL UP ===============*/


function scrollUp(){
const scrollUp = document.getElementById('scroll-up');
// When the scroll is higher than 200 viewport height, add the show-scroll class to the a tag
with the scroll-top class
if(this.scrollY >= 200) scrollUp.classList.add('show-scroll'); else
scrollUp.classList.remove('show-scroll')
}
window.addEventListener('scroll', scrollUp)

/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/


const sections = document.querySelectorAll('section[id]')

function scrollActive(){
const scrollY = window.pageYOffset

sections.forEach(current =>{
const sectionHeight = current.offsetHeight
const sectionTop = current.offsetTop - 50;
sectionId = current.getAttribute('id')

if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){


document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-
link')
}else{
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-
link')
}
})
}
window.addEventListener('scroll', scrollActive)

/*=============== SCROLL REVEAL ANIMATION ===============*/


const sr = ScrollReveal({
distance: '60px',
duration: 2500,
delay: 400,
// reset: true
})

sr.reveal(`.home__header, .section__title`,{delay: 600})


sr.reveal(`.home__footer`,{delay: 700})
sr.reveal(`.home__img`,{delay: 900, origin: 'top'})

sr.reveal(`.sponsor__img, .products__card, .footer__logo, .footer__content, .footer__copy`,


{origin: 'top', interval: 100})
sr.reveal(`.specs__data, .discount__animate`,{origin: 'left', interval: 100})
sr.reveal(`.specs__img, .discount__img`,{origin: 'right'})
sr.reveal(`.case__img`,{origin: 'top'})
sr.reveal(`.case__data`)
This JavaScript code manages interactive functionality for a webpage. Here's a
detailed breakdown of its features:

1. SHOW MENU
 Variables:
o navMenu: Refers to the navigation menu.
o navToggle: Button or element used to open the menu.
o navClose: Button or element used to close the menu.
 Functionality:
o Adds a click event listener to navToggle. When clicked,
the show-menu class is added to the navMenu, making it
visible.
o Adds a click event listener to navClose. When clicked,
the show-menu class is removed, hiding the menu.

2. REMOVE MENU MOBILE


 Variables:
o navLink: All elements with the .nav link class.
 Functionality:
o When any nav link is clicked, the linkAction function
removes the show-menu class from the navMenu, collapsing
the menu.

3. CHANGE BACKGROUND HEADER


 Functionality:
o Detects scrolling on the page.
o If the vertical scroll exceeds 50px, it adds the scroll-
header class to the header for styling (like a background color
or shadow).
o If less than 50px, it removes the scroll-header class.

4. SHOW SCROLL UP
 Functionality:
o Detects when the scroll exceeds 200px.
o Adds the show-scroll class to an element (e.g., a scroll-to-
top button) to make it visible.
o Removes the show-scroll class when scrolling above 200px.

5. SCROLL SECTIONS ACTIVE LINK


 Variables:
o sections: All sections with an id attribute.
 Functionality:
o Tracks the current section the user is viewing based on their scroll
position.
o Highlights the corresponding navigation link by adding
the active-link class.
o Removes the active-link class when the section is out
of view.

6. SCROLL REVEAL ANIMATION


 ScrollReveal Initialization:
o A library called ScrollReveal is used to animate elements as they
enter the viewport.
o The configuration specifies:
 distance: The distance the element moves during the
animation.
 duration: The time (in milliseconds) the animation takes.
 delay: Delay before the animation starts.
 reset: (commented out) Determines if the animation resets
when re-entering the viewport.
 Animations:
o Targets different elements on the page for animations based on
classes and origins (e.g., left, right, top).
o Staggered delays and intervals are used to create cascading
animations.

Key Features:
1. Navigation menu:
o Toggles visibility using classes.
o Automatically hides on link click (for better UX on mobile).
2. Dynamic header:
o Changes appearance when scrolling for improved design and
clarity.
3. Scroll-to-top button:
o Appears when the user scrolls down for easy navigation.
4. Active section highlighting:
o Helps users know which section they are viewing by highlighting
the corresponding navigation link.
5. Scroll animations:
o Adds a modern, visually appealing animation effect as elements
enter the viewport.

This script improves interactivity, navigation, and design for the webpage,
making it user-friendly and visually engaging.

You might also like