Skip to content

Instantly share code, notes, and snippets.

@angle943

angle943/index.html

Created April 4, 2020 05:25
Show Gist options
  • Save angle943/21f2ee581649eea84acc619b595ff3d3 to your computer and use it in GitHub Desktop.
Save angle943/21f2ee581649eea84acc619b595ff3d3 to your computer and use it in GitHub Desktop.
Download ZIP
Connect Four index.html
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Connect Four!</title>
</head>
<body>
<h1>Connect Four</h1>
<div class="game-board">
<div class="cell row-top col-0"></div>
<div class="cell row-top col-1"></div>
<div class="cell row-top col-2"></div>
<div class="cell row-top col-3"></div>
<div class="cell row-top col-4"></div>
<div class="cell row-top col-5"></div>
<div class="cell row-top col-6"></div>
<div class="cell row-0 col-0 left-border top-border"></div>
<div class="cell row-0 col-1 top-border"></div>
<div class="cell row-0 col-2 top-border"></div>
<div class="cell row-0 col-3 top-border"></div>
<div class="cell row-0 col-4 top-border"></div>
<div class="cell row-0 col-5 top-border"></div>
<div class="cell row-0 col-6 top-border right-border"></div>
<div class="cell row-1 col-0 left-border"></div>
<div class="cell row-1 col-1"></div>
<div class="cell row-1 col-2"></div>
<div class="cell row-1 col-3"></div>
<div class="cell row-1 col-4"></div>
<div class="cell row-1 col-5"></div>
<div class="cell row-1 col-6 right-border"></div>
<div class="cell row-2 col-0 left-border"></div>
<div class="cell row-2 col-1"></div>
<div class="cell row-2 col-2"></div>
<div class="cell row-2 col-3"></div>
<div class="cell row-2 col-4"></div>
<div class="cell row-2 col-5"></div>
<div class="cell row-2 col-6 right-border"></div>
<div class="cell row-3 col-0 left-border"></div>
<div class="cell row-3 col-1"></div>
<div class="cell row-3 col-2"></div>
<div class="cell row-3 col-3"></div>
<div class="cell row-3 col-4"></div>
<div class="cell row-3 col-5"></div>
<div class="cell row-3 col-6 right-border"></div>
<div class="cell row-4 col-0 left-border"></div>
<div class="cell row-4 col-1"></div>
<div class="cell row-4 col-2"></div>
<div class="cell row-4 col-3"></div>
<div class="cell row-4 col-4"></div>
<div class="cell row-4 col-5"></div>
<div class="cell row-4 col-6 right-border"></div>
<div class="cell row-5 col-0 bottom-border left-border"></div>
<div class="cell row-5 col-1 bottom-border"></div>
<div class="cell row-5 col-2 bottom-border"></div>
<div class="cell row-5 col-3 bottom-border"></div>
<div class="cell row-5 col-4 bottom-border"></div>
<div class="cell row-5 col-5 bottom-border"></div>
<div class="cell row-5 col-6 bottom-border right-border"></div>
</div>
<div class="footer">
<button class="reset">Reset</button>
<span class="status"></span>
</div>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment