-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (142 loc) · 4.62 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dice Thrower</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,700,700italic,500,500italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/partials/mobile.css">
<meta name="viewport" content="width=device-width, height=device-height initial-scale=1">
</head>
<body>
<div class="main">
<!-- header section with the button -->
<header>
<section class="heading-box">
<h1 class="heading">Dice Thrrrower</h1>
</section>
<div class="throw-button">
<p>Roll a dice!</p>
</div>
</header>
<!-- big dices that are shown upon throw -->
<section class="body-1">
<div class="container">
<div class="face one">
<span class="pip"></span>
</div>
<div class="face two">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="face three">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="face four">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
<div class="face five">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
<div class="face six">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
</div>
</section>
<!-- thumbails with highlight function -->
<section class="body-2">
<div class="container thumb">
<div class="face one-thumb">
<span class="pip"></span>
</div>
<div class="face two-thumb">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="face three-thumb">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="face four-thumb">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
<div class="face five-thumb">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
<div class="face six-thumb">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
</div>
</section>
<!-- footer section -->
<footer>
<section>
<p>Built by Michal Fasanek as expansion of an exercise when following the 'Flexbox starter course' created by Landron Schropp.</p>
<p>Enjoy responsibly.</P>
<p><i class="fa fa-copyright" aria-hidden="true"></i> 2016</p>
</section>
</footer>
</div>
<script src="js/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>