Modern Hoodie Website Using HTML CSS & JavaScript
Modern Hoodie Website Using HTML CSS & JavaScript
Modern Hoodie Website Using HTML CSS & JavaScript
Overview
For this project, we are creating a premium quality landing page for a winter hoodie that will feature:
- An animated navigation bar with a sleek, modern design
- A hero section that utilizes the full glassmorphism design trend
- Bold layering of winter-themed typography
- Floating glass-style information panels
- An animated mobile menu that includes smooth transitions
- A responsive design (platform independent)
- Integration with Remix Icons
If you are a hoodie brand, clothing store, or retailer selling winter fashion collections, this landing page design may provide excellent inspiration for your eCommerce product pages or Hero Section UI.
Let’s get started breaking this down step-by-step 👇
📁 Project Structure
Before jumping into the project, create the following structure:
animated-login-form/
│
├── index.html
├── style.css
├── script.js
└── images/
├── bg.png
├── logo.png
└── hoodie.png
🧱 Step 1: Importing Fonts, Remix Icons & Theme Variables
First we need to import four premium quality Google Fonts for our web design and define the global colours, typography and glass effects theme variables.
CSS:
:root {
–primary-color: #d6f0f5;
–secondry-color: #ffd600;
–glass-morphism: rgba(70, 125, 131, 0.1);
–btn-morphism: rgba(70, 125, 131, 0.4);
–h1-font: “Agbalumo”, system-ui;
–h3-font: “Inspiration”, cursive;
–hg-font: “Pathway Gothic One”, sans-serif;
–body-font: “Stack Sans Text”, sans-serif;
}
This will make the overall design easy to manage and perfectly consistent throughout all pages of the site.
🧱 Step 2: Global Reset + Frosted Background
In Step Two, we reset all default styles for browsers and apply a smooth frosted background effect to give a winter season aesthetic to the hoodie.
CSS:
body {
font-family: var(–body-font);
background: url(bg.png) center/cover no-repeat;
color: var(–primary-color);
overflow: hidden;
}
This gives a very premium quality look and feel of winter fashion.
🧱 Step 3: Responsive Animated Navbar
The navigation bar for this project will consist of:
- Logo
- Search Icon
- Cart Icon
- Animated Hamburger Icon
- Stagger Fade Navigation Items
HTML:
<nav class=”navbar”>
<div class=”navbar__logo”>
<img src=”logo.png” alt=”logo”>
</div>
<ul class=”navbar__menu” id=”navbar__menu-links”>
<li class=”navbar__menu-item”><a href=”#”>Home</a></li>
<li class=”navbar__menu-item”><a href=”#”>About</a></li>
<li class=”navbar__menu-item”><a href=”#”>Hoodies</a></li>
<li class=”navbar__menu-item”><a href=”#”>Collection</a></li>
<li class=”navbar__menu-item”><a href=”#”>Contact</a></li>
</ul>
CSS:
menuIcon.addEventListener(‘click’, () => {
navLinks.classList.toggle(‘open’);
if (navLinks.classList.contains(‘open’)) {
menuIconChild.classList.replace(‘ri-menu-4-fill’,’ri-close-large-line’);
menuItems.forEach((item, index) => {
setTimeout(() => item.classList.add(‘show’), index * 100);
});
} else {
menuIconChild.classList.replace(‘ri-close-large-line’,’ri-menu-4-fill’);
menuItems.forEach(item => item.classList.remove(‘show’));
}
});
When the user hovers over each item on the navigation bar, it will fade in with a smooth downward animation.
🧱 Step 4: Hero Section with a 3D Layered Textand a Beautiful Main Hoodie
The hero section contains:
- A very stylish handwritten cursive winter tagline,
- An extremely bold stretched HOODIE title,
- The main hoodie image,
- Perfect z-index at the right spot for layering, and
- Glassmorphism cards behind the main hoodie image.
HTML:
<div class=”hero__text”>
<h4>Winter Special</h4>
<h1>HOODIE</h1>
</div>
<div class=”hero__image”>
<img src=”hoodie.png” alt=”hoodie”>
</div>
CSS:
.hero__text h1 {
transform: scale(1, 1.5);
letter-spacing: 5px;
}
The way the typography is laid out also gives off a high-end luxury feel to the hoodie.
🧱 Step 5: Floating Glassmorphism Info Panels
Behind the hoodie are two floating frosted information panels that list the following features:
- Qualitiy of Material
- Comfort Level
- Durability
- Quality Stitching
CSS:
.info__box {
width: 650px;
background: var(–glass-morphism);
backdrop-filter: blur(20px);
border-radius: 15px;
border: 1px solid var(–primary-color);
padding: 30px 60px;
position: absolute;
}
.info__box.left { left: -1%; bottom: 30%; }
.info__box.right { right: -1%; top: 30%; }
A great way to present something new and classy!
🧱 Step 6: Footer with Contact, Order, and Social Media Icons
The footer contains:
- A contact number
- ORDER NOW button
- Shopping cart icon
- Glassmorphism social media icons
- Hover interaction. HTML and Hover Glow Effects are used.
HTML:
<div class=”orderBox”>
<div class=”orderIcon”><i class=”ri-shopping-cart-2-line”></i></div>
<button class=”orderBtn”>ORDER NOW!</button>
</div>
Hover Glow Effect:
.orderBox:hover .orderIcon,
.orderBox:hover .orderBtn {
border-color: #ffc800;
transform: translateY(-2px);
}
This provides a premium winter look!
✨ Final Result - What you've built!
- A high-end animated hoodie web page
- Fully responsive mobile navigation systems
- A glassmorphism hero section styled for winter
- New extreme stretched HOODIE typeface
- Two floating frosted informational boxes
- A frosted nav bar with animations
- A section for ordering and social media with neon flashes on hover.
- Great for winter brands, clothing sellers, eCommerce stores, showcasing products, etc!
Design Synth
Welcome to Design Synth! Enter the world of web design, where art meets code. Find awesome designs, practice new techniques, and churn out stunning digital experiences that excite and engage an audience.
Popular Posts
Explore Topics
- Card Design (4)
- Carousel (2)
- CSS and HTML (10)
- Design Synth (11)
- Form Designs (1)
- GSAP (4)
- Header Design (8)
- Hover Effect (4)
- JavaScript (9)
- Navbar Designs (4)
- Parallax (1)
- Slider Designs (2)
- Template Designs (3)
- WordPress (1)
Tag Clouds
Overview
For this project, we are creating a premium quality landing page for a winter hoodie that will feature:
- An animated navigation bar with a sleek, modern design
- A hero section that utilizes the full glassmorphism design trend
- Bold layering of winter-themed typography
- Floating glass-style information panels
- An animated mobile menu that includes smooth transitions
- A responsive design (platform independent)
- Integration with Remix Icons
If you are a hoodie brand, clothing store, or retailer selling winter fashion collections, this landing page design may provide excellent inspiration for your eCommerce product pages or Hero Section UI.
Let’s get started breaking this down step-by-step 👇
📁 Project Structure
Before jumping into the project, create the following structure:
animated-login-form/
│
├── index.html
├── style.css
├── script.js
└── images/
├── bg.png
├── logo.png
└── hoodie.png
🧱 Step 1: Importing Fonts, Remix Icons & Theme Variables
First we need to import four premium quality Google Fonts for our web design and define the global colours, typography and glass effects theme variables.
CSS:
:root {
–primary-color: #d6f0f5;
–secondry-color: #ffd600;
–glass-morphism: rgba(70, 125, 131, 0.1);
–btn-morphism: rgba(70, 125, 131, 0.4);
–h1-font: “Agbalumo”, system-ui;
–h3-font: “Inspiration”, cursive;
–hg-font: “Pathway Gothic One”, sans-serif;
–body-font: “Stack Sans Text”, sans-serif;
}
This will make the overall design easy to manage and perfectly consistent throughout all pages of the site.
🧱 Step 2: Global Reset + Frosted Background
In Step Two, we reset all default styles for browsers and apply a smooth frosted background effect to give a winter season aesthetic to the hoodie.
CSS:
body {
font-family: var(–body-font);
background: url(bg.png) center/cover no-repeat;
color: var(–primary-color);
overflow: hidden;
}
This gives a very premium quality look and feel of winter fashion.
🧱 Step 3: Responsive Animated Navbar
The navigation bar for this project will consist of:
- Logo
- Search Icon
- Cart Icon
- Animated Hamburger Icon
- Stagger Fade Navigation Items
HTML:
<nav class=”navbar”>
<div class=”navbar__logo”>
<img src=”logo.png” alt=”logo”>
</div>
<ul class=”navbar__menu” id=”navbar__menu-links”>
<li class=”navbar__menu-item”><a href=”#”>Home</a></li>
<li class=”navbar__menu-item”><a href=”#”>About</a></li>
<li class=”navbar__menu-item”><a href=”#”>Hoodies</a></li>
<li class=”navbar__menu-item”><a href=”#”>Collection</a></li>
<li class=”navbar__menu-item”><a href=”#”>Contact</a></li>
</ul>
CSS:
menuIcon.addEventListener(‘click’, () => {
navLinks.classList.toggle(‘open’);
if (navLinks.classList.contains(‘open’)) {
menuIconChild.classList.replace(‘ri-menu-4-fill’,’ri-close-large-line’);
menuItems.forEach((item, index) => {
setTimeout(() => item.classList.add(‘show’), index * 100);
});
} else {
menuIconChild.classList.replace(‘ri-close-large-line’,’ri-menu-4-fill’);
menuItems.forEach(item => item.classList.remove(‘show’));
}
});
When the user hovers over each item on the navigation bar, it will fade in with a smooth downward animation.
🧱 Step 4: Hero Section with a 3D Layered Textand a Beautiful Main Hoodie
The hero section contains:
- A very stylish handwritten cursive winter tagline,
- An extremely bold stretched HOODIE title,
- The main hoodie image,
- Perfect z-index at the right spot for layering, and
- Glassmorphism cards behind the main hoodie image.
HTML:
<div class=”hero__text”>
<h4>Winter Special</h4>
<h1>HOODIE</h1>
</div>
<div class=”hero__image”>
<img src=”hoodie.png” alt=”hoodie”>
</div>
CSS:
.hero__text h1 {
transform: scale(1, 1.5);
letter-spacing: 5px;
}
The way the typography is laid out also gives off a high-end luxury feel to the hoodie.
🧱 Step 5: Floating Glassmorphism Info Panels
Behind the hoodie are two floating frosted information panels that list the following features:
- Qualitiy of Material
- Comfort Level
- Durability
- Quality Stitching
CSS:
.info__box {
width: 650px;
background: var(–glass-morphism);
backdrop-filter: blur(20px);
border-radius: 15px;
border: 1px solid var(–primary-color);
padding: 30px 60px;
position: absolute;
}
.info__box.left { left: -1%; bottom: 30%; }
.info__box.right { right: -1%; top: 30%; }
A great way to present something new and classy!
🧱 Step 6: Footer with Contact, Order, and Social Media Icons
The footer contains:
- A contact number
- ORDER NOW button
- Shopping cart icon
- Glassmorphism social media icons
- Hover interaction. HTML and Hover Glow Effects are used.
HTML:
<div class=”orderBox”>
<div class=”orderIcon”><i class=”ri-shopping-cart-2-line”></i></div>
<button class=”orderBtn”>ORDER NOW!</button>
</div>
Hover Glow Effect:
.orderBox:hover .orderIcon,
.orderBox:hover .orderBtn {
border-color: #ffc800;
transform: translateY(-2px);
}
This provides a premium winter look!
✨ Final Result - What you've built!
- A high-end animated hoodie web page
- Fully responsive mobile navigation systems
- A glassmorphism hero section styled for winter
- New extreme stretched HOODIE typeface
- Two floating frosted informational boxes
- A frosted nav bar with animations
- A section for ordering and social media with neon flashes on hover.
- Great for winter brands, clothing sellers, eCommerce stores, showcasing products, etc!
Design Synth
Welcome to Design Synth! Enter the world of web design, where art meets code. Find awesome designs, practice new techniques, and churn out stunning digital experiences that excite and engage an audience.
Popular Posts
Explore Topics
- Card Design (4)
- Carousel (2)
- CSS and HTML (10)
- Design Synth (11)
- Form Designs (1)
- GSAP (4)
- Header Design (8)
- Hover Effect (4)
- JavaScript (9)
- Navbar Designs (4)
- Parallax (1)
- Slider Designs (2)
- Template Designs (3)
- WordPress (1)
Tag Clouds
Overview
For this project, we are creating a premium quality landing page for a winter hoodie that will feature:
- An animated navigation bar with a sleek, modern design
- A hero section that utilizes the full glassmorphism design trend
- Bold layering of winter-themed typography
- Floating glass-style information panels
- An animated mobile menu that includes smooth transitions
- A responsive design (platform independent)
- Integration with Remix Icons
If you are a hoodie brand, clothing store, or retailer selling winter fashion collections, this landing page design may provide excellent inspiration for your eCommerce product pages or Hero Section UI.
Let’s get started breaking this down step-by-step 👇
📁 Project Structure
Before jumping into the project, create the following structure:
animated-login-form/
│
├── index.html
├── style.css
├── script.js
└── images/
├── bg.png
├── logo.png
└── hoodie.png
🧱 Step 1: Importing Fonts, Remix Icons & Theme Variables
First we need to import four premium quality Google Fonts for our web design and define the global colours, typography and glass effects theme variables.
CSS:
:root {
–primary-color: #d6f0f5;
–secondry-color: #ffd600;
–glass-morphism: rgba(70, 125, 131, 0.1);
–btn-morphism: rgba(70, 125, 131, 0.4);
–h1-font: “Agbalumo”, system-ui;
–h3-font: “Inspiration”, cursive;
–hg-font: “Pathway Gothic One”, sans-serif;
–body-font: “Stack Sans Text”, sans-serif;
}
This will make the overall design easy to manage and perfectly consistent throughout all pages of the site.
🧱 Step 2: Global Reset + Frosted Background
In Step Two, we reset all default styles for browsers and apply a smooth frosted background effect to give a winter season aesthetic to the hoodie.
CSS:
body {
font-family: var(–body-font);
background: url(bg.png) center/cover no-repeat;
color: var(–primary-color);
overflow: hidden;
}
This gives a very premium quality look and feel of winter fashion.
🧱 Step 3: Responsive Animated Navbar
The navigation bar for this project will consist of:
- Logo
- Search Icon
- Cart Icon
- Animated Hamburger Icon
- Stagger Fade Navigation Items
HTML:
<nav class=”navbar”>
<div class=”navbar__logo”>
<img src=”logo.png” alt=”logo”>
</div>
<ul class=”navbar__menu” id=”navbar__menu-links”>
<li class=”navbar__menu-item”><a href=”#”>Home</a></li>
<li class=”navbar__menu-item”><a href=”#”>About</a></li>
<li class=”navbar__menu-item”><a href=”#”>Hoodies</a></li>
<li class=”navbar__menu-item”><a href=”#”>Collection</a></li>
<li class=”navbar__menu-item”><a href=”#”>Contact</a></li>
</ul>
CSS:
menuIcon.addEventListener(‘click’, () => {
navLinks.classList.toggle(‘open’);
if (navLinks.classList.contains(‘open’)) {
menuIconChild.classList.replace(‘ri-menu-4-fill’,’ri-close-large-line’);
menuItems.forEach((item, index) => {
setTimeout(() => item.classList.add(‘show’), index * 100);
});
} else {
menuIconChild.classList.replace(‘ri-close-large-line’,’ri-menu-4-fill’);
menuItems.forEach(item => item.classList.remove(‘show’));
}
});
When the user hovers over each item on the navigation bar, it will fade in with a smooth downward animation.
🧱 Step 4: Hero Section with a 3D Layered Textand a Beautiful Main Hoodie
The hero section contains:
- A very stylish handwritten cursive winter tagline,
- An extremely bold stretched HOODIE title,
- The main hoodie image,
- Perfect z-index at the right spot for layering, and
- Glassmorphism cards behind the main hoodie image.
HTML:
<div class=”hero__text”>
<h4>Winter Special</h4>
<h1>HOODIE</h1>
</div>
<div class=”hero__image”>
<img src=”hoodie.png” alt=”hoodie”>
</div>
CSS:
.hero__text h1 {
transform: scale(1, 1.5);
letter-spacing: 5px;
}
The way the typography is laid out also gives off a high-end luxury feel to the hoodie.
🧱 Step 5: Floating Glassmorphism Info Panels
Behind the hoodie are two floating frosted information panels that list the following features:
- Qualitiy of Material
- Comfort Level
- Durability
- Quality Stitching
CSS:
.info__box {
width: 650px;
background: var(–glass-morphism);
backdrop-filter: blur(20px);
border-radius: 15px;
border: 1px solid var(–primary-color);
padding: 30px 60px;
position: absolute;
}
.info__box.left { left: -1%; bottom: 30%; }
.info__box.right { right: -1%; top: 30%; }
A great way to present something new and classy!
🧱 Step 6: Footer with Contact, Order, and Social Media Icons
The footer contains:
- A contact number
- ORDER NOW button
- Shopping cart icon
- Glassmorphism social media icons
- Hover interaction. HTML and Hover Glow Effects are used.
HTML:
<div class=”orderBox”>
<div class=”orderIcon”><i class=”ri-shopping-cart-2-line”></i></div>
<button class=”orderBtn”>ORDER NOW!</button>
</div>
Hover Glow Effect:
.orderBox:hover .orderIcon,
.orderBox:hover .orderBtn {
border-color: #ffc800;
transform: translateY(-2px);
}
This provides a premium winter look!
✨ Final Result - What you've built!
- A high-end animated hoodie web page
- Fully responsive mobile navigation systems
- A glassmorphism hero section styled for winter
- New extreme stretched HOODIE typeface
- Two floating frosted informational boxes
- A frosted nav bar with animations
- A section for ordering and social media with neon flashes on hover.
- Great for winter brands, clothing sellers, eCommerce stores, showcasing products, etc!
Design Synth
Welcome to Design Synth! Enter the world of web design, where art meets code. Find awesome designs, practice new techniques, and churn out stunning digital experiences that excite and engage an audience.
Popular Posts
Explore Topics
- Card Design (4)
- Carousel (2)
- CSS and HTML (10)
- Design Synth (11)
- Form Designs (1)
- GSAP (4)
- Header Design (8)
- Hover Effect (4)
- JavaScript (9)
- Navbar Designs (4)
- Parallax (1)
- Slider Designs (2)
- Template Designs (3)
- WordPress (1)
Tag Clouds