assignment 3
This commit is contained in:
QkoSad
+99
-64
@@ -130,6 +130,81 @@
|
||||
</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">
|
||||
<div class="container">
|
||||
<div class="row row-header">
|
||||
@@ -147,12 +222,9 @@
|
||||
<div class="col-8 col-sm-3 align-self-center">
|
||||
<a
|
||||
role="button"
|
||||
class="btn btn-block nav-link btn-warning"
|
||||
data-toggle="tooltip"
|
||||
data-html="true"
|
||||
title="Or Call us at<br><strong>+852 12345678</strong>"
|
||||
data-placement="bottom"
|
||||
href="#reserveform"
|
||||
class="btn btn-block btn-warning"
|
||||
data-toggle="modal"
|
||||
data-target="#reservationModal"
|
||||
>Reserve Table</a
|
||||
>
|
||||
</div>
|
||||
@@ -220,16 +292,30 @@
|
||||
</div>
|
||||
</div>
|
||||
<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="2"></li>
|
||||
</ol>
|
||||
</ol>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon"></span>
|
||||
<a
|
||||
class="carousel-control-prev"
|
||||
href="#mycarousel"
|
||||
role="button"
|
||||
data-slide="prev"
|
||||
>
|
||||
<span class="carousel-control-prev-icon"></span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon"></span>
|
||||
<a
|
||||
class="carousel-control-next"
|
||||
href="#mycarousel"
|
||||
role="button"
|
||||
data-slide="next"
|
||||
>
|
||||
<span class="carousel-control-next-icon"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -309,52 +395,6 @@
|
||||
<h3>Meet our culinary specialist</h3>
|
||||
</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>
|
||||
|
||||
<footer class="footer">
|
||||
@@ -425,10 +465,5 @@
|
||||
<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/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user