Skip to content

Commit 55626d6

Browse files
author
Andy Chau
committed
Section Carousel
1 parent 75ac77a commit 55626d6

File tree

1 file changed

+211
-0
lines changed

1 file changed

+211
-0
lines changed

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

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
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</title>
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<style>
13+
/*
14+
SPACING SYSTEM (px)
15+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
16+
17+
FONT SIZE SYSTEM (px)
18+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
19+
*/
20+
21+
/*
22+
MAIN COLOR: #087f5b
23+
GREY COLOR: #343a40
24+
*/
25+
26+
* {
27+
margin: 0;
28+
padding: 0;
29+
box-sizing: border-box;
30+
}
31+
32+
/* ------------------------ */
33+
/* GENERAL STYLES */
34+
/* ------------------------ */
35+
body {
36+
font-family: "Inter", sans-serif;
37+
color: #343a40;
38+
line-height: 1;
39+
}
40+
41+
.testimonial-img {
42+
height: 200px;
43+
border-radius: 8px;
44+
transform: scale(1.5);
45+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
46+
}
47+
48+
.carousel {
49+
width: 800px;
50+
margin: 100px auto;
51+
background-color: #087f5b;
52+
padding: 32px;
53+
border-radius: 8px;
54+
55+
position: relative;
56+
}
57+
58+
.testimonial {
59+
display: flex;
60+
gap: 24px;
61+
padding-left: 64px;
62+
padding-right: 32px;
63+
}
64+
65+
.testimonial-contents {
66+
padding-left: 48px;
67+
display: grid;
68+
grid-template-columns: 1fr;
69+
}
70+
71+
.testimonial-footer {
72+
}
73+
74+
.testimonial-text {
75+
font-size: 18px;
76+
font-weight: 500;
77+
line-height: 1.5;
78+
margin-bottom: 32px;
79+
color: #e6fcf5;
80+
}
81+
82+
.testimonial-author {
83+
font-size: 14px;
84+
line-height: 1.5;
85+
margin-bottom: 4px;
86+
color: #c3fae8;
87+
}
88+
89+
.testimonial-job {
90+
font-size: 12px;
91+
color: #c3fae8;
92+
}
93+
94+
.nav-btn {
95+
width: 40px;
96+
height: 40px;
97+
border: none;
98+
background-color: #fff;
99+
position: absolute;
100+
border-radius: 50%;
101+
cursor: pointer;
102+
103+
display: flex; /* to make single flex to allow x,y alignment */
104+
align-items: center;
105+
justify-content: center;
106+
107+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
108+
}
109+
110+
.btn--left {
111+
left: 0;
112+
top: 50%;
113+
114+
/* In relation to Element itself x, y */
115+
transform: translate(-50%, -50%);
116+
}
117+
.btn--right {
118+
right: 0;
119+
top: 50%;
120+
/* In relation to Element itself x, y */
121+
transform: translate(50%, -50%);
122+
}
123+
124+
.nav-btn-icon {
125+
width: 24px;
126+
height: 24px;
127+
stroke: #087f5b;
128+
}
129+
130+
.dots {
131+
position: absolute;
132+
left: 50%;
133+
bottom: 0;
134+
transform: translate(-50%, 32px);
135+
136+
display: flex;
137+
gap: 12px;
138+
}
139+
140+
.dot {
141+
height: 12px;
142+
width: 12px;
143+
background-color: #fff;
144+
border-radius: 50%;
145+
border: 2px solid #087f5b;
146+
cursor: pointer;
147+
}
148+
149+
.dot--fill {
150+
background-color: #087f5b;
151+
}
152+
</style>
153+
</head>
154+
<body>
155+
<div class="carousel">
156+
<button class="nav-btn btn--left">
157+
<svg
158+
xmlns="http://www.w3.org/2000/svg"
159+
class="nav-btn-icon"
160+
fill="none"
161+
viewBox="0 0 24 24"
162+
stroke="currentColor"
163+
stroke-width="2"
164+
>
165+
<path
166+
stroke-linecap="round"
167+
stroke-linejoin="round"
168+
d="M15 19l-7-7 7-7"
169+
/>
170+
</svg>
171+
</button>
172+
<blockquote class="testimonial">
173+
<img class="testimonial-img" src="./maria.jpg" alt="Maria de Almeida" />
174+
<div class="testimonial-contents">
175+
<div class="testimonial-text">
176+
<p>
177+
"Lorem ipsum dolor sit amet consectetur, adipisicing elit.
178+
Voluptatem necessitatibus magnam unde molestias illo perferendis."
179+
</p>
180+
</div>
181+
<div class="testimonial-footer">
182+
<p class="testimonial-author">Maria de Almeida</p>
183+
<p class="testimonial-job">Product Manager at EDP Comerical</p>
184+
</div>
185+
</div>
186+
</blockquote>
187+
<button class="nav-btn btn--right">
188+
<svg
189+
xmlns="http://www.w3.org/2000/svg"
190+
class="nav-btn-icon"
191+
fill="none"
192+
viewBox="0 0 24 24"
193+
stroke="currentColor"
194+
stroke-width="2"
195+
>
196+
<path
197+
stroke-linecap="round"
198+
stroke-linejoin="round"
199+
d="M9 5l7 7-7 7"
200+
/>
201+
</svg>
202+
</button>
203+
<div class="dots">
204+
<button class="dot dot--fill">&nbsp;</button>
205+
<button class="dot">&nbsp;</button>
206+
<button class="dot">&nbsp;</button>
207+
<button class="dot">&nbsp;</button>
208+
</div>
209+
</div>
210+
</body>
211+
</html>

0 commit comments

Comments
 (0)