<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<main>
<!-- Navigation -->
<section class="navigation">
<div class="back-to-home">
<!-- Arrow - object svg -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 30 30" version="1.1">
<title>Arrow</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g stroke-width="2" stroke="#42444C">
<polyline class="arrow" points="29.3 4 18.3 15.5 29.3 26"/>
</g></g>
</svg>
</div>
<div class="search">
<!-- Search - object svg -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 30 30" version="1.1">
<title>Search</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g stroke="#40414A" stroke-width="2">
<path class="line" d="M18 19L26.6 27.6" stroke-linecap="square"/>
<path class="circle" d="M10.5 21C15.7 21 20 16.7 20 11.5 20 6.3 15.7 2 10.5 2 5.3 2 1 6.3 1 11.5 1 16.7 5.3 21 10.5 21L10.5 21Z"/>
</g></g>
</svg>
</div>
</section>
<!-- Picture and name of restaurant -->
<section class="restaurant">
<div></div>
<h1>The Water Club</h1>
</section>
<!-- Number of tables to book -->
<section class="number-of-tables">
<h2>Table For</h2>
<div class="minus">
<!-- Minus - object svg -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="5" viewBox="0 0 11 5" version="1.1">
<title>Minus</title>
<path d="M0 2.5C0 1.1 1.1 0 2.5 0L8.5 0C9.9 0 11 1.1 11 2.5 11 3.9 9.9 5 8.5 5L2.5 5C1.1 5 0 3.9 0 2.5L0 2.5Z" id="minus" fill="#AAABAF"/>
</svg>
</div>
<div class="counter">2</div>
<div class="plus">
<!-- Plus - object svg -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19" height="19" viewBox="0 0 19 19" version="1.1">
<title>Plus</title>
<path d="M7 7L2.5 7C1.1 7 0 8.1 0 9.5 0 10.9 1.1 12 2.5 12L7 12 7 16.5C7 17.9 8.1 19 9.5 19 10.9 19 12 17.9 12 16.5L12 12 16.5 12C17.9 12 19 10.9 19 9.5 19 8.1 17.9 7 16.5 7L12 7 12 2.5C12 1.1 10.9 0 9.5 0 8.1 0 7 1.1 7 2.5L7 7 7 7Z" id="plus" fill="#5E606A"/>
</svg>
</div>
</section>
<!-- Date and time -->
<section class="choose-date">
<h2>Choose Date <span>&</span> Time</h2>
<div>05 May 2017 <span>-</span> 19:30</div>
</section>
<!-- Confirm button -->
<section class="confirm-book">
<div>Confirm</div>
</section>
</main>
<footer>Inspired by <a href="https://dribbble.com/shots/2639709-Confirm-Reservation" target="_blank">Goutham</a></footer>
</body>
/* Typo */
@import 'https://fonts.googleapis.com/css?family=Montserrat|Varela|Oswald:400,700';
/* Main */
body {
background-color: #F4F4F4;
}
main {
width: 375px;
height: 667px;
margin: 40px auto 0 auto;
border: 1px solid #F4F4F4;
background-color: #FFFFFF;
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .2);
position: relative;
}
section {
width: 315px;
margin: 0 auto;
}
/* Navigation */
.navigation {
margin-top: 40px;
overflow: hidden;
height: 30px;
}
.back-to-home {
float: left;
}
.search {
float: right;
}
/* Restaurant */
.restaurant div:nth-child(1) {
width: 95px;
height: 95px;
margin: 0 auto;
border: 6px solid #474850;
border-radius: 50%;
background: url("http://www.phuketdining.com/images/casuarina_large.jpg") no-repeat;
background-size: cover;
box-shadow: 0 5px 9px 0 rgba(71, 72, 80, .5);
}
.restaurant h1 {
padding: 0;
margin: 30px 0 0 0;
text-align: center;
text-transform: uppercase;
color: #64666F;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
/* Number of tables to book */
.number-of-tables {
text-align: center;
margin-top: 60px;
}
.number-of-tables h2 {
text-align: center;
margin-bottom: 20px;
font-family: 'Varela', sans-serif;
font-size: 16px;
color: #707076
}
.number-of-tables div {
display: inline-block;
}
.counter {
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 72px;
margin: 0 60px;
color: #5E606A;
}
.minus, .plus {
height: 72px;
width: 30px;
vertical-align: top;
position: relative;
}
.minus svg, .plus svg {
display: inline-block;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
/* Date and time */
.choose-date {
margin-top: 70px;
}
.choose-date h2, .choose-date div {
text-align: center;
}
.choose-date h2 {
font-family: 'Varela', sans-serif;
font-size: 16px;
margin-bottom: 20px;
color: #707076;
}
.choose-date h2 span {
font-family: "Verdana", sans-serif;
}
.choose-date div {
font-family: 'Oswald', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 20px;
word-spacing: 5px;
color: #5E606A;
}
.choose-date div span {
font-family: "Montserrat", sans-serif;
font-size: 25px;
}
/* Confirm */
.confirm-book {
width: 255px;
height: 46px;
line-height: 46px;
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
text-align: center;
text-transform: uppercase;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
background-color: #474850;
color: #FFFFFF;
box-shadow: 0 12px 15px -9px rgba(71, 72, 80, .5);
}
/* Footer */
footer {
font-family: "Verdana", sans-serif;
font-size: 14px;
box-sizing: border-box;
width: 375px;
margin: 15px auto;
padding-right: 15px;
text-align: right;
}
footer a:visited, footer a:link {
color: #000000;
}
