HeavenlyCrumbs/index.html at main · shendytria/HeavenlyCrumbs · GitHub

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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HeavenlyCrumbs - Gift your Happy Moments</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <!-- 01 Navigation Right -->
    <header>
        <div class="logo">HeavenlyCrumbs</div>
        <div class="nav-links">
            <a href="index.html">Home</a>
            <a href="#order-form">Order Now</a>
            <a href="pages/our-cakes.html">Our Cakes</a>
            <a href="pages/about.us.html">About Us</a>
        </div>
        <a href="pages/signup.html" class="sign-up-btn" style="text-decoration: none;">Sign Up</a>
        <button class="mobile-menu-btn" id="mobileMenuBtn">☰</button>
    </header>

    <!-- 02 Hero Center Image -->
    <section class="hero">
        <div class="marble-bg"></div>

        <h1>Gift your Happy Moments</h1>
        <p>Our artisanal cakes are crafted with love, decorated with gold leaf accents and edible flowers for your
            special occasions.</p>
        <a href="#order-form" class="get-started-btn" style="text-decoration: none;">Order Now</a>

        <!-- Swipeable Image Slider -->
        <div class="slider-container">
            <div class="slides" id="slides">
                <div class="slide"
                    style="background-image: url('https://i.pinimg.com/736x/8d/e4/b4/8de4b4fb543ebf1bfb826d648b62ab89.jpg');">
                    <!-- Placeholder for Wedding Celebration Image -->
                </div>
                <div class="slide"
                    style="background-image: url('https://i.pinimg.com/736x/d9/0f/17/d90f176d110b6a19ff38044b817d7eca.jpg');">
                    <!-- Placeholder for Birthday Party Image -->
                </div>
                <div class="slide"
                    style="background-image: url('https://i.pinimg.com/736x/64/5d/90/645d90a67d79b3c01ab0ebaa6cd23ef3.jpg');">
                    <!-- Placeholder for Anniversary Celebration Image -->
                </div>
                <div class="slide"
                    style="background-image: url('https://i.pinimg.com/736x/74/d5/8f/74d58ff1f6e41d984bf5812968743c69.jpg');">
                    <!-- Placeholder for Graduation Party Image -->
                </div>
            </div>

            <!-- Navigation Dots -->
            <div class="slider-nav" id="sliderNav"></div>

            <!-- Navigation Arrows -->
            <button class="slider-arrow prev" id="prevBtn">&#10094;</button>
            <button class="slider-arrow next" id="nextBtn">&#10095;</button>
        </div>
    </section>

    <!-- 03 Testimonial -->
    <section class="testimonial-section">
        <div class="testimonial">
            "HeavenlyCrumbs creates the most beautiful and delicious cakes I've ever experienced. The blue marble cake
            with gold accents was the highlight of our celebration. Everyone was asking where we got such an amazing
            masterpiece!"
        </div>
        <div class="testimonial-author">- Sarah Thompson, Happy Customer</div>
    </section>

    <!-- 04 Feature Quote Left -->
    <section class="feature-quote">
        <div class="quote-content">
            <h2>Crafted With Love</h2>
            <p>At HeavenlyCrumbs, we believe that every occasion deserves a touch of elegance. Our master bakers combine
                traditional techniques with modern artistry to create cakes that are not just desserts, but centerpieces
                of your celebrations.</p>
            <p>"The secret ingredient in every cake we make is the passion and dedication we put into each creation. We
                strive for perfection in taste and beauty."</p>
            <a href="pages/our-cakes.html" class="get-started-btn" style="text-decoration: none;">View Our
                Collection</a>
        </div>
        <div class="quote-image"
            style="background-image: url('https://t3.ftcdn.net/jpg/02/71/45/02/360_F_271450283_DPd0M7EiSvJXtPFkgMM8YOy8Fx4ibuae.jpg');">
        </div>
    </section>

    <!-- 05 Posts Tall -->
    <section class="posts-section">
        <h2>Our Special Creations</h2>
        <div class="posts-container">
            <div class="post-card">
                <div class="post-image"
                    style="background-image: url('https://i.pinimg.com/736x/68/e3/7b/68e37bc58c2b01f00707d5382dbbd9df.jpg');">
                </div>
                <div class="post-content">
                    <h3>Blue Marble Wonder</h3>
                    <p>Our signature blue marble cake with gold leaf accents and buttercream frosting. Perfect for
                        birthday.</p>
                    <div class="price-info">
                        <p>$65.00 for 8" round (serves 10-12)</p>
                        <p>$85.00 for 10" round (serves 16-20)</p>
                    </div>
                    <div class="reviews">
                        <h4>Customer Reviews</h4>
                        <div class="review">
                            <p class="stars">★★★★★</p>
                            <p>"The Blue Marble Wonder was the highlight of my daughter's birthday. Everyone asked where
                                we got it!" - Sarah M.</p>
                        </div>
                        <div class="review">
                            <p class="stars">★★★★</p>
                            <p>"Not only beautiful but absolutely delicious. The gold leaf accents were stunning." -
                                Thomas P.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="post-card">
                <div class="post-image"
                    style="background-image: url('https://i.pinimg.com/736x/47/bf/41/47bf41ce330392b781b6aa7280396bbc.jpg');">
                </div>
                <div class="post-content">
                    <h3>Floral Fantasy</h3>
                    <p>Delicate vanilla sponge adorned with handcrafted edible flowers. A beautiful choice for spring
                        celebrations.</p>
                    <div class="cake-details">
                        <div class="price-info">
                            <p>$70.00 for 8" round (serves 10-12)</p>
                            <p>$90.00 for 10" round (serves 16-20)</p>
                        </div>
                        <div class="reviews">
                            <h4>Customer Reviews</h4>
                            <div class="review">
                                <p class="stars">★★★★★</p>
                                <p>"I ordered this for my wedding shower and it was absolutely gorgeous. The edible
                                    flowers looked too pretty to eat!" - Emma R.</p>
                            </div>
                            <div class="review">
                                <p class="stars">★★★★</p>
                                <p>"Beautiful cake with wonderful vanilla flavor. The flowers were a work of art." -
                                    Michael L.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="post-card">
                <div class="post-image"
                    style="background-image: url('https://i.pinimg.com/736x/34/69/9d/34699dfc3334fd8a7154bede7abc05b5.jpg');">
                </div>
                <div class="post-content">
                    <h3>Chocolate Indulgence</h3>
                    <p>Triple layer chocolate cake with ganache filling and chocolate shavings. A dream for chocolate
                        lovers.</p>
                    <div class="cake-details">
                        <div class="price-info">
                            <p>$60.00 for 8" round (serves 10-12)</p>
                            <p>$80.00 for 10" round (serves 16-20)</p>
                        </div>
                        <div class="reviews">
                            <h4>Customer Reviews</h4>
                            <div class="review">
                                <p class="stars">★★★★★</p>
                                <p>"This is the richest, most decadent chocolate cake I've ever had. Perfect for our
                                    anniversary!" - David W.</p>
                            </div>
                            <div class="review">
                                <p class="stars">★★★★★</p>
                                <p>"Ordered for my husband's birthday and he said it was the best chocolate cake he's
                                    ever had. Will definitely order again!" - Lisa K.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 06 Feature Split Right -->
    <section class="feature-split">
        <div class="split-content">
            <h2>Why Choose HeavenlyCrumbs?</h2>
            <p>We take pride in creating custom cakes that not only look stunning but taste divine. Each cake is
                handcrafted with premium ingredients and attention to every detail.</p>
            <ul>
                <li>Premium quality ingredients</li>
                <li>Customized designs for every occasion</li>
                <li>Gold leaf and edible flower decorations</li>
                <li>Nationwide delivery options</li>
                <li>Gluten-free and vegan options available</li>
            </ul>
            <a href="pages/about.us.html" class="get-started-btn" style="text-decoration: none;">Read More</a>
        </div>
        <div class="quote-image w-full md:w-1/2 min-h-[300px] bg-cover bg-center rounded-lg shadow-lg"
            style="background-image: url('https://i.pinimg.com/736x/ce/3a/12/ce3a12067bcef74f8ad2723ed31907b4.jpg');">
        </div>
    </section>

    <!-- 07 CTA Form -->
    <section id="order-form" class="cta-section">
        <h2>Order Your Custom Cake</h2>
        <p>Tell us about your special occasion, and we'll create the perfect cake for your celebration. Fill out the
            form below to get started.</p>
        <form class="cta-form">
            <div class="form-group">
                <input type="text" placeholder="Your Name">
            </div>
            <div class="form-group">
                <input type="email" placeholder="Your Email">
            </div>
            <div class="form-group">
                <input type="tel" placeholder="Your Phone">
            </div>
            <div class="form-group">
                <textarea placeholder="Tell us about your cake requirements and event date"></textarea>
            </div>
            <a href="pages/signup.html" class="submit-btn" style="text-decoration: none;">Send Request</a>
        </form>
    </section>

    <!-- 08 Footer Center -->
    <footer>
        <div class="footer-links">
            <a href="index.html">Home</a>
            <a href="pages/our-cakes.html">Our Cakes</a>
            <a href="pages/about.us.html">About Us</a>
            <a href="#order-form">Contact</a>
        </div>
        <div class="social-icons">
            <div class="social-icon whatsapp">
                <a href="https://wa.me/6282213280162" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="white">
                        <path
                            d="M17.498 14.382c-.301-.15-1.767-.867-2.04-.966-.273-.101-.473-.15-.673.15-.197.295-.771.964-.944 1.162-.175.195-.349.21-.646.075-.3-.15-1.263-.465-2.403-1.485-.888-.795-1.484-1.77-1.66-2.07-.174-.3-.019-.465.13-.615.136-.135.301-.345.451-.523.146-.181.194-.301.297-.496.1-.21.049-.375-.025-.524-.075-.15-.672-1.62-.922-2.206-.24-.584-.487-.51-.672-.51-.172-.015-.371-.015-.571-.015-.2 0-.523.074-.797.359-.273.3-1.045 1.02-1.045 2.475s1.07 2.865 1.219 3.075c.149.195 2.105 3.195 5.1 4.485.714.3 1.27.48 1.704.629.714.227 1.365.195 1.88.121.574-.091 1.767-.721 2.016-1.426.255-.705.255-1.29.18-1.425-.074-.135-.27-.21-.57-.345m-5.446 7.443h-.016c-1.77 0-3.524-.48-5.055-1.38l-.36-.214-3.75.975 1.005-3.645-.239-.375c-.99-1.576-1.516-3.391-1.516-5.26 0-5.445 4.436-9.884 9.939-9.884 2.64 0 5.122 1.03 6.988 2.898 1.866 1.869 2.893 4.352 2.893 6.994-.003 5.448-4.437 9.891-9.885 9.891m8.413-18.297C18.306 1.368 15.429.01 12.238 0 5.555 0 .15 5.397.146 12.086c0 2.1.547 4.15 1.579 5.955l-1.675 6.119 6.28-1.646c1.737.948 3.693 1.447 5.686 1.447h.005c6.682 0 12.088-5.397 12.093-12.085 0-3.205-1.248-6.219-3.514-8.484" />
                    </svg>
                </a>
            </div>
            <div class="social-icon instagram">
                <a href="https://www.instagram.com/shendytriaa" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="white">
                        <path
                            d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
                    </svg>
                </a>
            </div>
        </div>
        <div class="copyright">
            <p>© 2025 HeavenlyCrumbs. All Rights Reserved.</p>
            <p>Shendy Tria, Master Baker at HeavenlyCrumbs</p>
        </div>
    </footer>

    <script src="js/scripts.js"></script>
</body>