generated from Code-Institute-Org/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
131 lines (127 loc) · 4.14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Rock paper scissors, game, star trek, lizard spock"
/>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="shortcut icon" href="#" />
<title>Rock Paper Scissors Lizard Spock</title>
</head>
<body>
<header class="title-area">
<nav class="nav-bar">
<h1>Rock Paper Scissors Lizard Spock</h1>
<ul>
<li class="nav-link"><a href="#rules">How To Play</a></li>
</ul>
</nav>
</header>
<!-- Main game area -->
<section id="game-area" class="game-area">
<div class="overlay">
<div class="rounds">
<h2>Rounds Won: <span id="round-counter">0</span></h2>
</div>
<div class="main-play">
<h2>You: <span id="player-choice"></span></h2>
<h2>Host: <span id="host-choice"></span></h2>
</div>
<div class="result">
<h2>Result:<br /><span id="result">?</span></h2>
</div>
<!-- The buttons the players use to make their selection -->
<div class="player-buttons">
<button class="player" id="rock">Rock ⛰️</button>
<button class="player" id="paper">Paper 📃</button>
<button class="player" id="scissors">Scissors ✂️</button>
<button class="player" id="lizard">Lizard 🦎</button>
<button class="player" id="spock">Spock 🖖</button>
</div>
<!-- Score Area -->
<div class="scoreboard">
<h3>Scores</h3>
</div>
<div class="scores">
<p>You: <span id="player-score">0</span></p>
<p>Host: <span id="host-score">0</span></p>
</div>
<!-- Reset button -->
<div class="reset">
<button aria-label="reset" class="reset-button" id="reset">
Reset Game
</button>
</div>
</div>
</section>
<!-- How to play Rules image -->
<section id="rules" class="rules">
<h2>How To Play</h2>
<ul class="game-rules">
<li>First to 5 wins the round!</li>
<li>Scissors cuts Paper</li>
<li>Paper covers Rock</li>
<li>Rock crushes Lizard</li>
<li>Lizard Poisons Spock</li>
<li>Spock smashes Scissors</li>
<li>Scissors decapitates Lizard</li>
<li>Lizard eats Paper</li>
<li>Paper disproves Spock</li>
<li>Spock vaporizes Rock</li>
<li>Rock crushes Scissors</li>
</ul>
</section>
<footer class="footer">
<ul class="socials">
<li>
<a
href="https://www.facebook.com/"
target="_blank"
rel="noopener"
aria-label="Check out our Facebook Page (This will open in a new tab)"
><i class="fa-brands fa-square-facebook"></i
></a>
</li>
<li>
<a
href="https://www.instagram.com/"
target="_blank"
rel="noopener"
aria-label="Check out our Instagram Page (This will open in a new tab)"
><i class="fa-brands fa-instagram"></i
></a>
</li>
<li>
<a
href="https://www.twitter.com/"
target="_blank"
rel="noopener"
aria-label="Check out our Twitter Page (This will open in a new tab)"
><i class="fa-brands fa-square-twitter"></i
></a>
</li>
<li>
<a
href="https://www.tiktok.com/"
target="_blank"
rel="noopener"
aria-label="Check out our TikTok Page (This will open in a new tab)"
><i class="fa-brands fa-tiktok"></i
></a>
</li>
</ul>
<p class="copyright">© Copyright 2023 RPSLS</p>
</footer>
<!-- script.js -->
<script src="assets/js/script.js"></script>
<!-- Font Awesome script -->
<script
src="https://kit.fontawesome.com/2327dee0b2.js"
crossorigin="anonymous"
></script>
</body>
</html>