Skip to content

Commit d922db1

Browse files
owen-webbowen-webb
authored
Merge pull request #5 from owen-webb/section-6
Section 6
2 parents 90ae9bf + 15f2b2c commit d922db1

File tree

6 files changed

+835
-0
lines changed

6 files changed

+835
-0
lines changed

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

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
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+
8+
<title>Accordion Component</title>
9+
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
13+
14+
<style>
15+
/*
16+
SPACING SYSTEM (px)
17+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
18+
19+
FONT SIZE SYSTEM (px)
20+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
21+
*/
22+
23+
/*
24+
MAIN COLOR: #087f5b
25+
GRAY: #343a40
26+
*/
27+
28+
* {
29+
margin: 0;
30+
padding: 0;
31+
box-sizing: border-box;
32+
}
33+
34+
/* ------------------------ */
35+
/* GENERAL STYLES */
36+
/* ------------------------ */
37+
body {
38+
color: #343a40;
39+
font-family: 'Inter', sans-serif;
40+
line-height: 1;
41+
}
42+
43+
.accordion {
44+
display: flex;
45+
flex-direction: column;
46+
gap: 24px;
47+
margin: 100px auto;
48+
width: 700px;
49+
}
50+
51+
/* .hidden-box li {
52+
margin-bottom: 12px;
53+
} */
54+
55+
.hidden-box {
56+
display: none;
57+
grid-column: 2;
58+
}
59+
60+
.hidden-box p {
61+
line-height: 1.6;
62+
margin-bottom: 24px;
63+
}
64+
65+
.hidden-box ul {
66+
color: #868e96;
67+
display: flex;
68+
gap: 12px;
69+
flex-direction: column;
70+
margin-left: 16px;
71+
}
72+
73+
.icon {
74+
height: 24px;
75+
stroke: #087f5b;
76+
width: 24px;
77+
}
78+
79+
.item {
80+
align-items: center;
81+
box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
82+
column-gap: 24px;
83+
display: grid;
84+
grid-template-columns: auto 1fr auto;
85+
padding: 24px;
86+
row-gap: 32px;
87+
}
88+
89+
.number {
90+
color: #ced4da;
91+
}
92+
93+
.number, .text {
94+
/* color: #087f5b; */
95+
font-size: 24px;
96+
font-weight: bold;
97+
}
98+
99+
.open {
100+
border-top: 4px solid #087f5b;
101+
}
102+
103+
.open .hidden-box {
104+
display: block;
105+
}
106+
107+
.open .number, .open .text {
108+
color: #087f5b
109+
}
110+
</style>
111+
</head>
112+
113+
<body>
114+
<div class="accordion">
115+
<div class="item">
116+
<p class="number">01</p>
117+
<p class="text">
118+
Where are these chairs assembled?
119+
</p>
120+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon">
121+
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
122+
</svg>
123+
<div class="hidden-box">
124+
<p>
125+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi excepturi natus rem necessitatibus aspernatur maxime sequi officia omnis. Inventore dicta a dolores officia molestias, architecto illo doloremque culpa consequatur iure?
126+
</p>
127+
<ul>
128+
<li>
129+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
130+
</li>
131+
<li>
132+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
133+
</li>
134+
<li>
135+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
136+
</li>
137+
<li>
138+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
139+
</li>
140+
</ul>
141+
</div>
142+
</div>
143+
144+
<div class="item open">
145+
<p class="number">02</p>
146+
<p class="text">
147+
How long do I have to return my chair?
148+
</p>
149+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon">
150+
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
151+
</svg>
152+
<div class="hidden-box">
153+
<p>
154+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi excepturi natus rem necessitatibus aspernatur maxime sequi officia omnis. Inventore dicta a dolores officia molestias, architecto illo doloremque culpa consequatur iure?
155+
</p>
156+
<ul>
157+
<li>
158+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
159+
</li>
160+
<li>
161+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
162+
</li>
163+
<li>
164+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
165+
</li>
166+
<li>
167+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
168+
</li>
169+
</ul>
170+
</div>
171+
</div>
172+
173+
<div class="item">
174+
<p class="number">03</p>
175+
<p class="text">
176+
Do you ship to countries outside the EU?
177+
</p>
178+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon">
179+
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
180+
</svg>
181+
<div class="hidden-box">
182+
<p>
183+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi excepturi natus rem necessitatibus aspernatur maxime sequi officia omnis. Inventore dicta a dolores officia molestias, architecto illo doloremque culpa consequatur iure?
184+
</p>
185+
<ul>
186+
<li>
187+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
188+
</li>
189+
<li>
190+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
191+
</li>
192+
<li>
193+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
194+
</li>
195+
<li>
196+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
197+
</li>
198+
</ul>
199+
</div>
200+
</div>
201+
</div>
202+
</body>
203+
</html>

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

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
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+
8+
<title>Carousel Component</title>
9+
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
13+
14+
<style>
15+
/*
16+
SPACING SYSTEM (px)
17+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
18+
19+
FONT SIZE SYSTEM (px)
20+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
21+
*/
22+
23+
/*
24+
MAIN COLOR: #087f5b
25+
GRAY: #343a40
26+
*/
27+
28+
* {
29+
margin: 0;
30+
padding: 0;
31+
box-sizing: border-box;
32+
}
33+
34+
/* ------------------------ */
35+
/* GENERAL STYLES */
36+
/* ------------------------ */
37+
body {
38+
color: #343a40;
39+
font-family: 'Inter', sans-serif;
40+
line-height: 1;
41+
}
42+
43+
img {
44+
border-radius: 8px;
45+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
46+
height: 200px;
47+
transform: scale(1.5);
48+
}
49+
50+
.btn {
51+
align-items: center;
52+
background-color: #fff;
53+
border: none;
54+
border-radius: 50%;
55+
cursor: pointer;
56+
display: flex;
57+
height: 40px;
58+
justify-content: center;
59+
position: absolute;
60+
top: 50%;
61+
width: 40px;
62+
}
63+
64+
.btn-icon {
65+
height: 24px;
66+
stroke: #087f5b;
67+
width: 24px;
68+
}
69+
70+
.btn-left {
71+
left: 0;
72+
transform: translate(-50%, -50%);
73+
}
74+
75+
.btn-right {
76+
right: 0;
77+
transform: translate(50%, -50%);
78+
}
79+
80+
.carousel {
81+
align-items: center;
82+
background-color: #087f5b;
83+
border-radius: 8px;
84+
display: flex;
85+
gap: 86px;
86+
margin: 100px auto;
87+
padding: 32px 48px 32px 86px;
88+
position: relative;
89+
padding-left: 86px;
90+
width: 800px;
91+
}
92+
93+
.dots {
94+
bottom: 0;
95+
display: flex;
96+
gap: 12px;
97+
left: 50%;
98+
position: absolute;
99+
transform: translate(-50%, 32px);
100+
}
101+
102+
.dot {
103+
background-color: #fff;
104+
border: 2px solid #087f5b;
105+
border-radius: 50%;
106+
cursor: pointer;
107+
height: 12px;
108+
width: 12px;
109+
}
110+
111+
.dot-fill {
112+
background-color: #087f5b;
113+
}
114+
115+
.testimonial-author {
116+
color: #c3fae8;
117+
font-size: 14px;
118+
margin-bottom: 4px;
119+
}
120+
121+
.testimonial-job {
122+
color: #c3fae8;
123+
font-size: 12px;
124+
}
125+
126+
.testimonial-text {
127+
color: #e6fcf5;
128+
font-size: 18px;
129+
font-weight: 500;
130+
line-height: 1.5;
131+
margin-bottom: 32px;
132+
}
133+
</style>
134+
</head>
135+
136+
<body>
137+
<div class="carousel">
138+
<img alt="Maria de Almeida" src="maria.jpg" />
139+
<blockquote class="testimonial">
140+
<p class="testimonial-text">
141+
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quas veritatis neque enim dolor saepe! Distinctio ipsa asperiores doloribus, quod totam expedita repudiandae quo ex cupiditate at beatae. Distinctio, dolor!"
142+
</p>
143+
<p class="testimonial-author">
144+
Maria de Almeida
145+
</p>
146+
<p class="testimonial-job">
147+
Senior Product Manager at EDP Comercial
148+
</p>
149+
</blockquote>
150+
151+
<button class="btn btn-left">
152+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="btn-icon">
153+
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
154+
</svg>
155+
</button>
156+
<button class="btn btn-right">
157+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="btn-icon">
158+
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
159+
</svg>
160+
</button>
161+
<div class="dots">
162+
<button class="dot dot-fill">&nbsp;</button>
163+
<button class="dot">&nbsp;</button>
164+
<button class="dot">&nbsp;</button>
165+
<button class="dot">&nbsp;</button>
166+
</div>
167+
</div>
168+
</body>
169+
</html>

0 commit comments

Comments
 (0)