diff --git a/src/amanidrummond/GangstaneliCafe.png b/src/amanidrummond/GangstaneliCafe.png new file mode 100644 index 0000000..fce3b40 Binary files /dev/null and b/src/amanidrummond/GangstaneliCafe.png differ diff --git "a/src/amanidrummond/Screenshot 2026-04-01 at 1.45.20\342\200\257PM.png" "b/src/amanidrummond/Screenshot 2026-04-01 at 1.45.20\342\200\257PM.png" new file mode 100644 index 0000000..5024c11 Binary files /dev/null and "b/src/amanidrummond/Screenshot 2026-04-01 at 1.45.20\342\200\257PM.png" differ diff --git a/src/amanidrummond/burger.png b/src/amanidrummond/burger.png new file mode 100644 index 0000000..aa99961 Binary files /dev/null and b/src/amanidrummond/burger.png differ diff --git a/src/amanidrummond/cheesybites.png b/src/amanidrummond/cheesybites.png new file mode 100644 index 0000000..322d39c Binary files /dev/null and b/src/amanidrummond/cheesybites.png differ diff --git a/src/amanidrummond/croissant.png b/src/amanidrummond/croissant.png new file mode 100644 index 0000000..c000dd8 Binary files /dev/null and b/src/amanidrummond/croissant.png differ diff --git a/src/amanidrummond/index.html b/src/amanidrummond/index.html new file mode 100644 index 0000000..f201057 --- /dev/null +++ b/src/amanidrummond/index.html @@ -0,0 +1,418 @@ + + + + + + Gangstaneli Café + + + + + + +
+ Gangstaneli Logo +
+ + +
+ +
+ + + + + + +
+ +
+
+
+

+ A pink-luxe café experience + made to comfort the soul. +

+

+ Signature brunch, glossy drinks, glam comfort meals, and a full menu + built with style. Gangstaneli Café brings cozy elegance, bold flavor, + and a premium feel all in one place. +

+ + +
+ +
+ Gangstaneli Signature Burger +
+
+ +
+

Breakfast

+

Soft mornings, rich flavors, and signature café comfort.

+ + +
+ +
+

Brunch Specials

+

Midday luxury bites with bold flavor and signature style.

+ + +
+ +
+

Mains

+

Signature plates with a glam twist.

+ + +
+ +
+

Sides & Small Plates

+

Perfect add-ons with big personality.

+ + +
+ +
+

Drinks

+

Refreshers, café favorites, and iconic signature sips.

+ + +
+ +
+

About

+
+ Gangstaneli Café is built around bold feminine style, luxury comfort food, + and a polished digital experience. The brand blends pink glam aesthetics + with memorable signature menu items, creating a café that feels stylish, + elevated, and fun. +
+
+ +
+

Contact

