Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
123 lines (107 sloc) 5.04 KB
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Memory Game</title>
<!-- Responsive design - it sets the initial scale of the browser on different devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add font links here -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<!-- Link to external style sheet -->
<link rel="stylesheet" href="./css/styles.min.css">
</head>
<body>
<div class="container">
<header>
<h1>Memory Game</h1>
<h4>find the matching pairs!</h4>
</header>
<div class="main">
<div class="score-panel">
<span class="moves"></span>
<span class="timer"></span>
<div id="replay" class="restart hidden">
<i class="fas fa-redo-alt"></i></div>
</div>
<ul id="card-deck" class="deck">
<li class="card" type="aloha">
<img src="./images/aloha.JPG" alt="aloha">
</li>
<li class="card" type="brekkie">
<img src="./images/brekkie.JPG" alt="brekkie">
</li>
<li class="card" type="desert">
<img src="./images/desert.JPG" alt="desert">
</li>
<li class="card" type="flowers">
<img src="./images/flowers.jpg" alt="flowers">
</li>
<li class="card" type="icecream">
<img src="./images/icecream.jpg" alt="icecream">
</li>
<li class="card" type="london">
<img src="./images/london.JPG" alt="london">
</li>
<li class="card" type="morocco">
<img src="./images/morocco.JPG" alt="morocco">
</li>
<li class="card" type="prague">
<img src="./images/prague.JPG" alt="prague">
</li>
<li class="card" type="aloha">
<img src="./images/aloha.JPG" alt="aloha">
</li>
<li class="card" type="brekkie">
<img src="./images/brekkie.JPG" alt="brekkie">
</li>
<li class="card" type="desert">
<img src="./images/desert.JPG" alt="desert">
</li>
<li class="card" type="flowers">
<img src="./images/flowers.jpg" alt="flowers">
</li>
<li class="card" type="icecream">
<img src="./images/icecream.jpg" alt="icecream">
</li>
<li class="card" type="london">
<img src="./images/london.JPG" alt="london">
</li>
<li class="card" type="morocco">
<img src="./images/morocco.JPG" alt="morocco">
</li>
<li class="card" type="prague">
<img src="./images/prague.JPG" alt="prague">
</li>
</ul>
<!-- Overlay before starting the game -->
<div id="ready" class="message">
<h2>Ready for the gold?</h2>
<h3><i class="fas fa-medal gold"></i> ≤ 13 moves</h3>
<h3><i class="fas fa-medal silver"></i> ≤ 18 moves</h3>
<h3><i class="fas fa-medal bronze"></i> ≥ 19 moves</h3>
<button>I'm ready!</button>
</div>
<!-- Overlay after finishing the game -->
<div id="popup" class="message hidden">
<h2>Congratulations!</h2>
<p>You're a winner! 🎉🎉🎉 </p>
<p>You made <span id="finalMove"> </span> </p>
<p>in <span id="totalTime"> </span>!</p>
<p><i id="medalRating" class="fas fa-medal"></i></p>
<button id="replay2">Play again! 😁</button>
</div>
<div class="social">
<a href="https://git.generalassemb.ly/RitaZ" target="_blank"><img src="./images/iconmonstr-github-1-240.png" alt="GitHub"></a>
<a href="https://www.instagram.com/lolography/" target="_blank"><img src="./images/iconmonstr-instagram-11-240.png" alt="Instagram"></a>
<a href="https://www.linkedin.com/in/rzlatnik/" target="_blank"><img src="./images/iconmonstr-linkedin-3-240.png" alt="LinkedIn"></a>
</div>
</div>
<footer>Designed and coded with love :)</footer>
</div>
<script src="./js/jquery-3.0.0.min.js"></script>
<script src="./js/index.js"></script>
</body>
</html>