-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (115 loc) · 4.52 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sign-up Form</title>
<link rel="icon" href="./images/milk-tea.png" />
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="loader-overlay">
<span class="loader"></span>
</div>
<div class="container">
<div class="Vcontainer">
<div class="banner">
<svg
fill="#000000"
viewBox="-2.4 -2.4 28.80 28.80"
id="tea-left"
data-name="Flat Color"
xmlns="http://www.w3.org/2000/svg"
class="icon flat-color"
stroke="#000000"
stroke-width="0.00024000000000000003"
transform="rotate(0)"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
stroke="#CCCCCC"
stroke-width="0.336"
></g>
<g id="SVGRepo_iconCarrier">
<path
id="primary"
d="M3,7V9.54a6.72,6.72,0,0,0,4.39,6.27c.18,1.87.38,3.5.5,4.45a2,2,0,0,0,2,1.74h8.26a2,2,0,0,0,2-1.74A99.63,99.63,0,0,0,21,9V4a2,2,0,0,0-2-2H9A2,2,0,0,0,7,4V5H5A2,2,0,0,0,3,7ZM5,7H7V9c0,1.41.08,3,.19,4.51A4.73,4.73,0,0,1,5,9.54Z"
style="fill: #ccae88"
></path>
<path
id="secondary"
d="M11.55,7.11,13,6.38V2h2V6.38l1.45.73A1,1,0,0,1,17,8v4a1,1,0,0,1-1,1H12a1,1,0,0,1-1-1V8A1,1,0,0,1,11.55,7.11Z"
style="fill: #c0b4b4"
></path>
</g>
</svg>
<span class="logoname">MilkTea</span>
</div>
<video
id="video"
autoplay
loop
muted
src="images/waterfall-by-the-forest-pixel-moewalls-com.mp4"
></video>
</div>
<div class="Fcontainer">
<p class="hero">
This is not a real online service! You know you need something like this in your life to help you
realize your deepest dreams.<br />Sign up <em>now</em> to get started<br /><br />You
<em>know</em> you want to.
</p>
<form>
<div class="background-form">
<h2>Let's do this!</h2>
<div class="form-row">
<label for="firstname" class="fifty">FIRST NAME<span class="asterisk">*</span></label>
<input type="text" name="firstname" id="firstname" required maxlength="20" minlength="3" />
<span class="validation-first-name"></span>
</div>
<div class="form-row">
<label for="lastname" class="fifty">LAST NAME<span class="asterisk">*</span></label>
<input type="text" name="lastname" id="lastname" required maxlength="12" />
<span class="validation-last-name"></span>
</div>
<div class="form-row">
<label for="email">EMAIL<span class="aestrisk">*</span></label>
<input type="email" name="email" id="email" required placeholder="example@example(.com)" />
<span class="validation-email"></span>
</div>
<div class="form-row">
<label for="phone">PHONE NUMBER</label>
<input
type="tel"
name="phone-number"
id="phone"
pattern="^(\+[0-9]{1,3})?(\d{3}) ?-?(\d{3}) ?-?(\d{4})"
placeholder="(+countery-code)xxx-xxx-xxxx"
/>
<span class="validation-phone"></span>
</div>
<div class="form-row">
<label for="password">PASSWORD<span class="aestrisk">*</span></label>
<input type="password" name="password" id="password" required />
<span class="passspan"></span>
</div>
<div class="form-row">
<label for="confirmpass">CONFIRM PASSWORD<span class="aestrisk">*</span></label>
<input type="password" name="confirmpass" id="confirmpass" required />
<span class="confirmpassspan"></span>
</div>
</div>
<div class="footer">
<button>Create Account</button>
<p class="footerp">Already have an account? <a href="#">Log in</a></p>
</div>
</form>
</div>
</div>
<script src="main.js"></script>
</body>
</html>