Tic Tac Toe OG

:)

by Daniel Segura

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
  <script src="js/script.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 col-sm-2 ads"> ads </div>

      <div class="col-12 col-sm-6 content">
        <div class="container-fluid tic-container">
          <div class="row tic-row">
            <div class="col-4 tic-box"> 1 </div>
            <div class="col-4 tic-box"> 2 </div>
            <div class="col-4 tic-box"> 3 </div>
          </div>
          <div class="row tic-row">
            <div class="col-4 tic-box"> 4 </div>
            <div class="col-4 tic-box"> 5 </div>
            <div class="col-4 tic-box"> 6 </div>
          </div>
          <div class="row tic-row">
            <div class="col-4 tic-box"> 7 </div>
            <div class="col-4 tic-box"> 8 </div>
            <div class="col-4 tic-box"> 9 </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-2 tic-panel"> PANEL-THINGY<br>Score:<br>Foo bar: stuff<br> Reset game and all that blah </div>



      <div class="col-12 col-sm-2 ads"> ads </div>
    </div>
  </div>
</body>

</html>

CSS

.ads{
  text-align: center;
  margin: .4vw 0;
  background: #F4CC70;
  padding: .4vw;
}

.content{
  margin: .4vw 0;
  background: lightblue;
  padding: .4vw;
}
.tic-panel{
  border: solid 2px black;
  margin: .4vw 0;
  background: #66A5AD;
  padding: .4vw;
}

.tic-box{
  border: solid black 1px;
  font-size: 5vw;
  background: #6AB187;
  text-align: center;
  color: lavender;
}
.tic-box:hover{
  background: #20948B;
}