HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
<head>
<title>CTW Tickets</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
  <div id="container">
    <nav id="header_img">
      <img src="https://i.imgur.com/5zoEUbx.jpg"/>
    </nav>
    <div id="ticket_header">
      <h1 id="Tickets">Tickets</h1>
    </div>
    <header>
      <div id="performances">Performances</div>
      <div id="mixed_party">Mixed Reality Party</div>
      <div id="two_day">2 Day Conference</div>
    </header>
    <div id="top_performances_container">
      <h2 id="performance_header">Performances</h2>
      <h4 class="date_location">Fri-Sat May 12-13 7pm- 11pm</h4>
      <h4 class="date_location">Knockdown Center, 52-19 Flushing Ave, Masbeth, NY 11378</h4>
      <div id="card_top_left">
        <img id="top_left_img" src="https://i.imgur.com/CqvJqI4.jpg"/>
        <h5 class="card_writing">Pamela Z, Jimmy Joe Roche & Layne Garrett, LONG DISTANCE POISON, Ed Bear </h5>
        <h5 class="pricing">$15 Early Bird, $20 after May 1</h5>
        <div class="ticket_button">Tickets</div>
     </div>
      <div id="card_top_middle">
        <img id="top_left_img" src="https://i.imgur.com/h8I17eO.jpg"/>
        <h5 class="card_writing">Plan 23, SMOMID, Raphaele Shirley & Algis Kizys, Laura Ortman, Eric Hubel, Signorelli </h5>
        <h5 class="pricing">$15 Early Bird, $20 after May 1</h5>
        <div class="ticket_button">Tickets</div>
     </div>
       <div id="card_top_right">
        <img id="top_left_img" src="https://i.imgur.com/w776ECF.jpg"/>
         <h5 class="card_writing">Creative Tech Week Presents the Arts Hub: Pamela Z, Plan 23, and more (Both-Night Ticket)</h5>
        <h5 class="pricing">$25 Early Bird, $30 after May 1</h5>
        <div class="ticket_button">Tickets</div>
     </div>  
    </div>
    <div id="bottom_container">
      <div id="bottom_left">
       <div id="mixed_reality_header">Mixed Reality Party</div>
         <h4 class="date_location_bottom_left">Wed May 17 5pm- 10pm</h4>
      <h4 class="date_location_bottom_left">Microsoft Reactor at Grand Central Tech, 335 Madison at 34rd St NYC</h4>
      </div>
      <div id="card_bottom_left">
        <img id="top_left_img" src="https://i.imgur.com/TaUqcdi.jpg"/>
        <h5 class="card_writing">MIXED REALITY PARTY </h5>
        <h5 class="pricing">$15</h5>
        <h5 class="pricing">Tickets are available at the door for $20</h5>
        <div class="ticket_button">Tickets</div>
     </div>
      <div id="bottom_right">
        <div id="conference_hub_header">Conference Hub</div>
         <h4 class="date_location_bottom_right">Sat-Sun May 20-21 9am- 5pm</h4>
      <h4 class="date_location_bottom_right">NYIT AOB on Broadway between 61-62nd St. in Manhattan</h4>
      </div>
      </div>
      <div id="card_bottom_right">
        <img id="top_left_img" src="https://i.imgur.com/eShIzUP.jpg"/>
        <h5 class="card_writing">CONFERENCE HUB</h5>
        <h5 class="pricing">Until May 1st two-day tickets are only $80 ($40 for artists/independents): cheaper for one-day attendees</h5>
        <div class="ticket_button">Tickets</div>
     </div>
    <img id="footer" src="https://i.imgur.com/m0NCXKa.jpg"/>
  </div>
</body>
</html>

#container{
  width: 960px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #F5F5F5;
  overflow:auto;
}

#ticket_header{
  background-image: url("https://i.imgur.com/CFKElSa.jpg");
  height: 367px;
  margin-top: -22px;
}

#tickets{
  color: #FFFFFF;
  text-transform: uppercase;
  font-weight: normal;
  padding-top: 7%;
  padding-left: 7%;
  font-size: 50px;
  margin-top: 1px;
  font-family: 'Roboto', sans-serif;
}

header{
  text-transform: uppercase;
  background-color: #FFFFFF;
  
}

#performances{
  float: left;
  padding-left: 16%;
  padding-right: 5%;
  background-color: #FFFFFF;
  padding-bottom: 3%;
  padding-top: 3%;
}

#mixed_party{
  float: left;
  padding-left: 5%;
  padding-right: 5%;
  background-color: #FFFFFF;
  padding-top: 3%;
  padding-bottom: 3%;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

#two_day{
  float: left;
  padding-left: 5%;
  background-color: #FFFFFF;
  padding-right: 16%;
  padding-bottom: 3%;
  padding-top: 3%;
}

#performance_header{
  text-transform: uppercase;
  font-weight: normal;
  margin-top: 13%;
  margin-bottom: 3%;
  margin-left: 10%;
}

.date_location{
  margin-top: -13px;
  font-weight: normal;
  margin-left: 10%;
}

#card_top_left{
  width: 220px;
  background-color: #FFFFFF;
  padding-bottom: 2%;
  float: left;
  margin-left: 10%;
  margin-right: 4%;
  border: 1px solid black;
  margin-bottom: 5%;
}

.card_writing{
  font-weight: normal;
  padding-left: 4%;
}

.pricing{
  font-weight: normal;
  padding-left: 25%;
  padding-right: 25%;
}

.ticket_button{
  text-transform: uppercase;
  background-color: #000000;
  color: #FFFFFF;
  text-align: center;
  width: 100px;
  margin: 0 auto;
  padding-top: 1%;
  padding-bottom: 1%;
}

#card_top_middle{
  width: 219px;
  background-color: #FFFFFF;
  padding-bottom: 2%;
  float: left;
  border: 1px solid black;
  margin-right: 4%;
}

#card_top_right{
  width: 219px;
  background-color: #FFFFFF;
  padding-bottom: 2%;
  float: left;
  border: 1px solid black;
}

#top_left_img{
  width: 219px;
}

#bottom_container{
  
}

#mixed_reality_header{
  text-transform: uppercase;
  font-weight: normal;
  margin-top: 15px;
  font-size: 23px;
  margin-bottom: 10%;
  margin-left: 55%;
  margin-right: -120px;
}

#bottom_left{
  width: 300;
}

#bottom_right{
  float: left;
  width: 300;
  margin-top: -145px;
}

#footer{
  margin-top: 20%;
}

#card_bottom_left{
  width: 219px;
  background-color: #FFFFFF;
  padding-bottom: 2%;
  float: left;
  border: 1px solid black;
}

#card_bottom_right{
  width: 219px;
  background-color: #FFFFFF;
  padding-bottom: 2%;
  float: left;
  border: 1px solid black;
}

#conference_hub_header{
  text-transform: uppercase;
  font-weight: normal;
  margin-top: -2px;
  font-size: 23px;
  margin-bottom: 10%;
  margin-left: 65%;
  margin-right: -1000px;
}

.date_location_bottom_left{
  margin-top: -13px;
  font-weight: normal;
  margin-left: 55%;
  margin-right: -70px;
  
}

.date_location_bottom_right{
  margin-top: -13px;
  font-weight: normal;
  margin-left: 65%;
  margin-right: -150;
  
}

#card_bottom_right{
  margin-right: -100%;
  margin-left: 20%;
}

#card_bottom_left{
  margin-left: 17%;
}