Skip to content

Commit 3f92942

Browse files
nuthancnuthanc
committed
Update
1 parent b6fdd6b commit 3f92942

File tree

7 files changed

+581
-1
lines changed

7 files changed

+581
-1
lines changed

‎README.md

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -594,4 +594,30 @@
594594
* Nice trick for opening only the 2nd item's hidden box
595595
* Use another class like open along with the item class
596596
* Then in selectors Use open class and descendant selector hidden-box
597-
* This will apply only for the 2nd item now
597+
* This will apply only for the 2nd item now
598+
599+
### Building a Carousel Component
600+
601+
* If width is not specified and only height is specified, then width will be adjusted accordingly to maintain the proportion
602+
* I used absolute positioning for image but Author used transform with scale and for the spacing used padding and gap
603+
* *align-items: center of flex works* even when the element is *absolutely* positioned
604+
* Setting top: 50% = 50% of parent container's height
605+
* Check **Vertical Centering with Absolute Position and Transform** in Pdf
606+
* This moves the top of the element to the middle, not the element itself
607+
* Then use transform's translate to -50%(to the top) in the y-direction and-50% in the x-direction(to the left)
608+
* This 50% is the actual element's height
609+
* For the dots, the author used button and space
610+
611+
### Building a Table Component
612+
613+
* table, tr, thead, tbody, th and td
614+
* For column of equal width, we could have added `table-layout: fixed;` in table
615+
* Author used the technique of giving `thead th` equal width of 25%(since there are 4 columns)
616+
617+
### Building a Pagination Component
618+
619+
* I had used padding for the Buttons but Author gave double the width of icon
620+
* For the links to be perfect circle, we cannot using padding(Padding top and bottom doesn't work on inline elements and also even if used with inline-block, it wouldn't be perfect)
621+
* Author gave equal width and height to make it a square first and then used border-radius
622+
* Also Circles were made even before Hover
623+
* Cool trick is `.btn:hover .btn-icon` using class like this, so that stroke would become white when hovered over button

