-
Notifications
You must be signed in to change notification settings - Fork 0
/
registration.html
184 lines (160 loc) · 13.8 KB
/
registration.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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeekBrainsPro</title>
<link rel="stylesheet" href="icon/fontawesome/all.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- header -->
<header class="page-header">
<div class="container page-header-container">
<div class="page-header-logo-wrap">
<a href="index.html">
<img src="img/header-logo.png" alt="logo" class="page-header-logo" width="44px" height="38px">
</a>
<button class="page-header-icon-btn page-header-icon-magnifier">
<svg width="27" height="28" viewBox="0 0 27 28" xmlns="http://www.w3.org/2000/svg" class="header-icon">
<path
d="M19.0596 17.6259C20.6713 15.8658 21.6282 13.6048 21.7698 11.2225C21.9113 8.84018 21.2288 6.48173 19.8369 4.54318C18.445 2.60463 16.4285 1.20404 14.126 0.576619C11.8234 -0.0508009 9.3751 0.13316 7.19217 1.09761C5.00923 2.06205 3.22463 3.74825 2.13804 5.87302C1.05145 7.9978 0.729054 10.4318 1.225 12.7661C1.72094 15.1005 3.00501 17.1932 4.86158 18.6927C6.71814 20.1922 9.03413 21.0072 11.4206 21.0009C13.673 21.004 15.8645 20.27 17.6606 18.9109L25.4086 26.7179C25.4941 26.807 25.5965 26.8781 25.7099 26.927C25.8232 26.9759 25.9452 27.0017 26.0686 27.0029C26.1923 27.0033 26.3148 26.9782 26.4283 26.9292C26.5419 26.8801 26.6441 26.8082 26.7286 26.7179C26.9025 26.537 26.9997 26.2958 26.9997 26.0449C26.9997 25.794 26.9025 25.5528 26.7286 25.3719L19.0596 17.6259ZM2.88662 10.5009C2.89946 8.81563 3.41094 7.17187 4.35659 5.77685C5.30224 4.38183 6.63972 3.29801 8.20044 2.662C9.76115 2.02599 11.4752 1.86627 13.1266 2.20298C14.7779 2.53969 16.2926 3.35775 17.4797 4.55404C18.6668 5.75033 19.4732 7.27129 19.7972 8.92519C20.1212 10.5791 19.9483 12.2919 19.3002 13.8476C18.6522 15.4034 17.5581 16.7325 16.1559 17.6674C14.7536 18.6023 13.1059 19.1011 11.4206 19.1009C9.14916 19.0901 6.97482 18.1784 5.37484 16.566C3.77486 14.9537 2.87998 12.7724 2.88662 10.5009Z" />
</svg>
</button>
</div>
<nav>
<ul class="page-header-menu-icon">
<li class="page-header-menu-icon-item">
<button class="page-header-icon-btn">
<svg width="32" height="23" viewBox="0 0 32 23" xmlns="http://www.w3.org/2000/svg"
class="header-icon">
<path d="M0 23V20.31H32V23H0ZM0 12.76V10.07H32V12.76H0ZM0 2.69V0H32V2.69H0Z" />
</svg>
</button>
</li>
<li class="page-header-menu-icon-item">
<a href="registration.html">
<svg width="29" height="29" viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg"
class="header-icon">
<path
d="M14.5 19.937C19 19.937 22.656 15.464 22.656 9.968C22.656 4.472 19 0 14.5 0C13.3631 0.0217413 12.2463 0.303398 11.2351 0.823397C10.2239 1.34339 9.34507 2.08794 8.66602 3C7.12663 4.99573 6.30819 7.45381 6.34399 9.974C6.34399 15.465 10 19.937 14.5 19.937ZM14.5 1.813C18 1.813 20.844 5.472 20.844 9.969C20.844 14.466 17.998 18.125 14.5 18.125C11.002 18.125 8.15603 14.465 8.15503 9.969C8.15403 5.473 11 1.813 14.5 1.813ZM20.844 18.125C20.6036 18.125 20.373 18.2205 20.203 18.3905C20.033 18.5605 19.9375 18.7911 19.9375 19.0315C19.9375 19.2719 20.033 19.5025 20.203 19.6725C20.373 19.8425 20.6036 19.938 20.844 19.938C22.526 19.9399 24.1386 20.6088 25.3279 21.7982C26.5172 22.9875 27.1861 24.6 27.188 26.282C27.1875 26.5221 27.0918 26.7523 26.922 26.9221C26.7522 27.0918 26.5221 27.1875 26.282 27.188H2.71997C2.47985 27.1875 2.24975 27.0918 2.07996 26.9221C1.91016 26.7523 1.81449 26.5221 1.81396 26.282C1.81608 24.6001 2.48517 22.9877 3.67444 21.7985C4.86371 20.6092 6.47608 19.9401 8.15796 19.938C8.39824 19.938 8.62868 19.8425 8.79858 19.6726C8.96849 19.5027 9.06396 19.2723 9.06396 19.032C9.06396 18.7917 8.96849 18.5613 8.79858 18.3914C8.62868 18.2215 8.39824 18.126 8.15796 18.126C5.99541 18.1279 3.92201 18.9875 2.39258 20.5164C0.863144 22.0453 0.00264777 24.1185 0 26.281C0.000794067 27.0019 0.287502 27.693 0.797241 28.2027C1.30698 28.7125 1.99811 28.9992 2.71899 29H26.282C27.0027 28.9989 27.6936 28.7121 28.2031 28.2024C28.7126 27.6927 28.9992 27.0017 29 26.281C28.9974 24.1187 28.1372 22.0457 26.6083 20.5168C25.0793 18.9878 23.0063 18.1276 20.844 18.125Z" />
</svg>
</a>
</li>
<li class="page-header-menu-icon-item">
<a href="cart.html">
<svg width="42" height="37" viewBox="0 0 42 37" xmlns="http://www.w3.org/2000/svg"
class="header-icon">
<path
d="M26.2009 37C25.5532 36.9738 24.9415 36.6948 24.4972 36.2227C24.0529 35.7506 23.8114 35.1232 23.8245 34.475C23.8376 33.8269 24.1043 33.2097 24.5673 32.7559C25.0303 32.3022 25.6527 32.048 26.301 32.048C26.9493 32.048 27.5717 32.3022 28.0347 32.7559C28.4977 33.2097 28.7644 33.8269 28.7775 34.475C28.7906 35.1232 28.549 35.7506 28.1047 36.2227C27.6604 36.6948 27.0488 36.9738 26.401 37H26.2009ZM6.75293 34.32C6.75293 33.79 6.91011 33.2718 7.20459 32.8311C7.49907 32.3904 7.91764 32.0469 8.40735 31.844C8.89705 31.6412 9.43594 31.5881 9.95581 31.6915C10.4757 31.7949 10.9532 32.0502 11.328 32.425C11.7028 32.7998 11.9581 33.2773 12.0615 33.7972C12.1649 34.317 12.1118 34.8559 11.9089 35.3456C11.7061 35.8353 11.3626 36.2539 10.9219 36.5483C10.4812 36.8428 9.96304 37 9.43298 37C9.08087 37.0003 8.73212 36.9311 8.40674 36.7966C8.08136 36.662 7.78569 36.4646 7.53662 36.2158C7.28755 35.9669 7.09001 35.6713 6.9552 35.3461C6.82039 35.0208 6.75098 34.6721 6.75098 34.32H6.75293ZM10.553 28.686C10.2935 28.6868 10.0409 28.6024 9.83411 28.4457C9.62727 28.2891 9.47758 28.0689 9.40796 27.819L4.57495 10.364H1.18201C0.868521 10.364 0.567859 10.2395 0.346191 10.0178C0.124523 9.79614 0 9.49549 0 9.18201C0 8.86852 0.124523 8.56787 0.346191 8.3462C0.567859 8.12454 0.868521 8.00001 1.18201 8.00001H5.46301C5.7225 7.99919 5.97504 8.08372 6.18176 8.24057C6.38848 8.39742 6.53784 8.61788 6.60693 8.86801L11.4399 26.323H24.6179L29.001 16.275H14.401C14.2428 16.2796 14.0854 16.2524 13.9379 16.1951C13.7904 16.1377 13.6559 16.0513 13.5424 15.9411C13.4288 15.8308 13.3386 15.6989 13.277 15.5532C13.2154 15.4074 13.1836 15.2508 13.1836 15.0925C13.1836 14.9343 13.2154 14.7776 13.277 14.6319C13.3386 14.4861 13.4288 14.3542 13.5424 14.2439C13.6559 14.1337 13.7904 14.0473 13.9379 13.9899C14.0854 13.9326 14.2428 13.9054 14.401 13.91H30.814C31.0097 13.91 31.2022 13.9587 31.3744 14.0517C31.5465 14.1448 31.6928 14.2793 31.7999 14.443C31.9078 14.6073 31.9734 14.7957 31.9908 14.9914C32.0083 15.1872 31.9771 15.3842 31.9 15.565L26.495 27.977C26.4026 28.1876 26.251 28.3668 26.0585 28.4927C25.866 28.6186 25.641 28.6858 25.411 28.686H10.553Z" />
<path
d="M31.502 19C36.7487 19 41.002 14.7467 41.002 9.5C41.002 4.25329 36.7487 0 31.502 0C26.2552 0 22.002 4.25329 22.002 9.5C22.002 14.7467 26.2552 19 31.502 19Z"
fill="#F16D7F" />
<path
d="M30.8146 7.648C31.2626 7.552 31.6746 7.504 32.0506 7.504C32.4986 7.504 32.8946 7.57 33.2386 7.702C33.5826 7.834 33.8686 8.016 34.0966 8.248C34.3286 8.48 34.5026 8.754 34.6186 9.07C34.7386 9.386 34.7986 9.73 34.7986 10.102C34.7986 10.558 34.7186 10.97 34.5586 11.338C34.4026 11.706 34.1846 12.022 33.9046 12.286C33.6286 12.546 33.3026 12.746 32.9266 12.886C32.5506 13.026 32.1446 13.096 31.7086 13.096C31.4566 13.096 31.2146 13.07 30.9826 13.018C30.7506 12.97 30.5326 12.904 30.3286 12.82C30.1286 12.736 29.9426 12.64 29.7706 12.532C29.5986 12.424 29.4466 12.31 29.3146 12.19L29.6446 11.734C29.7166 11.63 29.8106 11.578 29.9266 11.578C30.0066 11.578 30.0966 11.61 30.1966 11.674C30.2966 11.734 30.4186 11.802 30.5626 11.878C30.7066 11.954 30.8746 12.024 31.0666 12.088C31.2626 12.148 31.4946 12.178 31.7626 12.178C32.0626 12.178 32.3326 12.13 32.5726 12.034C32.8126 11.938 33.0186 11.802 33.1906 11.626C33.3626 11.446 33.4946 11.232 33.5866 10.984C33.6786 10.736 33.7246 10.458 33.7246 10.15C33.7246 9.882 33.6846 9.64 33.6046 9.424C33.5286 9.208 33.4106 9.024 33.2506 8.872C33.0946 8.72 32.8986 8.602 32.6626 8.518C32.4266 8.434 32.1506 8.392 31.8346 8.392C31.6186 8.392 31.3926 8.41 31.1566 8.446C30.9246 8.482 30.6866 8.54 30.4426 8.62L29.7706 8.422L30.4606 4.402H34.5346V4.87C34.5346 5.022 34.4866 5.148 34.3906 5.248C34.2986 5.344 34.1386 5.392 33.9106 5.392H31.2106L30.8146 7.648Z"
fill="white" />
</svg>
</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- main -->
<main class="main">
<!-- section arrivals -->
<section class="section-arrivals section-arrivals-cart">
<div class="container section-arrivals-container">
<span class="text-arrivals uppercase">registration</span>
</div>
</section>
<!-- section registration -->
<section class="section-registration">
<div class="container section-registration-container">
<form action="#" class="registration-form-wrap">
<fieldset class="registration-form-fieldset">
<legend class="heading-form-adress">Your Name</legend>
<input type="text" class="input-shipping-adress shipping-adress-placeholder-light"
placeholder="First Name">
<input type="text" class="input-shipping-adress shipping-adress-placeholder-light"
placeholder="Last Name">
<div class="registration-radio-name">
<label for="male" class="name-radio">
<input type="radio" name="name" id="male" class="radio-button-name">
<span class="name-radio-heading">Male</span>
</label>
<label for="female" class="name-radio">
<input type="radio" name="name" id="female" class="radio-button-name female">
<span class="name-radio-heading">Female</span>
</label>
</div>
</fieldset>
<fieldset class="registration-form-fieldset">
<legend class="heading-form-adress">Login details</legend>
<input type="text" class="input-shipping-adress shipping-adress-placeholder-light"
placeholder="Email">
<input type="text" class="input-shipping-adress shipping-adress-placeholder-light"
placeholder="Password">
<span class="text-registration">
Please use 8 or more characters, with at least 1 number and a mixture
of uppercase and lowercase letters
</span>
</fieldset>
<input type="submit" value="join now" class="button-join-registration uppercase">
</form>
<div class="block-loyalty">
<span class="loyalty-heading loyalty-style uppercase">loyalty has its perks</span>
<p class="loyalty-text loyalty-style">
Get in on the loyalty program where you can earn points and unlock serious perks.
Starting with these as soon as you join:
</p>
<nav>
<ul class="loyalty-menu">
<li class="loyalty-menu-item loyalty-style">15% off welcome offer</li>
<li class="loyalty-menu-item loyalty-style">Free shipping, returns and exchanges on all orders
</li>
<li class="loyalty-menu-item loyalty-style">$10 off a purchase on your birthday</li>
<li class="loyalty-menu-item loyalty-style">Early access to products</li>
<li class="loyalty-menu-item loyalty-style">Exclusive offers & rewards</li>
</ul>
</nav>
</div>
</div>
</section>
<!-- section subcribe -->
<section class="section-subcribe">
<div class="container section-subcribe-container">
<div class="quote-block-wrapper">
<div class="quote-block-image"></div>
<p class="quote">“Vestibulum quis porttitor dui! Quisque viverra nunc mi, <span class="quote-span">a
pulvinar purus condimentum</span>“
</p>
</div>
<div class="subscribe-block-wrapper">
<span class="subscribe-block-heading uppercase">subscribe</span>
<p class="subscribe-block-text uppercase">for our newletter and promotion</p>
<div class="email-form-subcribe-wrapper">
<input type="email" placeholder="Enter Your Email" class="email-subcribe">
<input type="submit" value="Subscribe" class="button-subcribe">
</div>
</div>
</div>
</section>
</main>
<!-- page footer -->
<footer class="page-footer">
<div class="container page-footer-container">
<p class="copy-text">© 2021 Brand All Rights Reserved.</p>
<div class="social">
<a href="#" class="fab fa-facebook-f social-item"></a>
<a href="#" class="fab fa-instagram social-item"></a>
<a href="#" class="fab fa-pinterest social-item"></a>
<a href="#" class="fab fa-twitter social-item"></a>
</div>
</div>
</footer>
</body>
</html>