generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
about.html
119 lines (112 loc) · 6.8 KB
/
about.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Bootstrap v5.0 CSS-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!--Font Awesome v5.15.3-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
crossorigin="anonymous">
<link rel="shortcut icon" type="image/icon" href="assets/images/favicon.ico"/>
<link href="assets/css/style.css" rel="stylesheet">
<title>Feeling Hungry</title>
</head>
<body>
<!--Header for title and nav menu-->
<header class="row">
<!--Navbar Toggle from Bootstrap v5.0-->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand col-6 col-lg-9" href="index.html">
<h1 class="title display-5">Feeling Hungry</h1>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler"
aria-expanded="false" aria-label="Toggle navigation">
<span class="fas fa-bars"></span>
</button>
<div class="collapse navbar-collapse col-2 col-lg-3" id="navbarToggler">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 col text-end">
<li class="nav-item col">
<a class="nav-btn rounded search-btn" href="search.html">Recipes</a>
</li>
<li class="nav-item col">
<a class="nav-btn rounded about-btn active" href="about.html">About</a>
</li>
<li class="nav-item col">
<a class="nav-btn rounded contact-btn" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<!--'About' box-->
<div class="row">
<div class="about-box message-box col-10 offset-1 col-lg-8 offset-lg-2">
<h2 class="page-heading">
About Us
</h2>
<p class="text">
Everyone enjoys good food, but we don't always have the time or energy to be creative in the kitchen. We're here to help with that, by providing a way to search for
recipe ideas using ingredients that you already have available. Variety is the spice of life, or so the saying goes, so rather than making the same meals over and over
week in week out, using the Feeling Hungry site to find new and exciting recipes allows you to do something different with the normal ingredients you have in your
fridge or cupboards.
</p>
<p class="text">
Use the 'Breakfast, Lunch, Dinner' options to select the type of meal you want to look for, then type in the ingredients you want to use (separated by commas!) into
the search bar. We'll then present you with a whole bunch of recipes with those ingredients for you to try! Clicking any of the recipe cards takes you to the full
recipe, hosted by Spoonacular, where you can see the full ingredients list and amounts, follow the recipe instructions and get nutritional information!
</p>
</div>
<div class="row justify-content-evenly gallery-row">
<img src="assets/images/berries-on-heart-waffles.jpg" class="about-img col-md-5 col-lg-3 img-responsive" alt="berries on heart waffles">
<img src="assets/images/white-book-photo.jpg" class="about-img d-none d-md-block col-md-5 col-lg-3 img-responsive" alt="white photo book">
<img src="assets/images/loaded-sweet-potato-fries-bowl.jpg" class="about-img d-none d-lg-block col-lg-3 img-responsive" alt="loaded sweet potato fries bowl">
</div>
</div>
</main>
<!-- Footer with Social Icons -->
<footer class="container-fluid">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<ul class="social-links list-inline">
<li class="list-inline-item">
<a href="https://www.facebook.com/" target="_blank" class="social-icon hvr-icon-grow">
<i class="fab fa-facebook-square hvr-icon" aria-hidden="true"></i>
<span class="sr-only">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a href="https://twitter.com/" target="_blank" class="social-icon hvr-icon-grow">
<i class="fab fa-twitter-square hvr-icon" aria-hidden="true"></i>
<span class="sr-only">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.instagram.com/" target="_blank" class="social-icon hvr-icon-grow">
<i class="fab fa-instagram hvr-icon" aria-hidden="true"></i>
<span class="sr-only">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.linkedin.com/" target="_blank" class="social-icon hvr-icon-grow">
<i class="fab fa-linkedin hvr-icon" aria-hidden="true"></i>
<span class="sr-only">LinkedIn</span>
</a>
</li>
</ul>
</div>
</div>
</footer>
<!--Popper/Bootstrap script-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>