Skip to content

Commit 7de21de

Browse files
N0sBaN0sBa
committed
Update
1 parent bc9139e commit 7de21de

File tree

1 file changed

+118
-0
lines changed

1 file changed

+118
-0
lines changed

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

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
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 Document</title>
8+
<style>
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
.carousel {
14+
width: 800px;
15+
margin: 100px auto;
16+
background-color: #087f5b;
17+
padding-left: 80px;
18+
border-radius: 8px;
19+
20+
display: flex;
21+
align-items: center;
22+
23+
position: relative;
24+
}
25+
img {
26+
width: 80px;
27+
height: 80px;
28+
border-radius: 8px;
29+
transform: scale(2.35);
30+
box-shadow: 0 0 12px 12px rgba(0,0,0,0.1);
31+
}
32+
.content {
33+
padding: 32px 80px 32px 80px;
34+
color: #fff;
35+
margin-bottom: 16px;
36+
}
37+
.content-detail {
38+
font-size: 1rem;
39+
margin-bottom: 8px;
40+
}
41+
.content-author {
42+
font-size: 0.9rem;
43+
}
44+
.content-job {
45+
font-size: 0.8rem;
46+
}
47+
.btn {
48+
width: 32px;
49+
height: 32px;
50+
border-radius: 50%;
51+
border: none;
52+
53+
display: flex;
54+
align-items: center;
55+
justify-content: center;
56+
57+
position: absolute;
58+
cursor: pointer;
59+
60+
box-shadow: 0 0 12px 4px rgba(0,0,0,0.2);
61+
}
62+
.btn--left {
63+
left: 0;
64+
transform: translate(-50%, 0);
65+
}
66+
.btn-right {
67+
right: 0;
68+
transform: translate(50%, 0);
69+
}
70+
.dots {
71+
/* list-style: circle; */
72+
display: flex;
73+
gap: 8px;
74+
75+
position: absolute;
76+
bottom: 0;
77+
left: 50%;
78+
transform: translate(-50%, 24px);
79+
}
80+
.dot {
81+
width: 12px;
82+
height: 12px;
83+
border-radius: 50%;
84+
border: 2px solid #087f5b;
85+
cursor: pointer;
86+
}
87+
.dot--fill {
88+
background-color: #087f5b;
89+
}
90+
</style>
91+
</head>
92+
<body>
93+
<div class="carousel">
94+
<img src="maria.jpg" alt="Maria">
95+
<div class="content">
96+
<p class="content-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat beatae, facilis hic qui sapiente illum sit placeat incidunt? Quidem, fugiat?</p>
97+
<p class="content-author">Maria Deia Kiags</p>
98+
<p class="content-job">Content Manager of Momo</p>
99+
</div>
100+
<button class="btn btn--left">
101+
<svg xmlns="http://www.w3.org/2000/svg" class="" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
102+
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
103+
</svg>
104+
</button>
105+
<button class="btn btn-right">
106+
<svg xmlns="http://www.w3.org/2000/svg" class="" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
107+
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
108+
</svg>
109+
</button>
110+
<div class="dots">
111+
<button class="dot dot--fill">&nbsp;</button>
112+
<button class="dot">&nbsp;</button>
113+
<button class="dot">&nbsp;</button>
114+
<button class="dot">&nbsp;</button>
115+
</div>
116+
</div>
117+
</body>
118+
</html>

0 commit comments

Comments
 (0)