Seat Laoyout

In this example below you will see how to do a Seat Laoyout with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Raymond7in, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Raymond7in ©

Technologies

  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Seat Laoyout</title>
  
  
  
  
  
</head>

<body>

  
<head>
  <!-- Theme Made By Raymond M - Copyright -->
  <!-- Contact raymond7in@gmail.com for code reuse -->
  <title>RayBuy.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Unica+One">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Vollkorn">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
  <style>
.animation-class,
body img + p,
.hop a,
.footer-sticky ul li a,
.navbar .navbar-list li a,#top-fixed a
{
    transition-timing-function: linear; 
    transition-duration: .5s;
}

#test
{
    border: 1px solid white;
  
}

#top-fixed
{
  float:right;
  font-size:1.9rem;
  font-family:'Unica One', helvetica;
  color:#eceff1;
}

#top-fixed a
{
  color:#eceff1;
  text-decoration:none;
}

#top-fixed a:hover
{
  color: #b71c1c;
}

#footer-placeholder
{
    height: 75px;
}


body .col-md-6 img
{
    width: 80%;
    height: auto;
    margin-left: 10%;
    padding: 70px; 

    /*transform: rotate(90deg);*/
    /*border:3px solid rgba($secondary-color,0.5);*/

    background: rgba(0, 0, 0, .03);
}
body img + p
{
    font-family: 'Unica One', helvetica;
    font-size: 1.7rem;

    padding: 15px; 

    text-align: center;
    letter-spacing: 10px;

    color: #eceff1;
    background: rgba(0, 0, 0, .03);
}
body img + p:hover
{
    color: #b71c1c;
}

.footer-sticky
{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 75px;
    margin-top: 20px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-left: 25px;

    background: rgba(0, 0, 0, .1);
}
.footer-sticky ul
{
    padding-bottom: 20px; 

    list-style: none;
}
.footer-sticky ul li
{
    display: inline-block;
    float: left;

    margin-top: 30px; 
    margin-left: 30px;
}
.footer-sticky ul li a
{
    color: #eceff1;
}
.footer-sticky ul li a:hover
{
    color: #b71c1c;
}
.footer-sticky ul #footer-copyright
{
    font-family: 'Vollkorn', helvetica;
    font-size: 1.6rem; 
    float: right;

    color: #eceff1;
}

.footer-sticky ul #footer-copyright1
{
    font-family: 'Vollkorn', helvetica;
    font-size: 1.6rem; 
    float: left;

    color: #eceff1;
}

.main-text,
.quote-text
{
    font-family:'Vollkorn',helvetica;
    font-size: 1.8rem;

    margin-top: 10px;
    padding-top: 25px; 

    color: #eceff1;
}

.quote-text
{
    font-size: 1.6rem;
    font-style: italic;

    margin-left: 30px;
    padding: 25px;
    padding-bottom: 35px;

    border-left: 3px solid rgba(255, 255, 255, .3); 
    background: rgba(0, 0, 0, .05);
}

.navbar
{
    margin-top: 10px;
    padding: 40px;

    border: none;
    border-right: 3px solid #37474f; 
    background-color: #263238;
}
.navbar i
{
    margin-bottom: 10px;

    color: #eceff1;
}
.navbar .navbar-list
{
    list-style: none;
}
.navbar .navbar-list li
{
    font-family: 'Unica One', helvetica;
    font-size: 2.4rem;

    margin-top: 10px;
    margin-right: 10px;
}
.navbar .navbar-list .hop li a h3
{
    text-decoration: none; 

    color: #cfd8dc;
}
.navbar .navbar-list li a:hover,
.navbar .navbar-list .hop li a h3:active
{
    color: #b71c1c;
}

.block-saying
{
    margin-top: 30%;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;

    color: #eceff1; 
    border: 3px solid #37474f;
}


.block-saying p,.block-saying h3
{
    font-family: 'Vollkorn', helvetica;
    font-size:1.9rem;
  
    text-align: center;
}

