forked from dohinaf/basic-icecream-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
icecream-details.html
146 lines (131 loc) · 7.31 KB
/
icecream-details.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ice Cream Details</title>
<link rel="stylesheet" href="styles.css"> <!-- Link your CSS file -->
<style>
/* Circle styles */
.circle {
height: 24px;
width: 24px;
border-radius: 24px;
background-color: black;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999999;
/* Stays on top of all elements */
}
</style>
</head>
<body>
<!-- Circles -->
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<header>
<h1>Ice Cream Details</h1>
</header>
<main>
<section id="blog-details">
<article class="blog-detail" id="journey-of-artic-delights">
<h2>The Journey of Artic Delights</h2>
<img src="https://plus.unsplash.com/premium_photo-1658526992090-e15722e684c0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8aWNlY3JlYW0lMjBzaG9yfGVufDB8fDB8fHww" alt="The Journey of Artic Delights">
<p>Discover how our ice cream shop began its journey with a passion for creating unique flavors that delight the taste buds. From humble beginnings to a beloved local favorite, read about our story and what makes us special.</p>
<p>In this blog, we recount our early days of experimentation with ice cream flavors and the challenges we faced. You'll learn how community feedback shaped our menu and how we strive to bring smiles to our customers with every scoop.</p>
</article>
<article class="blog-detail" id="art-of-perfect-scoops">
<h2>The Art of Perfect Ice Cream Scoops</h2>
<img src="https://th.bing.com/th/id/R.676adb6d7539038b901d8242cc145fa1?rik=VtRfS5RbwsuVWQ&riu=http%3a%2f%2fimages6.fanpop.com%2fimage%2fphotos%2f34700000%2fIce-Creams-ice-cream-34733250-1200-972.jpg&ehk=%2baCoHwlvOoQkOsJx859JKiu%2fVnB7JSAfddJUpaHxeQo%3d&risl=&pid=ImgRaw&r=0" alt="The Art of Perfect Scoops">
<p>Learn the craft behind creating the perfect scoop of ice cream. Explore the process from churning to serving, and discover the science that makes each scoop smooth and creamy.</p>
<p>This section dives into the technical aspects of ice cream making, including temperature control and air incorporation. We also share tips from our master scoopers on how to achieve the ideal texture and flavor balance.</p>
</article>
<article class="blog-detail" id="chilling-adventures">
<h2>Chilling Adventures with Exotic Flavors</h2>
<img src="https://th.bing.com/th/id/R.342ee8a18ef0c4c428ff5288e7567400?rik=nrNVZmqpGpWe9g&riu=http%3a%2f%2fwallpapercave.com%2fwp%2fTS014mt.jpg&ehk=xOshdAfsEoqt8T%2bU%2fZtJiZCXCT8PRAv8B6aLJ4FMWZ0%3d&risl=&pid=ImgRaw&r=0" alt="Chilling Adventures">
<p>Step into a world of cool treats with our adventurous range of exotic ice cream flavors. From tropical fruits to rare spices, explore how we push the boundaries of ice cream craftsmanship.</p>
<p>This blog post features in-depth descriptions of some of our most unique flavors, the inspirations behind them, and the feedback we've received from adventurous customers.</p>
</article>
<article class="blog-detail" id="crafting-perfect-scoop">
<h2>Crafting the Perfect Scoop</h2>
<img src="https://images.unsplash.com/photo-1591261730540-1ab1db33ac78?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fGljZWNyZWFtJTIwc2hvcHxlbnwwfHwwfHx8MA%3D%3D" alt="Crafting the Perfect Scoop">
<p>Learn about our meticulous process of crafting the perfect ice cream scoop. We source only the finest ingredients and use artisanal methods to ensure every bite is a delicious experience.</p>
<p>In this article, we discuss our ingredient sourcing, the art of blending flavors, and the importance of quality in every scoop.</p>
</article>
<article class="blog-detail" id="behind-the-scenes">
<h2>Behind the Scenes at Artic Delights</h2>
<img src="https://images.unsplash.com/photo-1543269865-cbf427effbad?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8dGVhbSUyMHdvcmtlcnN8ZW58MHx8MHx8fDA%3D" alt="Behind the Scenes">
<p>Get a sneak peek behind the scenes at our shop! Meet our passionate team and see how we create our delicious ice cream flavors daily.</p>
<p>This blog entry introduces our team members and highlights their roles in the ice cream making process, showcasing their dedication and love for creating delightful flavors.</p>
</article>
</section>
</main>
<footer>
<p>© 2024 Artic Delights. All Rights Reserved.</p>
</footer>
<script>
// Coordinates for the cursor
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");
// Colors for the circles
const colors = [
"#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
"#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d",
"#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
"#680060", "#60005f", "#48005f", "#3d005e"
];
// Assign colors and initial position to each circle
circles.forEach(function (circle, index) {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length];
});
// Update the coordinates when the mouse moves
window.addEventListener("mousemove", function (e) {
coords.x = e.clientX;
coords.y = e.clientY;
});
// Animation function to move the circles
function animateCircles() {
let x = coords.x;
let y = coords.y;
circles.forEach(function (circle, index) {
// Update the position and scale of each circle
circle.style.left = x - 12 + "px";
circle.style.top = y - 12 + "px";
circle.style.scale = (circles.length - index) / circles.length;
circle.x = x;
circle.y = y;
// Get the next circle in the sequence
const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});
// Repeat the animation
requestAnimationFrame(animateCircles);
}
// Start the animation
animateCircles();
</script>
</body>
</html>