forked from brer4449/groupproject1
/
signup.html
161 lines (147 loc) · 7.11 KB
/
signup.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
<!DOCTYPE html>
<html lang="en">
<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" />
<!-- Favicon -->
<link rel="icon" type="image/png" href="assets/images/favicon.png">
<!-- Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Materialize -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- CSS Style Sheet -->
<link rel="stylesheet" href="assets/css/style.css" />
<title>StarXed</title>
</head>
<body>
<!-- Nav Bar -->
<nav class="pink darken-2">
<div class="nav-wrapper">
<a href="index.html" class="brand-logo">StarXed</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="index.html">Home</a></li>
<li><a href="page3.html">Compatibility Chart</a></li>
<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn pink darken-2' href='#' data-target='dropdown1'>My account</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="login.html">Log in</a></li>
<li><a href="signup.html">Sign up</a></li>
</ul>
</ul>
</div>
</nav>
<!-- Headers -->
<div class="headers">
<h1 class="center align">Do you want to meet your star crossed lover?</h1>
<h2 class="center align">Your daily horoscope and matchmaking site!</h2>
<br>
</div>
<br><br>
<!--This sign up form will show up if user clicks on sing up on a nav bar-->
<div class="row center align" id="daily" style="margin-bottom: 80px">
<div class="col s12 m12 z-depth-2">
<div class="card">
<div id="sign-up">
<br>
<h5>Please fill out a form to create your profile</h5>
<i class="material-icons prefix" style="color:red">favorite_border</i>
<i class="material-icons prefix" style="color:red">favorite_border</i>
<i class="material-icons prefix" style="color:red">favorite_border</i>
<hr>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="last_name" type="text" class="validate">
<label for="last_name">First Name</label>
</div>
<div class="input-field col s6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input id="email" type="email" class="validate">
<label for="last_name">Email</label>
<span class="helper-text" data-error="wrong" data-success="right"></span>
</div>
<div class="input-field col s6">
<input id="password" type="password" class="validate">
<label for="last_name">Password</label>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card-action">
<a href="index.html">Sign up</a>
</div>
</div>
</div>
</div>
</div>
<!--log in form will pop up if user clicks on a log in on navbar-->
<div id="login" class="hide">
<div class="input-field col s6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Username</label>
</div>
<div class="input-field col s6">
<input id="password" type="password" class="validate">
<label for="last_name">Password</label>
</div>
<div class="row">
<div class="col s12">
<div class="card-action">
<br>
<a href="">Log in</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer pink">
<div class="container">
<div class="row center align">
<div class="col l12 s12">
<h5 class="white-text">You are what happened when I wished upon a star.</h5>
<p class="grey-text text-lighten-4">A passion project by young romantics</p>
</div>
</div>
<div class="row center align">
<img src="assets/images/signs/aries.png" class="bot" height="50px" width="50px">
<img src="assets/images/signs/taurus.png" class="bot" height="50px" width="50px">
<img src="assets/images/signs/gemini.png" class="bot" height="50px" width="50px">
<img src="assets/images/signs/cancer.png" class="bot" height="50px" width="50px">
<img src="assets/images/signs/leo.png" class="bot" height="50px" width="50px">
<img src="assets/images/signs/virgo.png" class="bot" height="50px" width="50px">
<img src="assets/images/signs/libra.png" class="bot" height="50px" width="50px">
<img src="assets/images/signs/scorpio.png" class="bot" height="50px" width="50px">
<img src="assets/images/signs/sagittarius.png" class="bot" height="50px" width="50px">
<img src="assets/images/signs/capricorn.png" class="bot" height="50px" width="50px">
<img src="assets/images/signs/aquarius.png" class="bot" height="50px" width="50px">
<img src="assets/images/signs/pisces.png" class="bot" height="50px" width="50px">
</div>
</div>
<div class="footer-copyright pink darken-2">
<div class="container">
StarXed ©2020
<a class="grey-text text-lighten-4 right" href="https://github.com/brer4449/groupproject1">Visit us on
GitHub!</a>
</div>
</div>
</footer>
<!-- jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Materialize Java -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Our JS -->
<script src="assets/js/app.js"></script>
</body>
</html>