generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
183 lines (170 loc) · 8.71 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Vitaminception makes the confusing world of vitamins simple and easy to understand.">
<meta name="keywords" content="vitamins, vitamin benefits, vitamin natural sources">
<title>Vitaminception</title>
<link rel="icon" sizes="32x32" href="assets/images/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header>
<a href="index.html">
<img id="logo" src="assets/images/vitaminception-logo.png" alt="Vitaminception - Be Healthy">
</a>
<!-- Main navigation links in list style -->
<nav>
<ul id="menu">
<li><a href="index.html" class="active">Home</a></li>
<!-- Makes home page link underlined when user is on the home page -->
<li><a href="vitaminc.html">Vitamin C</a></li>
<li><a href="vitamind.html">Vitamin D</a></li>
</ul>
</nav>
</header>
<!-- Hero image on index page -->
<section>
<div id="hero-image"></div>
<div id="hero-text">
<!-- hero text is overlaid on the hero image on tablet and desktop view, but not on mobile -->
<h1>Which Vitamin?</h1>
<h2>Why? When?</h2>
</div>
</section>
<!-- CSS grid wrapper for all main content on index page -->
<div class="vitamin-wrapper">
<div class="vitamin-stats">
<div class="vitamin-box-container">
<!-- contains and frames the circle image -->
<div id="vitamin-stats-cover-bg"></div>
</div>
<div id="vitamin-stats-text">
<h2>Confused about vitamins?</h2>
<ul>
<li><i class="fas fa-apple-alt"></i> Vitamins search on Google shows 1,870,000,000 results</li>
<li><i class="fas fa-apple-alt"></i> Vitamin C search on Goolge shows 985,000,000 products</li>
<li><i class="fas fa-apple-alt"></i> Vitamins search on Amazon UK shows over 5,000 results</li>
<li><i class="fas fa-apple-alt"></i> Vitamin C search on Amazon UK shows over 625 products</li>
</ul>
</div>
</div>
<div class="vitamin-why">
<div class="vitamin-box-container">
<!-- contains and frames the circle image -->
<div id="vitamin-why-cover-bg"></div>
</div>
<div id="vitamin-why-text">
<h2>Why do we need vitamins?</h2>
<p>Without them, our bodies wouldn't be able to perform vital tasks such as converting food into energy,
building and maintaining bones, teeth, muscle, skin, blood and hair, and keeping our brain, eyes,
nervous and immune systems in good working order. <a
href="https://www.hollandandbarrett.com/the-health-hub/vitamins-and-supplements/vitamins/what-is-a-vitamin/"
target="_blank" rel="noopener"
aria-label="Visit source Holland & Barret (opens in a new tab)"><em>(source: Holland &
Barrett)</em></a></p>
</div>
</div>
<div class="vitamin-what">
<div>
<div class="vitamin-box-container">
<!-- contains and frames the circle image -->
<div id="vitamin-what-cover-bg"></div>
</div>
</div>
<div id="vitamin-what-text">
<h2>What does the body do with the vitamins?</h2>
<p>Vitamins have different jobs to help keep the body working properly. Some vitamins help you resist
infections and keep your nerves healthy, while others may help your body get energy from food or
help
your blood clot properly. By following the dietary guidelines, you will get enough of most of these
vitamins from food. <a href="https://www.nia.nih.gov/health/vitamins-and-minerals-older-adults"
target="_blank" rel="noopener"
aria-label="Visit source National Institutes of Health (opens in a new tab)"><em>(source:
National Institutes of Health)</em></a></p>
</div>
</div>
<div class="vitamin-animals">
<div>
<div class="vitamin-box-container">
<!-- contains and frames the circle image -->
<div id="vitamin-animals-cover-bg"></div>
</div>
</div>
<div id="vitamin-animals-text">
<h2>Why don't animals need to take vitamins?</h2>
<p>Most animals can make their own Vitamin C via a gene called the GULO gene. Some animals have lost
this
gene over the course of evolution, including humans and other apes, insects, bats, guinea pigs, and
some
birds and fish.</p>
<p>One school of thought suggests that the reason may be attributed to the fact that humans have
included
vitamin C-rich foods in our diet for a very long time and that the mutation in vitamin C synthesis
related genes have not proven to be a lethal or severe functional defect in most cases. After all,
fruits with readily available vitamin C have been part of the human diet for as long as anyone can
remember. This led to the mutated genotype being passed on to future generations, resulting in
permanent
loss of vitamin C biosynthesis in humans.
<a href="http://sciencefocus.ust.hk/post-why-humans-are-unable-to-synthesize-vitamin-c"
target="_blank" rel="noopener"
aria-label="Visit source Science Focus (opens in a new tab)"><em>(source: Science
Focus)</em></a>
</p>
</div>
</div>
</div>
<div class="vitamin-wrapper-1">
<!-- separate wrapper for the where do i begin grid and links -->
<div class="vitamin-begin">
<div class="vitamin-box-container">
<!-- contains and frames the circle image -->
<div id="vitamin-begin-cover-bg"></div>
</div>
<div id="vitamin-begin-text">
<h2>Where do I begin?</h2>
<p>Micronutrients with the strongest evidence for immune support are vitamins C and D and zinc. Read
more
about these vitamins, which foods to get them from and potential supplements to take.</p>
<ul>
<li><a href="vitaminc.html">Vitamin C</a></li>
<li><a href="vitamind.html">Vitamin D</a></li>
</ul>
</div>
</div>
</div>
<footer>
<hr class="solid">
<form id="signup">
<h3>Let's keep in touch.</h3>
<!-- Sign up form to capture website visitors' emails for future marketing purposes -->
<!-- No database connection, no form post for this phase -->
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" required><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="submit" class="signup-submit">
</form>
<br>
<ul class="social-networks">
<!-- Social media links. More social media icons can be added here -->
<li>
<a href="https://instagram.com" target="_blank" rel="noopener"
aria-label="Follow us on Instagram (opens in a new tab)">The road to health is paved with danger -
for more tips, follow us on Instagram</a>
</li>
<li>
<a href="https://instagram.com" target="_blank" rel="noopener"
aria-label="Follow us on Instagram (icon opens in a new tab)"><i class="fab fa-instagram"></i></a>
</li>
</ul>
</footer>
<!-- font awesome script, use v5, free icons -->
<script src="https://kit.fontawesome.com/96530399f9.js" crossorigin="anonymous"></script>
</body>
</html>