-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathform.html
158 lines (149 loc) · 12.6 KB
/
form.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Open+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/hk-groteks" rel="stylesheet">
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
<link rel="stylesheet" href="./styles/main.css">
<title>Document</title>
</head>
<body>
<div class="page">
<header class="header-main">
<div class="container">
<div class="row">
<div class="col-6 col-lg-2">
<div class="logo-main">
<svg width="90" height="28" viewBox="0 0 90 28" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21.0365 0.96875V21.4531C21.0365 21.724 21.1273 21.9505 21.3088 22.1328C21.4903 22.3151 21.7159 22.4062 21.9856 22.4062H25.471C25.7407 22.4062 25.9663 22.3151 26.1478 22.1328C26.3293 21.9505 26.4201 21.724 26.4201 21.4531V12.056C27.9035 10.5664 29.2934 9.23438 30.5901 9.23438C32.5713 9.23438 33.5619 9.99478 33.5619 12.4844V21.4531C33.5619 21.724 33.6527 21.9505 33.8342 22.1328C34.0158 22.3151 34.2414 22.4062 34.5111 22.4062H37.9809C38.2609 22.4062 38.4917 22.3151 38.6732 22.1328C38.8548 21.9505 38.9455 21.724 38.9455 21.4531V12.4844C38.9455 9.9427 38.3128 8.05469 37.0473 6.82031C35.7818 5.58593 34.1402 4.96875 32.1227 4.96875C30.1051 4.96875 28.2043 5.72395 26.4201 7.23438V0.96875C26.4201 0.687499 26.3293 0.45573 26.1478 0.273438C25.9663 0.0911449 25.7407 0 25.471 0H21.9856C21.7159 0 21.4903 0.0911449 21.3088 0.273438C21.1273 0.45573 21.0365 0.687499 21.0365 0.96875ZM2.39617 20.4375C0.798715 18.9167 0 16.7266 0 13.8672C0 11.0078 0.803902 8.8099 2.41173 7.27344C4.01956 5.73697 6.24974 4.96875 9.10233 4.96875C11.9549 4.96875 14.1799 5.71614 15.7774 7.21094C17.3748 8.70574 18.1735 10.8489 18.1735 13.6406V14.5312C18.1735 14.8125 18.0828 15.0443 17.9013 15.2266C17.7197 15.4089 17.4889 15.5 17.2089 15.5H5.49252C5.59625 16.7813 5.9619 17.7135 6.58947 18.2969C7.21704 18.8802 8.22062 19.1719 9.60024 19.1719C10.9799 19.1719 11.9238 18.8594 12.4321 18.2344C12.9404 17.6094 13.9142 17.705 15.4164 17.9157C16.9186 18.1263 17.2575 18.9209 17.2089 19.1719C16.7323 21.6328 14.2357 22.7282 9.08677 22.7188C6.2238 22.7188 3.99362 21.9583 2.39617 20.4375ZM5.4614 12.2031H12.6966C12.5929 9.74478 11.3922 8.51562 9.09455 8.51562C6.79692 8.51562 5.58588 9.74478 5.4614 12.2031ZM45.7762 24.0312L47.8145 24.2969C49.0526 24.2969 49.9748 23.5243 50.581 21.9793C50.592 21.9514 50.5033 21.937 50.339 21.9102C49.7121 21.8082 47.9841 21.5271 46.4764 19.6383C44.7481 17.4732 44.4913 16.6374 43.8218 14.4585L43.8213 14.457C43.7537 14.2368 43.6818 14.003 43.6038 13.7527L41.2854 6.2058C41.2543 6.12247 41.2387 6.02612 41.2387 5.91674C41.2387 5.80736 41.3036 5.67455 41.4332 5.5183C41.5629 5.36205 41.7574 5.27872 42.0167 5.2683L45.076 5.28125C45.3768 5.28125 45.6647 5.38281 45.9396 5.58594C46.2144 5.78906 46.3934 6.04167 46.4764 6.34375L48.5147 12.9688C49.0229 14.5938 49.539 15.7187 50.0628 16.3438C50.5867 16.9688 51.2065 17.2812 51.9222 17.2812L55.0186 6.34375C55.1015 6.04167 55.2649 5.78906 55.5087 5.58594C55.7524 5.38281 56.0247 5.28125 56.3256 5.28125H59.6086C59.8679 5.28125 60.0598 5.36458 60.1843 5.53125C60.3088 5.69792 60.371 5.83594 60.371 5.94531C60.371 6.05469 60.3607 6.14583 60.3399 6.21875L56.2633 20.8125C55.5372 23.3958 54.6373 25.2396 53.5637 26.3438C52.4901 27.4479 51.1079 28 49.4171 28L48.7672 27.9967C47.4163 27.9822 46.4375 27.9208 45.8306 27.8125C45.1305 27.6875 44.6922 27.5339 44.5159 27.3516C44.3395 27.1693 44.2513 26.9583 44.2513 26.7188V25C44.2513 24.7187 44.3395 24.487 44.5159 24.3047C44.6922 24.1224 44.9204 24.0312 45.2005 24.0312H45.7762ZM62.1448 21.2812C60.7756 20.3229 60.091 18.9688 60.091 17.2188C60.091 15.4688 60.7782 14.125 62.1526 13.1875C63.527 12.25 65.2982 11.7812 67.4662 11.7812H72.6164C72.6164 10.5625 72.3623 9.71354 71.854 9.23438C71.3457 8.75521 70.4562 8.51562 69.1855 8.51562C67.9995 8.51562 67.1434 8.79011 66.617 9.3391L66.5093 9.46094C65.9958 10.0911 64.3795 9.87688 62.9365 9.59891C61.4935 9.32095 61.4001 8.5848 61.5289 8.2017C62.2533 6.04639 65.0155 4.96875 69.8157 4.96875C72.2845 4.96875 74.2657 5.52343 75.7594 6.63281C77.2532 7.74219 78 9.45832 78 11.7812V21.4531C78 21.7344 77.9118 21.9635 77.7355 22.1406C77.5591 22.3177 77.3309 22.4062 77.0509 22.4062H74.0479C73.7678 22.4062 73.5396 22.3151 73.3633 22.1328C73.1869 21.9505 73.0987 21.724 73.0987 21.4531V20.9688C71.4598 22.1458 69.5693 22.7318 67.4273 22.7266C65.2852 22.7214 63.5244 22.2396 62.1448 21.2812ZM67.8396 15.3281H72.6164V17.7656C71.133 18.7031 69.5927 19.1719 67.9952 19.1719C67.1965 19.1719 66.5793 18.9896 66.1436 18.625C65.708 18.2604 65.4901 17.7969 65.4901 17.2344C65.4901 16.6719 65.7002 16.2135 66.1203 15.8594C66.5404 15.5052 67.1135 15.3281 67.8396 15.3281Z"
fill="url(#paint0_linear_61_153)" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M86 14C88.2091 14 90 12.2091 90 10C90 7.79086 88.2091 6 86 6C83.7909 6 82 7.79086 82 10C82 12.2091 83.7909 14 86 14Z"
fill="#1576D8" />
<defs>
<linearGradient id="paint0_linear_61_153" x1="0" y1="0" x2="0" y2="28"
gradientUnits="userSpaceOnUse">
<stop stop-color="#254A72" />
<stop offset="1" stop-color="#10243E" />
</linearGradient>
</defs>
</svg>
</div>
</div>
<div class="col-6 col-lg-10">
<div class="header-main__menu d-flex d-lg-none">
<button class="btn btn_icon btn_transparent">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2.09009 5.2H21.9099C22.5119 5.2 23 4.70751 23 4.1C23 3.49249 22.5119 3 21.9099 3H2.09009C1.48805 3 1 3.49249 1 4.1C1 4.70751 1.48805 5.2 2.09009 5.2ZM2.09009 12.9484H21.9099C22.5119 12.9484 23 12.4559 23 11.8484C23 11.2408 22.5119 10.7484 21.9099 10.7484H2.09009C1.48805 10.7484 1 11.2408 1 11.8484C1 12.4559 1.48805 12.9484 2.09009 12.9484ZM21.9099 20.6967H2.09009C1.48805 20.6967 1 20.2042 1 19.5967C1 18.9892 1.48805 18.4967 2.09009 18.4967H21.9099C22.5119 18.4967 23 18.9892 23 19.5967C23 20.2042 22.5119 20.6967 21.9099 20.6967Z"
fill="#3A4C66" />
</svg>
</button>
</div>
<div class="header-main__menu d-none d-lg-flex">
<nav class="nav-menu-main">
<a href="#" class="nav-menu-main__link">Home</a>
<a href="#" class="nav-menu-main__link">Landings</a>
<a href="#" class="nav-menu-main__link">Pages</a>
<a href="#" class="nav-menu-main__link">Docs</a>
<a href="#" class="nav-menu-main__link">Help</a>
</nav>
<a href="#" class="btn btn_outline btn_primary">
Get it now
</a>
</div>
</div>
</div>
</div>
</header>
<div class="page__content content-main">
<div class="container">
<form action="#">
<div class="custom-checkbox">
<input type="checkbox" id="agreement" class="custom-checkbox__input" name="agreement"
value="true" />
<label for="agreement" class="custom-checkbox__label">
<span>I agree <a href="#">Lorem ipsum</a> dolor
sit amet
consectetur adipisicing elit. Sit sequi molestias, magnam quia illum incidunt repellat
ad
ratione ea fuga minus quasi exercitationem error iusto voluptatum architecto
voluptatibus!
Nulla, ad!
</span>
</label>
</div>
<div class="custom-checkbox">
<input type="checkbox" id="secondary" class="custom-checkbox__input" name="agreement"
value="false" />
<label for="secondary" class="custom-checkbox__label">
Secondary value
</label>
</div>
<div class="custom-checkbox">
<input type="radio" id="payment1" class="custom-checkbox__input" name="payment" value="card">
<label for="payment1" class="custom-checkbox__label">
Credit card
</label>
</div>
<div class="custom-checkbox">
<input type="radio" id="payment2" class="custom-checkbox__input" name="payment" value="paypal">
<label for="payment2" class="custom-checkbox__label">
Paypal
</label>
</div>
<div class="custom-checkbox">
<input type="radio" id="payment3" class="custom-checkbox__input" name="payment" value="bonus">
<label for="payment3" class="custom-checkbox__label">
Bonus
</label>
</div>
<br /><br />
<button type="submit" class="btn btn_primary">Submit</button>
</form>
</div>
</div>
<footer class="footer-main">
<div class="container">
<div class="row">
<div class="col-3">
logo
</div>
<div class="col-9">
<div class="row">
<div class="col-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti ut
consequatur
molestias tempore, quam labore vero repellat ex aut perspiciatis, magnam animi quaerat?
Distinctio
exercitationem doloribus debitis itaque, velit quae!</div>
<div class="col-3">Non, aperiam? Numquam incidunt, beatae ad corporis atque nesciunt modi
itaque, esse rem
voluptatem similique quas, delectus soluta laboriosam rerum non illo consectetur
dignissimos sequi saepe
expedita ea. Nobis, earum?</div>
<div class="col-3">Omnis provident sunt facere consequatur rerum amet fugiat et labore
similique magnam
doloribus nobis iste, dicta itaque dolor magni aut sapiente consequuntur! Quidem quae at
dignissimos
laborum voluptatum, doloribus nesciunt.</div>
<div class="col-3">Ratione inventore enim recusandae temporibus obcaecati in rem aspernatur
esse eos sint.
Quisquam minus eligendi corporis reprehenderit, officiis ipsum odio, excepturi
doloremque error iste
quasi repellat officia voluptates? Mollitia, fuga!</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>