Skip to content

Commit f30ddf3

Browse files
Nadix92Nadix92
committed
fredag
1 parent ee4e94f commit f30ddf3

File tree

10 files changed

+648
-0
lines changed

10 files changed

+648
-0
lines changed

‎starter/06-Components/accordion/01-accordion.html

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Accordion Component</title>
8+
9+
<script src="accorion.js" defer></script>
10+
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
13+
rel="stylesheet"
14+
/>
15+
16+
<link rel="stylesheet" href="accordion.css" />
17+
</head>
18+
<body>
19+
<div class="accordion">
20+
<div class="item">
21+
<p class="number">01</p>
22+
<p class="text">Where are these chairs assembled?</p>
23+
<svg
24+
xmlns="http://www.w3.org/2000/svg"
25+
class="icon"
26+
fill="none"
27+
viewBox="0 0 24 24"
28+
stroke="currentColor"
29+
>
30+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
31+
</svg>
32+
<div class="hidden-box">
33+
<p>
34+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum nobis et, dolorem repellat qui
35+
dolorum ab iste sapiente architecto eveniet minus error voluptates earum. Atque, quibusdam?
36+
</p>
37+
<ul>
38+
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
39+
<li>Eveniet illum autem corrupti eos quidem et voluptates</li>
40+
<li>architecto obcaecati molestias provident quibusdam suscipit</li>
41+
<li>praesentium optio accusantium alias impedit modi ex</li>
42+
</ul>
43+
</div>
44+
</div>
45+
46+
<div class="item open">
47+
<p class="number">02</p>
48+
<p class="text">How long do I have to return my chair?</p>
49+
<svg
50+
xmlns="http://www.w3.org/2000/svg"
51+
class="icon"
52+
fill="none"
53+
viewBox="0 0 24 24"
54+
stroke="currentColor"
55+
>
56+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
57+
</svg>
58+
<div class="hidden-box">
59+
<p>
60+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum nobis et, dolorem repellat qui
61+
dolorum ab iste sapiente architecto eveniet minus error voluptates earum. Atque, quibusdam?
62+
</p>
63+
<ul>
64+
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
65+
<li>Eveniet illum autem corrupti eos quidem et voluptates</li>
66+
<li>architecto obcaecati molestias provident quibusdam suscipit</li>
67+
<li>praesentium optio accusantium alias impedit modi ex</li>
68+
</ul>
69+
</div>
70+
</div>
71+
72+
<div class="item">
73+
<p class="number">03</p>
74+
<p class="text">Do you ship to countries outside the EU?</p>
75+
<svg
76+
xmlns="http://www.w3.org/2000/svg"
77+
class="icon"
78+
fill="none"
79+
viewBox="0 0 24 24"
80+
stroke="currentColor"
81+
>
82+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
83+
</svg>
84+
<div class="hidden-box">
85+
<p>
86+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum nobis et, dolorem repellat qui
87+
dolorum ab iste sapiente architecto eveniet minus error voluptates earum. Atque, quibusdam?
88+
</p>
89+
<ul>
90+
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
91+
<li>Eveniet illum autem corrupti eos quidem et voluptates</li>
92+
<li>architecto obcaecati molestias provident quibusdam suscipit</li>
93+
<li>praesentium optio accusantium alias impedit modi ex</li>
94+
</ul>
95+
</div>
96+
</div>
97+
</div>
98+
</body>
99+
</html>

‎starter/06-Components/accordion/accordion.css

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/*
2+
SPACING SYSTEM (px)
3+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
4+
5+
FONT SIZE SYSTEM (px)
6+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
7+
8+
MAIN COLOR: #087f5b
9+
GRAY COLOR: #343a40
10+
11+
12+
*/
13+
14+
* {
15+
margin: 0;
16+
padding: 0;
17+
box-sizing: border-box;
18+
}
19+
20+
/* ------------------------ */
21+
/* GENERAL STYLES */
22+
/* ------------------------ */
23+
body {
24+
font-family: 'Inter', sans-serif;
25+
color: #343a40;
26+
line-height: 1;
27+
}
28+
29+
.accordion {
30+
width: 700px;
31+
margin: 100px auto;
32+
display: flex;
33+
flex-direction: column;
34+
gap: 24px;
35+
}
36+
37+
.item {
38+
box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
39+
padding: 24px;
40+
41+
display: grid;
42+
grid-template-columns: auto 1fr auto;
43+
column-gap: 24px;
44+
row-gap: 32px;
45+
align-items: center;
46+
}
47+
.number,
48+
.text {
49+
cursor: pointer;
50+
51+
font-size: 24px;
52+
font-weight: 500;
53+
/* color: #087f5b; */
54+
}
55+
56+
.number {
57+
color: #ced4da;
58+
}
59+
60+
.icon {
61+
cursor: pointer;
62+
63+
width: 24px;
64+
height: 24px;
65+
/* stroke: #087f5b; */
66+
}
67+
68+
.hidden-box {
69+
grid-column: 2;
70+
display: none;
71+
}
72+
73+
.hidden-box p {
74+
line-height: 1.6;
75+
margin-bottom: 24px;
76+
}
77+
78+
.hidden-box ul {
79+
color: #868e96;
80+
margin-left: 20px;
81+
82+
display: flex;
83+
flex-direction: column;
84+
gap: 12px;
85+
}
86+
87+
.open {
88+
border-top: 4px solid #087f5b;
89+
}
90+
91+
.open .hidden-box {
92+
display: block;
93+
}
94+
95+
.open .number,
96+
.open .text,
97+
.open .icon {
98+
color: #087f5b;
99+
/* stroke: #087f5b; */
100+
}

