Spaces:
Running
Running
File size: 9,525 Bytes
e6d79a5 |
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 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery | The Roll Joint</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
.gallery-item {
transition: all 0.3s ease;
}
.gallery-item:hover {
transform: scale(1.03);
}
</style>
</head>
<body class="font-sans bg-pink-50">
<!-- Navigation -->
<nav class="bg-primary text-white sticky top-0 z-50 shadow-lg">
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
<a href="index.html" class="text-2xl font-bold flex items-center">
<i data-feather="coffee" class="mr-2"></i>
The Roll Joint
</a>
<div class="hidden md:flex space-x-8">
<a href="index.html" class="hover:text-secondary">Home</a>
<a href="menu.html" class="hover:text-secondary">Menu</a>
<a href="about.html" class="hover:text-secondary">About</a>
<a href="contact.html" class="hover:text-secondary">Contact</a>
<a href="gallery.html" class="hover:text-secondary font-bold">Gallery</a>
</div>
<button class="md:hidden">
<i data-feather="menu"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="bg-primary text-white py-20 text-center">
<div class="container mx-auto px-6">
<h1 class="text-4xl md:text-5xl font-bold mb-4" data-aos="fade-up">Our Gallery</h1>
<p class="text-xl max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">A visual feast of our delicious creations and bakery moments</p>
</div>
</section>
<!-- Gallery Content -->
<section class="py-16 px-6">
<div class="container mx-auto">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up">
<img src="http://static.photos/food/640x360/301" alt="Cinnamon Rolls" class="w-full h-64 object-cover">
<div class="p-4 bg-white">
<h3 class="font-bold text-primary">Morning Batch</h3>
<p class="text-gray-600 text-sm">Fresh from the oven cinnamon rolls</p>
</div>
</div>
<div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="100">
<img src="http://static.photos/food/640x360/302" alt="Baker at Work" class="w-full h-64 object-cover">
<div class="p-4 bg-white">
<h3 class="font-bold text-primary">Handcrafting</h3>
<p class="text-gray-600 text-sm">Our bakers preparing dough</p>
</div>
</div>
<div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="200">
<img src="http://static.photos/food/640x360/303" alt="Coffee and Rolls" class="w-full h-64 object-cover">
<div class="p-4 bg-white">
<h3 class="font-bold text-primary">Perfect Pair</h3>
<p class="text-gray-600 text-sm">Our artisan coffee with honey sweet rolls</p>
</div>
</div>
<div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up">
<img src="http://static.photos/food/640x360/304" alt="Bakery Interior" class="w-full h-64 object-cover">
<div class="p-4 bg-white">
<h3 class="font-bold text-primary">Our Shop</h3>
<p class="text-gray-600 text-sm">Cozy interior of The Roll Joint</p>
</div>
</div>
<div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="100">
<img src="http://static.photos/food/640x360/305" alt="Seasonal Special" class="w-full h-64 object-cover">
<div class="p-4 bg-white">
<h3 class="font-bold text-primary">Fall Favorite</h3>
<p class="text-gray-600 text-sm">Pumpkin spice rolls with cream cheese</p>
</div>
</div>
<div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="200">
<img src="http://static.photos/food/640x360/306" alt="Ingredients" class="w-full h-64 object-cover">
<div class="p-4 bg-white">
<h3 class="font-bold text-primary">Quality Ingredients</h3>
<p class="text-gray-600 text-sm">Fresh, locally-sourced ingredients</p>
</div>
</div>
<div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up">
<img src="http://static.photos/food/640x360/307" alt="Chocolate Rolls" class="w-full h-64 object-cover">
<div class="p-4 bg-white">
<h3 class="font-bold text-primary">Chocolate Delight</h3>
<p class="text-gray-600 text-sm">Our decadent chocolate cake rolls</p>
</div>
</div>
<div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="100">
<img src="http://static.photos/food/640x360/308" alt="Customers" class="w-full h-64 object-cover">
<div class="p-4 bg-white">
<h3 class="font-bold text-primary">Happy Customers</h3>
<p class="text-gray-600 text-sm">Enjoying rolls at our cafe</p>
</div>
</div>
<div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="200">
<img src="http://static.photos/food/640x360/309" alt="Packaging" class="w-full h-64 object-cover">
<div class="p-4 bg-white">
<h3 class="font-bold text-primary">Take Home</h3>
<p class="text-gray-600 text-sm">Our signature packaging</p>
</div>
</div>
</div>
</div>
</section>
<!-- Instagram Feed -->
<section class="py-16 px-6 bg-secondary">
<div class="container mx-auto text-center">
<h2 class="text-3xl font-bold mb-6 text-primary" data-aos="fade-up">Follow Our Instagram</h2>
<p class="text-gray-700 max-w-2xl mx-auto mb-8" data-aos="fade-up">For daily updates, behind-the-scenes, and mouthwatering content</p>
<div class="flex justify-center" data-aos="fade-up">
<a href="#" class="bg-primary hover:bg-teal-700 text-white font-bold py-3 px-8 rounded-full flex items-center transition duration-300">
<i data-feather="instagram" class="mr-2"></i>
@TheRollJoint
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-primary text-white py-12 px-6">
<div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">The Roll Joint</h3>
<p class="text-secondary">Artisan bakery specializing in handcrafted rolls since 2010.</p>
</div>
<div>
<h4 class="font-bold mb-4">Hours</h4>
<p class="mb-1">Monday - Friday: 7am - 6pm</p>
<p class="mb-1">Saturday: 8am - 5pm</p>
<p>Sunday: 9am - 3pm</p>
</div>
<div>
<h4 class="font-bold mb-4">Contact</h4>
<p class="mb-1">123 Baker Street</p>
<p class="mb-1">Rollington, CA 90210</p>
<p class="mb-1">(555) 123-4567</p>
<p>hello@rolljoint.com</p>
</div>
<div>
<h4 class="font-bold mb-4">Follow Us</h4>
<div class="flex space-x-4">
<a href="#" class="hover:text-secondary"><i data-feather="instagram"></i></a>
<a href="#" class="hover:text-secondary"><i data-feather="facebook"></i></a>
<a href="#" class="hover:text-secondary"><i data-feather="twitter"></i></a>
</div>
</div>
</div>
<div class="border-t border-teal-700 mt-8 pt-8 text-center text-secondary">
<p>© 2023 The Roll Joint Bakery. All rights reserved.</p>
</div>
</div>
</footer>
<script>
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
feather.replace();
</script>
</body>
</html> |