assignment 3
This commit is contained in:
QkoSad
+99
-64
@@ -130,6 +130,81 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="reservationModal" class="modal fade" role="dialog">
|
||||||
|
<div class="modal-dialog modal-lg" role="content">
|
||||||
|
<!-- Modal content-->
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h4 class="modal-title">Reserve Table</h4>
|
||||||
|
<button type="button" class="close" data-dismiss="modal">
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-12 col-sm-2 col-form-label"
|
||||||
|
>Number of Guests</label
|
||||||
|
>
|
||||||
|
<div class="col-12 col-sm">
|
||||||
|
<input type="radio" name="radio" />1
|
||||||
|
<input type="radio" name="radio" />2
|
||||||
|
<input type="radio" name="radio" />3
|
||||||
|
<input type="radio" name="radio" />4
|
||||||
|
<input type="radio" name="radio" />5
|
||||||
|
<input type="radio" name="radio" />6
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<div class="col-12 col-sm-2 col-form-label">Selection</div>
|
||||||
|
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||||||
|
<label class="btn btn-success active">
|
||||||
|
<input type="radio" name="options" id="option1" autocomplete="off" checked> Non-Smoking
|
||||||
|
</label>
|
||||||
|
<label class="btn btn-danger">
|
||||||
|
<input type="radio" name="options" id="option2" autocomplete="off"> Smoking
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-12 col-sm-2 col-from-label"
|
||||||
|
>Date and Time</label
|
||||||
|
>
|
||||||
|
<div class="col-12 col-sm-4">
|
||||||
|
<input
|
||||||
|
type="tex12 col-sm-form-control"
|
||||||
|
id="date"
|
||||||
|
name="date"
|
||||||
|
placeholder="Date"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-sm-4 mr-2">
|
||||||
|
<input
|
||||||
|
type="tex12 col-sm-form-control"
|
||||||
|
id="time"
|
||||||
|
name="time"
|
||||||
|
placeholder="Time"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<div class="offset-md-2 col-md-10">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-secondary"
|
||||||
|
data-dismiss="modal"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="submit" class="btn btn-primary">Reserve</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<header class="jumbotron">
|
<header class="jumbotron">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row row-header">
|
<div class="row row-header">
|
||||||
@@ -147,12 +222,9 @@
|
|||||||
<div class="col-8 col-sm-3 align-self-center">
|
<div class="col-8 col-sm-3 align-self-center">
|
||||||
<a
|
<a
|
||||||
role="button"
|
role="button"
|
||||||
class="btn btn-block nav-link btn-warning"
|
class="btn btn-block btn-warning"
|
||||||
data-toggle="tooltip"
|
data-toggle="modal"
|
||||||
data-html="true"
|
data-target="#reservationModal"
|
||||||
title="Or Call us at<br><strong>+852 12345678</strong>"
|
|
||||||
data-placement="bottom"
|
|
||||||
href="#reserveform"
|
|
||||||
>Reserve Table</a
|
>Reserve Table</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
@@ -220,16 +292,30 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ol class="carousel-indicators">
|
<ol class="carousel-indicators">
|
||||||
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
|
<li
|
||||||
|
data-target="#mycarousel"
|
||||||
|
data-slide-to="0"
|
||||||
|
class="active"
|
||||||
|
></li>
|
||||||
<li data-target="#mycarousel" data-slide-to="1"></li>
|
<li data-target="#mycarousel" data-slide-to="1"></li>
|
||||||
<li data-target="#mycarousel" data-slide-to="2"></li>
|
<li data-target="#mycarousel" data-slide-to="2"></li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
<a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
|
<a
|
||||||
<span class="carousel-control-prev-icon"></span>
|
class="carousel-control-prev"
|
||||||
|
href="#mycarousel"
|
||||||
|
role="button"
|
||||||
|
data-slide="prev"
|
||||||
|
>
|
||||||
|
<span class="carousel-control-prev-icon"></span>
|
||||||
</a>
|
</a>
|
||||||
<a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
|
<a
|
||||||
<span class="carousel-control-next-icon"></span>
|
class="carousel-control-next"
|
||||||
|
href="#mycarousel"
|
||||||
|
role="button"
|
||||||
|
data-slide="next"
|
||||||
|
>
|
||||||
|
<span class="carousel-control-next-icon"></span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -309,52 +395,6 @@
|
|||||||
<h3>Meet our culinary specialist</h3>
|
<h3>Meet our culinary specialist</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
|
||||||
class="card col-12 col-sm-8 align-self-center offset-md-2"
|
|
||||||
id="reserveform"
|
|
||||||
>
|
|
||||||
<h3 class="card-title">Reserve a Table</h3>
|
|
||||||
<form>
|
|
||||||
<div class="form-group row">
|
|
||||||
<label class="col-12 col-sm-2 col-form-label"
|
|
||||||
>Number of Guests</label
|
|
||||||
>
|
|
||||||
<div class="col-12 col-sm">
|
|
||||||
<input type="radio" name="radio" />1
|
|
||||||
<input type="radio" name="radio" />2
|
|
||||||
<input type="radio" name="radio" />3
|
|
||||||
<input type="radio" name="radio" />4
|
|
||||||
<input type="radio" name="radio" />5
|
|
||||||
<input type="radio" name="radio" />6
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group row">
|
|
||||||
<label class="col-12 col-sm-2 col-from-label">Date and Time</label>
|
|
||||||
<div class="col-12 col-sm-4">
|
|
||||||
<input
|
|
||||||
type="tex12 col-sm-form-control"
|
|
||||||
id="date"
|
|
||||||
name="date"
|
|
||||||
placeholder="Date"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 col-sm-4 mr-2">
|
|
||||||
<input
|
|
||||||
type="tex12 col-sm-form-control"
|
|
||||||
id="time"
|
|
||||||
name="time"
|
|
||||||
placeholder="Time"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group row">
|
|
||||||
<div class="offset-md-2 col-md-10">
|
|
||||||
<button type="submit" class="btn btn-primary">Reserve</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
@@ -425,10 +465,5 @@
|
|||||||
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
|
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
|
||||||
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
|
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
|
||||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
<script>
|
</body>
|
||||||
$(document).ready(function () {
|
|
||||||
$('[data-toggle="tooltip"]').tooltip();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user