forked from dvalderrama89/PhotoBomb
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (135 loc) · 6.34 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="This is project 1 for UCI Coding Boot Camp" />
<title>PhotoBomb</title>
<!-- Materialize framework -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href= "Assets/css/reset.css" />
<link rel="stylesheet" href= "Assets/css/style.css" />
<link rel="stylesheet" href= "Assets/css/homepage.css" />
</head>
<body>
<div class="main-container">
<div class="nav-container">
<nav> <!-- This nav bar will show fully on lg screens, and will be mobile-responsive on sml screens -->
<div class="nav-wrapper blue-grey lighten-5 navbar-fixed">
<a href="index.html" class="brand-logo black-text center">PhotoBomb</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons text-darken-4 cyan-text">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a class="waves-effect black-text" href="pages/categories.html">Categories</a></li>
<li><a class="waves-effect black-text" href="pages/saved.html">Saved</a></li>
<li><a class="waves-effect black-text" href="pages/curated.html">Curated</a></li>
<li>
<form id="navForm"> <!-- This text box NEEDS the styling on the CSS page to be aligned -->
<div class="input-field">
<input id="navSearch" class="search-bar" type="search" placeholder="Search"required>
<label class="label-icon" for="search"><i class="material-icons black-text">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo"> <!-- This is the side nav that will show on sml screens -->
<li><a class="subheader">PhotoBomb</a></li>
<li><div class="divider"></div></li>
<li><a class="waves-effect" href="pages/categories.html">Categories</a></li>
<li><a class="waves-effect" href="pages/saved.html">Saved</a></li>
<li><a class="waves-effect" href="pages/curated.html">Curated</a></li>
<li>
<form id="sideForm">
<div class="input-field">
<input id="sideSearch" class="search-bar" type="search"required>
<label class="label-icon" for="search"><i class="material-icons black-text">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</li>
</ul>
</div>
<div class="button-container"> <!-- This will hold the Get Started button -->
<div class='intro-text row center-align'>
<h1>Welcome to PhotoBomb! A personalized wallpaper app.</h1>
<h2>HOW TO GET STARTED: Click the button to start a quick assessment to get curated wallpapers for you. </h2>
</div>
<div class='row center-align'>
<button type="button" class="start-btn">Get Started</button>
</div>
</div>
<!-- Main slider showing photos -->
<div class="slider-container">
<div class="slider">
<ul class="slides">
<li>
<img src="https://images.pexels.com/photos/2885320/pexels-photo-2885320.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Placeholder">
<div class="caption center-align">
<h1>Find Your Perfect Wallpaper</h1>
</div>
</li>
<li>
<img src="https://images.pexels.com/photos/2835436/pexels-photo-2835436.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Placeholder">
<div class="caption center-align">
<h1>Curated For You</h1>
</div>
</li>
<li>
<img src="https://images.pexels.com/photos/4245826/pexels-photo-4245826.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Placeholder">
<div class="caption center-align">
<h1>Click The Button To Get Started</h1>
</div>
</li>
</ul>
</div>
</div>
<div class="card-container">
<section class="section section-icons grey lighten-4 center">
<div class="row">
<div class="col s12 m4 hoverable">
<div class="card-panel card large">
<i class="material-icons large">format_list_bulleted</i>
<h4>Categories</h4>
<p>If you already know what you're looking for, search through our Categories tab to get started.</p>
<p>We've pre-selected the most popular categories for you!</p>
</div>
</div>
<div class="col s12 m4 hoverable">
<div class="card-panel card large">
<i class="material-icons large">bookmark</i>
<h4>Saved</h4>
<p>You can save photos you like and it will show up in our Saved tab!</p>
<p>You can also download + send pictures on your device!</p>
</div>
</div>
<div class="col s12 m4 hoverable">
<div class="card-panel card large">
<i class="material-icons large">wallpaper</i>
<h4>Curated</h4>
<p>Can't choose?</p>
<p>Go through our quick and easy assessment and your curated wallpapers
will show up in the Curated tab!</p>
</div>
</div>
</div>
</section>
</div>
<footer class="page-footer blue-grey lighten-5"> <!-- Footer -->
<div class="footer-copyright">
<div class="container black-text center">
© 2021 PhotoBomb
</div>
</div>
</footer>
<!-- JQUERY link and Materialize JS link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src = "Assets/js/script.js"></script>
<script src = "Assets/js/homepage.js"></script>
</body>
</html>