forked from MakeupAName/week6project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
235 lines (231 loc) · 34 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
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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Find Your Makeup! 💄💋</title>
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700|Roboto:300,400,500,700" rel="stylesheet">
<script src="https://use.fontawesome.com/f3ad3d8d91.js"></script>
<link rel="stylesheet" href="public/styles/style.css">
</head>
<body>
<section id="section1">
<div class="wrapper">
<div class="inner-wrapper">
<h1>Find your make up</h1>
<img src="images/swish.png" alt="">
<p>On the search for some new make up products?</p>
<p>We'll help you build a kit tailored to your needs!</p>
<button id="start">Get Started</button>
</div>
</div>
</section>
<section id="section2">
<div class="section-wrapper">
<form action="">
<fieldset>
<div class="title">
<h2>Choose Your Make-Up</h2>
<p>Select up to 3</p>
</div>
<div class="make-up-wrapper">
<div class="make-up">
<input type="checkbox" name="product-type" id="blush" value="blush">
<label for="blush">
<div class="icon">
<span>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.12 82.67"><title>blush</title><path class="white" d="M89.14,26.37L89,26.14a18.4,18.4,0,0,0-4.62-4.81h0a18.33,18.33,0,0,0-20.8-.41l-0.24.16-0.15.25a1.46,1.46,0,0,0-.15,1.2L68,37.76l-1,5L59.93,85l0.42,0.45a5.79,5.79,0,0,0,4,1.74,5.3,5.3,0,0,0,2.16-.47l0.56-.25L77.3,44.78l1-4.9,10.52-12a1.47,1.47,0,0,0,.35-1.22ZM64.95,84.59a2.59,2.59,0,0,1-.6.07,3.11,3.11,0,0,1-1.73-.58L69.2,44.47l3.63,0.75,0.51-2.46L69.66,42l0.6-2.91,5.42,1.11-0.83,4ZM76.74,37.85L70.2,36.51,65.68,22.56a15.78,15.78,0,0,1,3.09-1.35l0.34,6.56A1.26,1.26,0,0,0,70.35,29h0.07a1.25,1.25,0,0,0,1.19-1.32l-0.36-7a15.7,15.7,0,0,1,2.41-.2,16,16,0,0,1,1.89.11L74,26.29a1.26,1.26,0,0,0,.89,1.54,1.29,1.29,0,0,0,.33,0,1.26,1.26,0,0,0,1.21-.93L78,21a15.79,15.79,0,0,1,3.92,1.72L75.19,32.86a1.25,1.25,0,0,0,.35,1.74,1.24,1.24,0,0,0,.69.21,1.25,1.25,0,0,0,1-.56L84,24.2a16,16,0,0,1,2.44,2.61Z" transform="translate(-3.08 -5.1)"/><path class="white" d="M51.95,16.49c0-4.6-10.85-6.69-20.92-6.69S10.1,11.89,10.1,16.49s10.85,6.7,20.93,6.7S51.95,21.09,51.95,16.49Zm-39.34,0c0-1.42,6.5-4.18,18.42-4.18s18.41,2.76,18.41,4.18S42.94,20.67,31,20.67,12.61,17.91,12.61,16.49Z" transform="translate(-3.08 -5.1)"/><path class="white" d="M43.53,34.8l0,0a5.73,5.73,0,0,1-.11-8C52.77,25,59,21.14,59,16.48,59,10,47,5.1,31,5.1S3.08,10,3.08,16.48c0,4.61,6.09,8.41,15.33,10.23a5.76,5.76,0,0,1-.07,8.05,1.17,1.17,0,0,0-.23.34A27.94,27.94,0,1,0,43.53,34.8ZM5.59,16.49C5.59,12.29,16,7.61,31,7.61s25.43,4.68,25.43,8.87S46,25.36,31,25.36,5.59,20.68,5.59,16.49ZM21.77,27.27a69.5,69.5,0,0,0,9.25.6,70.12,70.12,0,0,0,9-.57,8.2,8.2,0,0,0-.73,3.39,8.3,8.3,0,0,0,.4,2.54,27.87,27.87,0,0,0-17.65.16A8.3,8.3,0,0,0,21.77,27.27Zm9.34,58A25.43,25.43,0,1,1,56.55,59.83,25.46,25.46,0,0,1,31.11,85.26Z" transform="translate(-3.08 -5.1)"/><path class="white" d="M31.11,37.08A22.75,22.75,0,1,0,53.87,59.83,22.78,22.78,0,0,0,31.11,37.08ZM10.87,59.83a20.25,20.25,0,0,1,19-20.18V80A20.25,20.25,0,0,1,10.87,59.83ZM32.37,80V39.65A20.21,20.21,0,0,1,32.37,80Z" transform="translate(-3.08 -5.1)"/></svg>
</span>
</div>
<h3>blush</h3>
</label>
</div>
<div class="make-up">
<input type="checkbox" name="product-type" id="bronzer" value="bronzer">
<label for="bronzer">
<div class="icon">
<span>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.98 82.67"><title>blush</title><path class="white" d="M51.95,16.49c0-4.6-10.85-6.69-20.92-6.69S10.1,11.89,10.1,16.49s10.85,6.7,20.93,6.7S51.95,21.09,51.95,16.49Zm-39.34,0c0-1.42,6.5-4.18,18.42-4.18s18.41,2.76,18.41,4.18S42.94,20.67,31,20.67,12.61,17.91,12.61,16.49Z" transform="translate(-3.08 -5.1)"/><path class="white" d="M43.53,34.8l0,0a5.73,5.73,0,0,1-.11-8C52.77,25,59,21.14,59,16.48,59,10,47,5.1,31,5.1S3.08,10,3.08,16.48c0,4.61,6.09,8.41,15.33,10.23a5.76,5.76,0,0,1-.07,8.05,1.17,1.17,0,0,0-.23.34A27.94,27.94,0,1,0,43.53,34.8ZM5.59,16.49C5.59,12.29,16,7.61,31,7.61s25.43,4.68,25.43,8.87S46,25.36,31,25.36,5.59,20.68,5.59,16.49ZM21.77,27.27a69.5,69.5,0,0,0,9.25.6,70.12,70.12,0,0,0,9-.57,8.2,8.2,0,0,0-.73,3.39,8.3,8.3,0,0,0,.4,2.54,27.87,27.87,0,0,0-17.65.16A8.3,8.3,0,0,0,21.77,27.27Zm9.34,58A25.43,25.43,0,1,1,56.55,59.83,25.46,25.46,0,0,1,31.11,85.26Z" transform="translate(-3.08 -5.1)"/><path class="white" d="M31.11,37.08A22.75,22.75,0,1,0,53.87,59.83,22.78,22.78,0,0,0,31.11,37.08Zm0,43A20.22,20.22,0,1,1,51.33,59.83,20.22,20.22,0,0,1,31.11,80Z" transform="translate(-3.08 -5.1)"/><line x1="21.9" y1="65.21" x2="37.4" y2="49.71"/><path class="white" d="M25,71.41a1.1,1.1,0,0,1-.78-1.88L39.7,54a1.1,1.1,0,1,1,1.56,1.56l-15.5,15.5A1.1,1.1,0,0,1,25,71.41Z" transform="translate(-3.08 -5.1)"/><line x1="25.84" y1="69.15" x2="41.34" y2="53.65"/><path class="white" d="M28.92,75.35a1.1,1.1,0,0,1-.78-1.88L43.64,58a1.1,1.1,0,1,1,1.56,1.56L29.69,75A1.1,1.1,0,0,1,28.92,75.35Z" transform="translate(-3.08 -5.1)"/></svg>
</span>
</div>
<h3>bronzer</h3>
</label>
</div>
<div class="make-up">
<input type="checkbox" name="product-type" id="eyebrow" value="eyebrow">
<label for="eyebrow">
<div class="icon">
<span>
<svg id="Layer_1" class="white" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79.94 79.91"><defs><style>.white{fill:#fff;}</style></defs><title>eye_brow</title><path class="white" d="M28.22,64.05v0.08h0L28.52,70a1.28,1.28,0,0,0,.23.66L28.26,71.8a1.26,1.26,0,1,0,2.32,1h0l0.49-1.19a1.28,1.28,0,0,0,.63-0.3L36,67.44h0V67.38a1.19,1.19,0,0,0,.22-0.33h0L55.91,19.4a1.26,1.26,0,0,0-.68-1.64l-5.71-2.35a1.26,1.26,0,0,0-1.64.68L28.3,63.61v0.05A1.23,1.23,0,0,0,28.22,64.05Zm6.3,0.76-3.41-1.4L47.72,23l3.41,1.4ZM31,68.55L30.83,66l2,0.84ZM53.11,19.61l-1,2.48-3.41-1.4,1-2.48Z" transform="translate(0.01 0)"/><path class="white" d="M54.66,26.67a1.26,1.26,0,0,0-.09,1.77L58.74,33a1.26,1.26,0,0,0,1.77.09l19-17.25a1.25,1.25,0,0,0,.08-1.77L75.52,9.46a1.26,1.26,0,0,0-1.77-.09ZM76.94,14.81L59.76,30.41l-2.48-2.73L74.46,12.07Z" transform="translate(0.01 0)"/><rect class="white" x="48.3" y="8.97" width="16.36" height="2.47" transform="translate(25.56 58.55) rotate(-67.64)"/><path class="white" d="M60.69,3.21a1.23,1.23,0,1,1-2.28-.94C58.67,1.64,58,.72,60,1.65a1.2,1.2,0,0,1,.69,1.55h0Z" transform="translate(0.01 0)"/><path class="white" d="M56.84,8.92a1,1,0,0,1-.38-0.08L53.13,7.47a1,1,0,0,1,.76-1.85L57.22,7A1,1,0,0,1,56.84,8.92Z" transform="translate(0.01 0)"/><path class="white" d="M58,6.14a1,1,0,0,1-.38-0.08L54.27,4.69A1,1,0,0,1,55,2.85l3.33,1.37A1,1,0,0,1,58,6.14Z" transform="translate(0.01 0)"/><path class="white" d="M59.29,3.44a1,1,0,0,1-.38-0.08L55.42,1.92A1,1,0,1,1,56.18.08l3.49,1.44A1,1,0,0,1,59.29,3.44Z" transform="translate(0.01 0)"/><path class="white" d="M55.7,11.69a1,1,0,0,1-.38-0.08L52,10.24a1,1,0,0,1,.76-1.85l3.33,1.37A1,1,0,0,1,55.7,11.69Z" transform="translate(0.01 0)"/><path class="white" d="M54.56,14.47a1,1,0,0,1-.38-0.08L50.85,13a1,1,0,0,1,.76-1.85l3.33,1.37A1,1,0,0,1,54.56,14.47Z" transform="translate(0.01 0)"/><path class="white" d="M26.93,76.11C26.1,73.85,24.84,72.42,23.3,72a4.32,4.32,0,0,0-3.93,1,10.77,10.77,0,0,0-2,2.22A5.68,5.68,0,0,1,15,77.43C12.62,78.3,10.74,76,10,74.31A17,17,0,0,1,9,69.06a52.44,52.44,0,0,1,.27-7.55c0.08-1,.17-2,0.23-3a12.33,12.33,0,0,0-2.94-8.64,7.67,7.67,0,0,0-4.81-2.55l-0.55-.07A1.13,1.13,0,0,0,0,48.34s0,0,0,.06A1.15,1.15,0,0,0,1,49.53H1a5.3,5.3,0,0,1,3.75,1.85,10.14,10.14,0,0,1,2.33,7c-0.06,1-.14,1.94-0.22,2.93a57.23,57.23,0,0,0-.3,7.51,19.46,19.46,0,0,0,1.27,6.32c1.27,3.18,4.39,5.72,7.91,4.42a7.85,7.85,0,0,0,3.44-3,9.08,9.08,0,0,1,1.57-1.78,2.19,2.19,0,0,1,1.86-.61c0.76,0.22,1.55,1.23,2.09,2.71a1.16,1.16,0,0,0,1.48.68h0A1.14,1.14,0,0,0,26.93,76.11Z" transform="translate(0.01 0)"/></svg>
</span>
</div>
<h3>eyebrow</h3>
</label>
</div>
<div class="make-up">
<input type="checkbox" name="product-type" id="eyeliner" value="eyeliner">
<label for="eyeliner">
<div class="icon">
<span>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.81 79.82"><defs><style>.cls-1{fill:none;}</style></defs><title>playfield</title><path class="white" d="M41.34,56.17a1.26,1.26,0,0,0-1.24-1.27l-6.2-.08a1.26,1.26,0,0,0-1.27,1.24l-0.33,27.3a1.33,1.33,0,0,0,1.23,1.29l6.2,0.08A1.26,1.26,0,0,0,41,83.5Zm-6.51,26,0.34-24.78,3.69,0L38.51,82.23Z" transform="translate(-19.08 -7.24)"/><line class="cls-1" x1="6.67" y1="48.76" x2="2.98" y2="48.76"/><path class="white" d="M28.79,47.06l0-5.69L27,11.22l-0.5-.36A6.93,6.93,0,0,0,25,9.93V8.38a1.26,1.26,0,0,0-2.51,0V10a7.33,7.33,0,0,0-1.47.86l-0.5.36L19.08,41.53l0,5.26a0.58,0.58,0,0,0,0,.06V48a0.61,0.61,0,0,0,.5.6V85.79a1.27,1.27,0,0,0,1.25,1.26H27a1.27,1.27,0,0,0,1.25-1.26V48.62a0.61,0.61,0,0,0,.5-0.6v-1h0ZM23,12.63a1.28,1.28,0,0,1,.57-0.19,1.52,1.52,0,0,1,.95.22l1.7,27.52H22.93V42.7h3.33v3.55H21.61l0-4.67Zm2.72,71.91H22V76h3.69v8.58ZM22,73.45V48.64h3.69V73.45H22Z" transform="translate(-19.08 -7.24)"/><path class="white" d="M46.52,32.58a1.1,1.1,0,1,0-1.47-1.64L45,31v0L34.75,40.12h0L33,41.71a1.1,1.1,0,0,0,.74,1.92,1.08,1.08,0,0,0,.73-0.28l0.31-.28h0l3.5-3.12Z" transform="translate(-19.08 -7.24)"/><path class="white" d="M46.6,23.31A1.09,1.09,0,0,0,45,23.22l0,0h0l-6.95,6.19L33,34a1.09,1.09,0,0,0,1.27,1.76V35.8l0.19-.17h0L38,32.42h0l8.5-7.57A1.09,1.09,0,0,0,46.6,23.31Z" transform="translate(-19.08 -7.24)"/><path class="white" d="M46.62,15.39a1.09,1.09,0,0,0-1.55-.09L45,15.36h0l-2,1.75h0l-4.17,3.71L34.22,25h0l-1.29,1.15a1.09,1.09,0,0,0-.09,1.55,1.07,1.07,0,0,0,.82.37,1.08,1.08,0,0,0,.56-0.18v0l0.15-.14h0l5.17-4.6,2.85-2.54h0l4.12-3.67A1.1,1.1,0,0,0,46.62,15.39Z" transform="translate(-19.08 -7.24)"/></svg>
</span>
</div>
<h3>eyeliner</h3>
</label>
</div>
<div class="make-up">
<input type="checkbox" name="product-type" id="eyeshadow" value="eyeshadow">
<label for="eyeshadow">
<div class="icon">
<span>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.6 79.83"><title>eye_shadow</title><path class="white" d="M84.24,6.16H7.33A4.85,4.85,0,0,0,2.49,11v0.23L8.83,27.65a4.83,4.83,0,0,0,1.81,3.5,4.82,4.82,0,0,0-1.81,3.75V81.14A4.85,4.85,0,0,0,13.67,86H77.9a4.85,4.85,0,0,0,4.85-4.85V34.89a4.81,4.81,0,0,0-1.81-3.75,4.83,4.83,0,0,0,1.81-3.5l6.34-16.41V11A4.85,4.85,0,0,0,84.24,6.16Zm-4,75a2.34,2.34,0,0,1-2.34,2.34H13.67a2.34,2.34,0,0,1-2.34-2.34V34.89a2.34,2.34,0,0,1,2.34-2.34H77.9a2.34,2.34,0,0,1,2.34,2.34V81.14h0Zm0-54v0.23a2.34,2.34,0,0,1-2.34,2.34H13.67a2.34,2.34,0,0,1-2.34-2.34V27.16L5,10.8A2.34,2.34,0,0,1,7.33,8.67h76.9a2.34,2.34,0,0,1,2.33,2.13Z" transform="translate(-2.49 -6.16)"/><path class="white" d="M73.48,34.62H18.09A4.39,4.39,0,0,0,13.7,39V64.86A4.37,4.37,0,0,0,15,68a4.37,4.37,0,0,0-1.3,3.11v5a4.39,4.39,0,0,0,4.38,4.38h55.4a4.39,4.39,0,0,0,4.38-4.38v-5A4.36,4.36,0,0,0,76.56,68a4.37,4.37,0,0,0,1.3-3.11V39A4.39,4.39,0,0,0,73.48,34.62Zm1.87,36.46v5a1.87,1.87,0,0,1-1.87,1.87H18.09a1.87,1.87,0,0,1-1.87-1.87v-5a1.87,1.87,0,0,1,1.72-1.86l0.16,0h55.4l0.16,0A1.87,1.87,0,0,1,75.35,71.08ZM73.48,66.7H18.09l-0.16,0a1.87,1.87,0,0,1-1.72-1.86V39a1.87,1.87,0,0,1,1.87-1.87h55.4A1.87,1.87,0,0,1,75.35,39V64.86a1.87,1.87,0,0,1-1.71,1.86Z" transform="translate(-2.49 -6.16)"/><path class="white" d="M67.8,40.55H24.22a4.85,4.85,0,0,0-4.85,4.85V58.47a4.86,4.86,0,0,0,4.85,4.85H67.8a4.86,4.86,0,0,0,4.85-4.85V45.4A4.86,4.86,0,0,0,67.8,40.55ZM54,43.06V60.81H39V43.06H54ZM21.89,58.47V45.4a2.34,2.34,0,0,1,2.34-2.34H36.44V60.81H24.22A2.34,2.34,0,0,1,21.89,58.47Zm48.25,0a2.34,2.34,0,0,1-2.34,2.34H56.52V43.06H67.8a2.34,2.34,0,0,1,2.34,2.34V58.47h0Z" transform="translate(-2.49 -6.16)"/><path class="white" d="M69.48,70h-2.6a3.54,3.54,0,0,0-3.31,2.29H29.72V71.5L20,69.78v7.58l9.69-1.71V74.83H63.57a3.55,3.55,0,0,0,3.31,2.29h2.6A3.55,3.55,0,0,0,69.48,70ZM22.53,74.37V72.78L27,73.57Zm46.95,0.24h-2.6a1,1,0,1,1,0-2.08h2.6A1,1,0,0,1,69.48,74.61Z" transform="translate(-2.49 -6.16)"/><rect class="white" x="25.22" y="51.19" width="8.85" height="2.51" transform="translate(-30.89 30.18) rotate(-45.01)"/><rect class="white" x="42.04" y="51.19" width="8.85" height="2.51" transform="translate(-25.96 42.07) rotate(-45.01)"/><rect class="white" x="58.22" y="51.19" width="8.84" height="2.51" transform="translate(-21.22 53.5) rotate(-45)"/><rect class="white" x="26.27" y="18.75" width="24.17" height="2.51" transform="translate(-7.39 13.81) rotate(-27.5)"/><rect class="white" x="42.97" y="17.5" width="24.17" height="2.51" transform="translate(-4.92 21.43) rotate(-27.54)"/></svg>
</span>
</div>
<h3>eyeshadow</h3>
</label>
</div>
<div class="make-up">
<input type="checkbox" name="product-type" id="foundation" value="foundation">
<label for="foundation">
<div class="icon">
<span>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.84 89.5"><title>foundation</title><path class="white" d="M9.18,26.34V90.5H35.61V1H9.18V26.34ZM33.09,43h-12V75h12V88H11.69V28.85H33.09V43Zm0,2.51v27H23.65v-27h9.45ZM18.76,9.92H26v8.46H18.76V9.92Zm9.77,11h0.35v5.45h-13V20.89H28.53ZM11.69,3.52H33.09V26.34h-1.7v-8H28.53V9.92h3.13V7.41H16.25v11H13.39v8h-1.7V3.52Z" transform="translate(-9.18 -1.01)"/><path class="white" d="M40.25,90H83V50.56H40.25V90Zm40.26-9.39H59.72V69H80.51V80.63Zm0-27.56v7.47h-5.3v2.51h5.3v3.48H57.21V83.14h23.3v4.38H42.76V63.05h29V60.54h-29V53.07H80.51Z" transform="translate(-9.18 -1.01)"/></svg>
</span>
</div>
<h3>foundation</h3>
</label>
</div>
<div class="make-up">
<input type="checkbox" name="product-type" id="lipliner" value="lipliner">
<label for="lipliner">
<div class="icon">
<span>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.11 87.27"><title>eye_liner</title><path class="white" d="M44.27,18.26l0-.07v0l-2.51-5.22a1.28,1.28,0,0,0-.47-0.52V11.12a1.26,1.26,0,0,0-2.51,0v1.29a1.28,1.28,0,0,0-.47.52l-2.51,5.22v0l0,0.07a1.19,1.19,0,0,0-.08.38,0.54,0.54,0,0,0,0,.06V88.51a1.26,1.26,0,0,0,1.25,1.26h6.2a1.26,1.26,0,0,0,1.25-1.26V18.7s0,0,0-.06A1.23,1.23,0,0,0,44.27,18.26ZM38.15,20h3.69V82.07H38.15V20ZM40,15.14l1.1,2.3H38.9ZM38.15,87.26V84.58h3.69v2.68H38.15Z" transform="translate(-16.09 -2.5)"/><path class="white" d="M24.37,59.07a1.26,1.26,0,0,0-1.6-.76l-5.84,2.08a1.26,1.26,0,0,0-.76,1.6L24.8,86.22a1.26,1.26,0,0,0,1.18.83A1.25,1.25,0,0,0,26.4,87l5.84-2.08a1.26,1.26,0,0,0,.76-1.6Zm2.37,25.13L19,62.33l3.48-1.24L30.22,83Z" transform="translate(-16.09 -2.5)"/><path class="white" d="M75.3,38.23A4.64,4.64,0,0,0,71,37.61,11.75,11.75,0,0,0,68,39a6.19,6.19,0,0,1-3.32,1.26C62,40.17,61,37.1,61.07,35.06c0.09-4.62,2.37-9,4.58-13.29,0.51-1,1-2,1.48-2.92a13.61,13.61,0,0,0,.73-10A8.24,8.24,0,0,0,63.6,4C57.8,1.26,46.87,2.21,42.37,7.25a1.25,1.25,0,0,0,1.87,1.67c3.66-4.1,13.39-5,18.27-2.64a5.71,5.71,0,0,1,3,3.43,11.2,11.2,0,0,1-.61,8c-0.46.95-1,1.9-1.46,2.87-2.34,4.52-4.76,9.19-4.86,14.4-0.07,3.75,2,7.62,6,7.77a8.54,8.54,0,0,0,4.71-1.61A9.91,9.91,0,0,1,71.62,40a2.35,2.35,0,0,1,2.11.16c0.67,0.54,1,1.89.95,3.61a1.25,1.25,0,0,0,1.19,1.31h0.06a1.26,1.26,0,0,0,1.25-1.2C77.31,41.28,76.66,39.31,75.3,38.23Z" transform="translate(-16.09 -2.5)"/></svg>
</span>
</div>
<h3>lipliner</h3>
</label>
</div>
<div class="make-up">
<input type="checkbox" name="product-type" id="lipstick" value="lipstick">
<label for="lipstick">
<div class="icon">
<span>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60.62 86.97"><title>lipstick</title><path class="white" d="M18.3,89.26H40.09a2.36,2.36,0,0,0,2.35-2.36V49.44a2.36,2.36,0,0,0-2.35-2.35,1.24,1.24,0,0,0-.47.09l-0.44.18v-10a1.26,1.26,0,0,0-1.26-1.26H37.51V3.54a1.26,1.26,0,0,0-1.9-1.08L21.49,11A1.26,1.26,0,0,0,20.88,12v24.1H20.47a1.26,1.26,0,0,0-1.26,1.26v18l-1.2.48a2.36,2.36,0,0,0-2.07,2.34V86.9A2.36,2.36,0,0,0,18.3,89.26ZM34,6.36c-2.68,5.43-7.07,5.83-9.34,5.61Zm-10.62,8a12.39,12.39,0,0,0,2.19.19A11.44,11.44,0,0,0,31,13.21,11.6,11.6,0,0,0,35,9.6V36.14H23.39V14.32ZM21.72,38.65H36.67v9.68L23.81,53.56l-2.09.84V38.65ZM18.45,58.39a1.17,1.17,0,0,0,.31-0.08l2.12-.85h0.05l3.37-1.37,15.62-6.31v37H18.45V58.39Z" transform="translate(-15.94 -2.29)"/><rect class="white" x="14.31" y="13.66" width="2.51" height="8.65"/><path class="white" d="M30.63,27.79a1.24,1.24,0,0,0,0,1.78,1.26,1.26,0,0,0,.88.36,1.29,1.29,0,0,0,.89-0.36,1.25,1.25,0,0,0,.37-0.89,1.21,1.21,0,0,0-.37-0.88A1.28,1.28,0,0,0,30.63,27.79Z" transform="translate(-15.94 -2.29)"/><rect class="white" x="19.78" y="68.21" width="2.51" height="13.19"/><path class="white" d="M36.09,66a1.31,1.31,0,0,0-.37.89A1.27,1.27,0,0,0,37,68.18a1.28,1.28,0,0,0,1.25-1.25A1.25,1.25,0,0,0,36.09,66Z" transform="translate(-15.94 -2.29)"/><path class="white" d="M76.56,86.9V29.64a2.36,2.36,0,0,0-2.35-2.35H52.41a2.36,2.36,0,0,0-2.35,2.35V86.9a2.36,2.36,0,0,0,2.35,2.36h21.8A2.36,2.36,0,0,0,76.56,86.9ZM74.05,29.8V72.11H69.49v2.51h4.56v4.51H52.57V74.62H66.35V72.11H52.57V29.8H74.05ZM52.57,86.75V81.64H74.05v5.11H52.57Z" transform="translate(-15.94 -2.29)"/></svg>
</span>
</div>
<h3>lipstick</h3>
</label>
</div>
<div class="make-up">
<input type="checkbox" name="product-type" id="mascara" value="mascara">
<label for="mascara">
<div class="icon">
<span>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.39 85.81"><title>mascara</title><path class="white" d="M71.83,54.34H64.7V34.9h3.76a1.26,1.26,0,0,0,0-2.51H64.7V30H71a1.26,1.26,0,0,0,0-2.51H64.7V25.14h7.52a1.26,1.26,0,1,0,0-2.51H64.7V20.25h7.52a1.26,1.26,0,1,0,0-2.51H64.7V15.37H71a1.26,1.26,0,0,0,0-2.51H64.7V10.58s0-.06,0-0.1h3.78a1.26,1.26,0,0,0,0-2.51h-10a1.26,1.26,0,1,0,0,2.51h3.78s0,0.06,0,.1v2.28H55.91a1.26,1.26,0,0,0,0,2.51h6.27v2.37H54.66a1.26,1.26,0,1,0,0,2.51h7.53v2.37H54.66a1.26,1.26,0,1,0,0,2.51h7.53v2.38H55.91a1.26,1.26,0,0,0,0,2.51h6.27v2.37H58.43a1.26,1.26,0,1,0,0,2.51h3.76V54.35H55.05A2.36,2.36,0,0,0,52.7,56.7V86.35a2.36,2.36,0,0,0,2.35,2.36H71.83a2.36,2.36,0,0,0,2.36-2.36V56.7A2.35,2.35,0,0,0,71.83,54.34Zm-0.15,2.51v14.7H69.62v2.51h2.05v4.51H55.21V74.07H66.48V71.56H55.21V56.85H71.67ZM55.21,86.19V81.08H71.67v5.11H55.21Z" transform="translate(-18.79 -2.89)"/><path class="white" d="M39.17,2.89h-18a2.36,2.36,0,0,0-2.35,2.35v81.1a2.36,2.36,0,0,0,2.35,2.36h18a2.36,2.36,0,0,0,2.35-2.36V5.24A2.36,2.36,0,0,0,39.17,2.89ZM39,5.4V32.12H37v2.51h2V40.4H21.3V34.63H33.82V32.12H21.3V5.4H39ZM21.3,86.19V42.9H39V86.19H21.3Z" transform="translate(-18.79 -2.89)"/></svg>
</span>
</div>
<h3>mascara</h3>
</label>
</div>
<div class="make-up">
<input type="checkbox" name="product-type" id="nailpolish" value="nailpolish">
<label for="nailpolish">
<div class="icon">
<span>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.3 88.71"><title>nailpolish</title><path class="white" d="M45.09,47.87L39.2,2.26h-11L22.28,47.87a23.84,23.84,0,0,0-7.09,17.44V85.39h2.34c0,2.66,2.73,4.81,6.06,4.81H43.77c3.32,0,6-2.15,6.06-4.81h2.35V65.31A23.86,23.86,0,0,0,45.09,47.87ZM30.37,4.77H37l5.35,41.47H25Zm13.4,82.92H23.59c-1.9,0-3.51-1.05-3.55-2.3H47.31C47.28,86.64,45.67,87.69,43.77,87.69Zm5.9-4.81h-32V65.31c0-6.75,2.75-12.91,7.39-16.56h17.2c4.63,3.65,7.38,9.81,7.38,16.56V82.88Z" transform="translate(-15.18 -2.26)"/><path class="white" d="M33.68,57.83A10.59,10.59,0,1,0,44.28,68.42,10.61,10.61,0,0,0,33.68,57.83Zm0,18.68a8.08,8.08,0,1,1,8.08-8.09A8.09,8.09,0,0,1,33.68,76.51Z" transform="translate(-15.18 -2.26)"/><path class="white" d="M41,51.44l-1.5,2a13.64,13.64,0,0,1,4.14,5.29l2.28-1A16.15,16.15,0,0,0,41,51.44Z" transform="translate(-15.18 -2.26)"/><rect class="white" x="35.21" y="13.07" width="2.51" height="20.05" transform="translate(-17.76 2.43) rotate(-7.11)"/><path class="white" d="M39.3,37.74a1.29,1.29,0,0,0-1.77,0,1.21,1.21,0,0,0-.37.88,1.25,1.25,0,0,0,1.26,1.26,1.27,1.27,0,0,0,.89-0.37A1.26,1.26,0,0,0,39.3,37.74Z" transform="translate(-15.18 -2.26)"/><rect class="white" x="59.74" y="68.88" width="20.05" height="2.51" transform="translate(-23.65 128.43) rotate(-82.89)"/><path class="white" d="M71.7,55.86a1.26,1.26,0,0,0,.89-2.14,1.25,1.25,0,0,0-2.15.89,1.28,1.28,0,0,0,.38.89A1.21,1.21,0,0,0,71.7,55.86Z" transform="translate(-15.18 -2.26)"/><path class="white" d="M45.94,62a1.26,1.26,0,0,0,.89-2.14,1.25,1.25,0,0,0-2.15.89,1.28,1.28,0,0,0,.38.89A1.21,1.21,0,0,0,45.94,62Z" transform="translate(-15.18 -2.26)"/><path class="white" d="M68.23,16.11H69l1.71-9.69H63.18l1.71,9.69h0.82V44.49H55.45l6,46.49h11l6-46.49H68.23V16.11ZM67.77,8.92L67,13.43,66.18,8.92h1.59Zm2.51,79.54H63.66L58.31,47H75.63Z" transform="translate(-15.18 -2.26)"/></svg>
</span>
</div>
<h3>nailpolish</h3>
</label>
</div>
</div>
<div class="btn-wrapper">
<button id="back1">Back</button>
<button id="next1">Next</button>
</div>
</fieldset>
</div>
</section>
<section id="section3">
<div class="section-wrapper">
<fieldset>
<div class="title">
<h2>Select Your Price Range</h2>
<p>Are you feeling frugal or do you want to splurge?</p>
</div>
<div class="price-wrapper">
<div class="sec3-price">
<input id="$" name="makeup-price" type="radio" value="0,10">
<label for="$">
<div class="icon">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.83 212.02"><path class="white" d="M69.71,244.34c-21.8,0-39.46-18.22-39.46-40.68S47.93,163,69.73,163a38.78,38.78,0,0,1,25.65,9.76A41.33,41.33,0,0,1,109,199.62c0.13,1.34.18,2.7,0.18,4,0,3.28,4.95,3.28,4.94,0a47.15,47.15,0,0,0-11.32-30.52,44.26,44.26,0,0,0-27.87-14.91,43.2,43.2,0,0,0-30.72,8,46.23,46.23,0,0,0-17.63,26.54,47.46,47.46,0,0,0,4.18,32.89,45.33,45.33,0,0,0,23.56,20.94,42.87,42.87,0,0,0,15.39,2.83c3.18,0,3.18-5.07,0-5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M69.71,249.52c21.8,0,39.47,18.22,39.46,40.68S91.5,330.87,69.7,330.87A38.78,38.78,0,0,1,44,321.1a41.33,41.33,0,0,1-13.63-26.87c-0.13-1.34-.18-2.69-0.18-4,0-3.28-4.95-3.28-4.94,0a47.15,47.15,0,0,0,11.32,30.52,44.26,44.26,0,0,0,27.87,14.91,43.19,43.19,0,0,0,30.72-8,46.23,46.23,0,0,0,17.63-26.54,47.46,47.46,0,0,0-4.18-32.89,45.33,45.33,0,0,0-23.56-20.94,42.87,42.87,0,0,0-15.39-2.83c-3.18,0-3.18,5.07,0,5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M67.14,146.45v207.1a2.47,2.47,0,0,0,4.94,0V146.45a2.47,2.47,0,0,0-4.94,0h0Z" transform="translate(-25.3 -143.99)"/></svg>
</div>
<h3>< $10</h3>
</label>
</div>
<div class="sec3-price">
<input id="$$" name="makeup-price" type="radio" value="10,25">
<label for="$$">
<div class="icon">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210.41 212.02"><path class="white" d="M69.71,244.34c-21.8,0-39.46-18.22-39.46-40.68S47.93,163,69.73,163a38.78,38.78,0,0,1,25.65,9.76A41.33,41.33,0,0,1,109,199.62c0.13,1.34.18,2.7,0.18,4,0,3.28,4.95,3.28,4.94,0a47.15,47.15,0,0,0-11.32-30.52,44.26,44.26,0,0,0-27.87-14.91,43.2,43.2,0,0,0-30.72,8,46.23,46.23,0,0,0-17.63,26.54,47.46,47.46,0,0,0,4.18,32.89,45.33,45.33,0,0,0,23.56,20.94,42.87,42.87,0,0,0,15.39,2.83c3.18,0,3.18-5.07,0-5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M69.71,249.52c21.8,0,39.47,18.22,39.46,40.68S91.5,330.87,69.7,330.87A38.78,38.78,0,0,1,44,321.1a41.33,41.33,0,0,1-13.63-26.87c-0.13-1.34-.18-2.69-0.18-4,0-3.28-4.95-3.28-4.94,0a47.15,47.15,0,0,0,11.32,30.52,44.26,44.26,0,0,0,27.87,14.91,43.19,43.19,0,0,0,30.72-8,46.23,46.23,0,0,0,17.63-26.54,47.46,47.46,0,0,0-4.18-32.89,45.33,45.33,0,0,0-23.56-20.94,42.87,42.87,0,0,0-15.39-2.83c-3.18,0-3.18,5.07,0,5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M67.14,146.45v207.1a2.47,2.47,0,0,0,4.94,0V146.45a2.47,2.47,0,0,0-4.94,0h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M191.3,244.34c-21.8,0-39.46-18.22-39.46-40.68S169.52,163,191.31,163A38.78,38.78,0,0,1,217,172.75a41.33,41.33,0,0,1,13.63,26.87c0.13,1.34.18,2.7,0.18,4,0,3.28,4.95,3.28,4.94,0a47.15,47.15,0,0,0-11.32-30.52,44.26,44.26,0,0,0-27.87-14.91,43.2,43.2,0,0,0-30.72,8,46.23,46.23,0,0,0-17.63,26.54,47.46,47.46,0,0,0,4.18,32.89,45.33,45.33,0,0,0,23.56,20.94,42.87,42.87,0,0,0,15.39,2.83c3.18,0,3.18-5.07,0-5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M191.3,249.52c21.8,0,39.47,18.22,39.46,40.68s-17.68,40.67-39.48,40.67a38.78,38.78,0,0,1-25.65-9.77A41.33,41.33,0,0,1,152,294.23c-0.13-1.34-.18-2.69-0.18-4,0-3.28-4.95-3.28-4.94,0a47.15,47.15,0,0,0,11.32,30.52,44.26,44.26,0,0,0,27.87,14.91,43.19,43.19,0,0,0,30.72-8,46.23,46.23,0,0,0,17.63-26.54,47.46,47.46,0,0,0-4.18-32.89,45.33,45.33,0,0,0-23.56-20.94,42.87,42.87,0,0,0-15.39-2.83c-3.18,0-3.18,5.07,0,5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M188.72,146.45v207.1a2.47,2.47,0,0,0,4.94,0V146.45a2.47,2.47,0,0,0-4.94,0h0Z" transform="translate(-25.3 -143.99)"/></svg>
</div>
<h3>$10 - 25</h3>
</label>
</div>
<div class="sec3-price">
<input id="$$$" name="makeup-price" type="radio" value="25,50">
<label for="$$$">
<div class="icon">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 332 212.02"><path class="white" d="M69.71,244.34c-21.8,0-39.46-18.22-39.46-40.68S47.93,163,69.73,163a38.78,38.78,0,0,1,25.65,9.76A41.33,41.33,0,0,1,109,199.62c0.13,1.34.18,2.7,0.18,4,0,3.28,4.95,3.28,4.94,0a47.15,47.15,0,0,0-11.32-30.52,44.26,44.26,0,0,0-27.87-14.91,43.2,43.2,0,0,0-30.72,8,46.23,46.23,0,0,0-17.63,26.54,47.46,47.46,0,0,0,4.18,32.89,45.33,45.33,0,0,0,23.56,20.94,42.87,42.87,0,0,0,15.39,2.83c3.18,0,3.18-5.07,0-5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M69.71,249.52c21.8,0,39.47,18.22,39.46,40.68S91.5,330.87,69.7,330.87A38.78,38.78,0,0,1,44,321.1a41.33,41.33,0,0,1-13.63-26.87c-0.13-1.34-.18-2.69-0.18-4,0-3.28-4.95-3.28-4.94,0a47.15,47.15,0,0,0,11.32,30.52,44.26,44.26,0,0,0,27.87,14.91,43.19,43.19,0,0,0,30.72-8,46.23,46.23,0,0,0,17.63-26.54,47.46,47.46,0,0,0-4.18-32.89,45.33,45.33,0,0,0-23.56-20.94,42.87,42.87,0,0,0-15.39-2.83c-3.18,0-3.18,5.07,0,5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M67.14,146.45v207.1a2.47,2.47,0,0,0,4.94,0V146.45a2.47,2.47,0,0,0-4.94,0h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M312.88,244.34c-21.8,0-39.46-18.22-39.46-40.68S291.1,163,312.9,163a38.78,38.78,0,0,1,25.65,9.76,41.33,41.33,0,0,1,13.63,26.87c0.13,1.34.18,2.7,0.18,4,0,3.28,4.95,3.28,4.94,0A47.15,47.15,0,0,0,346,173.14a44.26,44.26,0,0,0-27.87-14.91,43.2,43.2,0,0,0-30.72,8,46.23,46.23,0,0,0-17.63,26.54,47.46,47.46,0,0,0,4.18,32.89,45.33,45.33,0,0,0,23.56,20.94,42.87,42.87,0,0,0,15.39,2.83c3.18,0,3.18-5.07,0-5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M312.88,249.52c21.8,0,39.47,18.22,39.46,40.68s-17.68,40.67-39.48,40.67a38.78,38.78,0,0,1-25.65-9.77,41.33,41.33,0,0,1-13.63-26.87c-0.13-1.34-.18-2.69-0.18-4,0-3.28-4.95-3.28-4.94,0a47.15,47.15,0,0,0,11.32,30.52,44.26,44.26,0,0,0,27.87,14.91,43.19,43.19,0,0,0,30.72-8A46.23,46.23,0,0,0,356,301.09a47.46,47.46,0,0,0-4.18-32.89,45.33,45.33,0,0,0-23.56-20.94,42.87,42.87,0,0,0-15.39-2.83c-3.18,0-3.18,5.07,0,5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M310.31,146.45v207.1a2.47,2.47,0,0,0,4.94,0V146.45a2.47,2.47,0,0,0-4.94,0h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M191.3,244.34c-21.8,0-39.46-18.22-39.46-40.68S169.52,163,191.31,163A38.78,38.78,0,0,1,217,172.75a41.33,41.33,0,0,1,13.63,26.87c0.13,1.34.18,2.7,0.18,4,0,3.28,4.95,3.28,4.94,0a47.15,47.15,0,0,0-11.32-30.52,44.26,44.26,0,0,0-27.87-14.91,43.2,43.2,0,0,0-30.72,8,46.23,46.23,0,0,0-17.63,26.54,47.46,47.46,0,0,0,4.18,32.89,45.33,45.33,0,0,0,23.56,20.94,42.87,42.87,0,0,0,15.39,2.83c3.18,0,3.18-5.07,0-5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M191.3,249.52c21.8,0,39.47,18.22,39.46,40.68s-17.68,40.67-39.48,40.67a38.78,38.78,0,0,1-25.65-9.77A41.33,41.33,0,0,1,152,294.23c-0.13-1.34-.18-2.69-0.18-4,0-3.28-4.95-3.28-4.94,0a47.15,47.15,0,0,0,11.32,30.52,44.26,44.26,0,0,0,27.87,14.91,43.19,43.19,0,0,0,30.72-8,46.23,46.23,0,0,0,17.63-26.54,47.46,47.46,0,0,0-4.18-32.89,45.33,45.33,0,0,0-23.56-20.94,42.87,42.87,0,0,0-15.39-2.83c-3.18,0-3.18,5.07,0,5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M188.72,146.45v207.1a2.47,2.47,0,0,0,4.94,0V146.45a2.47,2.47,0,0,0-4.94,0h0Z" transform="translate(-25.3 -143.99)"/></svg>
</div>
<h3>$25 - 50</h3>
</label>
</div>
<div class="sec3-price">
<input id="$$$$" name="makeup-price" type="radio" value="50,1000">
<label for="$$$$">
<div class="icon">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451.4 212.02"><path class="white" d="M69.71,244.34c-21.8,0-39.46-18.22-39.46-40.68S47.93,163,69.73,163a38.78,38.78,0,0,1,25.65,9.76A41.33,41.33,0,0,1,109,199.62c0.13,1.34.18,2.7,0.18,4,0,3.28,4.95,3.28,4.94,0a47.15,47.15,0,0,0-11.32-30.52,44.26,44.26,0,0,0-27.87-14.91,43.2,43.2,0,0,0-30.72,8,46.23,46.23,0,0,0-17.63,26.54,47.46,47.46,0,0,0,4.18,32.89,45.33,45.33,0,0,0,23.56,20.94,42.87,42.87,0,0,0,15.39,2.83c3.18,0,3.18-5.07,0-5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M69.71,249.52c21.8,0,39.47,18.22,39.46,40.68S91.5,330.87,69.7,330.87A38.78,38.78,0,0,1,44,321.1a41.33,41.33,0,0,1-13.63-26.87c-0.13-1.34-.18-2.69-0.18-4,0-3.28-4.95-3.28-4.94,0a47.15,47.15,0,0,0,11.32,30.52,44.26,44.26,0,0,0,27.87,14.91,43.19,43.19,0,0,0,30.72-8,46.23,46.23,0,0,0,17.63-26.54,47.46,47.46,0,0,0-4.18-32.89,45.33,45.33,0,0,0-23.56-20.94,42.87,42.87,0,0,0-15.39-2.83c-3.18,0-3.18,5.07,0,5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M67.14,146.45v207.1a2.47,2.47,0,0,0,4.94,0V146.45a2.47,2.47,0,0,0-4.94,0h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M312.88,244.34c-21.8,0-39.46-18.22-39.46-40.68S291.1,163,312.9,163a38.78,38.78,0,0,1,25.65,9.76,41.33,41.33,0,0,1,13.63,26.87c0.13,1.34.18,2.7,0.18,4,0,3.28,4.95,3.28,4.94,0A47.15,47.15,0,0,0,346,173.14a44.26,44.26,0,0,0-27.87-14.91,43.2,43.2,0,0,0-30.72,8,46.23,46.23,0,0,0-17.63,26.54,47.46,47.46,0,0,0,4.18,32.89,45.33,45.33,0,0,0,23.56,20.94,42.87,42.87,0,0,0,15.39,2.83c3.18,0,3.18-5.07,0-5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M312.88,249.52c21.8,0,39.47,18.22,39.46,40.68s-17.68,40.67-39.48,40.67a38.78,38.78,0,0,1-25.65-9.77,41.33,41.33,0,0,1-13.63-26.87c-0.13-1.34-.18-2.69-0.18-4,0-3.28-4.95-3.28-4.94,0a47.15,47.15,0,0,0,11.32,30.52,44.26,44.26,0,0,0,27.87,14.91,43.19,43.19,0,0,0,30.72-8A46.23,46.23,0,0,0,356,301.09a47.46,47.46,0,0,0-4.18-32.89,45.33,45.33,0,0,0-23.56-20.94,42.87,42.87,0,0,0-15.39-2.83c-3.18,0-3.18,5.07,0,5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M310.31,146.45v207.1a2.47,2.47,0,0,0,4.94,0V146.45a2.47,2.47,0,0,0-4.94,0h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M432.29,244.34c-21.8,0-39.46-18.22-39.46-40.68S410.51,163,432.3,163A38.78,38.78,0,0,1,458,172.75a41.33,41.33,0,0,1,13.63,26.87c0.13,1.34.18,2.7,0.18,4,0,3.28,4.95,3.28,4.94,0a47.15,47.15,0,0,0-11.32-30.52,44.26,44.26,0,0,0-27.87-14.91,43.2,43.2,0,0,0-30.72,8,46.23,46.23,0,0,0-17.63,26.54,47.46,47.46,0,0,0,4.18,32.89,45.33,45.33,0,0,0,23.56,20.94,42.87,42.87,0,0,0,15.39,2.83c3.18,0,3.18-5.07,0-5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M432.29,249.52c21.8,0,39.47,18.22,39.46,40.68s-17.68,40.67-39.48,40.67a38.78,38.78,0,0,1-25.65-9.77A41.33,41.33,0,0,1,393,294.23c-0.13-1.34-.18-2.69-0.18-4,0-3.28-4.95-3.28-4.94,0a47.15,47.15,0,0,0,11.32,30.52,44.26,44.26,0,0,0,27.87,14.91,43.19,43.19,0,0,0,30.72-8,46.23,46.23,0,0,0,17.63-26.54,47.46,47.46,0,0,0-4.18-32.89,45.33,45.33,0,0,0-23.56-20.94,42.87,42.87,0,0,0-15.39-2.83c-3.18,0-3.18,5.07,0,5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M429.71,146.45v207.1a2.47,2.47,0,0,0,4.94,0V146.45a2.47,2.47,0,0,0-4.94,0h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M191.3,244.34c-21.8,0-39.46-18.22-39.46-40.68S169.52,163,191.31,163A38.78,38.78,0,0,1,217,172.75a41.33,41.33,0,0,1,13.63,26.87c0.13,1.34.18,2.7,0.18,4,0,3.28,4.95,3.28,4.94,0a47.15,47.15,0,0,0-11.32-30.52,44.26,44.26,0,0,0-27.87-14.91,43.2,43.2,0,0,0-30.72,8,46.23,46.23,0,0,0-17.63,26.54,47.46,47.46,0,0,0,4.18,32.89,45.33,45.33,0,0,0,23.56,20.94,42.87,42.87,0,0,0,15.39,2.83c3.18,0,3.18-5.07,0-5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M191.3,249.52c21.8,0,39.47,18.22,39.46,40.68s-17.68,40.67-39.48,40.67a38.78,38.78,0,0,1-25.65-9.77A41.33,41.33,0,0,1,152,294.23c-0.13-1.34-.18-2.69-0.18-4,0-3.28-4.95-3.28-4.94,0a47.15,47.15,0,0,0,11.32,30.52,44.26,44.26,0,0,0,27.87,14.91,43.19,43.19,0,0,0,30.72-8,46.23,46.23,0,0,0,17.63-26.54,47.46,47.46,0,0,0-4.18-32.89,45.33,45.33,0,0,0-23.56-20.94,42.87,42.87,0,0,0-15.39-2.83c-3.18,0-3.18,5.07,0,5.09h0Z" transform="translate(-25.3 -143.99)"/><path class="white" d="M188.72,146.45v207.1a2.47,2.47,0,0,0,4.94,0V146.45a2.47,2.47,0,0,0-4.94,0h0Z" transform="translate(-25.3 -143.99)"/></svg>
</div>
<h3>$50 +</h3>
</label>
</div>
</div>
<div class="btn-wrapper">
<button id="back2">Back</button>
<input type="submit" value="Next" id="next2">
</div>
</fieldset>
</form>
</div>
</section>
<section id="section4">
<div class="title">
<h2>Choose your Products</h2>
<p>Select up to 3</p>
</div>
<div class="last-results">
</div>
<div class="btn-wrapper">
<button id="back3">Back</button>
<button id="next3">Next</button>
</div>
</section>
<section id="section5">
<div class="section-wrapper">
<div class="finalKit">
<div class="title">
<h2>Here's your kit!</h2>
</div>
<div class="finalSection"></div>
<div class="btn-wrapper">
<button id="restart">Find More Makeup</button>
<a href="https://twitter.com/intent/tweet?text=Make your own kit!" target="_blank"><button id="tweet"><i class="fa fa-twitter" aria-hidden="true"></i> Tweet</button></a>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="public/scripts/main.js"></script>
</body>
</html>