Hugging Face's logo

Spaces:
Nicksimmons10
/
undefined
Running

App Files Community
Nicksimmons10 commited on
Commit
e6d79a5
·
verified ·
1 Parent(s): 81aae5d

eace

Browse files
Files changed (6) hide show
  1. README.md +9 -5
  2. about.html +162 -0
  3. contact.html +191 -0
  4. gallery.html +179 -0
  5. index.html +274 -18
  6. menu.html +197 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🐨
4
- colorFrom: green
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: purple
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
about.html ADDED
@@ -0,0 +1,162 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>About Us | The Roll Joint</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ .team-card:hover {
13
+ transform: translateY(-10px);
14
+ }
15
+ </style>
16
+ </head>
17
+ <body class="font-sans bg-pink-50">
18
+ <!-- Navigation -->
19
+ <nav class="bg-primary text-white sticky top-0 z-50 shadow-lg">
20
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
21
+ <a href="index.html" class="text-2xl font-bold flex items-center">
22
+ <i data-feather="coffee" class="mr-2"></i>
23
+ The Roll Joint
24
+ </a>
25
+ <div class="hidden md:flex space-x-8">
26
+ <a href="index.html" class="hover:text-secondary">Home</a>
27
+ <a href="menu.html" class="hover:text-secondary">Menu</a>
28
+ <a href="about.html" class="hover:text-secondary font-bold">About</a>
29
+ <a href="contact.html" class="hover:text-secondary">Contact</a>
30
+ <a href="gallery.html" class="hover:text-secondary">Gallery</a>
31
+ </div>
32
+ <button class="md:hidden">
33
+ <i data-feather="menu"></i>
34
+ </button>
35
+ </div>
36
+ </nav>
37
+
38
+ <!-- Hero Section -->
39
+ <section class="bg-primary text-white py-20 text-center">
40
+ <div class="container mx-auto px-6">
41
+ <h1 class="text-4xl md:text-5xl font-bold mb-4" data-aos="fade-up">Our Story</h1>
42
+ <p class="text-xl max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">From a small family bakery to your favorite neighborhood roll spot</p>
43
+ </div>
44
+ </section>
45
+
46
+ <!-- Our Story -->
47
+ <section class="py-16 px-6">
48
+ <div class="container mx-auto max-w-4xl">
49
+ <div class="mb-16" data-aos="fade-up">
50
+ <h2 class="text-3xl font-bold mb-6 text-primary">The Beginning</h2>
51
+ <p class="text-gray-700 mb-4">In 2010, master baker James Rollinson opened The Roll Joint with a simple mission: to create the most delicious, handcrafted rolls using traditional techniques and premium ingredients.</p>
52
+ <p class="text-gray-700">What started as a small corner bakery with just three employees has grown into a beloved neighborhood institution, but we've never lost sight of our commitment to quality and craftsmanship.</p>
53
+ </div>
54
+
55
+ <div class="mb-16" data-aos="fade-up">
56
+ <h2 class="text-3xl font-bold mb-6 text-primary">Our Philosophy</h2>
57
+ <p class="text-gray-700 mb-4">We believe in the art of slow baking - giving our doughs time to develop flavor naturally, sourcing ingredients locally whenever possible, and never cutting corners.</p>
58
+ <p class="text-gray-700">Every roll that leaves our oven is made with the same care and attention we put into our very first batches over a decade ago.</p>
59
+ </div>
60
+
61
+ <div data-aos="fade-up">
62
+ <h2 class="text-3xl font-bold mb-6 text-primary">Meet the Team</h2>
63
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
64
+ <div class="team-card bg-white p-6 rounded-lg shadow-sm text-center transition duration-300">
65
+ <img src="http://static.photos/people/200x200/201" alt="James Rollinson" class="w-32 h-32 rounded-full mx-auto mb-4">
66
+ <h3 class="text-xl font-bold text-primary">James Rollinson</h3>
67
+ <p class="text-gray-600 mb-2">Founder & Head Baker</p>
68
+ <p class="text-gray-700 text-sm">"I still wake up at 3am every morning to start the first batch - it's my favorite time of day."</p>
69
+ </div>
70
+ <div class="team-card bg-white p-6 rounded-lg shadow-sm text-center transition duration-300">
71
+ <img src="http://static.photos/people/200x200/202" alt="Maria Chen" class="w-32 h-32 rounded-full mx-auto mb-4">
72
+ <h3 class="text-xl font-bold text-primary">Maria Chen</h3>
73
+ <p class="text-gray-600 mb-2">Pastry Chef</p>
74
+ <p class="text-gray-700 text-sm">"Our seasonal specials let me get creative while respecting tradition."</p>
75
+ </div>
76
+ <div class="team-card bg-white p-6 rounded-lg shadow-sm text-center transition duration-300">
77
+ <img src="http://static.photos/people/200x200/203" alt="David Wilson" class="w-32 h-32 rounded-full mx-auto mb-4">
78
+ <h3 class="text-xl font-bold text-primary">David Wilson</h3>
79
+ <p class="text-gray-600 mb-2">Coffee Master</p>
80
+ <p class="text-gray-700 text-sm">"The perfect cup should complement our rolls without overpowering them."</p>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </section>
86
+
87
+ <!-- Values Section -->
88
+ <section class="py-16 px-6 bg-secondary">
89
+ <div class="container mx-auto max-w-4xl">
90
+ <h2 class="text-3xl font-bold mb-12 text-primary text-center" data-aos="fade-up">Our Core Values</h2>
91
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
92
+ <div class="text-center" data-aos="fade-up" data-aos-delay="100">
93
+ <div class="bg-primary rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
94
+ <i data-feather="heart" class="text-white text-2xl"></i>
95
+ </div>
96
+ <h3 class="text-xl font-bold mb-2 text-primary">Passion</h3>
97
+ <p class="text-gray-700">We truly love what we do and it shows in every bite</p>
98
+ </div>
99
+ <div class="text-center" data-aos="fade-up" data-aos-delay="200">
100
+ <div class="bg-primary rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
101
+ <i data-feather="award" class="text-white text-2xl"></i>
102
+ </div>
103
+ <h3 class="text-xl font-bold mb-2 text-primary">Quality</h3>
104
+ <p class="text-gray-700">We never compromise on ingredients or techniques</p>
105
+ </div>
106
+ <div class="text-center" data-aos="fade-up" data-aos-delay="300">
107
+ <div class="bg-primary rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
108
+ <i data-feather="users" class="text-white text-2xl"></i>
109
+ </div>
110
+ <h3 class="text-xl font-bold mb-2 text-primary">Community</h3>
111
+ <p class="text-gray-700">We're proud to be part of our neighborhood's story</p>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </section>
116
+
117
+ <!-- Footer -->
118
+ <footer class="bg-primary text-white py-12 px-6">
119
+ <div class="container mx-auto">
120
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
121
+ <div>
122
+ <h3 class="text-xl font-bold mb-4">The Roll Joint</h3>
123
+ <p class="text-secondary">Artisan bakery specializing in handcrafted rolls since 2010.</p>
124
+ </div>
125
+ <div>
126
+ <h4 class="font-bold mb-4">Hours</h4>
127
+ <p class="mb-1">Monday - Friday: 7am - 6pm</p>
128
+ <p class="mb-1">Saturday: 8am - 5pm</p>
129
+ <p>Sunday: 9am - 3pm</p>
130
+ </div>
131
+ <div>
132
+ <h4 class="font-bold mb-4">Contact</h4>
133
+ <p class="mb-1">123 Baker Street</p>
134
+ <p class="mb-1">Rollington, CA 90210</p>
135
+ <p class="mb-1">(555) 123-4567</p>
136
+ <p>hello@rolljoint.com</p>
137
+ </div>
138
+ <div>
139
+ <h4 class="font-bold mb-4">Follow Us</h4>
140
+ <div class="flex space-x-4">
141
+ <a href="#" class="hover:text-secondary"><i data-feather="instagram"></i></a>
142
+ <a href="#" class="hover:text-secondary"><i data-feather="facebook"></i></a>
143
+ <a href="#" class="hover:text-secondary"><i data-feather="twitter"></i></a>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ <div class="border-t border-teal-700 mt-8 pt-8 text-center text-secondary">
148
+ <p>&copy; 2023 The Roll Joint Bakery. All rights reserved.</p>
149
+ </div>
150
+ </div>
151
+ </footer>
152
+
153
+ <script>
154
+ AOS.init({
155
+ duration: 800,
156
+ easing: 'ease-in-out',
157
+ once: true
158
+ });
159
+ feather.replace();
160
+ </script>
161
+ </body>
162
+ </html>
contact.html ADDED
@@ -0,0 +1,191 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Contact Us | The Roll Joint</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ </head>
12
+ <body class="font-sans bg-pink-50">
13
+ <!-- Navigation -->
14
+ <nav class="bg-primary text-white sticky top-0 z-50 shadow-lg">
15
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
16
+ <a href="index.html" class="text-2xl font-bold flex items-center">
17
+ <i data-feather="coffee" class="mr-2"></i>
18
+ The Roll Joint
19
+ </a>
20
+ <div class="hidden md:flex space-x-8">
21
+ <a href="index.html" class="hover:text-secondary">Home</a>
22
+ <a href="menu.html" class="hover:text-secondary">Menu</a>
23
+ <a href="about.html" class="hover:text-secondary">About</a>
24
+ <a href="contact.html" class="hover:text-secondary font-bold">Contact</a>
25
+ <a href="gallery.html" class="hover:text-secondary">Gallery</a>
26
+ </div>
27
+ <button class="md:hidden">
28
+ <i data-feather="menu"></i>
29
+ </button>
30
+ </div>
31
+ </nav>
32
+
33
+ <!-- Hero Section -->
34
+ <section class="bg-primary text-white py-20 text-center">
35
+ <div class="container mx-auto px-6">
36
+ <h1 class="text-4xl md:text-5xl font-bold mb-4" data-aos="fade-up">Get In Touch</h1>
37
+ <p class="text-xl max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">We'd love to hear from you - questions, feedback, or just to say hello!</p>
38
+ </div>
39
+ </section>
40
+
41
+ <!-- Contact Content -->
42
+ <section class="py-16 px-6">
43
+ <div class="container mx-auto max-w-6xl">
44
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
45
+ <!-- Contact Form -->
46
+ <div class="bg-white p-8 rounded-lg shadow-sm" data-aos="fade-right">
47
+ <h2 class="text-2xl font-bold mb-6 text-primary">Send Us a Message</h2>
48
+ <form>
49
+ <div class="mb-4">
50
+ <label for="name" class="block text-gray-700 mb-2">Name</label>
51
+ <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
52
+ </div>
53
+ <div class="mb-4">
54
+ <label for="email" class="block text-gray-700 mb-2">Email</label>
55
+ <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
56
+ </div>
57
+ <div class="mb-4">
58
+ <label for="subject" class="block text-gray-700 mb-2">Subject</label>
59
+ <select id="subject" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
60
+ <option value="">Select a topic</option>
61
+ <option value="general">General Inquiry</option>
62
+ <option value="catering">Catering Request</option>
63
+ <option value="feedback">Feedback</option>
64
+ <option value="employment">Employment</option>
65
+ </select>
66
+ </div>
67
+ <div class="mb-4">
68
+ <label for="message" class="block text-gray-700 mb-2">Message</label>
69
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"></textarea>
70
+ </div>
71
+ <button type="submit" class="bg-primary hover:bg-teal-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 w-full">
72
+ Send Message
73
+ </button>
74
+ </form>
75
+ </div>
76
+
77
+ <!-- Contact Info -->
78
+ <div data-aos="fade-left">
79
+ <h2 class="text-2xl font-bold mb-6 text-primary">Visit Us</h2>
80
+ <div class="bg-white p-8 rounded-lg shadow-sm mb-8">
81
+ <div class="flex items-start mb-6">
82
+ <i data-feather="map-pin" class="text-primary mr-4 mt-1"></i>
83
+ <div>
84
+ <h3 class="font-bold text-lg mb-1">Location</h3>
85
+ <p class="text-gray-700">123 Baker Street<br>Rollington, CA 90210</p>
86
+ </div>
87
+ </div>
88
+ <div class="flex items-start mb-6">
89
+ <i data-feather="phone" class="text-primary mr-4 mt-1"></i>
90
+ <div>
91
+ <h3 class="font-bold text-lg mb-1">Phone</h3>
92
+ <p class="text-gray-700">(555) 123-4567</p>
93
+ </div>
94
+ </div>
95
+ <div class="flex items-start mb-6">
96
+ <i data-feather="mail" class="text-primary mr-4 mt-1"></i>
97
+ <div>
98
+ <h3 class="font-bold text-lg mb-1">Email</h3>
99
+ <p class="text-gray-700">hello@rolljoint.com</p>
100
+ </div>
101
+ </div>
102
+ <div class="flex items-start">
103
+ <i data-feather="clock" class="text-primary mr-4 mt-1"></i>
104
+ <div>
105
+ <h3 class="font-bold text-lg mb-1">Hours</h3>
106
+ <p class="text-gray-700 mb-1">Monday - Friday: 7am - 6pm</p>
107
+ <p class="text-gray-700 mb-1">Saturday: 8am - 5pm</p>
108
+ <p class="text-gray-700">Sunday: 9am - 3pm</p>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <h2 class="text-2xl font-bold mb-6 text-primary">Follow Us</h2>
114
+ <div class="flex space-x-4">
115
+ <a href="#" class="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm hover:bg-secondary hover:text-white transition duration-300">
116
+ <i data-feather="instagram" class="text-primary"></i>
117
+ </a>
118
+ <a href="#" class="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm hover:bg-secondary hover:text-white transition duration-300">
119
+ <i data-feather="facebook" class="text-primary"></i>
120
+ </a>
121
+ <a href="#" class="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm hover:bg-secondary hover:text-white transition duration-300">
122
+ <i data-feather="twitter" class="text-primary"></i>
123
+ </a>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </section>
129
+
130
+ <!-- Map Section -->
131
+ <section class="px-6 pb-16">
132
+ <div class="container mx-auto">
133
+ <div class="bg-white p-6 rounded-lg shadow-sm">
134
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215209056354!2d-73.9883076845938!3d40.74798597932796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1623868310609!5m2!1sen!2sus"
135
+ width="100%"
136
+ height="400"
137
+ style="border:0;"
138
+ allowfullscreen=""
139
+ loading="lazy"
140
+ class="rounded-lg"
141
+ data-aos="fade-up"></iframe>
142
+ </div>
143
+ </div>
144
+ </section>
145
+
146
+ <!-- Footer -->
147
+ <footer class="bg-primary text-white py-12 px-6">
148
+ <div class="container mx-auto">
149
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
150
+ <div>
151
+ <h3 class="text-xl font-bold mb-4">The Roll Joint</h3>
152
+ <p class="text-secondary">Artisan bakery specializing in handcrafted rolls since 2010.</p>
153
+ </div>
154
+ <div>
155
+ <h4 class="font-bold mb-4">Hours</h4>
156
+ <p class="mb-1">Monday - Friday: 7am - 6pm</p>
157
+ <p class="mb-1">Saturday: 8am - 5pm</p>
158
+ <p>Sunday: 9am - 3pm</p>
159
+ </div>
160
+ <div>
161
+ <h4 class="font-bold mb-4">Contact</h4>
162
+ <p class="mb-1">123 Baker Street</p>
163
+ <p class="mb-1">Rollington, CA 90210</p>
164
+ <p class="mb-1">(555) 123-4567</p>
165
+ <p>hello@rolljoint.com</p>
166
+ </div>
167
+ <div>
168
+ <h4 class="font-bold mb-4">Follow Us</h4>
169
+ <div class="flex space-x-4">
170
+ <a href="#" class="hover:text-secondary"><i data-feather="instagram"></i></a>
171
+ <a href="#" class="hover:text-secondary"><i data-feather="facebook"></i></a>
172
+ <a href="#" class="hover:text-secondary"><i data-feather="twitter"></i></a>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ <div class="border-t border-teal-700 mt-8 pt-8 text-center text-secondary">
177
+ <p>&copy; 2023 The Roll Joint Bakery. All rights reserved.</p>
178
+ </div>
179
+ </div>
180
+ </footer>
181
+
182
+ <script>
183
+ AOS.init({
184
+ duration: 800,
185
+ easing: 'ease-in-out',
186
+ once: true
187
+ });
188
+ feather.replace();
189
+ </script>
190
+ </body>
191
+ </html>
gallery.html ADDED
@@ -0,0 +1,179 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Gallery | The Roll Joint</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ .gallery-item {
13
+ transition: all 0.3s ease;
14
+ }
15
+ .gallery-item:hover {
16
+ transform: scale(1.03);
17
+ }
18
+ </style>
19
+ </head>
20
+ <body class="font-sans bg-pink-50">
21
+ <!-- Navigation -->
22
+ <nav class="bg-primary text-white sticky top-0 z-50 shadow-lg">
23
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
24
+ <a href="index.html" class="text-2xl font-bold flex items-center">
25
+ <i data-feather="coffee" class="mr-2"></i>
26
+ The Roll Joint
27
+ </a>
28
+ <div class="hidden md:flex space-x-8">
29
+ <a href="index.html" class="hover:text-secondary">Home</a>
30
+ <a href="menu.html" class="hover:text-secondary">Menu</a>
31
+ <a href="about.html" class="hover:text-secondary">About</a>
32
+ <a href="contact.html" class="hover:text-secondary">Contact</a>
33
+ <a href="gallery.html" class="hover:text-secondary font-bold">Gallery</a>
34
+ </div>
35
+ <button class="md:hidden">
36
+ <i data-feather="menu"></i>
37
+ </button>
38
+ </div>
39
+ </nav>
40
+
41
+ <!-- Hero Section -->
42
+ <section class="bg-primary text-white py-20 text-center">
43
+ <div class="container mx-auto px-6">
44
+ <h1 class="text-4xl md:text-5xl font-bold mb-4" data-aos="fade-up">Our Gallery</h1>
45
+ <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>
46
+ </div>
47
+ </section>
48
+
49
+ <!-- Gallery Content -->
50
+ <section class="py-16 px-6">
51
+ <div class="container mx-auto">
52
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
53
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up">
54
+ <img src="http://static.photos/food/640x360/301" alt="Cinnamon Rolls" class="w-full h-64 object-cover">
55
+ <div class="p-4 bg-white">
56
+ <h3 class="font-bold text-primary">Morning Batch</h3>
57
+ <p class="text-gray-600 text-sm">Fresh from the oven cinnamon rolls</p>
58
+ </div>
59
+ </div>
60
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="100">
61
+ <img src="http://static.photos/food/640x360/302" alt="Baker at Work" class="w-full h-64 object-cover">
62
+ <div class="p-4 bg-white">
63
+ <h3 class="font-bold text-primary">Handcrafting</h3>
64
+ <p class="text-gray-600 text-sm">Our bakers preparing dough</p>
65
+ </div>
66
+ </div>
67
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="200">
68
+ <img src="http://static.photos/food/640x360/303" alt="Coffee and Rolls" class="w-full h-64 object-cover">
69
+ <div class="p-4 bg-white">
70
+ <h3 class="font-bold text-primary">Perfect Pair</h3>
71
+ <p class="text-gray-600 text-sm">Our artisan coffee with honey sweet rolls</p>
72
+ </div>
73
+ </div>
74
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up">
75
+ <img src="http://static.photos/food/640x360/304" alt="Bakery Interior" class="w-full h-64 object-cover">
76
+ <div class="p-4 bg-white">
77
+ <h3 class="font-bold text-primary">Our Shop</h3>
78
+ <p class="text-gray-600 text-sm">Cozy interior of The Roll Joint</p>
79
+ </div>
80
+ </div>
81
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="100">
82
+ <img src="http://static.photos/food/640x360/305" alt="Seasonal Special" class="w-full h-64 object-cover">
83
+ <div class="p-4 bg-white">
84
+ <h3 class="font-bold text-primary">Fall Favorite</h3>
85
+ <p class="text-gray-600 text-sm">Pumpkin spice rolls with cream cheese</p>
86
+ </div>
87
+ </div>
88
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="200">
89
+ <img src="http://static.photos/food/640x360/306" alt="Ingredients" class="w-full h-64 object-cover">
90
+ <div class="p-4 bg-white">
91
+ <h3 class="font-bold text-primary">Quality Ingredients</h3>
92
+ <p class="text-gray-600 text-sm">Fresh, locally-sourced ingredients</p>
93
+ </div>
94
+ </div>
95
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up">
96
+ <img src="http://static.photos/food/640x360/307" alt="Chocolate Rolls" class="w-full h-64 object-cover">
97
+ <div class="p-4 bg-white">
98
+ <h3 class="font-bold text-primary">Chocolate Delight</h3>
99
+ <p class="text-gray-600 text-sm">Our decadent chocolate cake rolls</p>
100
+ </div>
101
+ </div>
102
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="100">
103
+ <img src="http://static.photos/food/640x360/308" alt="Customers" class="w-full h-64 object-cover">
104
+ <div class="p-4 bg-white">
105
+ <h3 class="font-bold text-primary">Happy Customers</h3>
106
+ <p class="text-gray-600 text-sm">Enjoying rolls at our cafe</p>
107
+ </div>
108
+ </div>
109
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="200">
110
+ <img src="http://static.photos/food/640x360/309" alt="Packaging" class="w-full h-64 object-cover">
111
+ <div class="p-4 bg-white">
112
+ <h3 class="font-bold text-primary">Take Home</h3>
113
+ <p class="text-gray-600 text-sm">Our signature packaging</p>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </section>
119
+
120
+ <!-- Instagram Feed -->
121
+ <section class="py-16 px-6 bg-secondary">
122
+ <div class="container mx-auto text-center">
123
+ <h2 class="text-3xl font-bold mb-6 text-primary" data-aos="fade-up">Follow Our Instagram</h2>
124
+ <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>
125
+ <div class="flex justify-center" data-aos="fade-up">
126
+ <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">
127
+ <i data-feather="instagram" class="mr-2"></i>
128
+ @TheRollJoint
129
+ </a>
130
+ </div>
131
+ </div>
132
+ </section>
133
+
134
+ <!-- Footer -->
135
+ <footer class="bg-primary text-white py-12 px-6">
136
+ <div class="container mx-auto">
137
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
138
+ <div>
139
+ <h3 class="text-xl font-bold mb-4">The Roll Joint</h3>
140
+ <p class="text-secondary">Artisan bakery specializing in handcrafted rolls since 2010.</p>
141
+ </div>
142
+ <div>
143
+ <h4 class="font-bold mb-4">Hours</h4>
144
+ <p class="mb-1">Monday - Friday: 7am - 6pm</p>
145
+ <p class="mb-1">Saturday: 8am - 5pm</p>
146
+ <p>Sunday: 9am - 3pm</p>
147
+ </div>
148
+ <div>
149
+ <h4 class="font-bold mb-4">Contact</h4>
150
+ <p class="mb-1">123 Baker Street</p>
151
+ <p class="mb-1">Rollington, CA 90210</p>
152
+ <p class="mb-1">(555) 123-4567</p>
153
+ <p>hello@rolljoint.com</p>
154
+ </div>
155
+ <div>
156
+ <h4 class="font-bold mb-4">Follow Us</h4>
157
+ <div class="flex space-x-4">
158
+ <a href="#" class="hover:text-secondary"><i data-feather="instagram"></i></a>
159
+ <a href="#" class="hover:text-secondary"><i data-feather="facebook"></i></a>
160
+ <a href="#" class="hover:text-secondary"><i data-feather="twitter"></i></a>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ <div class="border-t border-teal-700 mt-8 pt-8 text-center text-secondary">
165
+ <p>&copy; 2023 The Roll Joint Bakery. All rights reserved.</p>
166
+ </div>
167
+ </div>
168
+ </footer>
169
+
170
+ <script>
171
+ AOS.init({
172
+ duration: 800,
173
+ easing: 'ease-in-out',
174
+ once: true
175
+ });
176
+ feather.replace();
177
+ </script>
178
+ </body>
179
+ </html>
index.html CHANGED
@@ -1,19 +1,275 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>The Roll Joint Bakery llc | Artisan Rolls & Pastries</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .hero-bg {
14
+ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(42');
15
+ background-size: cover;
16
+ background-position: center;
17
+ }
18
+ .roll-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 10px 25px rgba(0, 1, 0, 0.1);
21
+ }
22
+ .roll-card {
23
+ transition: all 0.3s ease;
24
+ }
25
+ </style>
26
+ <script>
27
+ tailwind.config = {
28
+ theme: {
29
+ extend: {
30
+ colors: {
31
+ primary: '#008080',
32
+ secondary: '#FFB6C1',
33
+ accent: '#D2B48C',
34
+ }
35
+ }
36
+ }
37
+ }
38
+ </script>
39
+ </head>
40
+ <body class="font-sans bg-pink-50">
41
+ <!-- Navigation -->
42
+ <nav class="bg-primary text-white sticky top-0 z-50 shadow-lg">
43
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
44
+ <a href="#" class="text-2xl font-bold flex items-center">
45
+ <i data-feather="coffee" class="mr-2"></i>
46
+ The Roll Joint
47
+ </a>
48
+ <div class="hidden md:flex space-x-8">
49
+ <a href="#" class="hover:text-secondary">Home</a>
50
+ <a href="menu.html" class="hover:text-secondary">Menu</a>
51
+ <a href="about.html" class="hover:text-secondary">About</a>
52
+ <a href="contact.html" class="hover:text-secondary">Contact</a>
53
+ <a href="gallery.html" class="hover:text-secondary">Gallery</a>
54
+ </div>
55
+ <button class="md:hidden">
56
+ <i data-feather="menu"></i>
57
+ </button>
58
+ </div>
59
+ </nav>
60
+
61
+ <!-- Hero Section -->
62
+ <section class="hero-bg text-white py-32 px-6 text-center">
63
+ <div class="max-w-4xl mx-auto" data-aos="fade-up">
64
+ <h1 class="text-5xl md:text-6xl font-bold mb-6">Artisan Rolls Made Fresh Daily</h1>
65
+ <p class="text-xl mb-8">Handcrafted with love since 2010. Our rolls are baked fresh every morning using traditional techniques and premium ingredients.</p>
66
+ <button class="bg-primary hover:bg-teal-700 text-white font-bold py-3 px-8 rounded-full transition duration-300">
67
+ Place Orders Here
68
+ </button>
69
+ Holiday Pre-Orders Here
70
+ </button>
71
+ </div>
72
+ </section>
73
+
74
+ <!-- Featured Rolls -->
75
+ <section class="py-16 px-6 bg-white">
76
+ <div class="container mx-auto">
77
+ <h2 class="text-3xl font-bold text-center mb-12 text-primary" data-aos="fade-up">Our Signature Rolls</h2>
78
+
79
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
80
+ <!-- Cinnamon Roll -->
81
+ <div class="roll-card bg-white rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="100">
82
+ <img src="http://static.photos/food/640x360/101" alt="Cinnamon Roll" class="w-full h-48 object-cover">
83
+ <div class="p-6">
84
+ <h3 class="text-xl font-bold mb-2 text-primary">Classic Cinnamon Roll</h3>
85
+ <p class="text-gray-600 mb-4">Our famous cinnamon roll with cream cheese frosting and a hint of vanilla.</p>
86
+ <div class="flex justify-between items-center">
87
+ <span class="font-bold text-accent">$4.50</span>
88
+ <button class="text-primary hover:text-teal-800">
89
+ <i data-feather="shopping-cart"></i>
90
+ </button>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Sweet Roll -->
96
+ <div class="roll-card bg-white rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="200">
97
+ <img src="http://static.photos/food/640x360/102" alt="Sweet Roll" class="w-full h-48 object-cover">
98
+ <div class="p-6">
99
+ <h3 class="text-xl font-bold mb-2 text-primary">Honey Sweet Roll</h3>
100
+ <p class="text-gray-600 mb-4">Light and fluffy with a delicate honey glaze and almond flakes.</p>
101
+ <div class="flex justify-between items-center">
102
+ <span class="font-bold text-accent">$5.00</span>
103
+ <button class="text-primary hover:text-teal-800">
104
+ <i data-feather="shopping-cart"></i>
105
+ </button>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Pumpkin Roll -->
111
+ <div class="roll-card bg-white rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="300">
112
+ <img src="http://static.photos/food/640x360/103" alt="Pumpkin Roll" class="w-full h-48 object-cover">
113
+ <div class="p-6">
114
+ <h3 class="text-xl font-bold mb-2 text-primary">Spiced Pumpkin Roll</h3>
115
+ <p class="text-gray-600 mb-4">Seasonal favorite with pumpkin spice and cream cheese filling.</p>
116
+ <div class="flex justify-between items-center">
117
+ <span class="font-bold text-accent">$5.50</span>
118
+ <button class="text-primary hover:text-teal-800">
119
+ <i data-feather="shopping-cart"></i>
120
+ </button>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Cake Roll -->
126
+ <div class="roll-card bg-white rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="400">
127
+ <img src="http://static.photos/food/640x360/104" alt="Cake Roll" class="w-full h-48 object-cover">
128
+ <div class="p-6">
129
+ <h3 class="text-xl font-bold mb-2 text-primary">Chocolate Cake Roll</h3>
130
+ <p class="text-gray-600 mb-4">Rich chocolate sponge rolled with whipped cream and berries.</p>
131
+ <div class="flex justify-between items-center">
132
+ <span class="font-bold text-accent">$6.00</span>
133
+ <button class="text-primary hover:text-teal-800">
134
+ <i data-feather="shopping-cart"></i>
135
+ </button>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </section>
142
+
143
+ <!-- About Section -->
144
+ <section class="py-16 px-6 bg-secondary">
145
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
146
+ <div class="md:w-1/2 mb-8 md:mb-0" data-aos="fade-right">
147
+ <img src="http://static.photos/people/640x360/105" alt="Baker" class="rounded-lg shadow-lg">
148
+ </div>
149
+ <div class="md:w-1/2 md:pl-12" data-aos="fade-left">
150
+ <h2 class="text-3xl font-bold mb-6 text-primary">Our Story</h2>
151
+ <p class="text-gray-700 mb-4">Founded in 2010 by master baker James Rollinson, The Roll Joint started as a small neighborhood bakery with a passion for perfecting the art of rolled pastries.</p>
152
+ <p class="text-gray-700 mb-6">Today, we continue that tradition using only the finest ingredients and time-honored techniques to create rolls that are both comforting and extraordinary.</p>
153
+ <button class="bg-primary hover:bg-teal-700 text-white font-bold py-2 px-6 rounded-full transition duration-300">
154
+ Learn More
155
+ </button>
156
+ </div>
157
+ </div>
158
+ </section>
159
+
160
+ <!-- Testimonials -->
161
+ <section class="py-16 px-6 bg-white">
162
+ <div class="container mx-auto">
163
+ <h2 class="text-3xl font-bold text-center mb-12 text-primary" data-aos="fade-up">What Our Customers Say</h2>
164
+
165
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
166
+ <div class="bg-white p-6 rounded-lg shadow-sm" data-aos="fade-up" data-aos-delay="100">
167
+ <div class="flex items-center mb-4">
168
+ <i data-feather="star" class="text-amber-500 mr-1"></i>
169
+ <i data-feather="star" class="text-amber-500 mr-1"></i>
170
+ <i data-feather="star" class="text-amber-500 mr-1"></i>
171
+ <i data-feather="star" class="text-amber-500 mr-1"></i>
172
+ <i data-feather="star" class="text-amber-500"></i>
173
+ </div>
174
+ <p class="text-gray-700 mb-4">"The cinnamon rolls are absolutely divine! Perfect balance of sweetness and spice."</p>
175
+ <div class="flex items-center">
176
+ <img src="http://static.photos/people/200x200/106" alt="Customer" class="w-10 h-10 rounded-full mr-3">
177
+ <span class="font-medium">Sarah J.</span>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="bg-white p-6 rounded-lg shadow-sm" data-aos="fade-up" data-aos-delay="200">
182
+ <div class="flex items-center mb-4">
183
+ <i data-feather="star" class="text-amber-500 mr-1"></i>
184
+ <i data-feather="star" class="text-amber-500 mr-1"></i>
185
+ <i data-feather="star" class="text-amber-500 mr-1"></i>
186
+ <i data-feather="star" class="text-amber-500 mr-1"></i>
187
+ <i data-feather="star" class="text-amber-500"></i>
188
+ </div>
189
+ <p class="text-gray-700 mb-4">"I order the pumpkin rolls every fall - they're worth the wait all year!"</p>
190
+ <div class="flex items-center">
191
+ <img src="http://static.photos/people/200x200/107" alt="Customer" class="w-10 h-10 rounded-full mr-3">
192
+ <span class="font-medium">Michael T.</span>
193
+ </div>
194
+ </div>
195
+
196
+ <div class="bg-white p-6 rounded-lg shadow-sm" data-aos="fade-up" data-aos-delay="300">
197
+ <div class="flex items-center mb-4">
198
+ <i data-feather="star" class="text-amber-500 mr-1"></i>
199
+ <i data-feather="star" class="text-amber-500 mr-1"></i>
200
+ <i data-feather="star" class="text-amber-500 mr-1"></i>
201
+ <i data-feather="star" class="text-amber-500 mr-1"></i>
202
+ <i data-feather="star" class="text-amber-500"></i>
203
+ </div>
204
+ <p class="text-gray-700 mb-4">"The chocolate cake roll is my go-to for birthdays - always a crowd pleaser!"</p>
205
+ <div class="flex items-center">
206
+ <img src="http://static.photos/people/200x200/108" alt="Customer" class="w-10 h-10 rounded-full mr-3">
207
+ <span class="font-medium">Emma L.</span>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </section>
213
+
214
+ <!-- CTA Section -->
215
+ <section class="py-16 px-6 bg-primary text-white text-center">
216
+ <div class="max-w-3xl mx-auto" data-aos="fade-up">
217
+ <h2 class="text-3xl font-bold mb-6">Ready to Taste the Difference?</h2>
218
+ <p class="text-xl mb-8">Visit us today or order online for pickup. Our rolls are best enjoyed fresh!</p>
219
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
220
+ <button class="bg-white hover:bg-secondary text-primary font-bold py-3 px-8 rounded-full transition duration-300">
221
+ Order Online
222
+ </button>
223
+ <button class="border-2 border-white hover:bg-amber-700 text-white font-bold py-3 px-8 rounded-full transition duration-300">
224
+ Visit Us
225
+ </button>
226
+ </div>
227
+ </div>
228
+ </section>
229
+
230
+ <!-- Footer -->
231
+ <footer class="bg-primary text-white py-12 px-6">
232
+ <div class="container mx-auto">
233
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
234
+ <div>
235
+ <h3 class="text-xl font-bold mb-4">The Roll Joint</h3>
236
+ <p class="text-secondary">Artisan bakery specializing in handcrafted rolls since 2010.</p>
237
+ </div>
238
+ <div>
239
+ <h4 class="font-bold mb-4">Hours</h4>
240
+ <p class="mb-1">Monday - Friday: 7am - 6pm</p>
241
+ <p class="mb-1">Saturday: 8am - 5pm</p>
242
+ <p>Sunday: 9am - 3pm</p>
243
+ </div>
244
+ <div>
245
+ <h4 class="font-bold mb-4">Contact</h4>
246
+ <p class="mb-1">123 Baker Street</p>
247
+ <p class="mb-1">Rollington, CA 90210</p>
248
+ <p class="mb-1">(555) 123-4567</p>
249
+ <p>hello@rolljoint.com</p>
250
+ </div>
251
+ <div>
252
+ <h4 class="font-bold mb-4">Follow Us</h4>
253
+ <div class="flex space-x-4">
254
+ <a href="#" class="hover:text-secondary"><i data-feather="instagram"></i></a>
255
+ <a href="#" class="hover:text-secondary"><i data-feather="facebook"></i></a>
256
+ <a href="#" class="hover:text-secondary"><i data-feather="twitter"></i></a>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ <div class="border-t border-teal-700 mt-8 pt-8 text-center text-secondary">
261
+ <p>&copy; 2023 The Roll Joint Bakery. All rights reserved.</p>
262
+ </div>
263
+ </div>
264
+ </footer>
265
+
266
+ <script>
267
+ AOS.init({
268
+ duration: 800,
269
+ easing: 'ease-in-out',
270
+ once: true
271
+ });
272
+ feather.replace();
273
+ </script>
274
+ </body>
275
  </html>
