-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (107 loc) · 5.49 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
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Your Drink Selector</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- general css style sheer -->
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- The simplyweather script used to load the weather -->
</head>
<body>
<div class="background">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">YDS</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="beer.html">Beer </a></li>
<li><a href="wine.html">Wine</a></li>
<li><a href="spirit.html">Spirit</a></li>
</ul>
<form class="navbar-form navbar-right">
<form class="form-inline">
<input class="form-control" type="text" placeholder="City" id="search_textbox">
<button class="btn btn-outline-success" type="submit" id="citysearch">Search</button>
</form>
</form>
<form class="navbar-form navbar-right">
<div class="form-inline">
<div class="col-md-12">
<div class="col-md-9">
<div id="weather"></div>
</div>
<div class="col-md-3">
<img class="js-geolocation" src="images/location.svg"
alt="Get your current location">
</div>
</div>
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="jumbotron ">
<div class="container-fluid introduction">
<h1 class="name">Your drink selector</h1>
<p class="lead"> Welcome to my little website. The goal of the site is to inform the user of the best
possible drink for the current weather. By default the weather at the center of the universe
(Eindhoven) is used to give the user their suggestion, however you can easily change this to your
current location by accepting our request for your location once it pops up or clicking the pin on
the right of the navigation bar if you missed that one. Furthermore you can easily visit cities
around the world and check which drink would be recommended there by simply filling in the form in
the navigation bar and clicking on the search button.
</p>
<p class="starting">Now that you understand on which bases I recommend you a drink, simply click on your
favorite type of drink below to get started!</p>
</div>
</div>
<div class="col-md-12 center-block">
<div class="col-md-4 image_homepage">
<a href="beer.html"> <img class="img-responsive img-rounded" src="images/beer.jpg" alt="Beer"></a>
</div>
<div class="col-md-4 image_homepage">
<a href="wine.html"> <img class="img-responsive img-rounded" src="images/wine.jpeg" alt="Wine"></a>
</div>
<div class="col-md-4 image_homepage">
<a href="spirit.html"> <img class="img-responsive img-rounded" src="images/spirit.jpeg"
alt="spirit"></a>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div>A 2ID60 Project!</div>
</div>
</footer>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.simpleWeather.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>