-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
175 lines (151 loc) · 6.33 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Panzer - Final Project</title>
<!-- Google Fonts-->
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lily+Script+One" rel="stylesheet">
<!-- Grid CSS-->
<link rel="stylesheet" type="text/css" href="vendors/css/grid.min.css">
<!-- Custom Stylesheet -->
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
</head>
<body>
<!-- Header
================================================== -->
<header class="hero">
<div class="hero__content">
<h1>Monk’s Cafe</h1>
<h4>“The Coffee Shop”</h4>
</div>
<img src="resources/img/down_arrow.svg" alt="Down Arrow" class="hero__arrow">
</header>
<!-- About
================================================== -->
<section class="about">
<h2>A community space to indulge in friendly conversation over coffee or a homemade meal.</h2>
</section>
<!-- Reservations
================================================== -->
<section class="reservations">
<div class="container">
<div class="row">
<div class="col-sm-5">
<div class="reservations__make-reservation">
<h3 class="reservations__headline">Make a Reservation</h3>
<form id="reservations__form">
<input id="reservations__make-reservation__form--name" type="text" placeholder="Enter Your Name*">
<select name="Select Your Day" id="reservations__make-reservation__form--day" placeholder="Select Your Day">
<option value ="selected" selected>Select Your Day*</option>
<option value="today">Today</option>
<option value="tomorrow">Tomorrow</option>
<option value="The day after next">The day after next</option>
</select>
<button type="submit" class="reservations__make-reservation__btn">Confirm Reservation</button>
</form><!-- end form-->
</div>
<img src="resources/img/pexels-photo-coffee-2.jpg" alt="Coffee Image" class="reservations__make-reservation__image">
</div><!-- end col-->
<div class="col-sm-7">
<img src="resources/img/pexels-photo-coffee-1.jpg" alt="Coffee Image" class="reservations__image">
<div class="reservations__existing">
<h3>Upcoming Reservations</h3>
<table id="reservations__table">
<tr>
<th>Name</th>
<th>Day</th>
</tr>
<!-- template for reservation-list -->
<script id="reservation-template" type="text/x-handlebars-template">
<tr data-id="{{reservationId}}">
<td class="reservations__table__row">{{name}}</td>
<td class="reservations__table__row">{{day}}</td>
</tr>
</script><!-- end script-->
</table>
</div><!-- end reservations__existing-->
</div><!-- end col-->
</div><!-- end row-->
</div><!-- end Container-->
</section><!-- end reservations section-->
<!-- Reviews
================================================== -->
<section class="reviews">
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="resources/img/pexels-photo-coffee-3.jpg" alt="" class="reviews__image--left">
</div><!-- end col-->
<div class="col-sm-8">
<img src="resources/img/pexels-photo-coffee-4.jpg" alt="" class="reviews__image--right">
<div class="reviews__quote">
<span class="reviews__quote--quote-mark">“</span>
<blockquote>In a city teeming with specialty coffee shops, Monk's Cafe is one of the few that stands a notch above the rest. Whether you’re a broker, a banker, or a tourist like us, we would make visiting this café a priority when in Pittsburgh.</blockquote>
<span class="reviews__quote--quote-mark">”</span>
</div>
</div><!-- end col-->
</div><!-- end row-->
</div><!-- end Container-->
</section><!-- end reviews section-->
<!-- Info
================================================== -->
<section class="info">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div id="map"></div>
<div class="info__content">
<div class="col-xs-6">
<h6>ADDRESS</h6>
<p>1234 Federal Street<br>
Pittsburgh, Pa 15201</p>
</div>
<div class="col-xs-6">
<h6>CONTACT US</h6>
<p>412-123-4567<br>
<a href="#">info@monkscafe.com</a></p>
</div>
</div>
</div><!-- end col-->
<div class="col-sm-6">
<img src="resources/img/pexels-photo-coffee-5.jpg" alt="" class="info__image-top">
<img src="resources/img/pexels-photo-coffee-7.jpg" alt="" class="info__image-bottom">
</div><!-- end col-->
</div><!-- end row-->
</div><!-- end Container-->
</section><!-- end cta section-->
<!-- Cta
================================================== -->
<section id="instafeed" class="cta">
<h5 class="cta__headline">Come Dine with Us</h5>
<div class="cta__hours">
<div class="cta__hours__content">
<h6>HOURS</h6>
<p>ALL DAYS</p>
<p>6AM to 10PM</p>
<div class="cta__hours__content__status--open">Open</div>
<div class="cta__hours__content__status--closed">CLosed</div>
</div>
</div>
</section>
<!-- Scripts
================================================== -->
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<!-- Get Date Script -->
<script src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
<!-- handlebars -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<!-- Instafeed -->
<script src="vendors/js/instafeed.min.js"></script>
<!-- Custom js file -->
<script src="resources/js/script.js"></script>
<!-- google maps -->
<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDLS6GEBG4QnNbNbGo83CKYYevD0DUSBTo&callback=initMap"></script>
</body>
</html>