.block-saying .fa-quote-right
{
    float: right;
}
.block-saying p
{
    padding: 10px;
}



  body {
      
      line-height: 1.8;
      color: #818181;
  }
  h2 {
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
    
      text-transform: uppercase;
      color: #303030;
      font-weight: 600;
      margin-bottom: 30px;
  }
  h4 {
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
    
      line-height: 1.375em;
      color: #303030;
      font-weight: 400;
      margin-bottom: 30px;
  }  
  .jumbotron {
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
    background: rgba(255, 51, 255, 0.6);
      color: #fff;
      padding: 100px 25px;
     }
  .container-fluid {
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 

  }
  .bg-grey {
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
    background-color: #f6f6f6;
  }
  .logo-small {
    color: #f4511e;
      font-size: 50px;
  }
  .logo {
    color: #f4511e;
      font-size: 200px;
  }
  .thumbnail {
    padding: 0 0 15px 0;
      border: none;
      border-radius: 0;
  }
  .thumbnail img {
      width: 100%;
      height: 100%;
    margin-bottom: 10px;
  }
  .carousel-control.right, .carousel-control.left {
      background-image: none;
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
      color: #f4511e;
  }
  .carousel-indicators li {
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
      border-color: #f4511e;
  }
  .carousel-indicators li.active {
      background-color: #f4511e;
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
  }
  .item h4 {
     font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
      line-height: 1.375em;
      font-weight: 400;
      font-style: italic;
      margin: 70px 0;
  }
  .item span {
   font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
    
  }
  .panel {
      border: 1px solid #f4511e; 
      border-radius:0 !important;
      transition: box-shadow 0.5s;
  font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
    }
  .panel:hover {
      box-shadow: 5px 0px 40px rgba(0,0,0, .2);
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
  }
  .panel-footer .btn:hover {
      border: 1px solid #f4511e;
      background-color: #fff !important;
      color: #f4511e;
  font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
    }
  .panel-heading {
      color: #fff !important;
      background-color: #f4511e !important;
      padding: 25px;
      border-bottom: 1px solid transparent;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
  font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
    }
  .panel-footer {
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem;   
    background-color: white !important;
  }
  .panel-footer h3 {
      font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
  }
  .panel-footer h4 {
      color: #aaa;
      font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
  }
  .panel-footer .btn {
      margin: 15px 0;
      background-color: #f4511e;
      color: #fff;
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
  }
  .navbar {
      margin-bottom: 0;
   background: rgba(153, 0, 153, 0.8);
      z-index: 9999;
      border: 0;
      font-size: 12px !important;
      line-height: 1.42857143 !important;
      letter-spacing: 4px;
      border-radius: 0;
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
  }
  .navbar li a, .navbar .navbar-brand {
      color: #fff !important;
    font-family: 'Vollkorn', helvetica;
    font-size: 1.7rem; 
  }
  .navbar-nav li a:hover, .navbar-nav li.active a {
      color: #f4511e !important;
      background-color: #fff !important;
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
  }
  .navbar-default .navbar-toggle {
      border-color: transparent;
      color: #fff !important;
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
  }
  footer .glyphicon {
      margin-bottom: 20px;
      color: #f4511e;
  }
 table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

    
  .slideanim {visibility:hidden;}
  .slide {
      animation-name: slide;
      -webkit-animation-name: slide;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
  }
  @keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
  }
  @media screen and (max-width: 768px) {
    .col-sm-4 {
      text-align: center;
      margin: 25px 0;
    }
    .btn-lg {
        width: 100%;
        margin-bottom: 35px;
    }
  }
  @media screen and (max-width: 480px) {
    .logo {
        font-size: 150px;
    }
  }
  </style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#myPage">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about"> BOOKINGS</a></li>
        <li>  <a href="#contact">REPORT</a></li>
        
      </ul>
    </div>
  </div>
</nav>
  </br></br></br></br></br>
 <!--Header of Bookings !-->

<div class="container-fluid">  
<div class="row">
  <marquee><h1>Welcome to Booking Section RaYtRiP.com</h1></marquee>
