Skip to content

Commit ab8e783

Browse files
bytecode001bytecode001
authored
Add files via upload
1 parent 2566052 commit ab8e783

File tree

3 files changed

+893
-0
lines changed

3 files changed

+893
-0
lines changed

‎039-home-page-001/index.html‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,146 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>NOIR - Timeless Elegance</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<!-- Loader -->
11+
<div class="loader">
12+
<div class="loader-text">NOIR</div>
13+
</div>
114

15+
<!-- Custom Cursor -->
16+
<div class="cursor"></div>
17+
<div class="cursor-follower"></div>
18+
19+
<!-- Navigation -->
20+
<nav>
21+
<div class="nav-container">
22+
<div class="logo">NOIR</div>
23+
<ul class="nav-links">
24+
<li><a href="#home">HOME</a></li>
25+
<li><a href="#collections">COLLECTIONS</a></li>
26+
<li><a href="#about">ABOUT</a></li>
27+
<li><a href="#contact">CONTACT</a></li>
28+
</ul>
29+
<div class="menu-toggle">
30+
<span></span>
31+
<span></span>
32+
<span></span>
33+
</div>
34+
</div>
35+
</nav>
36+
37+
<!-- Hero Section -->
38+
<section class="hero" id="home">
39+
<div class="hero-image"></div>
40+
<div class="hero-content">
41+
<h1>NOIR</h1>
42+
<p>TIMELESS ELEGANCE</p>
43+
<a href="#collections" class="cta-button">DISCOVER THE COLLECTION</a>
44+
</div>
45+
</section>
46+
47+
<!-- Collections -->
48+
<section class="collections" id="collections">
49+
<div class="section-header fade-in">
50+
<h2>OUR COLLECTIONS</h2>
51+
<p>Discover the essence of modern minimalism</p>
52+
</div>
53+
<div class="collection-grid">
54+
<div class="collection-item fade-in">
55+
<div class="collection-image"></div>
56+
<div class="collection-overlay">
57+
<h3>SPRING/SUMMER</h3>
58+
<p>Lightness and sophistication</p>
59+
</div>
60+
</div>
61+
<div class="collection-item fade-in">
62+
<div class="collection-image"></div>
63+
<div class="collection-overlay">
64+
<h3>FALL/WINTER</h3>
65+
<p>Warmth and style</p>
66+
</div>
67+
</div>
68+
<div class="collection-item fade-in">
69+
<div class="collection-image"></div>
70+
<div class="collection-overlay">
71+
<h3>CAPSULE COLLECTION</h3>
72+
<p>Exclusive pieces</p>
73+
</div>
74+
</div>
75+
</div>
76+
</section>
77+
78+
<!-- About -->
79+
<section class="about" id="about">
80+
<div class="about-content fade-in">
81+
<h2>OUR PHILOSOPHY</h2>
82+
<p>NOIR was born from the idea that elegance lies in simplicity. Each of our garments is designed to last over time, both in style and quality.</p>
83+
<p>We believe in sustainable fashion that respects the environment and people. Our materials are carefully selected, our productions ethical and transparent.</p>
84+
<p>Black is not just a color, it's an attitude. It's the choice of those who know that less is more.</p>
85+
</div>
86+
<div class="about-image"></div>
87+
</section>
88+
89+
<!-- Newsletter -->
90+
<section class="newsletter">
91+
<h2>STAY UPDATED</h2>
92+
<p>Subscribe to receive the latest news and exclusive access to new collections</p>
93+
<form class="newsletter-form">
94+
<input type="email" placeholder="Your email" required>
95+
<button type="submit">SUBSCRIBE</button>
96+
</form>
97+
</section>
98+
99+
<!-- Footer -->
100+
<footer>
101+
<div class="footer-content">
102+
<div class="footer-section">
103+
<h3>COLLECTIONS</h3>
104+
<ul>
105+
<li><a href="#">Women</a></li>
106+
<li><a href="#">Men</a></li>
107+
<li><a href="#">Accessories</a></li>
108+
<li><a href="#">New Arrivals</a></li>
109+
</ul>
110+
</div>
111+
<div class="footer-section">
112+
<h3>CUSTOMER SERVICE</h3>
113+
<ul>
114+
<li><a href="#">Contact Us</a></li>
115+
<li><a href="#">Shipping</a></li>
116+
<li><a href="#">Returns</a></li>
117+
<li><a href="#">Size Guide</a></li>
118+
</ul>
119+
</div>
120+
<div class="footer-section">
121+
<h3>COMPANY</h3>
122+
<ul>
123+
<li><a href="#">About Us</a></li>
124+
<li><a href="#">Sustainability</a></li>
125+
<li><a href="#">Press</a></li>
126+
<li><a href="#">Careers</a></li>
127+
</ul>
128+
</div>
129+
<div class="footer-section">
130+
<h3>FOLLOW US</h3>
131+
<ul>
132+
<li><a href="#">Instagram</a></li>
133+
<li><a href="#">Facebook</a></li>
134+
<li><a href="#">Pinterest</a></li>
135+
<li><a href="#">YouTube</a></li>
136+
</ul>
137+
</div>
138+
</div>
139+
<div class="footer-bottom">
140+
<p>&copy; 2024 NOIR. All rights reserved.</p>
141+
</div>
142+
</footer>
143+
144+
<script src="script.js"></script>
145+
</body>
146+
</html>

