Skip to content

Commit 911d109

Browse files
clinton74clinton74
committed
carousel component
1 parent 02b440e commit 911d109

File tree

2 files changed

+203
-0
lines changed

2 files changed

+203
-0
lines changed

‎starter/06-Components/carousel.html

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

‎starter/06-Components/component.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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>Component</title>
8+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />
9+
<style>
10+
/*
11+
SPACING SYSTEM (px)
12+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
13+
14+
FONT SIZE SYSTEM (px)
15+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
16+
*/
17+
18+
* {
19+
margin: 0;
20+
padding: 0;
21+
box-sizing: border-box;
22+
}
23+
24+
/* ------------------------ */
25+
/* GENERAL STYLES */
26+
/* ------------------------ */
27+
body {
28+
font-family: "Inter", sans-serif;
29+
color: #343a40;
30+
line-height: 1;
31+
}
32+
</style>
33+
</head>
34+
<body></body>
35+
</html>

0 commit comments

Comments
 (0)