index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://fonts.googleapis.com/css?family=Pacifico|Raleway" rel="stylesheet">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Grand Circus Theatre</title>
  </head>
  <body>
<!--Jumbotron Header-->
    <div class="jumbotron">
      <h1>Grand Circus Theatre</h1>
      <!-- <img src="http://clipart.info/images/ccovers/1486149178Movie-reel-with-soda-drink-and-popcorn-vector-clip-art.png" alt="popcorn" class="popcorn"> -->
      <p class="instructions">Instructions:</p>
        <p>Select your seat below.</p>
        <p>Reserve your seat by filling out the simple form.</p>
        <p>Enjoy the show!</p>
    </div>
<!--form -->
<form class="reservationForm">
  <div class="form-container">
    <div class="panel">
      <h2 class="form-head">Reserve Your Seat</h2>
        <div class="form-group">
          <label class="name">Name:</label>
          <input type="name" class="form-control" id="name" placeholder="Grant Chirpus">
        </div>
        <div class="form-group">
          <label class="email">Email:</label>
          <input type="email" class="form-control" id="email" placeholder="grantchirpus@grandcircus.co">
        </div>
        <div class="form-group">
          <label class="phone_number">Phone Number:</label>
          <input type="phone" class="form-control" id="phone_number" placeholder="(555) 555-5555">
        </div>
    </div>
  </div>
</form>
<div class="centerButton">
  <button type="button" name="submit" id ='button'>Reserve</button>
</div>
<!--Rows of Seats using Bootstrap Grid System-->
<div class="container ">
    <img src="images/screen.png" class="screen" style="width:100%" alt="Image">
<!--start of first row -->
    <div class="row">
<!-- seat A1 -->
<div id="A1" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A1</p>
  </div>
  <div id="A1-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A1</p>
  </div>
  <div id="A1-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A1</p>
  </div>
</div>
<!-- seat A2 -->
<div id="A2" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A2</p>
  </div>
  <div id="A2-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A2</p>
  </div>
  <div id="A2-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A2</p>
  </div>
</div>
<!-- seat A3 -->
<div id="A3" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A3</p>
  </div>
  <div id="A3-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A3</p>
  </div>
  <div id="A3-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A3</p>
  </div>
</div>
<!-- seat A4 -->
<div id="A4" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A4</p>
  </div>
  <div id="A4-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A4</p>
  </div>
  <div id="A4-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A4</p>
  </div>
</div>
<!-- seat A5 -->
<div id="A5" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A5</p>
  </div>
  <div id="A5-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A5</p>
  </div>
  <div id="A5-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A5</p>
  </div>
</div>
<!-- seat A6 -->
<div id="A6" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A6</p>
  </div>
  <div id="A6-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A6</p>
  </div>
  <div id="A6-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A6</p>
  </div>
</div>
<!-- seat A7 -->
<div id="A7" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A7</p>
  </div>
  <div id="A7-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A7</p>
  </div>
  <div id="A7-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A7</p>
  </div>
</div>
<!-- seat A8 -->
<div id="A8" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A8</p>
  </div>
  <div id="A8-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A8</p>
  </div>
  <div id="A8-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A8</p>
  </div>
</div>
<!-- seat A9 -->
<div id="A9" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A9</p>
  </div>
  <div id="A9-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A9</p>
  </div>
  <div id="A9-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A9</p>
  </div>
</div>
<!-- seat A10 -->
<div id="A10" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A10</p>
  </div>
  <div id="A10-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A10</p>
  </div>
  <div id="A10-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat A10</p>
  </div>
</div>
<!--start of second row -->
<div class="row">
<!-- seat B1 -->
<div id="B1" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B1</p>
  </div>
  <div id="B1-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B1</p>
  </div>
  <div id="B1-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B1</p>
  </div>
</div>
<!-- seat B2 -->
<div id="B2" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B2</p>
  </div>
  <div id="B2-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B2</p>
  </div>
  <div id="B2-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B2</p>
  </div>
</div>
<!-- seat B3 -->
<div id="B3" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B3</p>
  </div>
  <div id="B3-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B3</p>
  </div>
  <div id="B3-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B3</p>
  </div>
</div>
<!-- seat B4 -->
<div id="B4" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B4</p>
  </div>
  <div id="B4-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B4</p>
  </div>
  <div id="B4-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B4</p>
  </div>
