-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
188 lines (175 loc) · 7.5 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
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html lang="en">
<head> <!-- for the title and meta data; not directly seen by the user -->
<!-- META tags help search engines identify your content more easily -->
<meta charset="utf-8" /> <!-- Specifies the character encoding for the HTML document -->
<meta name="author" content="Alice Nie">
<meta name="keywords" content="Pamela's Diner">
<meta name="description" content="P&G's Pamela's Diner Website">
<meta name="viewport" content="width=device-width, intial-scale=1.0"/>
<!-- The title will appear in the menu bar of the browser -->
<title>Pamela's Diner</title>
<!-- Add all stylesheet references -->
<link rel="stylesheet" media="all" type="text/css" href="css/styles.css">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Import Google Ubuntu font-->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
<!-- Import font awesome library-->
<script src="https://kit.fontawesome.com/ec2ce5ac2c.js" crossorigin="anonymous"></script>
</head>
<body> <!-- The body is where the main content goes -->
<div class = "menu">
<header>
<div class = "top_row">
<a href="index.html">
<img src="images/logo.png" alt="logo" class="center">
</a>
</div> <!-- top_row -->
<div class = "hori_line"></div> <!-- hori_line -->
</header>
<div id = "navbar">
<nav> <!-- Nav is a tag in HTML 5 to organize navigation items -->
<a href="menu.html"> Menu </a>
<a href="locations.html"> Locations </a>
<a href="orderonline.html"> Order Online </a>
<a href="contact.html"> Contact </a>
<a href="reviews.html"> Reviews </a>
</nav>
<br>
</div> <!-- navbar -->
</div> <!-- menu -->
<div class = "welc_container">
<img src="images/icecream.jpg" alt="ice cream">
<div id = "welc_text">
<h1> Welcome to <br> Pamela's Diner </h1>
<p> Serving the <strong>best</strong> breakfast since 1980</p>
</div>
<a href="orderonline.html"><button class="button">Order</button></a>
</div>
<div class="grid-container">
<div><i class="fa-solid fa-location-dot"></i> Strip District</div>
<div><i class="fa-solid fa-location-dot"></i> Forbes Ave</div>
<div><i class="fa-solid fa-location-dot"></i> Walnut St.</div>
<div><i class="fa-solid fa-location-dot"></i> Mt. Lebanon</div>
<div><i class="fa-solid fa-location-dot"></i> Squirrel Hill</div>
</div>
<div id = "general">
<div class = "banner">
<img src="images/outside.jpg" alt="outside seating">
</div>
<div id = "about-container">
<div id = "about">
<h1> About Us </h1>
<p> Pamela's Diner is a prominent chain of diners in Pittsburgh, Pennsylvania, USA. Its specialties are crêpe-style pancakes, omelets and Lyonnaise potatoes. It is "treasured" and is considered to be in the "pantheon of pancake purveyors". In 2013, Pamela's Diner was featured by the Wall Street Journal in a "What to Do in Pittsburgh" feature story. Pamela's Diner is owned by Gail Klingensmith and Pam Cohen.[1] Both educated as teachers, the business partners handle different tasks, Klingensmith with the more business end and Cohen as "the culinary artist". The first Pamela's Diner location, in the Squirrel Hill neighborhood, opened in 1979. Subsequent locations have opened in Shadyside, the Strip District, Millvale, Oakland and Mt. Lebanon.
</p>
<a href ="menu.html"><button class="button">Menu</button></a>
</div>
</div>
<div id = "facts">
<h3> Facts </h3>
<p><strong>Cuisine</strong></p>
<p>Breakfast and Lunch</p> <br>
<p><strong>Price Level</strong></p>
<p>$$</p> <br>
<p><strong>Contact</strong></p>
<p>3703 Forbes Ave, Pittsburgh, PA 15213</p> <br>
<p><strong>General Hours of Operation</strong></p>
<ul>
<li>Monday: closed</li>
<li>Tuesday: closed</li>
<li>Wednedsay: 10AM - 2PM</li>
<li>Thursday: 10AM - 2PM</li>
<li>Friday: 8AM - 4PM</li>
<li>Saturday: 8Am - 4PM</li>
<li>Saturday: 8AM - 4PM</li>
</ul>
</div>
</div>
<div class = "gallery">
<figure class = "gallery-item item1">
<img src = "images/crepe.jpg" class = "gallery-img" alt = "crepe">
</figure>
<figure class = "gallery-item item2">
<img src = "images/burger.jpg" class = "gallery-img" alt = "burger">
</figure>
<figure class = "gallery-item item3">
<img src = "images/toast.jpg" class = "gallery-img" alt = "toast">
</figure>
<figure class = "gallery-item item4">
<img src = "images/macaron.jpg" class = "gallery-img" alt = "macaron">
</figure>
<figure class = "gallery-item item5">
<img src = "images/salad.jpg" class = "gallery-img" alt = "salad">
</figure>
<figure class = "gallery-item item6">
<img src = "images/waffle.jpg" class = "gallery-img" alt = "waffle">
</figure>
<figure class = "gallery-item item7">
<img src = "images/pinkcoffeee.jpg" class = "gallery-img" alt = "coffee">
</figure>
<figure class = "gallery-item item8">
<img src = "images/pasta.jpg" class = "gallery-img" alt = "pasta">
</figure>
<figure class = "gallery-item item9">
<img src = "images/egg.jpg" class = "gallery-img" alt = "egg">
</figure>
<figure class = "gallery-item item10">
<img src = "images/omelette.jpg" class = "gallery-img" alt = "omelette">
</figure>
<figure class = "gallery-item item11">
<img src = "images/donuts.jpg" class = "gallery-img" alt = "donuts">
</figure>
<figure class = "gallery-item item12">
<img src = "images/panini.jpg" class = "gallery-img" alt = "panini">
</figure>
<figure class = "gallery-item item1">
<img src = "images/peachcoffeee.jpg" class = "gallery-img" alt = "coffee">
</figure>
<figure class = "gallery-item item13">
<img src = "images/minipan.jpg" class = "gallery-img" alt = "pancakes">
</figure>
<figure class = "gallery-item item14">
<img src = "images/bluewaffle.jpg" class = "gallery-img" alt = "waffle">
</figure>
<figure class = "gallery-item item15">
<img src = "images/pinkdonut.jpg" class = "gallery-img" alt = "donuts">
</figure>
<figure class = "gallery-item item16">
<img src = "images/blueicecream.jpg" class = "gallery-img" alt = "ice cream">
</figure>
<figure class = "gallery-item item17">
<img src = "images/fruitcrepe.jpg" class = "gallery-img" alt = "crepe">
</figure>
<figure class = "gallery-item item18">
<img src = "images/croissant.jpg" class = "gallery-img" alt = "croissant">
</figure>
<figure class = "gallery-item item19">
<img src = "images/morepan.jpg" class = "gallery-img" alt = "pancakes">
</figure>
<figure class = "gallery-item item20">
<img src = "images/taco.jpg" class = "gallery-img" alt = "taco">
</figure>
<figure class = "gallery-item item21">
<img src = "images/milk.jpg" class = "gallery-img" alt = "milk">
</figure>
</div>
<div id = "connect">
<h1> Love Pamelas? </h1>
<p> Connect with us! </p>
<br>
<div class = "social-icons">
<a href="https://www.facebook.com/pamelasdiner/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="https://www.instagram.com/pamelasdiner/?hl=en" target="_blank"><i class="fa-brands fa-instagram"></i></a>
<a href="https://www.youtube.com/watch?v=Rb0Dw2t-nTE" target="_blank"><i class="fa-brands fa-youtube"></i></a>
<a href="https://www.yelp.com/biz/p-and-gs-pamelas-diner-pittsburgh-3" target="_blank"><i class="fa-brands fa-yelp"></i></a>
</div>
</div>
<footer>
<div id = "last">
<img src="images/logo.png" alt="logo" class="center">
</div>
© Pamela's Diner<br>
</footer>
</body>
</html>