-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (66 loc) · 2.75 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Matchy Ratchy</title>
<link rel="stylesheet" href="style.css" />
<!-- <nav>
<h3>
<a href= "#ins" > Instruciones </a> <a href= "#cards" > Let's Playyy! </a>
</h3>
</nav> -->
</head>
<body>
<section class="memory-game">
<div class="welcome">
<h1>BIENVENIDXS: <br />HOW GOOD IS YOUR INTUITION?</h1>
<h3>Use your magic to find the matching cards! </h3>
</div>
<div class="instructions">
<h2 id="ins">INSTRUCTIONS</h2>
<p>
<h4>
Can you see clearly with your third eye? Do you know where the matching cards are hiding? Here's your chance to
prove to your homies that you're psychic! Below, you will find 8 cards that have been scrambled around for you
to play with.
</h4>
</p>
</div>
<div class="memory-card" data-img="kingD">
<img class="front" src="card-images/king-diamond.png" alt="King of Diamonds" />
<img class="back" src="card-images/back.png" alt="Back of Card" />
</div>
<div class="memory-card" data-img="kingD">
<img class="front" src="card-images/king-diamond.png" alt="King of Diamonds" />
<img class="back" src="card-images/back.png" alt="Back of Card" />
</div>
<div class="memory-card" data-img="kingH">
<img class="front" src="card-images/king-heart.png" alt="King of Hearts" />
<img class="back" src="card-images/back.png" alt="Back of Card" />
</div>
<div class="memory-card" data-img="kingH">
<img class="front" src="card-images/king-heart.png" alt="King of Hearts" />
<img class="back" src="card-images/back.png" alt="Back of Card" />
</div>
<div class="memory-card" data-img="queenH">
<img class="front" src="card-images/Queen-heart.png" alt="Queen of Hearts" />
<img class="back" src="card-images/back.png" alt="Back of Card" />
</div>
<div class="memory-card" data-img="queenH">
<img class="front" src="card-images/Queen-heart.png" alt="Queen of Hearts" />
<img class="back" src="card-images/back.png" alt="Back of Card" />
</div>
<div class="memory-card" data-img="queenD">
<img class="front" src="card-images/Queen-Diamond.png" alt="Queen of Diamonds" />
<img class="back" src="card-images/back.png" alt="Back of Card" />
</div>
<div class="memory-card" data-img="queenD">
<img class="front" src="card-images/Queen-Diamond.png" alt="Queen of Diamonds" />
<img class="back" src="card-images/back.png" alt="Back of Card" />
</div>
</section>
<script src="scripts.js"></script>
</body>
</html>