Mana-Bakery-Website/index.html at main · PabloGarcia-Dev/Mana-Bakery-Website · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home - Mana Bakery</title>
    <meta name="description" content="Maná Bakery in Jacksonville, FL specializing in naturally fermented sourdough breads and gourmet sweet treats made from scratch. Place your order Today!">
    <meta name="keywords" content="Bakery, Jacksonville, Sourdough, Cookies, Mana Bakery, Jax Bakery">
    <meta name="color-scheme" content="light only">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="images/logos/Maná-logo_bg_semi-removed.png">
    <link rel="apple-touch-icon" href="images/logos/Maná-Logo.png">
    <script src="https://kit.fontawesome.com/58e49f57a0.js" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <header class="header_container">
        <div class="header">
            <nav class="header_section social_links_icons">
                <a href="https://m.facebook.com/profile.php?id=61584971847612" target="_blank" title="Go to Our Official Facebook Page"><i class="fa-brands fa-facebook"></i></a>
                <a href="https://www.instagram.com/mana.bakery.jax?igsh=ejdxdzRsa2gwdTNm" target="_blank" title="Go to Our Official Instagram Page"><i class="fa-brands fa-instagram"></i></a>
                <a href="https://www.tiktok.com/@mana.bakery.jax?_r=1&_t=ZP-927RXbzBLTi" target="_blank" title="Go to Our Official TikTok Page"><i class="fa-brands fa-tiktok"></i></a>
            </nav>

            <div class="header_section shopping_icons">
                <div class="cart-icon"><i class="fa-solid fa-cart-shopping"></i></div>
            </div>
        </div>

        <div class="image_banner"></div>

        <nav class="page_navigation">
            <a href="pages/bakedGoods.html" class="pn_link pn_text">Baked Goods</a>
            <a href="index.html" class="pn_link pn_link_logo">
                <img src="images/logos/Maná-Logo.png" alt="Mana Logo">
            </a>
            <a href="pages/about.html" class="pn_link pn_text">About Us</a>
        </nav>
    </header>

    <div class="section_divider header-content_divider">
        <hr>
    </div>

    <h2 class="section_title" id="baked_goods_otm_title">Baked Goods of the Month!</h2>
    <div class="bago_card_container">
        <!--'bago' stands for 'Baked Goods'-->
        <ul class="bago_card_box">
        </ul>
    </div>

    <a class="to_all_bago_link" href="pages/bakedGoods.html" title="Go to Baked Goods Page">View all...</a>

    <div class="message">
        <p>For cookies, a minimum of 4 cookies need to be selected to checkout. The cookie menu updates the first of every month.</p>
        <p>We are open for orders and pick-ups <b>everyday except Sundays</b>.</p>
        <p><b>**</b> Located in the <b>Mandarin, San Jose</b> area of Jacksonville, Fl. <b>**</b></p>
    </div>

    <div class="section_divider message-bago-care_divider">
        <hr>
    </div>

    <h2 class="section_title baked_goods_care_title">Taking Care of Your Goods</h2>
    <div class="bago_care_container">
        <div class="slider-wrapper">
            <div class="slider">
                <div class="bago_care_card cookie_care" id="slide-1">
                    <h3 class="bago_care_title">Cookie Care</h3>
                    <h4 class="instruction_title">Storing</h4>
                    <p class="bago_care_intstruction">Store in air-tight container for up to 1 week</p>
                    <p class="bago_care_intstruction">Fridge storage allowed</p>
                    <div class="section_divider bago_care_instruction_divider">
                        <hr>
                    </div>
                    <h4 class="instruction_title">Freezing</h4>
                    <p class="bago_care_intstruction">Can be kept frozen in an air-tight container for up to a month</p>
                    <div class="section_divider bago_care_instruction_divider">
                        <hr>
                    </div>
                    <h4 class="instruction_title">Re-Heating</h4>
                    <p class="bago_care_intstruction">Best method: Preheat oven to 350°F (180°C) and warm the cookies (out of the packaging) for 4-5 minutes (7-10 minutes if frozen)</p>
                    <p class="bago_care_intstruction">Microwave: Heat out of the packaging for 8-10 seconds</p>
                    <div class="section_divider bago_care_instruction_divider">
                        <hr>
                    </div>
                    <i class="fa-solid fa-cookie-bite bago_care_card_icon"></i>
                </div>

                <div class="bago_care_card sourdough_care" id="slide-2">
                    <h3 class="bago_care_title" id="bread_care_title">Sourdough Care</h3>
                    <h4 class="instruction_title">Storing</h4>
                    <p class="bago_care_intstruction">Store in air-tight container for up to 4 days at room temperature</p>
                    <p class="bago_care_intstruction">Fridge storage is not advised</p>
                    <div class="section_divider bago_care_instruction_divider">
                        <hr>
                    </div>
                    <h4 class="instruction_title">Freezing</h4>
                    <p class="bago_care_intstruction">Freeze bread in air-tight container for up to 2 months</p>
                    <div class="section_divider bago_care_instruction_divider">
                        <hr>
                    </div>
                    <h4 class="instruction_title">Re-Heating</h4>
                    <p class="bago_care_intstruction">Preheat oven to 350°F (180°C) and warm the bread for 2-3 minutes</p>
                    <p class="bago_care_intstruction">If frozen, let bread thaw out at room temperature, then preheat oven to 350°F (180°C) and warm the bread for 5-7 minutes</p>
                    <div class="section_divider bago_care_instruction_divider">
                        <hr>
                    </div>
                    <i class="fa-solid fa-bread-slice bago_care_card_icon"></i>
                </div>
            </div>

            <div class="slider-nav">
                <a href="#" onclick="scrollSlide(0); return false;"></a>
                <a href="#" onclick="scrollSlide(1); return false;"></a>
            </div>
        </div>
    </div>

    <div class="section_divider bago-care-reviews_divider">
        <hr>
    </div>

    <h2 class="section_title reviews_title">Check out our reviews!</h2>
    <div class="all-reviews">
        <div class="reviews-container" id="reviews-container-1">
            <div class="review review-spaced-1" id="review1">
                <span class="quote">"</span>
                <p class="review-text">I ordered a total of 20 cookies for my Christmas party. First of all the cookies were delicious. My guest couldn’t stop talking about how good they were. They were delivered to me beautifully packaged and on time. I will definitely order more of these cookies for future events.</p>
                <div class="stars"></div>
                <h2 class="review-name">Susan Pearson</h2>
            </div>
            <div class="review" id="review2">
                <span class="quote">"</span>
                <p class="review-text">Yummy cookies, excellent service! :))</p>
                <div class="stars"></div>
                <h2 class="review-name">Adna Avdic</h2>
            </div>
            <div class="review review-spaced-1" id="review3">
                <span class="quote">"</span>
                <p class="review-text">The cookies are amazing and all super delicious, the website is super easy to use I’ve loved everything so far from the service to the product!!</p>
                <div class="stars"></div>
                <h2 class="review-name">Geni Aboytes</h2>
            </div>
        </div>
        <div class="reviews-container" id="reviews-container-2">
            <div class="review review-spaced-2" id="review4">
                <span class="quote">"</span>
                <p class="review-text">The cookies were delicious and the sourdough bread was amazing.Your attention to detail really shows.</p>
                <div class="stars"></div>
                <h2 class="review-name">María Larreal</h2>
            </div>
            <div class="review" id="review5">
                <span class="quote">"</span>
                <p class="review-text">Amazing service! So fast an great communication, the cookies were great.</p>
                <div class="stars"></div>
                <h2 class="review-name">Amina Zelihic</h2>
            </div>
            <div class="review review-spaced-2" id="review6">
                <span class="quote">"</span>
                <p class="review-text">Some of the best cookies I’ve ever had. I will definitely be coming back for more!</p>
                <div class="stars"></div>
                <h2 class="review-name">Mason Day</h2>
            </div>
        </div>
    </div>

    <footer class="footer">
        <nav class="footer_item page_navigation_container_footer">
            <a class="single_pn_link_footer" id="selected" href="index.html" title="Go to Home Page">Home</a>
            <a class="single_pn_link_footer" id="ph_backedGoods" href="pages/bakedGoods.html" title="Go to Baked Goods Page">Baked Goods</a>
            <a class="single_pn_link_footer" id="pn_about" href="pages/about.html" title="Go to About Page">About us</a>
        </nav>

        <div class="footer_item logo-info">
            <img src="images/logos/Maná-logo_bg_removed.png" alt="Mana Bakery Logo">
            <p>"All Mana Bakery products are made in a cottage food operation that is not subject to</p>
            <p>Florida's food safety regulations</p>
            <p>Products are produced in a home kitchen that handles treenuts and peanuts"</p>
        </div>

        <nav class="footer_item social_links_info">
            <h2>Check out our socials!</h2>
            <div class="social_links_icons">
                <a href="https://m.facebook.com/profile.php?id=61584971847612" target="_blank" title="Go to Our Official Facebook Page"><i class="fa-brands fa-facebook"></i></a>
                <a href="https://www.instagram.com/mana.bakery.jax?igsh=ejdxdzRsa2gwdTNm" target="_blank" title="Go to Our Official Instagram Page"><i class="fa-brands fa-instagram"></i></a>
                <a href="https://www.tiktok.com/@mana.bakery.jax?_r=1&_t=ZP-927RXbzBLTi" target="_blank" title="Go to Our Official TikTok Page"><i class="fa-brands fa-tiktok"></i></a>
            </div>
        </nav>
    </footer>
    <div class="developer-credit">
        <p>© <span id="year"></span> Mana Bakery. All rights reserved. Site Developed by <a href="https://pablodgarl.wixsite.com/pablogarciaportfolio" target="_blank">Pablo Garcia</a></p>
    </div>
    <script>
        // Automatically sets the year to the current year
        document.getElementById("year").textContent = new Date().getFullYear();

        function scrollSlide(index) {
            const slider = document.querySelector('.slider');
            const card = slider.children[index];
            card.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
        }
    </script>

    <!-- Side Cart -->
    <div id="cart-sidebar" class="cart-sidebar">
        <div class="cart-sidebar-header">
            <h2>Your Cart</h2>
            <i class="fa-solid fa-xmark close-cart" onclick="toggleCart()"></i>
        </div>
        <div id="sidebar-cart-content" class="sidebar-cart-content">
            </div>
        <div class="cart-sidebar-footer">
            <div class="total-container">
                <span>Total:</span>
                <span id="cart-total-price">$0.00</span>
            </div>
            <a href="pages/orderRequests.html" class="checkout-btn">Order Now</a>
        </div>
    </div>
    <div id="cart-overlay" class="cart-overlay" onclick="toggleCart()"></div>

    <script src="products.js" defer></script>
    <script src="cart.js" defer></script>
    <script src="main.js"></script>
</body>
</html>