Skip to content

Commit 6c9ffdc

Browse files
Namya KhanNamya Khan
Namya Khan
authored and
Namya Khan
committed
Project 2
1 parent fb50cfa commit 6c9ffdc

File tree

4 files changed

+169
-0
lines changed

4 files changed

+169
-0
lines changed

‎myTravelBucketList/images/plane.png

12.7 KB
Loading

‎myTravelBucketList/index.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
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 rel="stylesheet" href="styles.css" />
8+
<title>My Travel Bucket List</title>
9+
<link rel="shortcut icon" type="image/png" href="images/plane.png"/>
10+
</head>
11+
<body>
12+
<h1><span>My Travel Bucket List</span>✈️</h1>
13+
<div class="container">
14+
<div
15+
class="panel active"
16+
style="
17+
background-image: url('https://images.unsplash.com/photo-1559128010-7c1ad6e1b6a5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=873&q=80');
18+
"
19+
>
20+
<h3>Gulf of Thailand, Thailand</h3>
21+
</div>
22+
23+
<div
24+
class="panel"
25+
style="
26+
background-image: url('https://images.unsplash.com/photo-1529686342540-1b43aec0df75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
27+
"
28+
>
29+
<h3>Balabac, Philippines</h3>
30+
</div>
31+
32+
<div
33+
class="panel"
34+
style="
35+
background-image: url('https://images.unsplash.com/photo-1516091877740-fde016699f2c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80');
36+
"
37+
>
38+
<h3>Maldives</h3>
39+
</div>
40+
41+
<div
42+
class="panel"
43+
style="
44+
background-image: url('https://images.unsplash.com/photo-1500930287596-c1ecaa373bb2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
45+
"
46+
>
47+
<h3>Bora Bora, French Polynesia</h3>
48+
</div>
49+
50+
<div
51+
class="panel"
52+
style="
53+
background-image: url('https://images.unsplash.com/photo-1625421538401-17130c4e14ef?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
54+
"
55+
>
56+
<h3>Yasawas, Fiji</h3>
57+
</div>
58+
59+
<div
60+
class="panel"
61+
style="
62+
background-image: url('https://images.unsplash.com/photo-1577717903315-1691ae25ab3f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80t=crop&w=873&q=80');
63+
"
64+
>
65+
<h3>Bali, Indonesia</h3>
66+
</div>
67+
</div>
68+
<script src="script.js"></script>
69+
</body>
70+
</html>

‎myTravelBucketList/script.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const panels = document.querySelectorAll(".panel");
2+
console.log(panels);
3+
4+
panels.forEach((panel) => {
5+
panel.addEventListener("click", () => {
6+
removeActiveClasses();
7+
panel.classList.add("active");
8+
});
9+
});
10+
11+
function removeActiveClasses() {
12+
panels.forEach((panel) => {
13+
panel.classList.remove("active");
14+
});
15+
}

‎myTravelBucketList/styles.css

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Spinnaker&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Spinnaker", sans-serif;
9+
background-color: black;
10+
11+
12+
}
13+
14+
h1 {
15+
text-align: center;
16+
margin-top: 10px;
17+
margin-bottom: 0;
18+
}
19+
20+
span {
21+
background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
22+
-webkit-background-clip: text;
23+
-webkit-text-fill-color: transparent;
24+
}
25+
26+
::-webkit-scrollbar {
27+
display: none;
28+
}
29+
30+
.container {
31+
height: 90vh;
32+
display: flex;
33+
align-items: center;
34+
justify-content: center;
35+
overflow: hidden;
36+
margin: 0;
37+
}
38+
39+
40+
.panel {
41+
background-size: cover;
42+
background-position: center;
43+
background-repeat: no-repeat;
44+
height: 80vh;
45+
/* width: 90vh; */
46+
border-radius: 3rem;
47+
color: #ffff;
48+
cursor: pointer;
49+
flex: 0.5;
50+
margin: 10px;
51+
position: relative;
52+
transition: flex 0.7s ease-in;
53+
54+
}
55+
56+
.panel h3 {
57+
font-size: 1rem;
58+
font-weight: 500;
59+
position: absolute;
60+
bottom: 1.5rem;
61+
left: 5px;
62+
margin: 1rem;
63+
opacity: 0;
64+
}
65+
66+
.panel.active {
67+
flex: 5;
68+
}
69+
70+
.panel.active h3 {
71+
opacity: 1;
72+
transition: opacity 0.3s ease-in 0.4s;
73+
}
74+
75+
@media (max-width: 480px) {
76+
.container {
77+
width: 100vw;
78+
}
79+
80+
.panel:nth-of-type(4),
81+
.panel:nth-of-type(5) {
82+
display: none;
83+
}
84+
}

0 commit comments

Comments
 (0)