/
index.html
executable file
·122 lines (106 loc) · 5.25 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Snakes & Ladders</title>
<link href='https://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="scss/style.css"> <!-- CSS reset -->
</head>
<body>
<div class="modal effect">
<div class="content">
<div class="selection">
<p class="welcome">Welcome</p>
<p class="instructions">Select your avatar</p>
<div class="choose-avatar">
<label>
<input type="radio" name="choose-avatar" class="choose-avatar" value="one"/>
<img src="imgs/avatar1.png">
</label>
<label>
<input type="radio" name="choose-avatar" class="choose-avatar" value="two"/>
<img src="imgs/avatar2.png">
</label>
</div>
<p class="instructions">Who rolls first?</p>
<div class="choose-who-play-first">
<label>
<input type="radio" name="who-first" class="who-first" value="me"/>
<i></i> <span>Me</span>
</label>
<label>
<input type="radio" name="who-first" class="who-first" value="computer"/>
<i></i> <span>Computer</span>
</label>
</div>
<div class="go"><a class="lets-roll">Let's Roll</a></div>
</div>
<div class="who-won" style="display:none;">
<p class="greetings">Congratulations!</p>
<img src="imgs/avatar1.png" class="which-avatar-won">
<p class="won-or-lose">You won!</p>
<div class="go"><a class="play-again">Play Again?</a></div>
</div>
</div>
</div><!--Modal Box Ends-->
<div class="overlay loading"></div><!-- the overlay element -->
<div class="container">
<div class="main-container">
<img src="imgs/ladder1.png" alt="ladder1" id="ladder1">
<img src="imgs/ladder2.png" alt="ladder2" id="ladder2">
<img src="imgs/snake1.png" alt="snake1" id="snake1">
<img src="imgs/snake2.png" alt="snake2" id="snake2">
<img src="imgs/snake3.png" alt="snake3" id="snake3">
<img src="imgs/flag.png" alt="flag" id="flag">
<ul>
<li class="box row5 col1"><span>21</span></li>
<li class="box row5 col2"><span>22</span></li>
<li class="box row5 col3"><span>23</span></li>
<li class="box row5 col4"><span>24</span></li>
<li class="box row5 col5"><span>25</span></li>
<li class="box row4 col1"><span>20</span></li>
<li class="box row4 col2"><span>19</span></li>
<li class="box row4 col3"><span>18</span></li>
<li class="box row4 col4"><span>17</span></li>
<li class="box row4 col5"><span>16</span></li>
<li class="box row3 col1"><span>11</span></li>
<li class="box row3 col2"><span>12</span></li>
<li class="box row3 col3"><span>13</span></li>
<li class="box row3 col4"><span>14</span></li>
<li class="box row3 col5"><span>15</span></li>
<li class="box row2 col1"><span>10</span></li>
<li class="box row2 col2"><span>9</span></li>
<li class="box row2 col3"><span>8</span></li>
<li class="box row2 col4"><span>7</span></li>
<li class="box row2 col5"><span>6</span></li>
<li class="box row1 col1"><span>1</span></li>
<li class="box row1 col2"><span>2</span></li>
<li class="box row1 col3"><span>3</span></li>
<li class="box row1 col4"><span>4</span></li>
<li class="box row1 col5"><span>5</span></li>
</ul>
</div><!--side-container ends-->
<div class="side-container">
<div class="players">
<img src="imgs/avatar1.png" alt="player1" id="player1">
<img src="imgs/avatar2.png" alt="player2" id="player2">
</div>
<div class="whose-turn">
<img src="imgs/caret8.png" class="caret">
<a class="turn"> Computer's turn</a>
</div>
<div class="dice-and-roll">
<img src="imgs/dice6.png" alt="dice6" id="dice_img">
<a id="roll-dice">Roll Dice</a>
</div>
<a style="display: none" class="dice_value"></a>
</div><!--side-container ends-->
</div><!--container ends-->
<!--Scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>