menu.html ADDED
@@ -0,0 +1,197 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Menu | The Roll Joint</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ .menu-category {
13
+ scroll-margin-top: 100px;
14
+ }
15
+ .menu-item:hover {
16
+ transform: scale(1.02);
17
+ }
18
+ </style>
19
+ </head>
20
+ <body class="font-sans bg-pink-50">
21
+ <!-- Navigation -->
22
+ <nav class="bg-primary text-white sticky top-0 z-50 shadow-lg">
23
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
24
+ <a href="index.html" class="text-2xl font-bold flex items-center">
25
+ <i data-feather="coffee" class="mr-2"></i>
26
+ The Roll Joint
27
+ </a>
28
+ <div class="hidden md:flex space-x-8">
29
+ <a href="index.html" class="hover:text-secondary">Home</a>
30
+ <a href="menu.html" class="hover:text-secondary font-bold">Menu</a>
31
+ <a href="about.html" class="hover:text-secondary">About</a>
32
+ <a href="contact.html" class="hover:text-secondary">Contact</a>
33
+ <a href="gallery.html" class="hover:text-secondary">Gallery</a>
34
+ </div>
35
+ <button class="md:hidden">
36
+ <i data-feather="menu"></i>
37
+ </button>
38
+ </div>
39
+ </nav>
40
+
41
+ <!-- Menu Header -->
42
+ <section class="bg-primary text-white py-20 text-center">
43
+ <div class="container mx-auto px-6">
44
+ <h1 class="text-4xl md:text-5xl font-bold mb-4" data-aos="fade-up">Our Menu</h1>
45
+ <p class="text-xl max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">Handcrafted with love using premium ingredients and traditional baking techniques</p>
46
+ </div>
47
+ </section>
48
+
49
+ <!-- Menu Categories -->
50
+ <section class="py-12 px-6">
51
+ <div class="container mx-auto">
52
+ <div class="flex flex-wrap justify-center gap-4 mb-12" data-aos="fade-up">
53
+ <a href="#signature" class="bg-primary hover:bg-teal-700 text-white px-6 py-2 rounded-full">Signature Rolls</a>
54
+ <a href="#seasonal" class="bg-secondary hover:bg-pink-400 text-white px-6 py-2 rounded-full">Seasonal Specials</a>
55
+ <a href="#savory" class="bg-accent hover:bg-amber-600 text-white px-6 py-2 rounded-full">Savory Options</a>
56
+ <a href="#beverages" class="bg-primary hover:bg-teal-700 text-white px-6 py-2 rounded-full">Beverages</a>
57
+ </div>
58
+
59
+ <!-- Signature Rolls -->
60
+ <div id="signature" class="menu-category mb-16">
61
+ <h2 class="text-3xl font-bold mb-8 text-primary border-b-2 border-primary pb-2">Signature Rolls</h2>
62
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
63
+ <div class="menu-item bg-white p-6 rounded-lg shadow-sm transition duration-300" data-aos="fade-up">
64
+ <div class="flex justify-between">
65
+ <h3 class="text-xl font-bold text-primary">Classic Cinnamon Roll</h3>
66
+ <span class="font-bold text-accent">$4.50</span>
67
+ </div>
68
+ <p class="text-gray-600 mt-2">Our famous cinnamon roll with cream cheese frosting and a hint of vanilla</p>
69
+ </div>
70
+ <div class="menu-item bg-white p-6 rounded-lg shadow-sm transition duration-300" data-aos="fade-up">
71
+ <div class="flex justify-between">
72
+ <h3 class="text-xl font-bold text-primary">Honey Sweet Roll</h3>
73
+ <span class="font-bold text-accent">$5.00</span>
74
+ </div>
75
+ <p class="text-gray-600 mt-2">Light and fluffy with a delicate honey glaze and almond flakes</p>
76
+ </div>
77
+ <div class="menu-item bg-white p-6 rounded-lg shadow-sm transition duration-300" data-aos="fade-up">
78
+ <div class="flex justify-between">
79
+ <h3 class="text-xl font-bold text-primary">Chocolate Cake Roll</h3>
80
+ <span class="font-bold text-accent">$6.00</span>
81
+ </div>
82
+ <p class="text-gray-600 mt-2">Rich chocolate sponge rolled with whipped cream and berries</p>
83
+ </div>
84
+ <div class="menu-item bg-white p-6 rounded-lg shadow-sm transition duration-300" data-aos="fade-up">
85
+ <div class="flex justify-between">
86
+ <h3 class="text-xl font-bold text-primary">Caramel Pecan Roll</h3>
87
+ <span class="font-bold text-accent">$5.50</span>
88
+ </div>
89
+ <p class="text-gray-600 mt-2">Buttery dough filled with caramel and toasted pecans</p>
90
+ </div>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- Seasonal Specials -->
95
+ <div id="seasonal" class="menu-category mb-16">
96
+ <h2 class="text-3xl font-bold mb-8 text-primary border-b-2 border-primary pb-2">Seasonal Specials</h2>
97
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
98
+ <div class="menu-item bg-white p-6 rounded-lg shadow-sm transition duration-300" data-aos="fade-up">
99
+ <div class="flex justify-between">
100
+ <h3 class="text-xl font-bold text-primary">Spiced Pumpkin Roll</h3>
101
+ <span class="font-bold text-accent">$5.50</span>
102
+ </div>
103
+ <p class="text-gray-600 mt-2">Seasonal favorite with pumpkin spice and cream cheese filling</p>
104
+ </div>
105
+ <div class="menu-item bg-white p-6 rounded-lg shadow-sm transition duration-300" data-aos="fade-up">
106
+ <div class="flex justify-between">
107
+ <h3 class="text-xl font-bold text-primary">Apple Cinnamon Roll</h3>
108
+ <span class="font-bold text-accent">$5.25</span>
109
+ </div>
110
+ <p class="text-gray-600 mt-2">Fresh apple chunks with cinnamon sugar in our signature dough</p>
111
+ </div>
112
+ <div class="menu-item bg-white p-6 rounded-lg shadow-sm transition duration-300" data-aos="fade-up">
113
+ <div class="flex justify-between">
114
+ <h3 class="text-xl font-bold text-primary">Peppermint Mocha Roll</h3>
115
+ <span class="font-bold text-accent">$5.75</span>
116
+ </div>
117
+ <p class="text-gray-600 mt-2">Chocolate coffee dough with peppermint cream cheese frosting</p>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Beverages -->
123
+ <div id="beverages" class="menu-category">
124
+ <h2 class="text-3xl font-bold mb-8 text-primary border-b-2 border-primary pb-2">Beverages</h2>
125
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
126
+ <div class="menu-item bg-white p-6 rounded-lg shadow-sm transition duration-300" data-aos="fade-up">
127
+ <div class="flex justify-between">
128
+ <h3 class="text-xl font-bold text-primary">Artisan Coffee</h3>
129
+ <span class="font-bold text-accent">$3.50</span>
130
+ </div>
131
+ <p class="text-gray-600 mt-2">Locally roasted organic coffee</p>
132
+ </div>
133
+ <div class="menu-item bg-white p-6 rounded-lg shadow-sm transition duration-300" data-aos="fade-up">
134
+ <div class="flex justify-between">
135
+ <h3 class="text-xl font-bold text-primary">Specialty Latte</h3>
136
+ <span class="font-bold text-accent">$4.50</span>
137
+ </div>
138
+ <p class="text-gray-600 mt-2">Choose from vanilla, caramel, or mocha</p>
139
+ </div>
140
+ <div class="menu-item bg-white p-6 rounded-lg shadow-sm transition duration-300" data-aos="fade-up">
141
+ <div class="flex justify-between">
142
+ <h3 class="text-xl font-bold text-primary">Fresh Juices</h3>
143
+ <span class="font-bold text-accent">$4.00</span>
144
+ </div>
145
+ <p class="text-gray-600 mt-2">Orange, apple, or carrot-ginger</p>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Footer -->
153
+ <footer class="bg-primary text-white py-12 px-6">
154
+ <div class="container mx-auto">
155
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
156
+ <div>
157
+ <h3 class="text-xl font-bold mb-4">The Roll Joint</h3>
158
+ <p class="text-secondary">Artisan bakery specializing in handcrafted rolls since 2010.</p>
159
+ </div>
160
+ <div>
161
+ <h4 class="font-bold mb-4">Hours</h4>
162
+ <p class="mb-1">Monday - Friday: 7am - 6pm</p>
163
+ <p class="mb-1">Saturday: 8am - 5pm</p>
164
+ <p>Sunday: 9am - 3pm</p>
165
+ </div>
166
+ <div>
167
+ <h4 class="font-bold mb-4">Contact</h4>
168
+ <p class="mb-1">123 Baker Street</p>
169
+ <p class="mb-1">Rollington, CA 90210</p>
170
+ <p class="mb-1">(555) 123-4567</p>
171
+ <p>hello@rolljoint.com</p>
172
+ </div>
173
+ <div>
174
+ <h4 class="font-bold mb-4">Follow Us</h4>
175
+ <div class="flex space-x-4">
176
+ <a href="#" class="hover:text-secondary"><i data-feather="instagram"></i></a>
177
+ <a href="#" class="hover:text-secondary"><i data-feather="facebook"></i></a>
178
+ <a href="#" class="hover:text-secondary"><i data-feather="twitter"></i></a>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ <div class="border-t border-teal-700 mt-8 pt-8 text-center text-secondary">
183
+ <p>&copy; 2023 The Roll Joint Bakery. All rights reserved.</p>
184
+ </div>
185
+ </div>
186
+ </footer>
187
+
188
+ <script>
189
+ AOS.init({
190
+ duration: 800,
191
+ easing: 'ease-in-out',
192
+ once: true
193
+ });
194
+ feather.replace();
195
+ </script>
196
+ </body>
197
+ </html>