<!--Details of Bookings !-->
 <div class="container-fluid">
	<div class="row">
		<div class="col-md-7">
      <hr>
      <table>
        <tr>
          <td><input type="checkbox" value="dv">Dv</td>
           <td><input type="checkbox" value="01">01</td>
           <td><input type="checkbox" value="08">08</td>
           <td><input type="checkbox" value="09">09</td>
           <td><input type="checkbox" value="16">16</td>
           <td><input type="checkbox" value="17">17</td>
           <td><input type="checkbox" value="24">24</td>
          <td><input type="checkbox" value="25">25</td>
           <td><input type="checkbox" value="32">32</td>
           <td><input type="checkbox" value="33">33</td>
        </tr>
        <tr>
          <td></td>
           <td><input type="checkbox" value="02">02</td>
           <td><input type="checkbox" value="07">07</td>
           <td><input type="checkbox" value="10">10</td>
           <td><input type="checkbox" value="15">15</td>
           <td><input type="checkbox" value="18">18</td>
           <td><input type="checkbox" value="23">23</td>
          <td><input type="checkbox" value="26">26</td>
           <td><input type="checkbox" value="31">31</td>
           <td><input type="checkbox" value="34">34</td>
        </tr>
        <tr>
          <td></td>
           <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
                     <td><input type="checkbox" value="35">35</td>
        </tr>
        <tr>
          <td></td>
           <td><input type="checkbox" value="03">03</td>
           <td><input type="checkbox" value="06">06</td>
           <td><input type="checkbox" value="11">11</td>
           <td><input type="checkbox" value="14">14</td>
           <td><input type="checkbox" value="19">19</td>
           <td><input type="checkbox" value="22">22</td>
          <td><input type="checkbox" value="27">27</td>
           <td><input type="checkbox" value="30">30</td>
           <td><input type="checkbox" value="36">36</td>
        </tr>
        <tr>
          <td></td>
          <td><input type="checkbox" value="04">Cr</td>
           <td><input type="checkbox" value="05">05</td>
           <td><input type="checkbox" value="12">12</td>
           <td><input type="checkbox" value="13">13</td>
           <td><input type="checkbox" value="20">20</td>
           <td><input type="checkbox" value="21">21</td>
           <td><input type="checkbox" value="28">28</td>
          <td><input type="checkbox" value="29">29</td>
           <td><input type="checkbox" value="31">31</td>
                  </tr>
      </table>
      <hr>
		<div class="form-group">
              
  <label for="selseat"> <span class="req">* </span> Selected seats are </label>
<div class="input-group">

<span class="input-group-addon"></span>
         
<input class="form-control"	 type="number" name="lastname"   
id = "txt" onkeyup = "Validate(this)" placeholder="Seat Count" required />  
  
                      <div id="errLast"></div> </div>

</div> 
      <div class="form-group">
              
  <label for="price"> <span class="req">* </span> Total </label>
<div class="input-group">

<span class="input-group-addon"></span>
         
<input class="form-control"	 type="number" name="lastname"   
id = "txt" onkeyup = "Validate(this)" placeholder="Seat Count" required />  
  
                      <div id="errLast"></div> </div>

</div> 
      <h1><small><b><center>Rates are allocated on the basis on standard charges by RaYtRiP.com admin team</center></b></small></h1><hr>
      <p><center>You will receive an conformation E-mail once you complete the payment</center></p>
      <p><center>In case of non availability of seats kindle ensure us to notify you when seats are available</center></p>
      <p><form><center><input type="checkbox">Notify me</center></form></p><hr>
    <p><center> In case of any queries please <a href="#" >contact </a>RaYtRiP.com admin team</center></p>
    </div>
    
		<div class="col-md-5">
      
         <form action="" method="post" id="fileForm" role="form">
  
          <fieldset><h1><small><b><u>Valid information is required for booking tickets</b></u></small> </h1>  
          <div class="form-group">
          
  <label for="from"><span class="req">* </span> From </label>
 
<div class="input-group">
<span class="input-group-addon"></span>
 <input required type="text" name="phonenumber" id="phone" class="form-control phone" maxlength="28" onkeyup="validatephone(this);" placeholder="Enter Source"/> 
          
  </div>

   </div>         
<div class="form-group"> 	
 
                <label for="to"><span class="req">* </span> To </label>
  
<div class="input-group">
<span class="input-group-addon"></span>
                 <input class="form-control" type="text" name="firstname" id = "txt" onkeyup = "Validate(this)" placeholder="Enter Destination" required /> 
    
                    <div id="errFirst"></div>    
         
   </div>