‎starter/06-Components/accordion/accorion.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const items = document.querySelectorAll('.item');
2+
3+
for (i = 0; i < items.length; i++) {
4+
items[i].addEventListener('click', function () {
5+
this.classList.toggle('open');
6+
});
7+
}

‎starter/06-Components/carousel/carousel.css

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
/*
2+
SPACING SYSTEM (px)
3+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
4+
5+
FONT SIZE SYSTEM (px)
6+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
7+
8+
MAIN COLOR: #087f5b
9+
GRAY COLOR: #343a40
10+
11+
12+
*/
13+
14+
* {
15+
margin: 0;
16+
padding: 0;
17+
box-sizing: border-box;
18+
}
19+
20+
/* ------------------------ */
21+
/* GENERAL STYLES */
22+
/* ------------------------ */
23+
body {
24+
font-family: 'Inter', sans-serif;
25+
color: #343a40;
26+
line-height: 1;
27+
}
28+
29+
.carousel {
30+
width: 800px;
31+
margin: 100px auto;
32+
background-color: #087f5b;
33+
34+
padding: 32px 48px 32px 86px;
35+
36+
border-radius: 8px;
37+
position: relative;
38+
39+
display: flex;
40+
/* align-items: center; */
41+
gap: 86px;
42+
}
43+
44+
img {
45+
height: 200px;
46+
border-radius: 8px;
47+
transform: scale(1.5);
48+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
49+
}
50+
51+
.testimonial {
52+
}
53+
54+
.testimonial-text {
55+
font-size: 18px;
56+
font-weight: 500;
57+
line-height: 1.5;
58+
margin-bottom: 32px;
59+
color: #e6fcf5;
60+
}
61+
.testimonial-author {
62+
font-size: 14px;
63+
margin-bottom: 4px;
64+
color: #c3fae8;
65+
}
66+
67+
.testimonial-job {
68+
font-size: 12px;
69+
color: #c3fae8;
70+
}
71+
72+
.btn {
73+
background-color: #fff;
74+
border: none;
75+
height: 40px;
76+
width: 40px;
77+
border-radius: 50%;
78+
position: absolute;
79+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
80+
81+
display: flex;
82+
align-items: center;
83+
justify-content: center;
84+
85+
cursor: pointer;
86+
}
87+
88+
.btn--left {
89+
left: 0;
90+
top: 50%;
91+
transform: translate(-50%, -50%);
92+
}
93+
.btn--right {
94+
right: 0;
95+
top: 50%;
96+
transform: translate(50%, -50%);
97+
}
98+
99+
.btn-icon {
100+
height: 24px;
101+
width: 24px;
102+
stroke: #087f5b;
103+
}
104+
105+
.dots {
106+
position: absolute;
107+
left: 50%;
108+
bottom: 0;
109+
transform: translate(-50%, 32px);
110+
111+
display: flex;
112+
gap: 12px;
113+
}
114+
115+
.dot {
116+
height: 12px;
117+
width: 12px;
118+
background-color: #fff;
119+
border: 2px solid #087f5b;
120+
border-radius: 50%;
121+
cursor: pointer;
122+
}
123+
124+
.dot--fill {
125+
background-color: #087f5b;
126+
}

‎starter/06-Components/carousel/carousel.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Carousel Component</title>
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<link rel="stylesheet" href="carousel.css" />
13+
</head>
14+
<body>
15+
<div class="carousel">
16+
<img src="maria.jpg" alt="Maria de Almeida" />
17+
<blockquote class="testimonial">
18+
<p class="testimonial-text">
19+
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, in qui culpa, tempore eos
20+
ipsam sed assumenda odit neque quia perspiciatis!"
21+
</p>
22+
<p class="testimonial-author">Maria de Almeida</p>
23+
<p class="testimonial-job">Senior Product Manager at EDP Comercial</p>
24+
</blockquote>
25+
26+
<button class="btn btn--left">
27+
<svg
28+
xmlns="http://www.w3.org/2000/svg"
29+
class="btn-icon"
30+
fill="none"
31+
viewBox="0 0 24 24"
32+
stroke="currentColor"
33+
>
34+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
35+
</svg>
36+
</button>
37+
38+
<button class="btn btn--right">
39+
<svg
40+
xmlns="http://www.w3.org/2000/svg"
41+
class="btn-icon"
42+
fill="none"
43+
viewBox="0 0 24 24"
44+
stroke="currentColor"
45+
>
46+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
47+
</svg>
48+
</button>
49+
<div class="dots">
50+
<button class="dot dot--fill">&nbsp;</button>
51+
<button class="dot">&nbsp;</button>
52+
<button class="dot">&nbsp;</button>
53+
<button class="dot">&nbsp;</button>
54+
</div>
55+
</div>
56+
</body>
57+
</html>

‎starter/06-Components/maria.jpg renamed to ‎starter/06-Components/carousel/maria.jpg

File renamed without changes.

0 commit comments

Comments
 (0)