Skip to content

Instantly share code, notes, and snippets.

@ikayz

ikayz/gameboard.html

Last active October 20, 2019 20:13
Show Gist options
  • Save ikayz/e7c9557852493568e1da91a7075f779c to your computer and use it in GitHub Desktop.
Save ikayz/e7c9557852493568e1da91a7075f779c to your computer and use it in GitHub Desktop.
Download ZIP
GeoRetro
Raw
gameboard.html
<!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>GeoRETRO Memory Matching Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>GeoRETRO Memory Game <span></h1>
<span class="tool-tip">
<button aria-label="how to play" onClick="openHelpModal()">
<svg width="40" height="40">
<circle cx="20" cy="20" r="15" stroke-width="2" fill="#000000" />
<text x="50%" y="50%" text-anchor="middle" fill="white" font-size="1em" dy=".4em">❓</text>
❓
</svg>
</button>
<span class="tool-tip-text">How to Play</span>
</span>
</header>
<main>
<section style="background-image: url('./img/space.jpg');">
<div class="game-status-details">
<div class="rating">
<span class="star">🌟</span>
<span class="star">🌟</span>
<span class="star">🌟</span>
<span class="star">🌟</span>
<span class="star">🌟</span>
</div>
<span class="move-counter" id="moveCounter"></span>
<span class="timer" id="timer">0 mins 0 secs</span>
<button class="restart-btn" id="restartBtn" onClick="startGame()" aria-label="restart game">↻</button>
</div>
<table class="game-board">
<tbody class="game-grid">
<tr class="game-grid-row">
<td class="game-card">
<img class="game-card-img" src="img/1.jpg" alt="cake1">
</td>
<td class="game-card">
<img class="game-card-img" src="img/2.jpg" alt="cake2">
</td>
<td class="game-card">
<img class="game-card-img" src="img/3.jpg" alt="cake3">
</td>
<td class="game-card">
<img class="game-card-img" src="img/4.jpg" alt="cake4">
</td>
</tr>
<tr class="game-grid-row">
<td class="game-card">
<img class="game-card-img" src="img/5.jpg" alt="cake5">
</td>
<td class="game-card">
<img class="game-card-img" src="img/6.jpg" alt="cake6">
</td>
<td class="game-card">
<img class="game-card-img" src="img/7.jpg" alt="cake7">
</td>
<td class="game-card">
<img class="game-card-img" src="img/8.jpg" alt="cake8">
</td>
</tr>
<tr class="game-grid-row">
<td class="game-card">
<img class="game-card-img" src="img/1.jpg" alt="cake1">
</td>
<td class="game-card">
<img class="game-card-img" src="img/2.jpg" alt="cake2">
</td>
<td class="game-card">
<img class="game-card-img" src="img/3.jpg" alt="cake3">
</td>
<td class="game-card">
<img class="game-card-img" src="img/4.jpg" alt="cake4">
</td>
</tr>
<tr class="game-grid-row">
<td class="game-card">
<img class="game-card-img" src="img/5.jpg" alt="cake5">
</td>
<td class="game-card">
<img class="game-card-img" src="img/6.jpg" alt="cake6">
</td>
<td class="game-card">
<img class="game-card-img" src="img/7.jpg" alt="cake7">
</td>
<td class="game-card">
<img class="game-card-img" src="img/8.jpg" alt="cake8">
</td>
</tr>
</tbody>
</table>
<div class="restart-button-div">
<button class="restart-button brown-button" id="restartButton" onClick="startGame()">Restart ↻</button>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment