grid

by jshacker

HTML

<!-- Tic-Tac-Toe Game -->

<!-- Grid 
A1 A2 A3
B1 B2 B3
C1 C2 C3
-->
<div class="container">
  <div id="playerone" class="red">Player 1</div>
  <div id="playertwo">Player 2</div>
  <div class="cell a 1" id="A1"></div>
  <div class="cell a 2" id="A2"></div>
  <div class="cell a 3" id="A3"></div>
  <div class="cell b 1" id="B1"></div>
  <div class="cell b 2" id="B2"></div>
  <div class="cell b 3" id="B3"></div>
  <div class="cell c 1" id="C1"></div>
  <div class="cell c 2" id="C2"></div>
  <div class="cell c 3" id="C3"></div>
</div>

<div id="resetBtn">Reset</div>

CSS

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  background-color: #17212b;
}

.red {
  background-color: #f45b69;
  color: #17212b;
}

.blue {
  background-color: #5ab7f4;
  color: #17212b;
}

#playerone {
  float: left;
  color: #e3eaf2;
  font-size: 1.5em;
  font-family: "Quicksand", sans-serif;
  padding: 20px;
  margin: 10px;
  margin-bottom: 50px;
  width: 160px;
  transition: background-color 0.5s ease;
  text-align: center;
}

#playertwo {
  float: right;
  color: #e3eaf2;
  font-size: 1.5em;
  font-family: "Quicksand", sans-serif;
  padding: 20px;
  margin: 10px;
  margin-bottom: 50px;
  width: 160px;
  transition: background-color 0.5s ease;
  text-align: center;
}

.cell {
  border: 5px solid #31404f;
  min-height: 100px;
  min-width: 100px;
  margin: 10px;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cell:hover:not(.red, .blue) {
  background-color: #31404f;
}

.container {
  width: 369px;
  margin: 0 auto;
}

.red {
  background-color: #f45b69;
  color: #17212b;
}

.blue {
  background-color: #5ab7f4;
  color: #17212b;
}

#resetBtn {
  background-color: #31404f;
  border: 1px solid #4a6075;
  color: #64809c;
  width: 150px;
  height: 50px;
  margin: 50px auto 0 auto;
  text-align: center;
  line-height: 50px;
  font-family: "Quicksand", sans-serif;
  cursor: pointer;
}