Skip to content

Commit ef3c7c2

Browse files
MaywwineMaywwine
authored
Add files via upload
0 parents  commit ef3c7c2

9 files changed

+108
-0
lines changed

‎Expand/css/style.css

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
* {
2+
box-sizing: content-box;
3+
}
4+
5+
body {
6+
display: flex;
7+
align-items: center;
8+
justify-content: center;
9+
height: 100vh;
10+
overflow: hidden;
11+
margin: 0;
12+
}
13+
14+
.container {
15+
display: flex;
16+
width: 90vw;
17+
}
18+
19+
.panel {
20+
background-size:auto 100%;
21+
background-position: center;
22+
background-repeat: no-repeat;
23+
height: 80vh;
24+
cursor: pointer;
25+
border-radius: 50px;
26+
position: relative;
27+
color: white;
28+
flex: 0.5;
29+
margin: 10px;
30+
transition: flex 0.7s ease-in;
31+
}
32+
33+
.panel h3 {
34+
margin: 0;
35+
bottom: 20px;
36+
position: absolute;
37+
opacity: 0;
38+
left: 30%;
39+
font-size: 15px;
40+
}
41+
42+
.panel.active {
43+
flex: 4;
44+
45+
}
46+
47+
.panel.active h3 {
48+
opacity: 1;
49+
transition: opacity 0.3s ease-in 0.5s;
50+
}
51+
52+
@media(max-width: 560px){
53+
.container{
54+
width: 100vw;
55+
}
56+
}

‎Expand/images/hamid-khaleghi-bNWXW7ZvYGo-unsplash.jpg

1.13 MB
Loading

‎Expand/images/khashayar-kouchpeydeh-eSOST-WeOqo-unsplash.jpg

3.17 MB
Loading

‎Expand/images/mostafa-meraji-GdoD9Q-6rKE-unsplash.jpg

6.54 MB
Loading

‎Expand/images/mostafa-meraji-semMfm4quQc-unsplash.jpg

10.4 MB
Loading

‎Expand/images/pourya-sharifi-dWGJEgG8nX0-unsplash.jpg

1.46 MB
Loading

‎Expand/images/reza-ghazali-VMkGvOogLYg-unsplash.jpg

2.85 MB
Loading

‎Expand/index.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="css/style.css">
8+
<title>Expandig Images</title>
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<div class="panel active"
14+
style="background-image: url('images/khashayar-kouchpeydeh-eSOST-WeOqo-unsplash.jpg');">
15+
<h3>Borje Milad - Tehran</h3>
16+
</div>
17+
<div class="panel " style="background-image: url('images/pourya-sharifi-dWGJEgG8nX0-unsplash.jpg');">
18+
<h3>Gilan provience</h3>
19+
</div>
20+
<div class="panel " style="background-image: url('images/mostafa-meraji-semMfm4quQc-unsplash.jpg');">
21+
<h3>Dizin pist</h3>
22+
</div>
23+
<div class="panel " style="background-image: url('images/mostafa-meraji-GdoD9Q-6rKE-unsplash.jpg');">
24+
<h3>Esfehan provience</h3>
25+
</div>
26+
<div class="panel " style="background-image: url('images/reza-ghazali-VMkGvOogLYg-unsplash.jpg');">
27+
<h3>Hormoz Island</h3>
28+
</div>
29+
<div class="panel " style="background-image: url('images/hamid-khaleghi-bNWXW7ZvYGo-unsplash.jpg');">
30+
<h3>Mesr Desert, Iran</h3>
31+
</div>
32+
</div>
33+
<script src="./js/javascript.js"></script>
34+
</body>
35+
36+
</html>

‎Expand/js/javascript.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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+
11+
function removeActiveClasses(){
12+
panels.forEach(panel => {
13+
panel.classList.remove('active');
14+
})
15+
16+
}

0 commit comments

Comments
 (0)