Skip to content

Commit 4cdd7d7

Browse files
FrankGeckoFrankGecko
committed
ch. 89: Building a Carousel Component - Part 1
1 parent a348fea commit 4cdd7d7

File tree

1 file changed

+113
-0
lines changed

1 file changed

+113
-0
lines changed

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

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Carousel Component</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />
11+
<style>
12+
/*
13+
SPACING SYSTEM (px)
14+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
15+
16+
FONT SIZE SYSTEM (px)
17+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
18+
*/
19+
20+
/*
21+
MAIN COLOR: #087f5b
22+
GREY COLOR: #343a40
23+
*/
24+
25+
* {
26+
margin: 0;
27+
padding: 0;
28+
box-sizing: border-box;
29+
}
30+
31+
/* ------------------------ */
32+
/* GENERAL STYLES */
33+
/* ------------------------ */
34+
body {
35+
font-family: "Inter", sans-serif;
36+
color: #343a40;
37+
line-height: 1;
38+
}
39+
40+
.carousel {
41+
width: 800px;
42+
margin: 100px auto;
43+
background-color: #087f5b;
44+
padding: 32px;
45+
padding-left: 86px;
46+
border-radius: 8px;
47+
display: flex;
48+
align-items: center;
49+
gap: 86px;
50+
}
51+
52+
img {
53+
height: 200px;
54+
border-radius: 8px;
55+
transform: scale(1.5);
56+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
57+
}
58+
59+
.testimonial-text {
60+
font-size: 18px;
61+
font-weight: 500;
62+
line-height: 1.5;
63+
margin-bottom: 32px;
64+
color: #e6fcf5;
65+
}
66+
67+
.testimonial-author {
68+
font-size: 14px;
69+
margin-bottom: 4px;
70+
color: #c3fae8;
71+
}
72+
73+
.testimonial-job {
74+
font-size: 12px;
75+
color: #c3fae8;
76+
}
77+
78+
.btn {}
79+
80+
.btn-icon {}
81+
</style>
82+
</head>
83+
84+
<body>
85+
86+
<div class="carousel">
87+
<img src="maria.jpg" alt="Maria de Almeida">
88+
<blockquote class="testimonial">
89+
<p class="testimonial-text">
90+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam voluptatum cumque, aspernatur iusto
91+
mollitia sunt magnam. Pariatur alias esse aperiam non magnam! Ratione voluptatibus voluptates
92+
perspiciatis delectus vel veritatis quas?
93+
</p>
94+
<p class="testimonial-author">Maria de Almeida</p>
95+
<p class="testimonial-job">Senior Product Manager at EDP Comercial</p>
96+
</blockquote>
97+
<button class="btn">
98+
<svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
99+
stroke="currentColor">
100+
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
101+
</svg>
102+
</button>
103+
104+
<button class="btn">
105+
<svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
106+
stroke="currentColor">
107+
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
108+
</svg>
109+
</button>
110+
</div>
111+
</body>
112+
113+
</html>

0 commit comments

Comments
 (0)