-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
167 lines (148 loc) · 6.66 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
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.8">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<title>Toy Story Games</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header class="header">
<a href="#credits">
<p class="header_credits">Créditos</p>
</a>
<img class="header__logo" src="images/cards/cardback.png" alt="Logo Toy Story: Juego de Cartas">
<h1 class="header__title">El juego de las parejas</h1>
<h2 class="counter hidden"></h2>
</header>
<main>
<section class="player">
<div class="player_outer player_mainBar hidden">
<div class="player_inner">
<img src="images/avatar/av_jessie.png" alt="Avatar" class="player_avatar">
<h3 class="player_name">Anna</h3>
<i class="fas fa-info player_details"></i>
<i class="fas fa-exchange-alt player_change"></i>
</div>
</div>
<div class="player_outer player_outer-fixed player_outer-edit hidden">
<div class="player_inner player_current hidden">
<div class="players current-player">
<img src="images/avatar/av_jessie.png" alt="Avatar" class="player_avatar">
<h3 class="player_name">Anna</h3>
</div>
<i class="fas fa-user-minus player_remove-icon"></i>
<span class="closeOnMobile close_change">X</span>
</div>
<div class="other-players">
</div>
<div class="player_inner player_inner-new first-game">
<i class="fas fa-user-plus player_new-icon"></i>
<p class="player_new">Crear nuevo/a jugador/a</p>
</div>
<div class="player_inner player_createNew hidden">
<div class="player_createNew-box">
<label for="newName" class="layer_createNew-nameLabel">¿Cómo quieres ser llamada/o?</label>
<input type="text" id="newName" class="player_createNew-name" placeholder="Ej. Andy">
</div>
<div class="player_createNew-box">
<p class="layer_createNew-nameLabel">Selecciona tu avatar:</p>
<div class="player_createNew-avatarBox">
<img src="images/avatar/av_woody.png" alt="Avatar Woody" class="avatar" id="av_woody">
<img src="images/avatar/av_jessie.png" alt="Avatar Jessie" class="avatar" id="av_jessie">
<img src="images/avatar/av_buzz.png" alt="Avatar Buzz" class="avatar" id="av_buzz">
<img src="images/avatar/av_barbie.png" alt="Avatar Barbie" class="avatar" id="av_barbie">
<img src="images/avatar/av_t-rex.png" alt="Avatar T-Rex" class="avatar" id="av_t-rex">
<img src="images/avatar/av_martian.png" alt="Avatar Martian" class="avatar" id="av_martian">
<img src="images/avatar/av_mr-potato.png" alt="Avatar Mr. Potato" class="avatar" id="av_mr-potato">
<img src="images/avatar/av_mrs-potato.png" alt="Avatar Mrs. Potato" class="avatar" id="av_mrs-potato">
<img src="images/avatar/av_horse.png" alt="Avatar Horse" class="avatar" id="av_horse">
<img src="images/avatar/av_dog.png" alt="Avatar Dog" class="avatar" id="av_dog">
</div>
<p class="player_createNew-confirmation hidden">Necesitas elegir un nombre y un avatar para continuar</p>
<button class="player_createNew-avatarButton">Confirmar</button>
</div>
</div>
</div>
<div class="player_outer player_outer-fixed player_outer-details hidden">
<div class="player_inner player_inner-records">
<span class="closeOnMobile close_details">X</span>
<img src="images/avatar/av_jessie.png" alt="Avatar" class="player_avatar">
<h3 class="player_name">Anna</h3>
</div>
<div class="player_records-outer">
<div class="player_records-inner">
<div class="player_records">
<h5 class="record-num">2 personajes</h5>
<p class="record-trials trial2">5</p>
</div>
<div class="player_records">
<h5 class="record-num">4 personajes</h5>
<p class="record-trials trial4">10</p>
</div>
<div class="player_records">
<h5 class="record-num">6 personajes</h5>
<p class="record-trials trial6">20</p>
</div>
<div class="player_records">
<h5 class="record-num">8 personajes</h5>
<p class="record-trials trial8">12</p>
</div>
<div class="player_records">
<h5 class="record-num">10 personajes</h5>
<p class="record-trials trial10">33</p>
</div>
<div class="total_records">
<p class="record-total">Partidos jugados:</p>
<p class="record-trials-total">33</p>
</div>
</div>
</div>
</div>
</section>
<div class="selection_outer">
<label for="characters__number">Número de Personajes:</label>
<form id="characters__number" action="" class="card__formulario">
<input type="radio" name="selecciona" class="input_card--radios" value="2" checked>
<label for="selecciona">2</label>
<input type="radio" name="selecciona" class="input_card--radios" value="4">
<label for="selecciona">4</label>
<input type="radio" name="selecciona" class="input_card--radios" value="6">
<label for="selecciona">6</label>
<input type="radio" name="selecciona" class="input_card--radios" value="8">
<label for="selecciona">8</label>
<input type="radio" name="selecciona" class="input_card--radios" value="10">
<label for="selecciona">10</label>
<button type="button" class="start_button">Comenzar</button>
</form>
</div>
<section class="card__seccion"></section>
</main>
<footer class="footer">
<div class="footer__outer">
<div class="footer__inner">
<p class="footer__text">Versión original</p>
<a href="https://twitter.com/SANDRAGC3" target="_Blank">
<img src="images/sandracgarcia.jpg" alt="Sandra García" class="footer__powered--img"/>
</a>
</div>
<div class="footer__inner">
<p class="footer__text">Desarrolladora</p>
<a href="https://twitter.com/AnyaBranco" target="_Blank">
<img src="images/logo-anna-rabbit.gif" alt="Anna Branco" class="footer__anna--img"/>
</a>
</div>
<div class="footer__inner">
<p class="footer__text">Creando diversidad digital</p>
<a href="https://www.adalab.es" target="_Blank">
<img src="images/logo-adalab.png" alt="Adalab" class="footer__adalab__img"/>
</a>
</div>
</div>
<p class="footer__version" id="credits">v1.0.1</p>
</footer>
<script type="text/javascript" src='js/main.min.js'></script>
</body>
</html>