capstone/index.html at master · alcyonray/capstone · 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
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Foodery</title>
    <!--BOOTSTRAP CSS-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <!--CUSTOM CSS-->
    <link href="static/CSS/style.css" rel="stylesheet">
    <link href="static/CSS/media-queries.css" rel="stylesheet">
    <!--FONTAWESOME-->
    <script src="https://kit.fontawesome.com/c0319300c2.js" crossorigin="anonymous"></script>

</head>

<body>
    <nav class="navbar navbar-expand-lg" aria-label="Third navbar example">
        <div class="container-fluid">
            <a class="foodery-logo" href="#">Foodery</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMobileDropDown"
                aria-controls="navMobileDropDown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!--The navMobileDropDown is used to connect the data-bs-target to toggle the mobile menu-->
            <div class="collapse navbar-collapse" id="navMobileDropDown">
                <ul class="navbar-nav me-auto mb-2 mb-sm-0">
                    <li class="nav-item dropdown mx-3">
                        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"
                            aria-expanded="false">Food</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">All Food</a></li>
                            <li><a class="dropdown-item" href="#">Healthy</a></li>
                            <li><a class="dropdown-item" href="#">Quick</a></li>
                            <li><a class="dropdown-item" href="#">Featured</a></li>
                            <li><a class="dropdown-item" href="#">Vegan</a></li>
                            <li><a class="dropdown-item" href="#">Desserts</a></li>
                        </ul>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#">Drinks</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#featured">Featured</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#newsletter">Newsletter</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!--HERO BANNER-->
    <section id="home">
        <div class="container-fluid">
            <!--MOBILE-->
            <div class="row align-items-center">
                <div class="col-12 col-lg-6 hero-text">
                    <h1 class="display-5 fw-bold mb-3">Simple Recipes to save you time and money</h1>
                    <p class="mt-4">Satisfy your cravings with our wide selection of simple and fast
                        recipes.</p>
                </div>
                <div class="col-12 col-lg-6">
                    <img src="static/images/salmon-bowl.jpg" class="d-block mx-lg-auto img-fluid hero-image"
                        alt="Image of Salmon Bowl" loading="lazy">
                </div>
            </div>
        </div>
    </section>
    <!--FEATURED RECIPE-->
    <div class="container-fluid section-bg" id="featured">
        <div class="row">
            <div class="col-8 mx-auto">
                <h1 class="featured-header">Featured</h1>
                <div class="card card-styles mb-3">
                    <div class="row g-0">
                        <div class="col-md-6" id="ramenCardImage">
                            <img id="ramenImage" src="./static/images/vegan-ramen.jpg" alt="">
                            <span><!--Nested area for recipe image--></span>
                        </div>
                        <div class="col-md-6" id="ramenDetails">
                            <div class="card-body">
                                <h5>Vegan Ramen</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in lectus et massa dignissim
                                    mattis quis sed eros. Fusce eget lacinia nisl. Nam ullamcorper diam eros. Praesent laoreet
                                    molestie mauris, ut aliquam arcu varius non. Nam rutrum diam non condimentum eleifend. Donec
                                    gravida sed dolor iaculis consectetur. Sed vehicula ac est quis dictum. </p>
                                <button id="viewButton" class="btn align-items-center">View Recipe</button>
                                <div id="iconBar">
                                    <!--FONT AWESOME ICONS https://fontawesome.com/icons-->
                                    <i class="fa-solid fa-heart" id="likeIcon" onclick="addLike()"></i>
                                    <i id="likeCounter"></i>
                                    <i class="fa-solid fa-message"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--NEWSLETTER SIGNUP FORM-->
    <div class="container-fluid" id="newsletter">
        <div class="row">
            <div class="col-10 mx-auto">
                <div class="card" id="newsletterBox">
                    <div class="row">
                        <h2 id="newsletterHeader">Newsletter</h2>
                    </div>
                    <div class="row">
                        <p id="signupText">Sign up for our newsletter to get the latest recipe and offer!</p>
                    </div>
                    <div class="row">
                        <div class="col-md-8">
                            <input type="text" placeholder="Email address" id="emailInput">
                        </div>
                        <div class="col-md-4">
                            <button class="btn" type="submit" id="newsletterSubmitButton">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--FOOTER-->
    <footer class="fixed-bottom">
        <div class="row justify-content-center align-items-center">
            <div class="col align-middle">
                <a class="foodery-logo" href="#home">Foodery</a>
            </div>
            <div class="col-sm-1 align-middle">
                <a class="secondaryLink" href="#home">Home</a>
            </div>
            <div class="col-sm-1 align-middle">
                <a class="secondaryLink" href="#featured">Featured</a>
            </div>
            <div class="col-sm-1"></div>
        </div>
        <div class="row align-items-center">
            <div class="col-lg-4"></div>
            <div class="col">
                <h6 id="copyright">&copy; Foodery 2025, All rights reserved</h6>
            </div>
            <div class="col-lg-4"></div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
        crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!--JAVASCRIPT LINK-->
    <script src="static/JS/script.js"></script>
</body>

</html>