‎starter/06-Components/carousel/carousel.css

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
/*
2+
SPACING SYSTEM (px)
3+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
4+
5+
FONT SIZE SYSTEM (px)
6+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
7+
*/
8+
/*
9+
MAIN COLOR: #087f5b
10+
GREY COLOR: #343a40
11+
*/
12+
* {
13+
margin: 0;
14+
padding: 0;
15+
box-sizing: border-box;
16+
}
17+
18+
body {
19+
font-family: 'Inter', sans-serif;
20+
line-height: 1;
21+
}
22+
23+
.my-carousel {
24+
width: 800px;
25+
margin: 100px auto;
26+
background-color: #087f5b;
27+
border-radius: 8px;
28+
position: relative;
29+
display: none;
30+
}
31+
32+
.my-item {
33+
display: grid;
34+
grid-template-columns: 350px 1fr;
35+
}
36+
37+
.my-text {
38+
grid-column: 2;
39+
padding: 15px;
40+
}
41+
42+
.my-img {
43+
width: 300px;
44+
height: 300px;
45+
border-radius: 8px;
46+
position: absolute;
47+
top: -36px;
48+
left: 32px;
49+
}
50+
51+
.icon {
52+
width: 48px;
53+
height: 48px;
54+
position: absolute;
55+
background-color: white;
56+
border-radius: 50%;
57+
padding: 10px 0;
58+
stroke: #087f5b;
59+
top: 40%;
60+
box-shadow: 0 0 2px black;
61+
}
62+
63+
.icon-left {
64+
left: -20px;
65+
padding-right: 5px;
66+
}
67+
68+
.icon-right {
69+
right: -20px;
70+
padding-left: 5px;
71+
}
72+
73+
.my-dots {
74+
display: flex;
75+
gap: 10px;
76+
position: absolute;
77+
/* left: 50%; */
78+
left: 350px;
79+
bottom: -48px;
80+
}
81+
82+
.my-dots div {
83+
width: 13px;
84+
height: 13px;
85+
border: 2px solid #087f5b;
86+
border-radius: 50%;
87+
}
88+
89+
.active {
90+
background-color: #087f5b;
91+
}
92+
93+
/* AUTHOR'S IMPLEMENTATION */
94+
95+
.carousel {
96+
width: 800px;
97+
margin: 100px auto;
98+
background-color: #087f5b;
99+
border-radius: 8px;
100+
display: flex;
101+
padding: 32px 48px 32px 86px;
102+
gap: 86px;
103+
align-items: center;
104+
position: relative;
105+
}
106+
107+
.author-img {
108+
height: 200px;
109+
border-radius: 8px;
110+
transform: scale(1.5);
111+
box-shadow: 0 12px 24px rgba(0,0,0, 0.25);
112+
}
113+
114+
.testimonial-text {
115+
font-size: 18px;
116+
font-weight: 500;
117+
line-height: 1.5;
118+
margin-bottom: 24px;
119+
color: #e6fcf5;
120+
}
121+
122+
.testimonial-author {
123+
font-size: 14px;
124+
font-weight: 400;
125+
margin-bottom: 4px;
126+
color: #c3fae8;
127+
}
128+
129+
.testimonial-job {
130+
font-size: 12px;
131+
color: #c3fae8;
132+
}
133+
134+
.btn {
135+
background-color: #fff;
136+
border: none;
137+
width: 40px;
138+
height: 40px;
139+
border-radius: 50%;
140+
position: absolute;
141+
cursor: pointer;
142+
143+
display: flex;
144+
align-items: center;
145+
justify-content: center;
146+
box-shadow: 0 12px 24px rgba(0,0,0,0.2);
147+
}
148+
149+
.btn--left {
150+
top: 50%;
151+
transform: translate(-50%, -50%);
152+
left: 0;
153+
}
154+
155+
.btn--right {
156+
/* In relation to the PARENT ELEMENT */
157+
top: 50%;
158+
right: 0;
159+
160+
/* In relation to ELEMENT ITSELF */
161+
transform: translate(50%, -50%);
162+
}
163+
164+
.btn-icon {
165+
width: 24px;
166+
height: 24px;
167+
stroke: #087f5b;
168+
}
169+
170+
.dots {
171+
position: absolute;
172+
left: 50%;
173+
bottom: 0;
174+
transform: translate(-50%, 32px);
175+
display: flex;
176+
gap: 12px;
177+
}
178+
179+
.dot {
180+
width: 12px;
181+
height: 12px;
182+
border: 2px solid #087f5b;
183+
background-color: #fff;
184+
border-radius: 50%;
185+
cursor: pointer;
186+
}
187+
188+
.dot--fill {
189+
background-color: #087f5b;
190+
}

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

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
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+
<link
8+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
9+
rel="stylesheet"
10+
/>
11+
<link rel="stylesheet" href="carousel.css" />
12+
<title>Carousel</title>
13+
</head>
14+
<body>
15+
<div class="my-carousel">
16+
<div class="my-item">
17+
<!-- Need to use button here -->
18+
<svg
19+
xmlns="http://www.w3.org/2000/svg"
20+
fill="none"
21+
viewBox="0 0 24 24"
22+
stroke-width="1.5"
23+
stroke="currentColor"
24+
class="icon icon-left"
25+
>
26+
<path
27+
stroke-linecap="round"
28+
stroke-linejoin="round"
29+
d="M15.75 19.5L8.25 12l7.5-7.5"
30+
/>
31+
</svg>
32+
<svg
33+
xmlns="http://www.w3.org/2000/svg"
34+
fill="none"
35+
viewBox="0 0 24 24"
36+
stroke-width="1.5"
37+
stroke="currentColor"
38+
class="icon icon-right"
39+
>
40+
<path
41+
stroke-linecap="round"
42+
stroke-linejoin="round"
43+
d="M8.25 4.5l7.5 7.5-7.5 7.5"
44+
/>
45+
</svg>
46+
<img src="../maria.jpg" alt="Maria" class="my-img" />
47+
<div class="my-text">
48+
<blockquote class="testimonial">
49+
<p class="testimonial-text">
50+
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum
51+
consequuntur quibusdam laboreeum deleniti non, blanditiis
52+
repudiandae quis esse quas, iusto ullam obcaecati nesciunt animi
53+
dolorum voluptatem."
54+
</p>
55+
<p class="testimonial-author">Maria de Almeida</p>
56+
<p class="testimonial-job">
57+
Senior Product Manager at EDP Comercial
58+
</p>
59+
</blockquote>
60+
</div>
61+
</div>
62+
<div class="my-dots">
63+
<div class="active"></div>
64+
<div></div>
65+
<div></div>
66+
<div></div>
67+
</div>
68+
</div>
69+
70+
<div class="carousel">
71+
<img src="../maria.jpg" alt="Maria" class="author-img" />
72+
<blockquote class="testimonial">
73+
<p class="testimonial-text">
74+
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum
75+
consequuntur laboreeum deleniti non, blanditiis repudiandae fuitg voluptatem."
76+
</p>
77+
<p class="testimonial-author">Maria de Almeida</p>
78+
<p class="testimonial-job">Senior Product Manager at EDP Comercial</p>
79+
</blockquote>
80+
<button class="btn btn--left">
81+
<svg
82+
xmlns="http://www.w3.org/2000/svg"
83+
fill="none"
84+
viewBox="0 0 24 24"
85+
stroke-width="1.5"
86+
stroke="currentColor"
87+
class="btn-icon"
88+
>
89+
<path
90+
stroke-linecap="round"
91+
stroke-linejoin="round"
92+
d="M15.75 19.5L8.25 12l7.5-7.5"
93+
/>
94+
</svg>
95+
</button>
96+
<button class="btn btn--right">
97+
<svg
98+
xmlns="http://www.w3.org/2000/svg"
99+
fill="none"
100+
viewBox="0 0 24 24"
101+
stroke-width="1.5"
102+
stroke="currentColor"
103+
class="btn-icon"
104+
>
105+
<path
106+
stroke-linecap="round"
107+
stroke-linejoin="round"
108+
d="M8.25 4.5l7.5 7.5-7.5 7.5"
109+
/>
110+
</svg>
111+
</button>
112+
113+
<div class="dots">
114+
<button class="dot dot--fill">&nbsp;</button>
115+
<button class="dot">&nbsp;</button>
116+
<button class="dot">&nbsp;</button>
117+
<button class="dot">&nbsp;</button>
118+
</div>
119+
</div>
120+
</body>
121+
</html>

0 commit comments

Comments
 (0)