Skip to content

Commit b196066

Browse files
author
Emet Das
committed
update
1 parent b62f0d0 commit b196066

File tree

4 files changed

+251
-13
lines changed

4 files changed

+251
-13
lines changed

‎web components/travel-card-design/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
## Modern Card Design | Travel | Design Using HTML & CSS
2+
3+
### [⏯ Watch On Youtube](https://youtu.be/FoQagXjMmgQ)
4+
5+
![thumbnail](thumbnail.jpg)
6+
7+
---

‎web components/travel-card-design/index.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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>card</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
11+
<body>
12+
<div class="card">
13+
<div class="card-image">
14+
<img src="images/card-main.png" alt="Card Image" class="card-img" />
15+
</div>
16+
<div class="card-details">
17+
<h3 class="heading">Liburan ke Bali 🚗</h3>
18+
<span class="subheading">4-29 Juni | by Shandika</span>
19+
<div class="card-icons">
20+
<div class="card-icon">
21+
<img src="images/icon-leaf.svg" alt="icon" class="icon" />
22+
</div>
23+
<div class="card-icon">
24+
<img src="images/icon-map.svg" alt="icon" class="icon" />
25+
</div>
26+
<div class="card-icon">
27+
<img src="images/icon-send.svg" alt="icon" class="icon" />
28+
</div>
29+
</div>
30+
</div>
31+
<div class="card-bottom">
32+
<h3 class="card-footer">
33+
<img src="images/icon-building.svg" alt="icon" />
34+
<span>12 Orang pergi bersama</span>
35+
</h3>
36+
<div class="popup-btn">
37+
<img src="images/icon-heart.svg" alt="icon" />
38+
39+
<div class="popup">
40+
<div class="popup-image">
41+
<img src="images/profile.png" alt="popup image" />
42+
</div>
43+
<div class="popup-details">
44+
<h3 class="subheading">Ongoing</h3>
45+
<h2 class="heading">Jelajah Indonesia</h2>
46+
<div class="progress-bar">
47+
<p class="progress-title"><span>40%</span> completed</p>
48+
<div class="progress"></div>
49+
</div>
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
</body>
56+
</html>

‎web components/travel-card-design/starter.md

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -55,17 +55,4 @@ body {
5555
justify-content: center;
5656
background: rgb(18, 3, 62);
5757
}
58-
59-
.heading {
60-
color: var(--text-dark);
61-
font-size: 1.8rem;
62-
font-weight: 800;
63-
}
64-
65-
.subheading,
66-
.card-footer {
67-
color: var(--text-light);
68-
font-weight: 500;
69-
font-size: 1.6rem;
70-
}
7158
```

‎web components/travel-card-design/style.css

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&display=swap');
2+
*,
3+
*::before,
4+
*::after {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
text-decoration: none;
9+
list-style-type: none;
10+
outline: none;
11+
}
12+
13+
:root {
14+
--card-shadow: 0 0 8rem rgba(220, 234, 255, 0.183);
15+
--popup-shadow: 0 0 2rem rgba(0, 0, 0, 0.183);
16+
--text-dark: #080809;
17+
--text-light: #84829a;
18+
--icon-bg: #f5f5f5;
19+
--white: #fff;
20+
--progress-bg: #f5f5f5;
21+
--progress-fill-bg: #4475f2;
22+
}
23+
24+
html {
25+
font-size: 62.5%;
26+
}
27+
28+
body {
29+
font-family: 'Plus Jakarta Sans', sans-serif;
30+
font-size: 1.6rem;
31+
text-rendering: optimizeLegibility;
32+
height: 100vh;
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
background: rgb(18, 3, 62);
37+
}
38+
39+
.heading {
40+
color: var(--text-dark);
41+
font-size: 1.8rem;
42+
font-weight: 800;
43+
}
44+
45+
.subheading,
46+
.card-footer {
47+
color: var(--text-light);
48+
font-weight: 500;
49+
font-size: 1.6rem;
50+
}
51+
52+
.card {
53+
max-width: 40rem;
54+
background: var(--white);
55+
padding: 2rem;
56+
border-radius: 2.6rem;
57+
box-shadow: var(--card-shadow);
58+
}
59+
60+
.card-image {
61+
height: 17rem;
62+
}
63+
64+
.card-image .card-img {
65+
object-fit: contain;
66+
height: 100%;
67+
}
68+
69+
.card-details {
70+
padding: 2rem 0;
71+
}
72+
73+
.card-details .subheading {
74+
padding: 2rem 0;
75+
display: inline-flex;
76+
}
77+
78+
.card-icons {
79+
display: flex;
80+
flex-wrap: wrap;
81+
gap: 2rem;
82+
}
83+
84+
.card-icon {
85+
width: 4rem;
86+
height: 4rem;
87+
background: var(--icon-bg);
88+
display: flex;
89+
align-items: center;
90+
justify-content: center;
91+
border-radius: 50%;
92+
cursor: pointer;
93+
}
94+
95+
.card-icon img {
96+
width: 2rem;
97+
}
98+
99+
.card-bottom {
100+
display: flex;
101+
flex-wrap: wrap;
102+
justify-content: space-between;
103+
}
104+
105+
.card-footer {
106+
display: flex;
107+
gap: 1rem;
108+
flex: 90%;
109+
align-items: center;
110+
}
111+
112+
.card-footer img {
113+
width: 1.8rem;
114+
}
115+
116+
.popup-btn {
117+
position: relative;
118+
}
119+
120+
.popup-btn > img {
121+
cursor: pointer;
122+
}
123+
124+
.popup {
125+
position: absolute;
126+
top: -10rem;
127+
left: -11rem;
128+
padding: 1rem;
129+
width: 25rem;
130+
background: var(--white);
131+
border-radius: 1.5rem;
132+
box-shadow: var(--popup-shadow);
133+
display: flex;
134+
align-items: center;
135+
transition: all 1s ease;
136+
gap: 1rem;
137+
opacity: 0;
138+
visibility: hidden;
139+
clip-path: circle(0% at 50% 100%);
140+
}
141+
142+
.popup-btn:hover .popup {
143+
transform: translateY(-1rem);
144+
opacity: 1;
145+
visibility: visible;
146+
clip-path: circle(100% at 50% 100%);
147+
}
148+
149+
.popup-image {
150+
width: 5rem;
151+
height: 5rem;
152+
}
153+
154+
.popup-image img {
155+
width: 100%;
156+
object-fit: contain;
157+
}
158+
159+
.popup-details .heading {
160+
padding: 0.5rem 0;
161+
}
162+
163+
.progress-title {
164+
padding: 0 0 0.5rem 0;
165+
font-weight: 500;
166+
}
167+
168+
.progress-title span {
169+
color: var(--progress-fill-bg);
170+
}
171+
172+
.progress {
173+
position: relative;
174+
background: var(--progress-bg);
175+
height: 0.5rem;
176+
width: 100%;
177+
border-radius: 1rem;
178+
}
179+
180+
.progress::before {
181+
position: absolute;
182+
content: '';
183+
left: 0;
184+
width: 40%;
185+
height: 100%;
186+
background: var(--progress-fill-bg);
187+
border-radius: inherit;
188+
}

0 commit comments

Comments
 (0)