</div>
<!-- seat B5 -->
<div id="B5" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B5</p>
  </div>
  <div id="B5-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B5</p>
  </div>
  <div id="B5-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B5</p>
  </div>
</div>
<!-- seat B6 -->
<div id="B6" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B6</p>
  </div>
  <div id="B6-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B6</p>
  </div>
  <div id="B6-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B6</p>
  </div>
</div>
<!-- seat B7 -->
<div id="B7" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B7</p>
  </div>
  <div id="B7-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B7</p>
  </div>
  <div id="B7-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B7</p>
  </div>
</div>
<!-- seat B8 -->
<div id="B8" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B8</p>
  </div>
  <div id="B8-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B8</p>
  </div>
  <div id="B8-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B8</p>
  </div>
</div>
<!-- seat B9 -->
<div id="B9" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B9</p>
  </div>
  <div id="B9-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B9</p>
  </div>
  <div id="B9-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B9</p>
  </div>
</div>
<!-- seat B10 -->
<div id="B10" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B10</p>
  </div>
  <div id="B10-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B10</p>
  </div>
  <div id="B10-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat B10</p>
  </div>
</div>
<!--start of third row -->
<div class="row">
<!-- seat C1 -->
<div id="C1" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C1</p>
  </div>
  <div id="C1-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C1</p>
  </div>
  <div id="C1-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C1</p>
  </div>
</div>
<!-- seat C2 -->
<div id="C2" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C2</p>
  </div>
  <div id="C2-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C2</p>
  </div>
  <div id="C2-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C2</p>
  </div>
</div>
<!-- seat C3 -->
<div id="C3" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C3</p>
  </div>
  <div id="C3-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C3</p>
  </div>
  <div id="C3-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C3</p>
  </div>
</div>
<!-- seat C4 -->
<div id="C4" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C4</p>
  </div>
  <div id="C4-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C4</p>
  </div>
  <div id="C4-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C4</p>
  </div>
</div>
<!-- seat C5 -->
<div id="C5" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C5</p>
  </div>
  <div id="C5-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C5</p>
  </div>
  <div id="C5-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C5</p>
  </div>
</div>
<!-- seat C6 -->
<div id="C6" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C6</p>
  </div>
  <div id="C6-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C6</p>
  </div>
  <div id="C6-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C6</p>
  </div>
</div>
<!-- seat C7 -->
<div id="C7" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C7</p>
  </div>
  <div id="C7-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C7</p>
  </div>
  <div id="C7-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C7</p>
  </div>
</div>
<!-- seat C8 -->
<div id="C8" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C8</p>
  </div>
  <div id="C8-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C8</p>
  </div>
  <div id="C8-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C8</p>
  </div>
</div>
<!-- seat C9 -->
<div id="C9" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C9</p>
  </div>
  <div id="C9-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C9</p>
  </div>
  <div id="C9-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C9</p>
  </div>
</div>
<!-- seat C10 -->
<div id="C10" class="wrapper">
  <div class="col-xs-2 seat">
    <div class="available">
      <img src="images/openseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C10</p>
  </div>
  <div id="C10-S" class="col-xs-2 seat">
    <div class="selected">
      <img src="images/selectseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C10</p>
  </div>
  <div id="C10-R" class="col-xs-2 seat">
    <div class="reserved">
      <img src="images/takenseat.png" class="open-seat" style="width:100%" alt="Image">
    </div>
      <p>Seat C10</p>
  </div>
</div>
<!--closing divs for container, wrapper, rows-->
      </div>
    </div>
  </div>
</div>

<!--Seat Guide Section, using bootstrap thumbnails -->
      <div class="row-guide">
          <h4>Guide:</h4>
            <div class="col-xs-4">
              <div class="thumbnail">
                <img src="images/openseat.png">
                  <div class="caption">
                    <h4>Available Seat</h4>
                  </div>
              </div>
            </div>
            <div class="col-xs-4">
              <div class="thumbnail">
                <img src="images/selectseat.png">
                <div class="caption">
                  <h4>Your Seat</h4>
                </div>
              </div>
            </div>
            <div class="col-xs-4">
              <div class="thumbnail">
                <img src="images/takenseat.png">
                  <div class="caption">
                    <h4>Occupied Seat</h4>
                  </div>
              </div>
            </div>
          </div>
<!--end of body, html, jQuery and JS scripts -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="script.js" type="text/javascript"></script>
  </body>
</html>