+
+ For reservations, events, collaborations, or catering inquiries, reach out + to Gangstaneli Café. A luxe experience deserves luxe service. +
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/src/amanidrummond/latte.png b/src/amanidrummond/latte.png new file mode 100644 index 0000000..1778dc9 Binary files /dev/null and b/src/amanidrummond/latte.png differ diff --git a/src/amanidrummond/lemonade.png b/src/amanidrummond/lemonade.png new file mode 100644 index 0000000..60e8dd0 Binary files /dev/null and b/src/amanidrummond/lemonade.png differ diff --git a/src/amanidrummond/loadedfries.png b/src/amanidrummond/loadedfries.png new file mode 100644 index 0000000..66d7644 Binary files /dev/null and b/src/amanidrummond/loadedfries.png differ diff --git a/src/amanidrummond/mimosa.png b/src/amanidrummond/mimosa.png new file mode 100644 index 0000000..96f8a5b Binary files /dev/null and b/src/amanidrummond/mimosa.png differ diff --git a/src/amanidrummond/pancakes.png b/src/amanidrummond/pancakes.png new file mode 100644 index 0000000..efbc9ee Binary files /dev/null and b/src/amanidrummond/pancakes.png differ diff --git a/src/amanidrummond/pasta.png b/src/amanidrummond/pasta.png new file mode 100644 index 0000000..4643f17 Binary files /dev/null and b/src/amanidrummond/pasta.png differ diff --git a/src/amanidrummond/salmon.png b/src/amanidrummond/salmon.png new file mode 100644 index 0000000..b9d47c4 Binary files /dev/null and b/src/amanidrummond/salmon.png differ diff --git a/src/amanidrummond/script.js b/src/amanidrummond/script.js new file mode 100644 index 0000000..049544a --- /dev/null +++ b/src/amanidrummond/script.js @@ -0,0 +1,76 @@ +// LOADING (longer + smoother) +window.addEventListener("load", () => { + setTimeout(() => { + const loader = document.getElementById("loader"); + loader.style.opacity = "0"; + + setTimeout(() => { + loader.style.display = "none"; + }, 800); // fade out time + + }, 2500); // how long it stays visible (2.5 seconds) +}); + +// Glowing cursor effect +const cursorGlow = document.getElementById("cursorGlow"); + +document.addEventListener("mousemove", (e) => { + cursorGlow.style.left = e.clientX + "px"; + cursorGlow.style.top = e.clientY + "px"; +}); + +// Cart / checkout system +const cart = []; +const cartCount = document.getElementById("cartCount"); +const cartItems = document.getElementById("cartItems"); +const cartTotal = document.getElementById("cartTotal"); +const cartPanel = document.getElementById("cartPanel"); +const toggleCartBtn = document.getElementById("toggleCartBtn"); + +toggleCartBtn.addEventListener("click", () => { + cartPanel.classList.toggle("open"); +}); + +function addToCart(name, price) { + cart.push({ name, price }); + updateCart(); +} + +function updateCart() { + cartCount.textContent = cart.length; + + if (cart.length === 0) { + cartItems.innerHTML = '
Your cart is empty.
'; + cartTotal.textContent = "0"; + return; + } + + cartItems.innerHTML = ""; + let total = 0; + + cart.forEach((item) => { + total += item.price; + + const itemDiv = document.createElement("div"); + itemDiv.className = "cart-item"; + itemDiv.innerHTML = ` +
${item.name}
+
$${item.price}
+ `; + cartItems.appendChild(itemDiv); + }); + + cartTotal.textContent = total; +} + +function checkout() { + if (cart.length === 0) { + alert("Your cart is empty."); + return; + } + + alert("Checkout complete! Thank you for ordering from Gangstaneli Café."); + cart.length = 0; + updateCart(); + cartPanel.classList.remove("open"); +} \ No newline at end of file diff --git a/src/amanidrummond/sliders.png b/src/amanidrummond/sliders.png new file mode 100644 index 0000000..ead8d9f Binary files /dev/null and b/src/amanidrummond/sliders.png differ diff --git a/src/amanidrummond/smoothie.png b/src/amanidrummond/smoothie.png new file mode 100644 index 0000000..764322d Binary files /dev/null and b/src/amanidrummond/smoothie.png differ diff --git a/src/amanidrummond/smoothiebowl.png b/src/amanidrummond/smoothiebowl.png new file mode 100644 index 0000000..945d665 Binary files /dev/null and b/src/amanidrummond/smoothiebowl.png differ diff --git a/src/amanidrummond/soup.png b/src/amanidrummond/soup.png new file mode 100644 index 0000000..2249f0f Binary files /dev/null and b/src/amanidrummond/soup.png differ diff --git a/src/amanidrummond/style.css b/src/amanidrummond/style.css new file mode 100644 index 0000000..54322fe --- /dev/null +++ b/src/amanidrummond/style.css @@ -0,0 +1,562 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + scroll-behavior: smooth; +} + +:root { + --bg: #0e0a12; + --panel: rgba(255, 255, 255, 0.08); + --panel-2: rgba(255, 255, 255, 0.12); + --text: #fff7fb; + --muted: #f3c7da; + --pink: #ff4fa3; + --pink-soft: #ff8fc6; + --rose: #ff6fb5; + --shadow: 0 10px 30px rgba(255, 79, 163, 0.18); + --border: rgba(255, 255, 255, 0.16); +} + +body { + font-family: Arial, Helvetica, sans-serif; + background: + radial-gradient(circle at top, rgba(255, 79, 163, 0.20), transparent 35%), + linear-gradient(180deg, #100913, #140b1b 40%, #0d0812 100%); + color: var(--text); + overflow-x: hidden; +} + +/* LOADING SCREEN */ +#loader { + position: fixed; + inset: 0; + background: linear-gradient(180deg, #140b1b, #09060d); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + transition: opacity 0.8s ease; +} + +.loader-logo-img { + width: 140px; + height: 140px; + object-fit: contain; + animation: pulseLogo 1.5s infinite ease-in-out; +} + +/* Smooth glowing pulse */ +@keyframes pulseLogo { + 0%, 100% { + transform: scale(1); + filter: drop-shadow(0 0 10px rgba(255, 79, 163, 0.4)); + } + 50% { + transform: scale(1.1); + filter: drop-shadow(0 0 25px rgba(255, 79, 163, 0.8)); + } +} + +/* Glowing cursor */ +.cursor-glow { + width: 22px; + height: 22px; + border-radius: 50%; + position: fixed; + left: 0; + top: 0; + pointer-events: none; + z-index: 9998; + background: radial-gradient(circle, rgba(255,79,163,0.85) 0%, rgba(255,79,163,0.15) 55%, transparent 75%); + transform: translate(-50%, -50%); + filter: blur(2px); + transition: transform 0.06s linear; +} + +header { + position: sticky; + top: 0; + z-index: 1000; + backdrop-filter: blur(14px); + background: rgba(9, 6, 13, 0.72); + border-bottom: 1px solid rgba(255,255,255,0.08); +} + +.nav { + max-width: 1250px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 24px; + gap: 20px; +} + +.brand { + display: flex; + align-items: center; + gap: 14px; + min-width: 0; +} + +.brand img { + width: 56px; + height: 56px; + object-fit: cover; + border-radius: 50%; + border: 2px solid rgba(255,255,255,0.18); + box-shadow: 0 0 20px rgba(255, 79, 163, 0.28); + background: rgba(255,255,255,0.07); +} + +.brand-text h1 { + font-size: 1.25rem; + line-height: 1.05; +} + +.brand-text p { + color: var(--muted); + font-size: 0.88rem; + margin-top: 2px; +} + +.gradient-text { + background: linear-gradient(90deg, #ffffff, #ff8fc6, #ff4fa3); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +nav ul { + list-style: none; + display: flex; + gap: 20px; + flex-wrap: wrap; + justify-content: center; +} + +nav a { + color: #ffeaf4; + text-decoration: none; + font-weight: 600; + font-size: 0.96rem; + transition: color 0.25s ease; +} + +nav a:hover { + color: #ff93c9; +} + +.cart-btn { + background: linear-gradient(135deg, #ff4fa3, #ff7abc); + color: white; + border: none; + padding: 11px 16px; + border-radius: 999px; + cursor: pointer; + font-weight: 700; + box-shadow: var(--shadow); + transition: transform 0.25s ease, box-shadow 0.25s ease; +} + +.cart-btn:hover { + transform: translateY(-2px) scale(1.04); + box-shadow: 0 14px 30px rgba(255, 79, 163, 0.32); +} + +.hero { + max-width: 1250px; + margin: 0 auto; + padding: 78px 24px 48px; + display: grid; + grid-template-columns: 1.2fr 1fr; + gap: 34px; + align-items: center; +} + +.hero-panel, +.hero-image-wrap, +.cart-panel { + background: var(--panel); + border: 1px solid var(--border); + border-radius: 28px; + backdrop-filter: blur(18px); + box-shadow: var(--shadow); +} + +.hero-panel { + padding: 32px; +} + +.hero-panel h2 { + font-size: 3rem; + line-height: 1.05; + margin-bottom: 16px; +} + +.hero-panel p { + color: #f9d5e5; + font-size: 1.02rem; + line-height: 1.7; + max-width: 640px; +} + +.hero-buttons { + margin-top: 26px; + display: flex; + gap: 14px; + flex-wrap: wrap; +} + +.btn-primary, +.btn-secondary, +.add-btn, +.checkout-btn { + border: none; + cursor: pointer; + border-radius: 999px; + font-weight: 700; + transition: 0.25s ease; +} + +.btn-primary { + background: linear-gradient(135deg, #ff4fa3, #ff7abc); + color: white; + padding: 14px 20px; + box-shadow: var(--shadow); +} + +.btn-primary:hover { + transform: translateY(-2px) scale(1.03); +} + +.btn-secondary { + background: rgba(255,255,255,0.08); + color: white; + padding: 14px 20px; + border: 1px solid rgba(255,255,255,0.14); +} + +.btn-secondary:hover { + background: rgba(255,255,255,0.13); + transform: translateY(-2px); +} + +.hero-image-wrap { + padding: 18px; + min-height: 420px; + display: flex; + align-items: center; + justify-content: center; +} + +.hero-image-wrap img { + width: 100%; + max-height: 390px; + object-fit: cover; + border-radius: 22px; + border: 1px solid rgba(255,255,255,0.1); +} + +section { + max-width: 1250px; + margin: 0 auto; + padding: 18px 24px 22px; +} + +.section-title { + margin: 24px 0 18px; + font-size: 2rem; +} + +.section-sub { + color: #f3c7da; + margin-bottom: 24px; + line-height: 1.7; +} + +.menu-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 22px; +} + +.card { + background: var(--panel); + border: 1px solid var(--border); + border-radius: 24px; + overflow: hidden; + backdrop-filter: blur(16px); + box-shadow: 0 8px 22px rgba(0,0,0,0.18); + transition: transform 0.28s ease, box-shadow 0.28s ease, border 0.28s ease; + position: relative; +} + +.card:hover { + transform: translateY(-8px) scale(1.02); + box-shadow: 0 18px 34px rgba(255, 79, 163, 0.20); + border-color: rgba(255, 143, 198, 0.32); +} + +/* Hover line effect */ +.card::after { + content: ""; + position: absolute; + left: 18px; + right: 18px; + bottom: 0; + height: 3px; + background: linear-gradient(90deg, transparent, #ff7abc, #ff4fa3, transparent); + transform: scaleX(0); + transform-origin: center; + transition: transform 0.35s ease; + border-radius: 999px; +} + +.card:hover::after { + transform: scaleX(1); +} + +.card img { + width: 100%; + height: 210px; + object-fit: cover; + display: block; + background: rgba(255,255,255,0.06); +} + +.card-content { + padding: 18px 18px 20px; +} + +.card-content h3 { + font-size: 1.08rem; + margin-bottom: 8px; +} + +.card-content p { + color: #f6d4e4; + font-size: 0.94rem; + line-height: 1.6; + min-height: 70px; +} + +.price-row { + display: flex; + justify-content: space-between; + align-items: center; + gap: 12px; + margin-top: 14px; +} + +.price { + font-size: 1.05rem; + font-weight: 800; + color: #ffd4e7; +} + +.add-btn { + padding: 11px 14px; + background: linear-gradient(135deg, #ff4fa3, #ff7abc); + color: white; + box-shadow: var(--shadow); +} + +.add-btn:hover { + transform: scale(1.05); +} + +.about, +.contact { + background: var(--panel); + border: 1px solid var(--border); + border-radius: 28px; + padding: 28px; + line-height: 1.8; + color: #f8dceb; + box-shadow: var(--shadow); +} + +.cart-panel { + position: fixed; + top: 92px; + right: 18px; + width: 350px; + max-height: calc(100vh - 120px); + overflow-y: auto; + padding: 20px; + z-index: 1100; + display: none; +} + +.cart-panel.open { + display: block; +} + +.cart-panel h3 { + font-size: 1.4rem; + margin-bottom: 14px; +} + +.cart-item { + display: flex; + justify-content: space-between; + gap: 12px; + padding: 12px 0; + border-bottom: 1px solid rgba(255,255,255,0.08); +} + +.cart-item-name { + font-weight: 700; +} + +.cart-item-price { + color: #ffd3e6; + white-space: nowrap; +} + +.cart-total { + margin-top: 16px; + font-size: 1.15rem; + font-weight: 800; + display: flex; + justify-content: space-between; +} + +.checkout-btn { + width: 100%; + margin-top: 18px; + padding: 14px; + background: linear-gradient(135deg, #ff4fa3, #ff7abc); + color: white; + font-size: 1rem; + box-shadow: var(--shadow); +} + +.checkout-btn:hover { + transform: translateY(-2px); +} + +.empty-cart { + color: var(--muted); + padding: 10px 0 4px; +} + +footer { + max-width: 1250px; + margin: 32px auto 0; + padding: 22px 24px 40px; + color: #f0bfd6; + text-align: center; +} + +@media (max-width: 1100px) { + .menu-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .hero { + grid-template-columns: 1fr; + } + + .cart-panel { + width: 320px; + } +} + +@media (max-width: 780px) { + .nav { + flex-wrap: wrap; + justify-content: center; + } + + .brand { + width: 100%; + justify-content: center; + } + + .hero-panel h2 { + font-size: 2.3rem; + } + + .menu-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .cart-panel { + left: 14px; + right: 14px; + top: auto; + bottom: 14px; + width: auto; + max-height: 60vh; + } +} + +@media (max-width: 520px) { + .menu-grid { + grid-template-columns: 1fr; + } + + .hero-panel, + .hero-image-wrap, + .about, + .contact { + padding: 20px; + } + + .hero-panel h2 { + font-size: 2rem; + } + + nav ul { + gap: 12px; + } +} +/* ⭐ STAR BASE */ +.star { + position: absolute; + width: 6px; + height: 6px; + background: white; + border-radius: 50%; + box-shadow: 0 0 8px pink, 0 0 16px #ff4fa3; + animation: pulseStar 2s infinite ease-in-out; + opacity: 0.8; +} + +/* ⭐ NAVBAR STARS */ +.nav-stars { + position: absolute; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 1; +} + +.s1 { top: 10px; left: 20%; animation-delay: 0s; } +.s2 { top: 30px; left: 50%; animation-delay: 0.5s; } +.s3 { top: 15px; right: 25%; animation-delay: 1s; } +.s4 { top: 40px; right: 10%; animation-delay: 1.5s; } +.s5 { top: 5px; left: 70%; animation-delay: 2s; } + +/* ⭐ LOGO STARS */ +.logo-container { + position: relative; +} + +.ls1 { top: -8px; left: 10px; animation-delay: 0.3s; } +.ls2 { bottom: -8px; right: 10px; animation-delay: 0.7s; } +.ls3 { top: 20px; right: -8px; animation-delay: 1.2s; } + +/* ⭐ ANIMATION */ +@keyframes pulseStar { + 0%, 100% { + transform: scale(1); + opacity: 0.6; + } + 50% { + transform: scale(1.8); + opacity: 1; + } +} \ No newline at end of file diff --git a/src/amanidrummond/toast.png b/src/amanidrummond/toast.png new file mode 100644 index 0000000..5ae449a Binary files /dev/null and b/src/amanidrummond/toast.png differ diff --git a/src/amanidrummond/veggiebowl.png b/src/amanidrummond/veggiebowl.png new file mode 100644 index 0000000..15d7b1d Binary files /dev/null and b/src/amanidrummond/veggiebowl.png differ diff --git a/src/amanidrummond/waffles.png b/src/amanidrummond/waffles.png new file mode 100644 index 0000000..10cd0e7 Binary files /dev/null and b/src/amanidrummond/waffles.png differ diff --git a/src/amanidrummond/wrap.png b/src/amanidrummond/wrap.png new file mode 100644 index 0000000..5369901 Binary files /dev/null and b/src/amanidrummond/wrap.png differ