Skip to content

Commit fa7a3d4

Browse files
rameskumrameskum
committed
carousel complete
1 parent 81182e4 commit fa7a3d4

File tree

1 file changed

+150
-0
lines changed

1 file changed

+150
-0
lines changed

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

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
6+
name="viewport">
7+
<meta content="ie=edge" http-equiv="X-UA-Compatible">
8+
<title>Carousel Component</title>
9+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
10+
<style>
11+
*,
12+
*::before,
13+
*::after {
14+
margin: 0;
15+
padding: 0;
16+
box-sizing: border-box;
17+
}
18+
19+
body {
20+
font-family: 'Inter', sans-serif;
21+
color: #343a40;
22+
line-height: 1;
23+
}
24+
25+
.carousel {
26+
width: 800px;
27+
margin: 100px auto;
28+
background-color: #087f5b;
29+
padding: 32px 48px 32px 86px;
30+
border-radius: 8px;
31+
32+
display: flex;
33+
align-items: center;
34+
gap: 86px;
35+
position: relative;
36+
}
37+
38+
img {
39+
height: 210px;
40+
border-radius: 8px;
41+
transform: scale(1.5);
42+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
43+
}
44+
45+
.testimonial-text {
46+
font-size: 18px;
47+
font-weight: 500;
48+
line-height: 1.5;
49+
margin-bottom: 32px;
50+
color: #e6fcf5;
51+
}
52+
53+
.testimonial-author {
54+
font-size: 14px;
55+
margin-bottom: 4px;
56+
color: #c3fae8;
57+
}
58+
59+
.testimonial-job {
60+
font-size: 12px;
61+
color: #c3fae8;
62+
}
63+
64+
/* controls */
65+
.btn {
66+
color: #fff;
67+
border: none;
68+
height: 40px;
69+
width: 40px;
70+
border-radius: 50%;
71+
position: absolute;
72+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
73+
74+
display: flex;
75+
align-items: center;
76+
justify-content: center;
77+
cursor: pointer;
78+
}
79+
80+
.btn-icon {
81+
height: 24px;
82+
width: 24px;
83+
stroke: #087f5b;
84+
}
85+
86+
.btn--left {
87+
left: 0;
88+
top: 50%;
89+
transform: translate(-50%, -50%);
90+
}
91+
92+
.btn--right {
93+
right: 0;
94+
top: 50%;
95+
transform: translate(50%, -50%);
96+
}
97+
98+
.dots {
99+
position: absolute;
100+
left: 50%;
101+
bottom: 0;
102+
transform: translate(-50%, 32px);
103+
display: flex;
104+
gap: 12px;
105+
}
106+
107+
.dot {
108+
height: 12px;
109+
width: 12px;
110+
border-radius: 50%;
111+
background-color: #fff;
112+
border: 2px solid #087f5b;
113+
cursor: pointer;
114+
}
115+
116+
.dot-active {
117+
background-color: #087f5b;
118+
}
119+
</style>
120+
</head>
121+
<body>
122+
<div class="carousel">
123+
<img alt="Maria de Almeida" src="maria.jpg"/>
124+
<blockquote class="testimonial">
125+
<p class="testimonial-text">
126+
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cumque laudantium molestias nemo quod recusandae
127+
similique vel! Assumenda debitis laborum voluptate voluptatem! Consequatur est nam non saepe sit. Iure, officia?"
128+
</p>
129+
<p class="testimonial-author">Maria de Almeida</p>
130+
<p class="testimonial-job">Senior Product Manager at EDP Comercial</p>
131+
</blockquote>
132+
<button class="btn btn--left">
133+
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
134+
<path d="M15 19l-7-7 7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
135+
</svg>
136+
</button>
137+
<button class="btn btn--right">
138+
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
139+
<path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
140+
</svg>
141+
</button>
142+
<div class="dots">
143+
<button class="dot dot-active">&nbsp;</button>
144+
<button class="dot">&nbsp;</button>
145+
<button class="dot">&nbsp;</button>
146+
<button class="dot">&nbsp;</button>
147+
</div>
148+
</div>
149+
</body>
150+
</html>

0 commit comments

Comments
 (0)