-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
108 lines (97 loc) · 4.35 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en"></html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Violin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div class="logo">✨ Violin ✨</div>
<div class="nav-links">
<a href="https://violetz12.github.io/Partner-Portfolio">Home</a>
<a href="about">About</a>
</div>
</nav>
</header>
<section class="hero">
<canvas id="heroCanvas"></canvas>
<h1 class="animate__animated animate__fadeInDown">About Daily Dose of Music</h1>
<p class="animate__animated animate__fadeIn animate__delay-1s">Listening to songs together ✨</p>
<br />
<button class="cta-button animate__animated animate__bounceIn animate__delay-2s"> Join now!</button>
</section>
<section class="about">
<div class="about-content">
<h2 class="animate__animated animate__fadeInUp">Introduction</h2>
<p class="animate__animated animate__fadeIn animate__delay-1s">
We want to create a beautiful and unique website that has music playing functionalities.
Its UI/UX mainly feature retro-themed pixel art and “game” controls, inspired by Codedex.
</p>
<div class="about-features animate__animated animate__fadeInUp animate__delay-2s">
<div class="feature-card">
<h3>🎵 Profile</h3>
<p>Lets users customize their account and track listening stats
(e.g how long you have been listening to an artist)
</div>
<div class="feature-card">
<h3>💫Recommended songs</h3>
<p>Suggest tracks based on the user’s listening habits
and favorite genres, helping discover new music.</p>
</div>
<div class="feature-card">
<h3>🌐 Downloaded songs</h3>
<p>Allow offline access to saved tracks, ideal for uninterrupted listening anywhere.</p>
</div>
</div>
<button class="cta-button animate__animated animate__bounceIn animate__delay-3s">Learn More</button>
</div>
</section>
<script>
// Add sparkle effect
function createSparkle() {
const sparkle = document.createElement('div');
sparkle.className = 'sparkle';
sparkle.style.left = Math.random() * 100 + 'vw';
sparkle.style.top = Math.random() * 100 + 'vh';
sparkle.style.transform = 'scale(0)';
document.body.appendChild(sparkle);
setTimeout(() => sparkle.remove(), 2000);
}
setInterval(createSparkle, 500);
// Create floating shapes
function createFloatingShapes() {
const shapes = 15;
const container = document.createElement('div');
container.className = 'floating-shapes';
for (let i = 0; i < shapes; i++) {
const shape = document.createElement('div');
shape.className = 'shape';
shape.style.width = Math.random() * 100 + 50 + 'px';
shape.style.height = shape.style.width;
shape.style.left = Math.random() * 100 + '%';
shape.style.top = Math.random() * 100 + '%';
shape.style.animationDelay = Math.random() * 5 + 's';
container.appendChild(shape);
}
document.querySelector('.hero').appendChild(container);
}
createFloatingShapes();
// Animate numbers on scroll
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animateNumbers();
observer.unobserve(entry.target);
}
});
});
observer.observe(document.querySelector('.achievements'));
animate();
</script>
</body>
</html>