-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (160 loc) · 7.26 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Spiel Des Jahres Home Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rosarivo">
<script type="text/javascript" src="./javascript/index.js" defer></script>
<link href="./style/main.css" rel="stylesheet">
<style>
div > div > h2 {
text-align:left;
}
div > h1, h1~h2 {
font-family: 'Rosarivo';
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand active" href="./index.html">Homepage</a>
</div>
<ul class="nav navbar-nav">
<!-- <li class="active"><a href="">Home</a></li> -->
<li><a href="./views/spiel.html">Spiel des Jahres</a></li>
<li><a href="./views/kinderspiel.html">Kinderspiel des Jahres</a></li>
<li><a href="./views/kennerspiel.html">Kennerspiel des Jahres</a></li>
<li class="form-group">
<!-- <label for="search"></label> -->
<input type="search" class="form-control" id="search" placeholder="Search BGG">
</li>
</ul>
</nav>
<div class="jumbotron text-center">
<h1 style="font-family:">Spiel des Jahres</h1>
<h2>Game of the Year</h2>
</div>
<div class="outer-container">
<div class="container">
<div class="row" ">
<div class="col-sm-4">
<h2>What exactly is the Spiel des Jahres?</h2>
</div>
<div class="col-sm-8">
<p style="text-align:left">The Spiel des Jahres is the most prestigious award for board and card games that's held annually. The jury is made up of German-speaking
game critics since 1978. These nominations focus on the best games for the entire family. A nomination can increase sales by anywhere from 500 to 10,000 copies
while the winner can expect to sell as many as 30 million copies.
</p>
</div>
</div>
</div>
</div>
<div class="outer-container">
<div class="container">
<div class="row" id="adjustRow">
<div class="col-sm-8" id="blurb">
<p>Yes, there's also the Kinderspiel des Jahres (which is German for Children's Game of the Year) and the Kennerspiel des Jahres (Connoisseur/Expert Game of the Year)
awards given out each year as well. The Kennerspiel des Jahres focuses on games that present more of a challenge and have more experience with board games.
</p>
</div>
<div class="col-sm-4" id="question">
<h2>Do they give out any other awards?</h2>
</div>
</div>
</div>
</div>
<div class="outer-container">
<div class="container">
<div class="row" ">
<div class="col-sm-4">
<h2>What are the Recommended games?</h2>
</div>
<div class="col-sm-8">
<p style="text-align:left">There's only 1 Winner per year and usually 2-4 Nominees, which isn't a lot when you take into consideration that around 3,500 new board games
are created every year. You can think of the Recommended games as honorable mentions - they didn't quite make the cut for the Nominees but they're still great games
that the jury wants to inform the players about.
</p>
</div>
</div>
</div>
</div>
<div class="outer-container">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h2 id="cascadiaName" ></h2>
<h2><small>2022 Winner</small></h2>
<p id="cascadiaRating">BGG Rating: </p>
</div>
<div class="col-sm-3">
<img id="cascadiaImg"
alt="picture of the Cascadia board game with an elk in the front and snowy mountains and a lake in the background">
</div>
<div class="col-sm-6">
<p id="cascadiaP">
In the tile-laying game of the same name, up to four nature-lovers compete to create a habitat rich in victory points,
connecting matching landscape tiles to form as large an area as possible. This objective is just one of the levels of “Cascadia’s” two-part puzzle,
the other relates to the region’s native animals, who will only move into the area when the geographic conditions are right.
In one game, the bears might be loners and not want anyone hanging around, in the next they could be social animals and want to hang around in groups of four.
Only by cleverly creating a suitable landscape to keep the bears, foxes, buzzards, elk and salmon happy,
can you emerge victorious in this attractive and accessible tile-laying game.
</p>
</div>
</div>
</div>
</div>
<div class="outer-container">
<div class="container">
<div class="row" style="display:flex; justify-content:space-around">
<div class="col-sm-6" class="indexNominee">
<div class="col-sm-6">
<h2 id="scoutName"></h2>
<h2><small>2022 Nominee</small></h2>
<p id="scoutRating">BGG Rating: </p>
</div>
<img id="scoutImg"
alt="picture of the Scout board game">
</div>
<div class="col-sm-6" class="indexNominee">
<div class="col-sm-6">
<h2 id="top10Name"></h2>
<h2><small>2022 Nominee</small></h2>
<p id="top10Rating">BGG Rating: </p>
</div>
<img id="top10Img"
alt="picture of the Top Ten board game">
</div>
</div>
</div>
</div>
<div class="outer-container" style="padding-bottom:2rem;">
<div class="container" >
<form style="margin-left:2.9rem">
<div class="form-group">
<label for="game">What's your favorite game?</label>
<input class="form-control" id="game" style="width:50%">
</div>
<button id="submit" type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<div class="outer-container">
<div class="container">
<p style="text-align:center;">Here's a video from BoardGameGeek talking about the various 2022 Spiel des Jahres nominees:</p>
<iframe id="vid" style="display:block;margin:auto;padding-bottom:2rem;" width="560" height="315" src="https://www.youtube.com/embed/uxh-v7R4P1M?start=93" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<!-- <div style="height:20rem">
<p style="text-align:center;padding-top:2rem;">Here we have two players, <strike>ruining</strike> consolidating their friendship with a game of Monopoly:</p>
<iframe id="gif" style="display:block;margin:auto; padding: 0 2rem 2rem 2rem" src="https://giphy.com/embed/k0bv4ecnUx6lW" width="25%" height="100%" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
</div> -->
</body>
</html>