-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfood.html
80 lines (73 loc) · 4.96 KB
/
food.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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="food.css">
<link href="https://fonts.googleapis.com/css?family=Kanit|Lexend+Giga|Long+Cang|Righteous&display=swap" rel="stylesheet">
<title>Turnip</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body class="background help">
<!-- nav bar -->
<h3 class="fun-fact">°˖✧Fun Fact!✧˖°
<h4 class="kanit">1.3 billion tons of food are wasted every year! That could feed a fourth of the planet! Σ(°ロ°)</h4>
<ul>
<li class="questrial"><a href="index.html">Home</a></li>
<li style="float:right"><a class="questrial" href="about.html">About</a></li>
</ul>
<p>
<h1 class=righteous><strong>Food 🍔</strong></h1>
<h3 class=center><strong>How does your diet affect the environment?</strong></h3>
</p>
<div class=center>
<img src="https://media3.giphy.com/media/jKaFXbKyZFja0/giphy.gif" align=center>
</div>
<p>
<h2>Do you select foods that are certified organic or sustainably produced?</h2>
<button class="w3-btn w3-hover-red btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">Yes.</button>
<div class="collapse" id="collapseExample1">
<div class="card card-body">
That's great! Keep it up!
</div>
</div>
<button class="w3-btn w3-hover-orange btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">No.</button>
<div class="collapse" id="collapseExample2">
<div class="card card-body">
Many non-organic meats are made from animals that are overbred and kept in poor conditions. Plants are also treated with chemicals to maintain their growth. This means that the food you're eating, while it may be cheap, will not be good for your heath or the environment. Keep an eye out for foods that are marked "cage-free" and "organic".
</div>
</div>
</p>
<p>
<h2>How would you describe your diet?</h2>
<button class="w3-btn w3-hover-yellow btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample4" aria-expanded="false" aria-controls="collapseExample4">Vegetarian.</button>
<div class="collapse" id="collapseExample4">
<div class="card card-body">
That's a great start! By not eating meats, you are helping maintain the population of many animals, and lowering the amount of resources needed to provide meaty foods.
</div>
</div>
<button class="w3-btn w3-hover-green btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample5" aria-expanded="false" aria-controls="collapseExample5">Vegan.</button>
<div class="collapse" id="collapseExample5">
<div class="card card-body">
That's awesome! It takes a lot of self-control to be vegan, but it is definitely worth it - you are saving a lot of energy and resources by not eating animal products. Not only does it take a lot of energy to breed aninmals, but a lot of water and feed is also used to take care of them. Good job!
</div>
</div>
<button class="w3-btn w3-hover-blue btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample5" aria-expanded="false" aria-controls="collapseExample5">Omnivore.</button>
<div class="collapse" id="collapseExample5">
<div class="card card-body">
That's a good start! Eating vegetables is not only good for your health, but it is more sustainable than eating meat. Try eating fruits and veggies as often as you can!
</div>
</div>
<button class="w3-btn w3-hover-purple btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample5" aria-expanded="false" aria-controls="collapseExample5">Carnivore.</button>
<div class="collapse" id="collapseExample5">
<div class="card card-body">
Eating only meat may not be the healthiest choice - not only is it bad for your health, but it is hard to sustain a diet of only meat. Try alternating between vegetables/fruit and meat!
</div>
</div>
</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>