‎039-home-page-001/script.js‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
// Loader
2+
window.addEventListener('load', () => {
3+
setTimeout(() => {
4+
document.querySelector('.loader').style.opacity = '0';
5+
setTimeout(() => {
6+
document.querySelector('.loader').style.display = 'none';
7+
}, 500);
8+
}, 1500);
9+
});
10+
11+
// Navigation scroll effect
12+
window.addEventListener('scroll', () => {
13+
const nav = document.querySelector('nav');
14+
if (window.scrollY > 100) {
15+
nav.classList.add('scrolled');
16+
} else {
17+
nav.classList.remove('scrolled');
18+
}
19+
});
20+
21+
// Smooth scrolling
22+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
23+
anchor.addEventListener('click', function (e) {
24+
e.preventDefault();
25+
const target = document.querySelector(this.getAttribute('href'));
26+
if (target) {
27+
target.scrollIntoView({
28+
behavior: 'smooth',
29+
block: 'start'
30+
});
31+
}
32+
});
33+
});
34+
35+
// Intersection Observer for animations
36+
const observerOptions = {
37+
threshold: 0.1,
38+
rootMargin: '0px 0px -100px 0px'
39+
};
40+
41+
const observer = new IntersectionObserver((entries) => {
42+
entries.forEach(entry => {
43+
if (entry.isIntersecting) {
44+
entry.target.classList.add('visible');
45+
}
46+
});
47+
}, observerOptions);
48+
49+
// Observe all fade-in elements
50+
document.querySelectorAll('.fade-in, .section-header, .collection-item, .about-content').forEach(el => {
51+
observer.observe(el);
52+
});
53+
54+
// Custom cursor
55+
const cursor = document.querySelector('.cursor');
56+
const cursorFollower = document.querySelector('.cursor-follower');
57+
58+
document.addEventListener('mousemove', (e) => {
59+
cursor.style.left = e.clientX + 'px';
60+
cursor.style.top = e.clientY + 'px';
61+
62+
setTimeout(() => {
63+
cursorFollower.style.left = e.clientX - 10 + 'px';
64+
cursorFollower.style.top = e.clientY - 10 + 'px';
65+
}, 100);
66+
});
67+
68+
// Cursor hover effect
69+
document.querySelectorAll('a, button, .collection-item').forEach(el => {
70+
el.addEventListener('mouseenter', () => {
71+
cursor.style.transform = 'scale(2)';
72+
cursorFollower.style.transform = 'scale(1.5)';
73+
});
74+
el.addEventListener('mouseleave', () => {
75+
cursor.style.transform = 'scale(1)';
76+
cursorFollower.style.transform = 'scale(1)';
77+
});
78+
});
79+
80+
// Mobile menu toggle
81+
const menuToggle = document.querySelector('.menu-toggle');
82+
const navLinks = document.querySelector('.nav-links');
83+
const body = document.body;
84+
85+
menuToggle.addEventListener('click', () => {
86+
menuToggle.classList.toggle('active');
87+
navLinks.classList.toggle('active');
88+
body.style.overflow = navLinks.classList.contains('active') ? 'hidden' : '';
89+
});
90+
91+
// Close menu when clicking on a link
92+
document.querySelectorAll('.nav-links a').forEach(link => {
93+
link.addEventListener('click', () => {
94+
menuToggle.classList.remove('active');
95+
navLinks.classList.remove('active');
96+
body.style.overflow = '';
97+
});
98+
});
99+
100+
// Close menu when clicking outside
101+
document.addEventListener('click', (e) => {
102+
if (navLinks.classList.contains('active') &&
103+
!navLinks.contains(e.target) &&
104+
!menuToggle.contains(e.target)) {
105+
menuToggle.classList.remove('active');
106+
navLinks.classList.remove('active');
107+
body.style.overflow = '';
108+
}
109+
});
110+
111+
// Newsletter form
112+
document.querySelector('.newsletter-form').addEventListener('submit', (e) => {
113+
e.preventDefault();
114+
alert('Thank you for subscribing!');
115+
e.target.reset();
116+
});
117+
118+
// Parallax effect on hero
119+
window.addEventListener('scroll', () => {
120+
const scrolled = window.pageYOffset;
121+
const heroContent = document.querySelector('.hero-content');
122+
if (heroContent) {
123+
heroContent.style.transform = `translateY(${scrolled * 0.5}px)`;
124+
heroContent.style.opacity = 1 - scrolled / 600;
125+
}
126+
});
127+
128+
// Collection item hover effect with mouse position
129+
document.querySelectorAll('.collection-item').forEach(item => {
130+
item.addEventListener('mousemove', (e) => {
131+
const rect = item.getBoundingClientRect();
132+
const x = e.clientX - rect.left;
133+
const y = e.clientY - rect.top;
134+
135+
const centerX = rect.width / 2;
136+
const centerY = rect.height / 2;
137+
138+
const deltaX = (x - centerX) / centerX;
139+
const deltaY = (y - centerY) / centerY;
140+
141+
item.style.transform = `perspective(1000px) rotateY(${deltaX * 5}deg) rotateX(${-deltaY * 5}deg)`;
142+
});
143+
144+
item.addEventListener('mouseleave', () => {
145+
item.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg)';
146+
});
147+
});

0 commit comments

Comments
 (0)