Skip to content

Commit

Permalink
week 2 - assignment - Task 1 & 3
Browse files Browse the repository at this point in the history 
* Task 1: Reserve table form using card
* Task 3: Reserve table button in jumbotron

* add row flex direction for input-group as default in custom css to fix Bootstrap 4.0.0-alpha.6 bug (see issue: twbs/bootstrap#21651)
  • Loading branch information
@datiti
datiti committed Aug 16, 2017
1 parent 3908a29 commit 96708e2
Showing 1 changed file with 101 additions and 5 deletions.
106 changes: 101 additions & 5 deletions conFusion1/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
<!-- Required meta tags always come first -->
Expand Down Expand Up @@ -57,10 +57,14 @@ <h1>Ristorante con Fusion</h1>
<div class="col col-sm align-self-center">
<img src="img/logo.png" class="img-fluid">
</div>
<div class="col col-sm align-self-center">
<a role="button" class="btn btn-warning font-weight-bold" href="#reserve_form"><i
class="fa fa-calendar-plus-o"></i> Reserve a table</a>
<p></p>
</div>
</div>
</div>
</header>

<div class="container">
<div class="row row-content align-items-center">
<div class="col-sm-4 col-md-3 flex-last">
Expand All @@ -71,7 +75,8 @@ <h3>Our Lipsmacking Culinary Creations</h3>
<img class="d-flex mr-3 img-thumbnail align-self-center"
src="img/uthappizza.png" alt="Uthappizza">
<div class="media-body">
<h2 class="mt-0">Uthappizza <span class="badge badge-danger">HOT</span> <span class="badge badge-pill badge-default">$4.99</span></h2>
<h2 class="mt-0">Uthappizza <span class="badge badge-danger">HOT</span> <span
class="badge badge-pill badge-default">$4.99</span></h2>
<p class="hidden-xs-down">A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine
cherry tomatoes, Vidalia onion, Guntur chillies and
Expand All @@ -95,10 +100,10 @@ <h2>Weekend Grand Buffet</h2>
</div>

<div class="row row-content align-items-center">
<div class="col-sm-4 col-md-3">
<div class="col-sm-4 col-md-3 flex-last">
<h3>Meet our Culinary Specialists</h3>
</div>
<div class="col-sm col-md">
<div class="col-sm col-md flex-first">
<div class="media">
<img class="d-flex mr-3 img-thumbnail align-self-center"
src="img/alberto.png" alt="Alberto Somayya">
Expand All @@ -116,6 +121,97 @@ <h4>Executive Chef</h4>
</div>
</div>

<div class="container" id="reserve_form">
<!-- row's content must be centered for small to extra large screen -->
<div class="row row-content justify-content-sm-center">
<!-- card must occupy 8 columns for small to extra large; span to 12 columns for extra small -->
<div class="col-12 col-sm-8">
<div class="card">
<div class="card-header card-warning card-inverse">
<h2 class="card-title">Reserve a table</h2>
</div>
<div class="card-block">
<div class="row card-text">
<!-- the form takes the whole card width -->
<div class="col-12">
<form id="form_bookingtable" action="javascript:submit_booking();">
<div class="form-group row align-items-center">
<label class="col-sm-2">Number of Guests</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="num_guest"
id="num_guest1" value="1"> 1
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="num_guest"
id="num_guest2" value="2"> 2
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="num_guest"
id="num_guest3" value="3"> 3
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="num_guest"
id="num_guest4" value="4"> 4
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="num_guest"
id="num_guest5" value="5"> 5
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="num_guest"
id="num_guest6" value="6"> 6
</label>
</div>
</div>
</div>
<div class="form-group row align-items-center">
<label class="col-form-label col-sm-2">Date and Time</label>
<div class="input-group col-sm-5">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="date" class="form-control" id="resa_date" name="resa_date"
placeholder="Date">
</div>
<div class="input-group col-sm-5">
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
<input type="time" class="form-control" id="resa_time" name="resa_time"
placeholder="Time">
</div>
</div>
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="button" class="btn btn-primary">Reserve</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function booktable() {
console.log('user asked for a table booking');
}

function submit_booking() {
console.log('user submit a table booking');
}
</script>

<footer class="card-footer footer">
<div class="container">
<div class="row">
Expand Down

0 comments on commit 96708e2

Please sign in to comment.