Scribd
Upload
12 views

Index HTML

The document describes a movie seat booking interface that allows users to select a movie, view available, selected, and occupied seats in a theater layout, and see the number and total cost of selected seats. The interface includes a movie selection dropdown, a seating chart comprised of multiple rows of individual seats displayed as clickable divs, and text below displaying the current seat count and total price. Css styling and JavaScript functionality are referenced but not shown.

Uploaded by

frejo379
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views

Index HTML

The document describes a movie seat booking interface that allows users to select a movie, view available, selected, and occupied seats in a theater layout, and see the number and total cost of selected seats. The interface includes a movie selection dropdown, a seating chart comprised of multiple rows of individual seats displayed as clickable divs, and text below displaying the current seat count and total price. Css styling and JavaScript functionality are referenced but not shown.

Uploaded by

frejo379
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Seat Booking</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" type="image/png" href="../../assets/favicon.png">

</head>
<body>
<div class="movie-container">
<label for="">Pick A Movie : </label>
<select id="movie">
<option value="10">Avengers : Endgame ($10)</option>
<option value="12">Joker ($12)</option>
<option value="8">1917 ($8)</option>
<option value="9">The Lion King ($9)</option>
</select>
</div>

<ul class="showcase">
<li>
<div class="seat"></div>
<small>N/A</small>
</li>
<li>
<div class="seat selected"></div>
<small>Selected</small>
</li>
<li>
<div class="seat occupied"></div>
<small>Occupied</small>
</li>
</ul>

<div class="container">
<div class="screen"></div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="row">
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
</div>
<div class="row">
<div class="seat occupied"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
</div>
<p class="text">You have selected <span id="count">0</span> seats for a price
of $<span id="total">0</span></p>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

You might also like