Skip to content

Commit 2b38cba

Browse files
author
yogesh2019
committed
media max width, clear first then assign, nth type of(4), flex : 5, .5
1 parent 19f05f6 commit 2b38cba

File tree

3 files changed

+112
-0
lines changed

3 files changed

+112
-0
lines changed

‎1_expanding_cards/index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Document</title>
10+
</head>
11+
12+
<body>
13+
<div class="container">
14+
<div class="panel active"
15+
style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
16+
<h3>Explore The World</h3>
17+
</div>
18+
<div class="panel"
19+
style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
20+
<h3>Wild Forest</h3>
21+
</div>
22+
<div class="panel"
23+
style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
24+
<h3>Sunny Beach</h3>
25+
</div>
26+
<div class="panel"
27+
style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
28+
<h3>City on Winter</h3>
29+
</div>
30+
<div class="panel"
31+
style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
32+
<h3>Mountains - Clouds</h3>
33+
</div>
34+
</div>
35+
<script src="script.js"></script>
36+
</body>
37+
38+
</html>

‎1_expanding_cards/script.js

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

‎1_expanding_cards/style.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: 'Muli', sans-serif;
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
}
13+
14+
.container {
15+
display: flex;
16+
width: 90vw;
17+
}
18+
19+
.panel {
20+
background-size: cover;
21+
background-position: center;
22+
background-repeat: no-repeat;
23+
height: 80vh;
24+
border-radius: 50px;
25+
color: #fff;
26+
cursor: pointer;
27+
flex: 0.50;
28+
margin: 10px;
29+
position: relative;
30+
-webkit-transition: all 700ms ease-in;
31+
}
32+
33+
.panel h3 {
34+
font-size: 24px;
35+
position: absolute;
36+
bottom: 20px;
37+
left: 20px;
38+
margin: 0;
39+
opacity: 0;
40+
}
41+
42+
.panel.active {
43+
flex: 5;
44+
}
45+
46+
.panel.active h3 {
47+
opacity: 1;
48+
transition: opacity 0.3s ease-in 0.4s;
49+
}
50+
51+
@media (max-width: 480px) {
52+
.container {
53+
width: 100vw;
54+
}
55+
56+
.panel:nth-of-type(4),
57+
.panel:nth-of-type(5) {
58+
display: none;
59+
}
60+
}

0 commit comments

Comments
 (0)