Skip to content

Commit dc4dc1b

Browse files
AbernachyAbernachy
committed
finished the carousel section
1 parent 7a19baa commit dc4dc1b

File tree

4 files changed

+236
-0
lines changed

4 files changed

+236
-0
lines changed

‎projectfolder/06-Components/01-accordion/02-carousel/02-carousel.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
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
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0"
9+
/>
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
12+
rel="stylesheet"
13+
/>
14+
<link rel="stylesheet" href="carousel.css" />
15+
<title>Carousel</title>
16+
<style></style>
17+
</head>
18+
<body>
19+
<div class="carousel">
20+
<img src="../../maria.jpg" alt="Maria de Altmeida" />
21+
<blockquote class="testimonial">
22+
<p class="testimonial-text">
23+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
24+
Temporibus, maiores! Delectus ipsa iste corrupti vero culpa unde
25+
vel sed illum,
26+
</p>
27+
<p class="testimonial-author">Maria De Altmeida</p>
28+
<p class="testimonial-job">
29+
Senior Product Manager at EDP Commercial
30+
</p>
31+
</blockquote>
32+
<button class="btn btn-left">
33+
<svg
34+
xmlns="http://www.w3.org/2000/svg"
35+
class="btn-icon"
36+
fill="none"
37+
viewBox="0 0 24 24"
38+
stroke="currentColor"
39+
stroke-width="2"
40+
>
41+
<path
42+
stroke-linecap="round"
43+
stroke-linejoin="round"
44+
d="M15 19l-7-7 7-7"
45+
/>
46+
</svg>
47+
</button>
48+
<button class="btn btn-right">
49+
<svg
50+
xmlns="http://www.w3.org/2000/svg"
51+
class="btn-icon"
52+
fill="none"
53+
viewBox="0 0 24 24"
54+
stroke="currentColor"
55+
stroke-width="2"
56+
>
57+
<path
58+
stroke-linecap="round"
59+
stroke-linejoin="round"
60+
d="M9 5l7 7-7 7"
61+
/>
62+
</svg>
63+
</button>
64+
<div class="dots">
65+
<button class="dot--fill dot">&nbsp;</button>
66+
<button class="dot">&nbsp;</button>
67+
<button class="dot">&nbsp;</button>
68+
<button class="dot">&nbsp;</button>
69+
</div>
70+
</div>
71+
</body>
72+
<script src="carousel.js"></script>
73+
</html>

‎projectfolder/06-Components/01-accordion/02-carousel/carousel.css

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
/*
2+
SPACING SYSTEM (px)
3+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
4+
(rems) (divide by 10)
5+
.2/.4/.8./1.2/1.6 ....
6+
7+
FONT SIZE SYSTEM (px)
8+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
9+
(rems) divide by 10
10+
1 / 1.2 / 1.4/ 1.6 ...
11+
*/
12+
13+
/* Main Color: #087f5b
14+
Grey Color: #343a40
15+
16+
*/
17+
:root {
18+
--MainColor: #087f5b;
19+
--SecondaryColor: #343a40;
20+
}
21+
22+
* {
23+
margin: 0;
24+
padding: 0;
25+
box-sizing: border-box;
26+
}
27+
28+
/* ------------------------ */
29+
/* GENERAL STYLES */
30+
/* ------------------------ */
31+
body {
32+
/* font-family: sans-serif; */
33+
34+
font-family: 'Poppins' sans-serif;
35+
color: var(--SecondaryColor);
36+
37+
font-size: 10px;
38+
line-height: 1px;
39+
}
40+
41+
img {
42+
height: 20rem;
43+
border-radius: 0.8rem;
44+
transform: scale(1.5);
45+
box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.25);
46+
}
47+
48+
.btn {
49+
position: absolute;
50+
background-color: #fff;
51+
border: none;
52+
height: 4rem;
53+
width: 4rem;
54+
border-radius: 50%;
55+
display: flex;
56+
align-items: center;
57+
justify-content: center;
58+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
59+
cursor: pointer;
60+
}
61+
62+
.btn-icon {
63+
stroke: var(--MainColor);
64+
height: 2.4rem;
65+
width: 2.4rem;
66+
}
67+
.btn-right {
68+
/* In relation to parent element */
69+
right: 0%;
70+
top: 50%;
71+
/* In relation to element itself */
72+
transform: translate(50%, -50%);
73+
}
74+
75+
.btn-left {
76+
left: 0%;
77+
top: 50%;
78+
transform: translate(-50%, -50%);
79+
}
80+
81+
.btn:active {
82+
background-color: #087f5b;
83+
}
84+
.carousel {
85+
position: relative;
86+
background-color: var(--MainColor);
87+
width: 80rem;
88+
margin: 10rem auto;
89+
border-radius: 0.8rem;
90+
padding: 3.2rem 4.8rem 3.2rem 8.6rem;
91+
display: flex;
92+
align-items: center;
93+
gap: 8.6rem;
94+
}
95+
96+
.testimonial-text {
97+
font-size: 1.8rem;
98+
font-weight: 500;
99+
line-height: 1.5;
100+
margin-bottom: 3.2rem;
101+
color: #e6fcf5;
102+
}
103+
.testimonial-author {
104+
font-size: 1.4rem;
105+
margin-bottom: 1.5rem;
106+
color: #c3fae8;
107+
}
108+
.testimonial-job {
109+
font-size: 1.2rem;
110+
color: #c3fae8;
111+
}
112+
113+
.dots {
114+
position: absolute;
115+
left: 50%;
116+
bottom: 0;
117+
transform: translate(-50%, 3.2rem);
118+
display: flex;
119+
gap: 1.2rem;
120+
}
121+
122+
.dot {
123+
height: 1.2rem;
124+
width: 1.2rem;
125+
background-color: #fff;
126+
border: 0.2rem solid #087f5b;
127+
border-radius: 50%;
128+
cursor: pointer;
129+
}
130+
131+
.dot--fill {
132+
background-color: #087f5b;
133+
}

‎projectfolder/06-Components/01-accordion/02-carousel/carousel.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
var item = document.getElementsByClassName('item')
2+
var i
3+
4+
// So yea, classlist.toggle("open") will add or remove "open" from the class name
5+
6+
for (i = 0; i < item.length; i++) {
7+
item[i].addEventListener('click', function () {
8+
this.classList.toggle('open')
9+
})
10+
}

‎projectfolder/06-Components/01-accordion/02-carousel/component.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0"
9+
/>
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
12+
rel="stylesheet"
13+
/>
14+
<link rel="stylesheet" href="carousel.css" />
15+
<title>Carousel Component</title>
16+
<style></style>
17+
</head>
18+
<body></body>
19+
<script src="carousel.js"></script>
20+
</html>

0 commit comments

Comments
 (0)