</div>           
  <div class="form-group">
              
  <label for="Nseat"> <span class="req">* </span> No of Seats </label>
<div class="input-group">

<span class="input-group-addon"></span>
         
<input class="form-control"	 type="number" name="lastname"   
id = "txt" onkeyup = "Validate(this)" placeholder="Seat Count" required />  
  
                      <div id="errLast"></div> </div>

</div> 
  <div class="form-group">
              
  <label for="name"> <span class="req">* </span> Name </label>
<div class="input-group">

<span class="input-group-addon"></span>
         
<input class="form-control"	 type="number" name="lastname"   
id = "txt" onkeyup = "Validate(this)" placeholder="Seat Count" required />  
  
                      <div id="errLast"></div> </div>

</div> 
  <div class="form-group">
              
  <label for="Age"> <span class="req">* </span> Age </label>
<div class="input-group">

<span class="input-group-addon"></span>
         
<input class="form-control"	 type="number" name="lastname"   
id = "txt" onkeyup = "Validate(this)" placeholder="Seat Count" required />  
  
                      <div id="errLast"></div> </div>

</div> 


<div class="form-group">
              
  <label for="idtype"> <span class="req">* </span> Identity Type </label>
<div class="input-group">
<span class="input-group-addon"></span>
         
<input class="form-control"	 type="number" name="lastname"   
id = "txt" onkeyup = "Validate(this)" placeholder="Male Seat Count" required />  
  
                      <div id="errLast"></div> </div>

</div> 
            <div class="form-group">

  <label for="id"><span class="req">* </span> ID No </label> 
<div class="input-group">
<span class="input-group-addon"></span>
         
<input class="form-control"	 type="number" name="lastname"   
id = "txt" onkeyup = "Validate(this)" placeholder="Female Seat Count" required />  
  
                      <div id="errLast"></div> </div>

</div> 
       <div class="form-group">
         
         <label for="date"><span class="req">* </span> Date of Journey                    </label>    
<input type="date" id="myDate" value="yyyy-mm-dd">




            </div>
              <div class="form-group">
              
  <label for="Nseat"> <span class="req">* </span> No of Seats </label>
<div class="input-group">

<span class="input-group-addon"></span>
         
<input class="form-control"	 type="number" name="lastname"   
id = "txt" onkeyup = "Validate(this)" placeholder="Seat Count" required />  
  
                      <div id="errLast"></div> </div>

</div> 

              <div class="form-group">
              
  <label for="email"> <span class="req">* </span> Email </label>
<div class="input-group">

<span class="input-group-addon"></span>
         
<input class="form-control"	 type="number" name="lastname"   
id = "txt" onkeyup = "Validate(this)" placeholder="Seat Count" required />  
  
                      <div id="errLast"></div> </div>

</div> 

<div class="form-group">
                
<input class="btn btn-success" type="submit" name="submit_reg" value="Proceed to Payment" onclick="#">
           
 </div>
                      


            </fieldset>
            </form>
<!-- ends register form -->
		</div>
	</div>
</div>
  <div class="input-group-btn">
    <center>
      <button type="button" class="btn btn-danger"><b>Go back</b></button></center>
    </div>
  </div></div>
 <footer class="container-fluid text-center">
  <a href="#myPage" title="To Top">
    <span class="glyphicon glyphicon-chevron-up"></span>
  </a>
 <br> 
  			<p>
          Follow us on<p>
  <p> <i class="fa fa-facebook fa-2x "></i></p>
 <p><i class="fa fa-twitter fa-2x"></i></p>
<p><i class="fa fa-github fa-2x"></i></p>
<h><b>
  &copy; Raymond M    |    raymond7in@gmail.com </b></h>
</footer>

<!-- Contact Raymond M for copyrights -->
<script>
function myFunction() {
    var x = document.getElementById("myDate").value;
    document.getElementById("demo").innerHTML = x;
}
</script>
  
  
  
  
  
  <script>
  
$(document).ready(function(){
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 900, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
  
  $(window).scroll(function() {
    $(".slideanim").each(function(){
      var pos = $(this).offset().top;

      var winTop = $(window).scrollTop();
        if (pos < winTop + 600) {
          $(this).addClass("slide");
        }
    });
  });
})

</script></body>
  
  

</body>

</html>

Comments