-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
156 lines (135 loc) · 6.38 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Windy City Rooftops</title>
<link rel=icon href='/public/images/favicon.ico'>
<!-- Bootstrap core CSS -->
<link href="bootstrap/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="bootstrap/css/business-casual.css" rel="stylesheet">
</head>
<body>
<h1 class="site-heading text-center text-white d-none d-lg-block">
<span class="site-heading-lower">Windy City Rooftops</span>
</h1>
<!-- navigation -->
<nav class="navbar navbar-expand-lg navbar-dark py-lg-4" id="mainNav">
<div class="container">
<a class="navbar-brand text-uppercase text-expanded font-weight-bold d-lg-none" href="#">Windy City Rooftops</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
<li class="nav-item active px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="index.html" id="home">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" id="about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- beginning of main body -->
<div id="main-bod">
<!-- heading card -->
<section class="page-section clearfix">
<div class="container">
<div class="about-heading-content">
<div class="row">
<div class="col-xl-10 col-lg-10 mx-auto">
<div class="bg-faded rounded p-5">
<h2 class="section-heading mb-4">
<span class="center section-heading-lower">Sunshine and a City View</span>
</h2>
<p>Who's ready to enjoy drinks and make memories while overlooking the beautiful skyline? We've compiled a list of Chicago's best rooftop bars and restaurants so you can start planning your next visit. Get ready to sit back and enjoy the sunshine. Cheers to the Windy City!</p>
<p>If you know of an amazing rooftop that isn't included on our list, please feel free to <em><a href="#rt-head" class="p-link">add it below.</a></em></p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- rooftop cards -->
<section class="page-section clearfix">
<div class="container">
<div id="rooftop-container" class="product-item">
<!-- javascript inserted here -->
</div>
</div>
</section>
<!-- add rooftop form -->
<section>
<div class="center intro-button mx-auto" style="margin-bottom: 5rem;">
<div class="container">
<div class="about-heading-content col-xl-10 col-lg-10 mx-auto bg-faded rounded p-5 white" id="rooftop-form">
<h2 class="section-heading mb-4" id="rt-head"><span class="center section-heading-lower">Add a Rooftop</span></h2>
<p><b>All fields must be completed.</b></p><br>
<form id="rt">
<div class="form-group">
<label for="rt-name"><p>Rooftop Name</p></label>
<input type="text" class="form-control" value = "" id="rt-name">
</div>
<div class="form-group">
<label for="rt-address"><p>Address</p></label>
<input type="text" class="form-control" value = "" id="rt-address">
</div>
<div class="form-group">
<label for="rt-image">Image Url</label>
<input type="text" class="form-control" value = "" id="rt-image">
</div>
<div class="form-group">
<label for="rt-website">Website Link</label>
<input type="text" class="form-control" value = "" id="rt-website">
</div>
<div class="form-group">
<label for="rt-description">Description</label>
<textarea class="form-control" id="rt-description" value = "" rows="2"></textarea>
</div>
<div class="form-group">
<label for="neighborhoods">Please select a neighborhood</label>
<select class="form-control" id="neighborhoods" value = "" name="neighborhoods">
<option selected>Neighborhood</option>
<option value="1">Lincoln Park</option>
<option value="2">Logan Square</option>
<option value="3">Loop</option>
<option value="4">River North</option>
<option value="5">South Loop</option>
<option value="6">West Loop</option>
<option value="7">Wicker Park</option>
</select>
</div><br>
<input id='create-button' type="submit" name="submit" value="Add Rooftop" class="btn submit">
</form>
</div>
</div>
<div style="margin-top:5rem">
<a class="center mx-auto top-link" href="#">Back to top</a>
</div>
</div>
</section>
<!-- end main body -->
</div>
<footer class="footer text-faded text-center py-5">
<div class="container">
<p class="m-0 small">Copyright © WindyCityRooftops 2021</p>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="src/index.js"></script>
<script type="text/javascript" src="src/rooftop.js"></script>
<script src="bootstrap/vendor/jquery/jquery.min.js"></script>
<script src="bootstrap/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/f2d35c4ac9.js" crossorigin="anonymous"></script>
</body>
</html>