Skip to content

Commit c1e836f

Browse files
HuXn-WebDevHuXn-WebDev
committed
Expanding Cards
1 parent 470f43c commit c1e836f

File tree

3 files changed

+129
-0
lines changed

3 files changed

+129
-0
lines changed

‎37. Expanding Cards/app.js‎

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

‎37. Expanding Cards/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Expanding Cards</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="slide bg-image image-1 active">
12+
<h3>Dark Siders 2</h3>
13+
</div>
14+
<div class="slide bg-image image-2">
15+
<h3>Assassin's Creed</h3>
16+
</div>
17+
<div class="slide bg-image image-3">
18+
<h3>Dishonored</h3>
19+
</div>
20+
<div class="slide bg-image image-4">
21+
<h3>Watch Dogs 2</h3>
22+
</div>
23+
<div class="slide bg-image image-5">
24+
<h3>Call Of Duty</h3>
25+
</div>
26+
</div>
27+
28+
<script src="app.js"></script>
29+
</body>
30+
</html>

‎37. Expanding Cards/style.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
font-family: sans-serif;
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
height: 100vh;
11+
margin: 0;
12+
background-color: rgb(5, 5, 5);
13+
color: #fff;
14+
}
15+
16+
.container {
17+
display: flex;
18+
width: 100vw;
19+
}
20+
21+
.bg-image {
22+
background-size: cover;
23+
background-position: center;
24+
background-repeat: no-repeat;
25+
}
26+
27+
/* IMAGES SOURCES */
28+
/* https://wallpapercave.com/pc-games-wallpapers */
29+
30+
.image-1 {
31+
background-image: url(https://wallpapercave.com/dwp2x/wp3163455.jpg);
32+
}
33+
34+
.image-2 {
35+
background-image: url(https://wallpapercave.com/dwp2x/wp3163465.jpg);
36+
}
37+
38+
.image-3 {
39+
background-image: url(https://wallpapercave.com/dwp2x/wp4257699.jpg);
40+
}
41+
42+
.image-4 {
43+
background-image: url(https://wallpapercave.com/dwp2x/wp4257708.jpg);
44+
}
45+
46+
.image-5 {
47+
background-image: url(https://wallpapercave.com/dwp2x/wp3163453.jpg);
48+
}
49+
50+
.slide {
51+
position: relative;
52+
height: 80vh;
53+
flex: 0.5;
54+
border-radius: 50px;
55+
color: #fff;
56+
margin: 10px;
57+
cursor: pointer;
58+
transition: all 700ms ease-in;
59+
}
60+
61+
.slide h3 {
62+
position: absolute;
63+
bottom: 20px;
64+
left: 20px;
65+
margin: 0;
66+
opacity: 0;
67+
font-size: 24px;
68+
}
69+
70+
@media (max-width: 480px) {
71+
.slide:nth-of-type(4),
72+
.slide:nth-of-type(5) {
73+
display: none;
74+
}
75+
}
76+
77+
/* JavaScript */
78+
.slide.active {
79+
flex: 5;
80+
}
81+
82+
.slide.active h3 {
83+
opacity: 1;
84+
transition: opacity 0.3s ease-in 0.4s;
85+
}

0 commit comments

Comments
 (0)