COOP DIV AND CSS Practice

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Title</title>

  </head>
  
 <div id="play_button">
 
 <button class="play_button">
  START
  </button>
  
 </div>
  
  <body>
    <div id="first">
      <div class="text">
      TITLE
      </div>
      
    </div>
    
    <div id="third">
      <div class="text">
      <!-- The third text block -->
      </div>
    </div>
    
    <div id="fourth">
      <div class="text">
      <!-- The fourth text block -->
      </div>
    </div>
  </body>

</html>

CSS

html {
  height:100%
}

body {
  background-color: #000000;
  height: 100%;
}

#play_button {
    position:absolute;
    transition: .5s ease;
    top: 150px;
    left: 270px;
}

#first {
  background-color: #8e1e1e;
  width:auto;
  height:60px;
  /*height: 75%;
  width: 25%;
  float: left;
  border: 2px dotted white;
  border-radius: 5px;*/
}

#second {
  /*background-color: #f3827c;
  height:60px;
  width:auto;*/
  
  /* border: 2px dashed white;
  border-radius: 5px; */

  /*height: 75%;/*
  /*width: 25%;*/
  /*float: left;*/
}

#third {
 /* background-color: #dfe0de;
  height:60px;
  width:auto;
  
  /* border: 2px double white;
  border-radius: 5px;*/
  /*height: 50%;/*
  /*width: 25%;*/
  /*float: left;*/
}

#fourth {
  /*background-color: #4f5e5d;
  height:60px;
  width:auto;*/

  /*border: 2px solid white;
  border-radius: 5px;*/
  /*height: 25%;/*
  /*width: 25%;*/
  /*float: left;*/

}

div.text {
  text-align: center;
  font-weight: bold;
  font-family: "Verdana", cursive, sans-serif;
  font-style: italic;
  font-size: 35px;
  color: black;
  /*text-shadow: 2px 1px #ffffff;/*  
}

JavaScript

$(".left").click(function()