Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

updating the Berrypop page #706

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

updating the Berrypop page #706

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7bb2903
Implement animated circles and improve blog layout
akhulisumit Oct 10, 2024
390b652
landing page footer improvement
akhulisumit Oct 10, 2024
9ab9ad3
edting the ice-cream blog layout
akhulisumit Oct 13, 2024
72200df
Merge branch 'dohinaf:main' into main
akhulisumit Oct 13, 2024
301d44f
updating the berry pop page
akhulisumit Oct 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 57 additions & 73 deletions berry_pops.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,75 +1,59 @@
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>
Shop Items
</title>
<script src="https://cdn.tailwindcss.com">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
</head>
<body class="bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 flex items-center justify-center min-h-screen">
<div class="max-w-4xl mx-auto p-6 bg-white rounded-lg shadow-md flex">
<div class="w-1/2">
<br>
<br>
<br>
<img alt="A pink cup of Van Leeuwen strawberry ice cream with several scoops on top" class="rounded-lg" height="400" src="/images/download (2).jpeg" width="400"/>
</div>
<div class="w-1/2 pl-6">
<h1 class="text-2xl font-bold text-red-700">
Berry Pops
</h1>
<div class="flex items-center my-2">
<span class="text-2xl font-bold text-red-700">
$18.99
</span>
<span class="text-gray-500 line-through ml-2">
$20.99
</span>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shop Items</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"
/>
</head>
<body class="bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 flex items-center justify-center min-h-screen">
<div class="max-w-4xl mx-auto p-6 bg-white rounded-lg shadow-md flex flex-wrap md:flex-nowrap">
<div class="w-full md:w-1/2 mb-6 md:mb-0">
<img
src="/basic-icecream-website/images/ice.jpg"
alt="A pink cup of Van Leeuwen strawberry ice cream with several scoops on top"
class="rounded-lg w-full h-auto object-cover"
/>
</div>
<div class="w-full md:w-1/2 md:pl-6">
<h1 class="text-3xl font-bold text-red-700 mb-4">Berry Pops</h1>
<div class="flex items-center my-2">
<span class="text-2xl font-bold text-red-700">$18.99</span>
<span class="text-gray-500 line-through ml-2">$20.99</span>
</div>
<p class="text-gray-700 mb-6">
Berry Pops delivers a vibrant, fruity burst of mixed berries with
each bite, offering a refreshing balance of tartness and sweetness.
This dairy-free treat is ideal for those who love light and zesty
flavors. Reviews highlight its invigorating taste and the perfect mix
of berry flavors for a refreshing experience.
</p>
<ul class="mb-6">
<li>
<strong>SKU (Stock Keeping Unit):</strong> BPIC500ML
</li>
<li>
<strong>Availability:</strong>
<span class="text-red-700">Limited</span>
</li>
<li>
<strong>Flavor:</strong>
<span class="text-red-700">Tangent and fruity</span>
</li>
<li>
<strong>Vendor:</strong>
<span class="text-red-700">Polar Bear</span>
</li>
</ul>
<a href="index.html">
<button class="px-6 py-2 bg-red-700 text-white rounded hover:bg-red-600 transition duration-300">
Go Back
</button>
</a>
</div>
</div>
<p class="text-gray-700 mb-4">
Berry Pops delivers a vibrant, fruity burst of mixed berries with each bite, offering a refreshing balance of tartness and sweetness. This dairy-free treat is ideal for those who love light and zesty flavors. Reviews highlight its invigorating taste and the perfect mix of berry flavors for a refreshing experience.
</p>
<ul class="mb-4">
<li>
<strong>
SKU(Stock Keeping Unit):
</strong>
BPIC500ML
</li>
<li>
<strong>
Availability:
</strong>
<span class="text-red-700">
Limited
</span>
</li>
<li>
<strong>
Flavor:
</strong>
<span class="text-red-700">
Tangent and fruity
</span>
</li>
<li>
<strong>
Vendor:
</strong>
<span class="text-red-700">
Polar Bear
</span>
</li>
</ul>
<a href="index.html">
<button class="ml-4 px-6 py-2 bg-red-700 text-white rounded">
Go Back
</button>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
200 changes: 124 additions & 76 deletions icecream-details.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,53 +4,115 @@
<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>
<link rel="stylesheet" href="styles.css">
<style>
/* Basic Reset */
body, h1, h2, p {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif; /* Modern font */
}

/* Body styles */
body {
background-color: #f9f9f9;
color: #333;
line-height: 1.6;
}

/* Header styles */
header {
background-color: #FF6F61; /* Ice cream color */
color: white;
text-align: center;
padding: 20px 0;
}

/* Main section styles */
main {
padding: 20px;
max-width: 1200px; /* Max width for content */
margin: auto; /* Center content */
}

/* Blog details section */
#blog-details {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive grid */
gap: 20px;
margin-top: 20px; /* Space above the blog details */
}

/* Blog detail article styles */
.blog-detail {
background: white;
border-radius: 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}

.blog-detail:hover {
transform: translateY(-5px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Image styles */
.blog-detail img {
width: 100%; /* Full width */
border-bottom: 1px solid #ddd;
}

/* Heading styles */
h2 {
color: #FF6F61; /* Ice cream color */
padding: 10px;
text-align: center;
}

/* Paragraph styles */
p {
padding: 0 15px 15px;
}

/* Footer styles */
footer {
text-align: center;
padding: 10px;
background-color: #FF6F61; /* Ice cream color */
color: white;
position: relative;
bottom: 0;
width: 100%;
}

/* Circle styles */
.circle {
height: 24px;
width: 24px;
border-radius: 50%;
background-color: black;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 9999; /* 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>
<!-- Additional circles can be created dynamically in the script below -->

<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>
<h2>The Journey of Artic Delights of love</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>
Expand All @@ -71,7 +133,7 @@ <h2>Chilling Adventures with Exotic Flavors</h2>
</article>

<article class="blog-detail" id="crafting-perfect-scoop">
<h2>Crafting the Perfect Scoop</h2>
<h2>Crafting the Perfect Scoop for you</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>
Expand All @@ -83,64 +145,50 @@ <h2>Behind the Scenes at Artic Delights</h2>
<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>&copy; 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"
"#FF6F61", "#F5B7B1", "#76D7C4", "#FAD7A1", "#F0B27A"
];

// 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;
// Create animated circles on mouse move
document.addEventListener("mousemove", (event) => {
coords.x = event.clientX;
coords.y = event.clientY;
createCircle();
});

// Animation function to move the circles
function animateCircles() {
let x = coords.x;
let y = coords.y;
// Function to create and animate circles
function createCircle() {
const circle = document.createElement("div");
circle.classList.add("circle");
circle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
circle.style.top = `${coords.y}px`;
circle.style.left = `${coords.x}px`;
document.body.appendChild(circle);

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;
// Animation effect
setTimeout(() => {
circle.style.transform = "scale(0)";
circle.style.opacity = "0";
}, 10);

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;
// Remove circle from DOM after animation
circle.addEventListener("transitionend", () => {
circle.remove();
});

// Repeat the animation
requestAnimationFrame(animateCircles);
}

// Start the animation
animateCircles();
</script>
</body>
</html>
Binary file added images/ice.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading