Skip to content

Commit e13ddf4

Browse files
AbernachyAbernachy
authored
Merge pull request #18 from Aber-Learningforks/designs/whitespace
did some work
2 parents 2024c17 + 204432f commit e13ddf4

File tree

2 files changed

+191
-1
lines changed

2 files changed

+191
-1
lines changed

‎projectfolder/Design/index.html‎

Lines changed: 155 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ <h3>The Laid Back</h3>
139139
<li>
140140
<svg
141141
xmlns="http://www.w3.org/2000/svg"
142-
class="features-icon"
142+
class="chair-icon"
143143
fill="none"
144144
viewBox="0 0 24 24"
145145
stroke="currentColor"
@@ -155,12 +155,54 @@ <h3>The Laid Back</h3>
155155
<span>Leisure and relaxing</span>
156156
</li>
157157
<li>
158+
<svg
159+
xmlns="http://www.w3.org/2000/svg"
160+
class="chair-icon"
161+
fill="none"
162+
viewBox="0 0 24 24"
163+
stroke="currentColor"
164+
stroke-width="2"
165+
>
166+
<path
167+
stroke-linecap="round"
168+
stroke-linejoin="round"
169+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
170+
/>
171+
</svg>
158172
<span>Comfortable for 4h</span>
159173
</li>
160174
<li>
175+
<svg
176+
xmlns="http://www.w3.org/2000/svg"
177+
class="chair-icon"
178+
fill="none"
179+
viewBox="0 0 24 24"
180+
stroke="currentColor"
181+
stroke-width="2"
182+
>
183+
<path
184+
stroke-linecap="round"
185+
stroke-linejoin="round"
186+
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
187+
/>
188+
</svg>
161189
<span>Vegan leather</span>
162190
</li>
163191
<li>
192+
<svg
193+
xmlns="http://www.w3.org/2000/svg"
194+
class="chair-icon"
195+
fill="none"
196+
viewBox="0 0 24 24"
197+
stroke="currentColor"
198+
stroke-width="2"
199+
>
200+
<path
201+
stroke-linecap="round"
202+
stroke-linejoin="round"
203+
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
204+
/>
205+
</svg>
164206
<span>Weighs 16 kg</span>
165207
</li>
166208
</ul>
@@ -178,15 +220,71 @@ <h3>The Laid Back</h3>
178220
<h3>The Worker Bee</h3>
179221
<ul class="chair-details">
180222
<li>
223+
<svg
224+
xmlns="http://www.w3.org/2000/svg"
225+
class="chair-icon"
226+
fill="none"
227+
viewBox="0 0 24 24"
228+
stroke="currentColor"
229+
stroke-width="2"
230+
>
231+
<path
232+
stroke-linecap="round"
233+
stroke-linejoin="round"
234+
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
235+
/>
236+
</svg>
181237
<span>Work</span>
182238
</li>
183239
<li>
240+
<svg
241+
xmlns="http://www.w3.org/2000/svg"
242+
class="chair-icon"
243+
fill="none"
244+
viewBox="0 0 24 24"
245+
stroke="currentColor"
246+
stroke-width="2"
247+
>
248+
<path
249+
stroke-linecap="round"
250+
stroke-linejoin="round"
251+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
252+
/>
253+
</svg>
184254
<span>Comfortable for 8h</span>
185255
</li>
186256
<li>
257+
<svg
258+
xmlns="http://www.w3.org/2000/svg"
259+
class="chair-icon"
260+
fill="none"
261+
viewBox="0 0 24 24"
262+
stroke="currentColor"
263+
stroke-width="2"
264+
>
265+
<path
266+
stroke-linecap="round"
267+
stroke-linejoin="round"
268+
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
269+
/>
270+
</svg>
187271
<span>Vegan leather</span>
188272
</li>
189273
<li>
274+
<svg
275+
xmlns="http://www.w3.org/2000/svg"
276+
class="chair-icon"
277+
fill="none"
278+
viewBox="0 0 24 24"
279+
stroke="currentColor"
280+
stroke-width="2"
281+
>
282+
<path
283+
stroke-linecap="round"
284+
stroke-linejoin="round"
285+
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
286+
/>
287+
</svg>
190288
<span>Weighs 22 kg</span>
191289
</li>
192290
</ul>
@@ -204,15 +302,71 @@ <h3>The Worker Bee</h3>
204302
<h3>The Chair 4/2</h3>
205303
<ul class="chair-details">
206304
<li>
305+
<svg
306+
xmlns="http://www.w3.org/2000/svg"
307+
class="chair-icon"
308+
fill="none"
309+
viewBox="0 0 24 24"
310+
stroke="currentColor"
311+
stroke-width="2"
312+
>
313+
<path
314+
stroke-linecap="round"
315+
stroke-linejoin="round"
316+
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
317+
/>
318+
</svg>
207319
<span>Leisure and relaxing</span>
208320
</li>
209321
<li>
322+
<svg
323+
xmlns="http://www.w3.org/2000/svg"
324+
class="chair-icon"
325+
fill="none"
326+
viewBox="0 0 24 24"
327+
stroke="currentColor"
328+
stroke-width="2"
329+
>
330+
<path
331+
stroke-linecap="round"
332+
stroke-linejoin="round"
333+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
334+
/>
335+
</svg>
210336
<span>Comfortable all day!</span>
211337
</li>
212338
<li>
339+
<svg
340+
xmlns="http://www.w3.org/2000/svg"
341+
class="chair-icon"
342+
fill="none"
343+
viewBox="0 0 24 24"
344+
stroke="currentColor"
345+
stroke-width="2"
346+
>
347+
<path
348+
stroke-linecap="round"
349+
stroke-linejoin="round"
350+
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
351+
/>
352+
</svg>
213353
<span>Organic cotton</span>
214354
</li>
215355
<li>
356+
<svg
357+
xmlns="http://www.w3.org/2000/svg"
358+
class="chair-icon"
359+
fill="none"
360+
viewBox="0 0 24 24"
361+
stroke="currentColor"
362+
stroke-width="2"
363+
>
364+
<path
365+
stroke-linecap="round"
366+
stroke-linejoin="round"
367+
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
368+
/>
369+
</svg>
216370
<span>Weighs 80 kg</span>
217371
</li>
218372
</ul>

‎projectfolder/Design/style.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,19 @@ h2 {
6363

6464
display: inline-block;
6565
font-weight: 500;
66+
67+
border-radius: 100px;
68+
}
69+
70+
.btn {
71+
/*not part of the lesson, just wanted to fuck around */
72+
transition: box-shadow 0.5s;
6673
}
6774

6875
.btn:hover,
6976
.btn:active {
7077
background-color: #099268;
78+
box-shadow: 0 0 100px 100px rgba(30, 5, 100, 1.2);
7179
}
7280

7381
.btn--big {
@@ -80,6 +88,10 @@ h2 {
8088
padding: 8px 12px;
8189
}
8290

91+
img {
92+
border-radius: 12px;
93+
}
94+
8395
/* ------------------------ */
8496
/* COMPONENT STYLES */
8597
/* ------------------------ */
@@ -102,6 +114,9 @@ h1 {
102114
/* / 44 / 52 / 62 / */
103115
line-height: 1.1;
104116
letter-spacing: -2px;
117+
/*
118+
text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
119+
*/
105120
}
106121

107122
.header-text {
@@ -138,6 +153,7 @@ img {
138153
background-color: #087f5b;
139154
color: white;
140155
padding: 24px;
156+
border-radius: 12px;
141157
}
142158

143159
.testimonial-box {
@@ -159,6 +175,23 @@ img {
159175
}
160176

161177
/* CHAIRS */
178+
.chair {
179+
/*First number is moving the shadow to the right (pos) or left(neg)
180+
2nd is moving the shadow down (pos) or up (neg)
181+
3rd is how much the shadow grows outward from the item
182+
4th is how deep out the blackness grows from within the object
183+
5th is the color, use rgba to set the opacity. You generally want less than .1 - .3
184+
*/
185+
186+
box-shadow: -0px 20px 30px 0px rgba(0, 0, 0, 0.1);
187+
border-radius: 12px;
188+
}
189+
.chair img {
190+
/*This is how you style specific corners. */
191+
border-bottom-left-radius: 0;
192+
border-bottom-right-radius: 0;
193+
}
194+
162195
.chair-box {
163196
padding: 24px;
164197
}
@@ -185,6 +218,9 @@ h3 {
185218
}
186219

187220
.chair-icon {
221+
stroke: var(--MainColor);
222+
width: 24px;
223+
height: 24px;
188224
}
189225

190226
.chair-price {

0 commit comments

Comments
 (0)