-
Notifications
You must be signed in to change notification settings - Fork 0
/
characters.html
119 lines (118 loc) · 5.42 KB
/
characters.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Characters</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
<link href="/CSS/style.css" rel="stylesheet">
</head>
<body>
<main>
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="/home.html"><img src="/pics/logo.png" alt="Marvel"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/signup.html">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login.html">Log in</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/pics/assemble.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="/pics/Marvel-Villains-Cropped.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="/pics/cómic-Avengers-con-personajes-de-Infinity-War.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="/pics/fight.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<section class="main">
<div class="features">
<div class="feature">
<h1>Get your Marvel character</h1>
<p>Choose a number between 0 and 100 for each of the four powerstats and "Get the character" closest to those stats.
Or, you can use the "Get random" button to get any Marvel character and see their stats. </p>
<div class="getYourHero">
<div id="btn"><img src="/pics/Marvel_Universe_(Civil_War).jpg" alt="guess"></div>
<div class="input">
<div class="stats">
<input class="input" id="strength" placeholder="0-100">
<p>STRENGTH<p>
</div>
<div class="stats">
<input class="input" id="speed" placeholder="0-100">
<p>SPEED</p>
</div>
<div class="stats">
<input class="input" id="durability" placeholder="0-100">
<p>DURABILITY<p>
</div>
<div class="stats">
<input class="input" id="power" placeholder="0-100">
<p>POWER<p>
</div>
</div>
</div>
<div id="text">
</div>
<div class="buttons">
<button class="buttonPlay" id="button"type='button'>Get hero</button>
<button class="buttonPlay" id="buttonRandom" type='button'>Random hero</button>
</div>
</div>
</div>
</div>
<div class="features">
<div class="feature" id="mini-game">
<h1>Guess the stats</h1>
<p>You think you know all about Marvel characters?
put your knowledge to the test with this short mini-game.
You will get 5 random Marvel characters, guess their stats as
close as possible. The closer you are, the more points you will get. </p>
<div class="play">
<div><img src="/pics/thanos.jpg" alt="guess"></div>
</div>
<div class="buttons">
<button class="buttonPlay" id="buttonStart" type='button'>Start</button>
<button class="buttonPlay" id="next">Next</button>
</div>
</div>
</div>
</section>
</main>
<script src="/JS/script.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>