Skip to content

Instantly share code, notes, and snippets.

@harrisonmalone

harrisonmalone/index.html

Created March 26, 2020 03:30
Show Gist options
  • Save harrisonmalone/8768d8ebbf544cab830755cc86b38d77 to your computer and use it in GitHub Desktop.
Save harrisonmalone/8768d8ebbf544cab830755cc86b38d77 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0px;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.grid {
height: 600px;
width: 600px;
border: 10px solid crimson;
}
.row-1 {
display: grid;
grid-template-columns: repeat(8, 1fr);
height: 12.5%;
}
.row-1 .square:nth-child(odd) {
background: black;
}
.row-2 {
display: grid;
grid-template-columns: repeat(8, 1fr);
height: 12.5%;
}
.row-2 .square:nth-child(even) {
background: black;
}
.row-3 {
display: grid;
grid-template-columns: repeat(8, 1fr);
height: 12.5%;
}
.row-3 .square:nth-child(odd) {
background: black;
}
.row-4 {
display: grid;
grid-template-columns: repeat(8, 1fr);
height: 12.5%;
}
.row-4 .square:nth-child(even) {
background: black;
}
.row-5 {
display: grid;
grid-template-columns: repeat(8, 1fr);
height: 12.5%;
}
.row-5 .square:nth-child(odd) {
background: black;
}
.row-6 {
display: grid;
grid-template-columns: repeat(8, 1fr);
height: 12.5%;
}
.row-6 .square:nth-child(even) {
background: black;
}
.row-7 {
display: grid;
grid-template-columns: repeat(8, 1fr);
height: 12.5%;
}
.row-7 .square:nth-child(odd) {
background: black;
}
.row-8 {
display: grid;
grid-template-columns: repeat(8, 1fr);
height: 12.5%;
}
.row-8 .square:nth-child(even) {
background: black;
}
</style>
</head>
<body>
<div class="grid">
<div class="row-1">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="row-2">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="row-3">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="row-4">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="row-5">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="row-6">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="row-7">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="row-8">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment