-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
266 lines (266 loc) · 13 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
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
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="image" property="og:image" content="https://images.pexels.com/photos/2623798/pexels-photo-2623798.jpeg?cs=srgb&dl=pexels-mrjb-2623798.jpg">
<meta property="og:url" content="https://ellie1341994.github.io/qs/">
<meta property="og:site_name" content="Quit Smoking resources Site">
<meta name="description" content="_" />
<meta name="title" property="og:title" content="QS" />
<meta property="og:type" content="Website" />
<meta name="description" property="og:description" content="Website with resourseces for smokers that wants to quit smoking" />
<meta name="author" content="Ellie Sacchi Van Broock" />
<link rel="stylesheet" href="style.css">
<title>Quit Smoking</title>
</head>
<body >
<nav id="main-nav-bar">
<label for="menu"></label>
<input type="checkbox" name="menu" id="menu">
<ul >
<li>
<a href="">Tabacco</a>
</li>
<li>
<a href="#first-article">The Cost Of Smoking</a>
</li>
<li>
<a href="#second-article">Quitting Benefits</a>
</li>
<li>
<a href="#tips">Tips</a>
</li>
<li>
<a href="#contact-sources">Contact</a>
</li>
<li>
<label for="sources" id="sourcesTitle">Sources</label>
<input type="checkbox" name="" id="sources">
<div id="sourcesContainer">
<ul>
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.cancer.org/healthy/stay-away-from-tobacco/benefits-of-quitting-smoking-over-time.html">Cancer.org</a>
</li>
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.lung.org/quit-smoking/i-want-to-quit/benefits-of-quitting?referrer=https%3A%2F%2Fwww.google.com%2F">lung.org</a>
</li>
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.nhs.uk/live-well/quit-smoking/">nhs.uk</a>
</li>
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.cdc.gov/tobacco">cdc/tabacco.gov</a>
</li>
<li>
<a target="_blank" rel="noopener noreferrer" href="https://bmcpublichealth.biomedcentral.com/articles/10.1186/s12889-015-1617-5">Systematic review of cigar smoking...</a>
</li>
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.academia.edu/2475072/How_are_habits_formed_Modelling_habit_formation_in_the_real_world">How habits are formed</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
<main>
<header id="initial-cover">
<h1 id="#">
<a target="_blank" rel="noopener noreferrer" href="https://en.wikipedia.org/wiki/Tobacco">Tabacco</a>
is the world's single greatest preventable cause of death.
</h1>
<img src="./img/preventSmoking.jp2" hidden style="width: 75%; height: 50%;">
</header>
<article id="first-article">
<section id="costs">
<ul >
<li >
<h4>Socially smoking is not that safe</h4>
<p>You're putting yourself at risk of addiction and harming your already good health by both actively and pasively smoking in such a pleasurable environment that further reinforces this behaviour.</p>
</li>
<li >
<h4>Even a few make a huge impact</h4>
<p>Smoking just one cigarette a day results in a risk of coronary heart disease that is halfway between that of a heavy smoker and a non-smoker.</p>
</li>
<li >
<h4> Worsens your Dental Health and appearance</h4>
<p>Besides teeth discoloration, smoking can cause periodontal disease (its early stage is known as gingivitis) which causes bad breath and tooth loss. It can also cause Smoker's melanosis which is seen with the naked eye as a brown to black pigmentation of the oral tissue</p>
</li>
<li >
<h4>Building a family gets harder</h4>
<p>Smoking can make it harder for a woman to become pregnant. It can also affect her baby’s health before and after birth. It can also affect men’s sperm, which can reduce fertility and also increase risks for birth defects and miscarriage.</p>
</li>
<li >
<h4>It's not just the lungs.</h4>
<p>Smoking harms nearly every organ of the body and affects a person’s overall health.</p>
</li>
<li >
<h4>There is not much of a difference between Cigars and Cigarretes</h4>
<p>Cigar smoking carries many of the same health risks as cigarette smoking.
</p>
</li>
</ul>
<div>
<img src="img/smoke.jp2" alt="An empty Hand.">
</div>
</section>
<section id="calc">
<label id="textCalc">
Smoking
<input type="number" min="0" value="20" name="prodQuantity" id="prodQuantity">
<select name="tabaccoProductFormat" id="tabaccoProductFormat">
<option selected="true" value="">Cigarrete(s)</option>
<option value="20">Cigarrete Pack (20)</option>
<option value="25">Cigarrete Pack (25)</option>
<option value="30">Cigarrete Pack (30)</option>
<option value="40">Cigarrete Pack (40)</option>
<option value="50">Cigarrete Pack (50)</option>
</select>
per
<select name="consumptionPeriod" id="consumptionPeriod">
<option selected="true" value="daily">Day</option>
<option value="weekly">Week</option>
<option value="monthly">Month</option>
</select>
priced at
$<input type="number" step="0.001" min="0" value="0.230" name="prodPrice" id="prodPrice">
<span id="dailyLeak"></span>
<span id="weeklyLeak"></span>
<span id="monthlyLeak"></span>
<span id="anualLeak"></span>
</label>
</section>
</article>
<article id="second-article">
<header>
<h2 >Quitting smoking has health benefits at any age, no matter how long or how much you have smoked.</h2>
</header>
<section id="timeline">
<div id="timeline-1">
<header>
<h4>Within minutes</h4>
</header>
<div>
<p>Heart rate drops.</p>
</div>
</div>
<div id="timeline-2">
<header>
<h4 >Hours after</h4>
</header>
<div>
<p>Nicotine level in the blood drops to zero.</p>
</div>
</div>
<div id="timeline-3">
<header>
<h4 >The first days</h4>
</header>
<div>
<p>Your sense of smell and taste improves.</p>
</div>
</div>
<div id="timeline-4">
<header>
<h4 >About a week after</h4>
</header>
<div>
<p>Carbon monoxide level in the blood drops to level of someone who does not smoke.</p>
</div>
</div>
<div id="timeline-5">
<header>
<h4 >Starting at the first month</h4>
</header>
<div>
<p>The large number of nicotine receptors in your brain will return to normal levels and coughing and shortness of breath decrease.</p>
</div>
</div>
<div id="timeline-6">
<header>
<h4 >After three months</h4>
</header>
<div>
<p>Your blood circulation improves. Making all physical activity much easier (including sex) and <a target="_blank" rel="noopener noreferrer" href="https://en.wikipedia.org/wiki/Smoker'27s_melanosis">Smoker's Melanosis</a> lesions may have healed or start healing.</p>
</div>
</div>
<div id="timeline-7">
<header>
<h4 >A year</h4>
</header>
<div>
<p> Risk of heart attack starts to drop sharply.</p>
</div>
</div>
<div id="timeline-8">
<header>
<h4 >Three years</h4>
</header>
<div>
<p>A person’s risk for coronary heart disease decreases by half and there should be no signs of <a target="_blank" rel="noopener noreferrer" href="https://en.wikipedia.org/wiki/Smoker'27s_melanosis">Smoker's Melanosis.</a></p>
</div>
</div>
<div id="timeline-9">
<header>
<h4 >Five years</h4>
</header>
<div>
<p>Added risk of cancers of the mouth, throat, esophagus and voice box drops by half. </p>
</div>
</div>
<div id="timeline-10">
<header>
<h4 >Ten years</h4>
</header>
<div>
<p>Your risk of dying from lung cancer is about half that of a person who is still smoking.</p>
</div>
</div>
<div id="timeline-11">
<header>
<h4 >Twenty years</h4>
</header>
<div>
<p>Risk of cancers of the mouth, throat, and voice box drops to close to that of someone who does not smoke. Risk of pancreatic cancer drops to close to that of someone who does not smoke</p>
</div>
</div>
</section>
</article>
<article id="tips">
<header>
<h2>Tips to Stop</h2>
</header>
<section>
<div>
<div class="bigExclamation">!</div>
<div class="tip">The critical period for smokers that are quitting are the first three months. It'd be wise to plan ahead of time this key period.</div>
</div>
<div>
<div class="bigExclamation">!</div>
<div class="tip">Willpower is limited. Avoid spending it on other things at all costs.</div>
</div>
<div>
<div class="bigExclamation">!</div>
<div class="tip">Contrary to popular belief, a habit can take up to 254 days to develop. It'd be right to focus that whole year just for quitting smoking. </div>
</div>
</section>
</article>
</main>
<footer id="contact-sources">
<form action="" id="formContainer">
<h2>Message Us</h2>
<textarea required name="userMessage" id="" placeholder="Example: I'd like to ask about ... " cols="30" rows="10"></textarea>
<div>
<label for="email">
Enter your E-Mail:
</label>
<input required id="email" type="email" placeholder="Example: name@gmail.com" name="" id="">
</div>
</form>
<div id="contactInfoContainer">
<a href="https://github.com/Ellie1341994"><img src="img/GitHub-Mark.svg" alt="GitHub Logo" id="GHL"></a>
<a href="https://www.linkedin.com/in/eliassacchivanbroock816861186/"><img src="img/LI-Logo.png" alt="LinkedIn Logo" id="LIL"></a>
</div>
</footer>
<script src="calc.js"></script>
</body>
</html>