Skip to content

Commit 4ace280

Browse files
owen-webbowen-webb
committed
section-6: Carousel.
1 parent 28cd459 commit 4ace280

File tree

1 file changed

+169
-0
lines changed

1 file changed

+169
-0
lines changed

‎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)