-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsign-up-page.html
131 lines (127 loc) · 6.2 KB
/
sign-up-page.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign Up</title>
<link href="bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Catamaran:[email protected]&family=Oxygen:wght@300;400;700&display=swap"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Catamaran:[email protected]&family=Oxygen:wght@300;400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="icon" type="image/x-icon" href="/images/logo.png">
</head>
<body class="bg-secondary">
<nav class="navbar navbar-dark navbar-expand-lg bg-body-tertiary sticky-top bg-primary">
<div class="container-fluid">
<a class="navbar-brand text-light mr-5" href="#">
<img src="images/logo.png" alt="Logo and brand name (Viobot)" width="30" height="24"
class="d-inline-block align-text-top ">
Viobot
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="font-size: 1.2rem;">
<li class="nav-item">
<a class="nav-link text-light mr-3" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light mr-3" href="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link text-light mr-3" href="contacts.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link text-light mr-3" href="FAQ-Page.html">FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link text-light mr-3" href="team.html">Team</a>
</li>
</ul>
<div class="mx-auto">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"
style="width: 280px;">
<button class="btn btn-primary" type="submit">Search</button>
</form>
</div>
<div class="ml-2 mr-4">
<a href="my-cart-page.html" class="btn btn-primary">
<img src="images/cart.png" alt="Cart" width="40" height="40" class="d-inline-block align-text-top">
</a>
</div>
<a class="navbar-brand text-light fs-6 btn btn-primary" href="sign-in-page.html">Sign In</a>
</div>
</div>
</nav>
<section class="p-2 m-2">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="border border-light p-4 wow animate__animated animate__jackInTheBox" data-wow-delay="0.2s">
<h2 class="mb-4 text-light text-center wow animate__animated animate__fadeInDown" data-wow-delay="0.5s">Sign
Up</h2>
<form>
<div class="form-group text-light wow animate__animated animate__fadeInLeft" data-wow-delay="1s">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" name="username" required placeholder="JohnDoe">
</div>
<div class="form-group text-light wow animate__animated animate__fadeInRight" data-wow-delay="1.5s">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" required
placeholder="[email protected]">
</div>
<div class="form-group text-light wow animate__animated animate__fadeInUp" data-wow-delay="2s">
<label for="password">Password:</label>
<input type="password" class="form-control" id="password" name="password" required
placeholder="Password@123">
</div>
<div class="form-group text-light wow animate__animated animate__fadeInTopLeft" data-wow-delay="2.5s">
<label for="confirmPassword">Confirm Password:</label>
<input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required
placeholder="Password@123">
</div>
<div class="border border-light text-light p-3 mt-3 wow animate__animated animate__fadeInBottomRight"
data-wow-delay="3s">
<strong>Password requirements:</strong>
<ul>
<li>Must be 8-20 characters long.</li>
<li>Must include special characters.</li>
<li>Must include an upper case and a lower case character.</li>
<li>No Spaces</li>
</ul>
</div>
<div class="d-flex justify-content-between">
<a href="index.html" type="submit"
class="btn btn-primary mt-3 wow animate__animated animate__lightSpeedInLeft"
data-wow-delay="3.5s">Sign Up</a>
<a href="sign-in-page.html" type="submit"
class="btn btn-primary mt-3 wow animate__animated animate__lightSpeedInRight"
data-wow-delay="3.5s">Already have an account?</a>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<footer>
<hr>
<img src="images/mainLogo.png" alt="Viobot Main Icon" id="viobot">
<br>
<p class="copyright">© 2024 VioBot. All rights reserved. Do not redistribute our code in any way or form.</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
</body>
</html>