Skip to content

Commit 6fdf4ef

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #413 from perveen-neha/web-gallery-perveen-neha
web gallery with aesthetic images using css js and html
2 parents 144dcac + c0bb959 commit 6fdf4ef

File tree

8 files changed

+185
-0
lines changed

8 files changed

+185
-0
lines changed

‎web-gallery/README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Welcome 🖐 to the aesthetic web gallery.
2+
It is a simple and beautiful gallery with aesthtic images using HTML, CSS & JS.
3+
4+
5+
## 💻Tech Stack
6+
<br>
7+
8+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
9+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
10+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
11+
12+
<br>
13+
14+
### How to use:
15+
16+
---
17+
18+
- Download or clone the repository
19+
20+
```
21+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
22+
```
23+
24+
- Go to the directory
25+
- Run the index.html file
26+
- CNavigate the website in different modes(desktop or mobile)
27+
28+
<br>
29+
30+
## Happy Coding!

‎web-gallery/img/khatai.jpg

251 KB
Loading

‎web-gallery/img/nams.jpg

435 KB
Loading

‎web-gallery/img/nedu.jpg

419 KB
Loading

‎web-gallery/img/neha.jpg

609 KB
Loading

‎web-gallery/img/tat.jpg

672 KB
Loading

‎web-gallery/index.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
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>WEB GALLERY</title>
8+
<link rel="stylesheet" href="style.css">
9+
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
10+
</head>
11+
<body>
12+
<div class="photos">
13+
<div class="photo nishat">
14+
<p>be a warrior,</p>
15+
<p>Click</p>
16+
<p>not a worrior</p>
17+
</div>
18+
<div class="photo nedu">
19+
<p>Embrace reality,</p>
20+
<p>any</p>
21+
<p>Even if it burns</p>
22+
</div>
23+
<div class="photo neha">
24+
<p>it's the little</p>
25+
<p>one</p>
26+
<p>things in life</p>
27+
</div>
28+
<div class="photo nura">
29+
<p>Make it</p>
30+
<p>of</p>
31+
<p>happen</p>
32+
</div>
33+
<div class="photo mahee">
34+
<p>You are</p>
35+
<p>These</p>
36+
<p>your home</p>
37+
</div>
38+
</div>
39+
40+
<script>
41+
const photos = document.querySelectorAll('.photo');
42+
43+
function toggleActive(e)
44+
{
45+
if (e.propertyName.includes('flex')) {
46+
this.classList.toggle('open-active');
47+
}
48+
}
49+
50+
function toggleOpen(e)
51+
{
52+
this.classList.toggle('open');
53+
}
54+
55+
photos.forEach(photo => photo.addEventListener('click',toggleOpen));
56+
photos.forEach(photo => photo.addEventListener('transitionend', toggleActive));
57+
58+
</script>
59+
60+
</body>
61+
</html>

‎web-gallery/style.css

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
html {
2+
box-sizing: border-box;
3+
background: yellow;
4+
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
5+
font-size: 20px;
6+
font-weight: 200;
7+
}
8+
*,
9+
*:before,
10+
*:after {
11+
box-sizing: inherit;
12+
}
13+
body {
14+
margin: 0;
15+
}
16+
.photos {
17+
min-height: 100vh;
18+
overflow: hidden;
19+
display: flex;
20+
}
21+
.photo {
22+
color: rgb(8, 3, 75);
23+
background: #6b0f9c;
24+
box-shadow: inset 0 0 0 5px rgba(12, 21, 105, 0.1);
25+
flex: 1;
26+
text-align: center;
27+
align-items: center;
28+
font-size: 20px;
29+
background-size: cover;
30+
background-position: center;
31+
flex: 1;
32+
justify-content: center;
33+
display: flex;
34+
flex-direction: column;
35+
transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
36+
flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s;
37+
}
38+
.neha {
39+
background-image: url("./img/neha.jpg");
40+
}
41+
.nishat {
42+
background-image: url("./img/tat.jpg");
43+
}
44+
.mahee {
45+
background-image: url("./img/khatai.jpg");
46+
}
47+
.nura {
48+
background-image: url("./img/nams.jpg");
49+
}
50+
.nedu {
51+
background-image: url("./img/nedu.jpg");
52+
}
53+
54+
.photo > * {
55+
margin: 0;
56+
width: 100%;
57+
transition: transform 0.5s;
58+
flex: 1 0 auto;
59+
display: flex;
60+
justify-content: center;
61+
align-items: center;
62+
}
63+
64+
.photo > *:first-child {
65+
transform: translateY(-100%);
66+
}
67+
.photo.open-active > *:first-child {
68+
transform: translateY(0);
69+
}
70+
.photo > *:last-child {
71+
transform: translateY(100%);
72+
}
73+
.photo.open-active > *:last-child {
74+
transform: translateY(0);
75+
}
76+
77+
.photo p {
78+
font-family: 'Pacifico', cursive;
79+
text-shadow: 0 0 4px rgb(54 211 38 / 72%), 0 0 14px rgb(231 20 109 / 75%);
80+
font-size: 2em;
81+
}
82+
.photo p:nth-child(2) {
83+
font-size: 3em;
84+
}
85+
86+
.photo.open-active > *:nth-child(2) {
87+
display: none;
88+
}
89+
90+
.photo.open {
91+
flex: 5;
92+
font-size: 40px;
93+
}
94+

0 commit comments

Comments
 (0)