-
Notifications
You must be signed in to change notification settings - Fork 2
/
landingpage.html
93 lines (78 loc) · 4.62 KB
/
landingpage.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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<title>Landing Page</title>
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<h1>Cutz for You</h1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</a>
<!-- Here's the magic. Add the .animate and .slide-in classes to your .dropdown-menu and you're all set! -->
<div class="dropdown-menu dropdown-menu-right animate slideIn" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/profile.html">Profile</a>
<a class="dropdown-item" href="/searchgpage.html">Search</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Home</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<body>
<div class = "container">
<div class = "row">
<div class="col-sm">
<img src="https://www.franksbarbershop.net/wp-content/uploads/2018/04/Franks_Barbershop_West8.jpg" class="img-fuid" alt="Responsive image" style = "max-width: 100%; height: auto">
</div>
</div>
</div>
<div class="container" style= "width: 100%">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Description of user group</h2>
<p>Our web app is for anyone who is looking for good barbers near them. Whenever I move to a new neighborhood, it takes me quite a while to find myself a good barber who knows my hair and cuts it as I want it to. Yelp has reviews of entire barber shops but never individual barbers; our app will provide galleries of individual barbers that can be filtered by their individual strengths.</p>
</div>
<div class="col-md-4">
<h2>Assigned Projects</h2>
<p>There are three main pages for this website: map view of barber locations, list view of different barbers, and profile pages of individual barbers. In the prototyping stage, Stephen created the map page, Adela created the list page, and Yasmeen created the individual profile pages.</p>
</div>
<div class="col-md-4">
<h2>Additional instructions</h2>
<p>On the map page, users will be able to see the exact locations of barbers nearby. They should be able to click on the locations to see the profile pages of individual barbers. On the list page, users will be able to filter barbers according to their specific strenghts and rank them in order of distance, ratings, or prices. Each preview of barber on the list will also lead to the profile pages.</p>
</div>
</div>
<hr>
</body>
<footer class="container py-4 bg-dark text-white-50" style = "bottom: 0; width: 100%">
<div class="container text-center">
<small>Copyright © Team 13 WebPage</small>
</div>
</footer>
</html>