Skip to content

Commit 5bcb5fa

Browse files
张欧文张欧文
张欧文
authored and
张欧文
committed
building carousel
1 parent cf1dfaa commit 5bcb5fa

File tree

2 files changed

+197
-0
lines changed

2 files changed

+197
-0
lines changed

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

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
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 rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
12+
rel="stylesheet"
13+
/>
14+
15+
<style>
16+
* {
17+
margin: 0;
18+
padding: 0;
19+
box-sizing: border-box;
20+
}
21+
22+
body {
23+
font-family: "Inter", sans-serif;
24+
color: #343a40;
25+
line-height: 1;
26+
}
27+
28+
img {
29+
height: 200px;
30+
border-radius: 8px;
31+
transform: scale(1.5);
32+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
33+
}
34+
35+
.carousel {
36+
width:800px;
37+
margin:100px auto;
38+
padding: 32px;
39+
padding-left: 86px;
40+
padding-right: 48px;
41+
background-color: #087f5b;
42+
border-radius: 8px;
43+
color: #fff;
44+
45+
display: flex;
46+
align-items: center;
47+
gap: 86px;
48+
49+
position:relative;
50+
}
51+
52+
.testimonial-text {
53+
font-size: 18px;
54+
font-weight: 500;
55+
line-height:1.5;
56+
margin-bottom: 32px;
57+
color:#e6fcf5
58+
}
59+
60+
.testimonial-author {
61+
font-size: 14px;
62+
margin-bottom: 4px;
63+
color:#e6fcf5
64+
}
65+
66+
.testimonial-job {
67+
font-size: 12px;
68+
color:#e6fcf5
69+
}
70+
/* CONTROLS */
71+
.btn {
72+
background-color: #fff;
73+
border: none;
74+
height: 40px;
75+
width: 40px;
76+
position: absolute;
77+
border-radius:50%;
78+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
79+
cursor:pointer;
80+
81+
top: 50%;
82+
display: flex;
83+
align-items: center;
84+
justify-content: center;
85+
}
86+
87+
.btn-icon {
88+
height: 24px;
89+
width: 24px;
90+
stroke:#087f5b
91+
}
92+
93+
.left {
94+
transform: translate(-50%, -50%);
95+
left:0%
96+
}
97+
98+
.right {
99+
transform: translate(50%, -50%);
100+
101+
right: 0%;
102+
}
103+
104+
.dots {
105+
position: absolute;
106+
107+
bottom: 0;
108+
left:50%;
109+
transform: translate(-50%, 32px);
110+
111+
display: flex;
112+
gap:12px;
113+
}
114+
115+
.dot {
116+
width: 12px;
117+
height: 12px;
118+
background-color: #fff;
119+
border: 2px solid #087f5b;
120+
cursor: pointer;
121+
border-radius: 50px;
122+
123+
}
124+
125+
.dot--fill {
126+
background-color: #087f5b;
127+
}
128+
</style>
129+
</head>
130+
<body>
131+
<div class="carousel">
132+
<img src="maria.jpg" alt="maria" />
133+
<blockquote class="testimonial">
134+
<p class="testimonial-text">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, atque blanditiis deleniti modi dolores saepe nesciunt quaerat nulla aspernatur perferendis beatae nemo." </p>
135+
<p class="testimonial-author">Maria de Almedia</p>
136+
<p class="testimonial-job">Senior Product Manager at EDP Cormercial</p>
137+
</blockquote>
138+
139+
<button class="btn left">
140+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="btn-icon">
141+
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
142+
</svg>
143+
144+
145+
146+
</button>
147+
148+
<button class="btn right">
149+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="btn-icon">
150+
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
151+
</svg>
152+
153+
154+
155+
</button>
156+
157+
<div class="dots">
158+
<button class="dot dot--fill">&nbsp</button>
159+
<button class="dot">&nbsp</button>
160+
<button class="dot">&nbsp</button>
161+
<button class="dot">&nbsp</button>
162+
</div>
163+
164+
</div>
165+
</div>
166+
</body>
167+
</html>

‎starter/06-Components/templeate.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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 rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
12+
rel="stylesheet"
13+
/>
14+
15+
<style>
16+
* {
17+
margin: 0;
18+
padding: 0;
19+
box-sizing: border-box;
20+
}
21+
22+
body {
23+
font-family: "Inter", sans-serif;
24+
color: #343a40;
25+
line-height: 1;
26+
}
27+
</style>
28+
</head>
29+
<body></body>
30+
</html>

0 commit comments

Comments
 (0)