Skip to content

Commit 1f4cdaf

Browse files
PrajapatiRoshanPrajapatiRoshan
PrajapatiRoshan
authored and
PrajapatiRoshan
committed
Add some new projects
1 parent 5c4e38a commit 1f4cdaf

File tree

60 files changed

+3166
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+3166
-0
lines changed

‎3d-box-Background/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>3D Boxes Background</title>
8+
</head>
9+
<body>
10+
<button id="btn" class="magic">:D Background</button>
11+
<div id="boxes" class="boxes big"></div>
12+
<script src="script.js"></script>
13+
</body>
14+
</html>

‎3d-box-Background/script.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const boxesContainer = document.getElementById('boxes');
2+
const btn = document.getElementById('btn');
3+
4+
(() => {
5+
for (let i = 0; i < 4; i++) {
6+
for (let j = 0; j < 4; j++) {
7+
const box = document.createElement('div');
8+
box.classList.add('box');
9+
box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`;
10+
boxesContainer.appendChild(box);
11+
}
12+
}
13+
})();
14+
15+
btn.addEventListener('click', () => boxesContainer.classList.toggle('big'));

‎3d-box-Background/style.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
background-color: #000000;
7+
font-family: 'Roboto', sans-serif;
8+
display: flex;
9+
flex-direction: column;
10+
align-items: center;
11+
justify-content: center;
12+
height: 100vh;
13+
overflow: hidden;
14+
}
15+
16+
.magic {
17+
background-color: #0e0b02;
18+
color: #fff;
19+
font-family: 'Poppins', sans-serif;
20+
border: 0;
21+
border-radius: 3px;
22+
font-size: 16px;
23+
padding: 12px 20px;
24+
cursor: pointer;
25+
position: fixed;
26+
top: 20px;
27+
letter-spacing: 1px;
28+
box-shadow: 0 3px rgba(249, 202, 36, 0.5);
29+
z-index: 100;
30+
}
31+
32+
.magic:focus {
33+
outline: none;
34+
}
35+
36+
.magic:active {
37+
box-shadow: none;
38+
transform: translateY(2px);
39+
}
40+
41+
.boxes {
42+
display: flex;
43+
flex-wrap: wrap;
44+
justify-content: space-around;
45+
height: 500px;
46+
width: 500px;
47+
position: relative;
48+
transition: 0.4s ease;
49+
}
50+
51+
.boxes.big {
52+
width: 600px;
53+
height: 600px;
54+
}
55+
56+
.boxes.big .box {
57+
transform: rotateZ(360deg);
58+
}
59+
60+
.box {
61+
background-image: url('https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExcGw1N3FrcjV3ZDZheWZ1ZmhhZGo5eHFseGdseng0dm11cGtoZHo0cyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3KC2jD2QcBOSc/giphy.webp');
62+
background-repeat: no-repeat;
63+
background-size: 500px 500px;
64+
position: relative;
65+
height: 125px;
66+
width: 125px;
67+
transition: 0.4s ease;
68+
}
69+
70+
.box::after {
71+
content: '';
72+
background-color: white;
73+
position: absolute;
74+
top: 5px;
75+
right: -10px;
76+
height: 100%;
77+
width: 10px;
78+
transform: skewY(45deg);
79+
}
80+
81+
.box::before {
82+
content: '';
83+
background-color: white;
84+
position: absolute;
85+
bottom: -10px;
86+
left: 5px;
87+
height: 10px;
88+
width: 100%;
89+
transform: skewX(45deg);
90+
}

‎animated-img-expanding/index.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Expanding Cards</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div
12+
class="panel active"
13+
style="
14+
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');
15+
"
16+
>
17+
<h3>Code phat gya</h3>
18+
</div>
19+
<div
20+
class="panel"
21+
style="
22+
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');
23+
"
24+
>
25+
<h3>Explore The World</h3>
26+
</div>
27+
<div
28+
class="panel"
29+
style="
30+
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');
31+
"
32+
>
33+
<h3>Wild Forest</h3>
34+
</div>
35+
<div
36+
class="panel"
37+
style="
38+
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');
39+
"
40+
>
41+
<h3>Sunny Beach</h3>
42+
</div>
43+
<div
44+
class="panel"
45+
style="
46+
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');
47+
"
48+
>
49+
<h3>City on Winter</h3>
50+
</div>
51+
<div
52+
class="panel"
53+
style="
54+
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');
55+
"
56+
>
57+
<h3>Mountains - Clouds</h3>
58+
</div>
59+
</div>
60+
61+
<script src="script.js"></script>
62+
</body>
63+
</html>

‎animated-img-expanding/script.js‎

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

‎animated-img-expanding/style.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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+
height: 100vh;
13+
overflow: hidden;
14+
margin: 0;
15+
}
16+
17+
.container {
18+
display: flex;
19+
width: 90vw;
20+
}
21+
22+
.panel {
23+
background-size: cover;
24+
background-position: center;
25+
background-repeat: no-repeat;
26+
height: 80vh;
27+
border-radius: 50px;
28+
color: #fff;
29+
cursor: pointer;
30+
flex: 0.5;
31+
margin: 10px;
32+
position: relative;
33+
-webkit-transition: all 700ms ease-in;
34+
}
35+
36+
.panel h3 {
37+
font-size: 24px;
38+
position: absolute;
39+
bottom: 20px;
40+
left: 20px;
41+
margin: 0;
42+
opacity: 0;
43+
}
44+
45+
.panel.active {
46+
flex: 5;
47+
cursor: default;
48+
}
49+
50+
.panel.active h3 {
51+
opacity: 1;
52+
transition: opacity 0.3s ease-in 0.4s;
53+
}
54+
55+
@media (max-width: 480px) {
56+
.container {
57+
width: 100vw;
58+
}
59+
60+
.panel:nth-of-type(4),
61+
.panel:nth-of-type(5) {
62+
display: none;
63+
}
64+
}

‎animated-nav-close/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Animated Navigation</title>
8+
</head>
9+
<body>
10+
<nav class="active" id="nav">
11+
<ul>
12+
<li><a href="#">Home</a></li>
13+
<li><a href="#">Works</a></li>
14+
<li><a href="#">About</a></li>
15+
<li><a href="#">Contact</a></li>
16+
</ul>
17+
<button class="icon" id="toggle">
18+
<div class="line line1"></div>
19+
<div class="line line2"></div>
20+
</button>
21+
</nav>
22+
<script src="script.js"></script>
23+
</body>
24+
</html>

‎animated-nav-close/script.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const toggle = document.getElementById('toggle');
2+
const nav = document.getElementById('nav');
3+
4+
toggle.addEventListener('click', () => nav.classList.toggle('active'));

‎animated-nav-close/style.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #eafbff;
9+
background-image: linear-gradient(
10+
to bottom,
11+
#ffffff 0%,
12+
#ffffff 50%,
13+
#000000 50%,
14+
#000000 100%
15+
);
16+
font-family: 'Muli', sans-serif;
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
height: 100vh;
21+
margin: 0;
22+
}
23+
24+
nav {
25+
background-color: #fff;
26+
padding: 20px;
27+
width: 80px;
28+
display: flex;
29+
align-items: center;
30+
justify-content: center;
31+
border-radius: 3px;
32+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
33+
transition: width 0.6s linear;
34+
overflow-x: hidden;
35+
}
36+
37+
nav.active {
38+
width: 350px;
39+
}
40+
41+
nav ul {
42+
display: flex;
43+
list-style-type: none;
44+
padding: 0;
45+
margin: 0;
46+
width: 0;
47+
transition: width 0.6s linear;
48+
}
49+
50+
nav.active ul {
51+
width: 100%;
52+
}
53+
54+
nav ul li {
55+
transform: rotateY(0deg);
56+
opacity: 0;
57+
transition: transform 0.6s linear, opacity 0.6s linear;
58+
}
59+
60+
nav.active ul li {
61+
opacity: 1;
62+
transform: rotateY(360deg);
63+
}
64+
65+
nav ul a {
66+
position: relative;
67+
color: #000;
68+
text-decoration: none;
69+
margin: 0 10px;
70+
}
71+
72+
.icon {
73+
background-color: #fff;
74+
border: 0;
75+
cursor: pointer;
76+
padding: 0;
77+
position: relative;
78+
height: 30px;
79+
width: 30px;
80+
}
81+
82+
.icon:focus {
83+
outline: 0;
84+
}
85+
86+
.icon .line {
87+
background-color: #5290f9;
88+
height: 2px;
89+
width: 20px;
90+
position: absolute;
91+
top: 10px;
92+
left: 5px;
93+
transition: transform 0.6s linear;
94+
}
95+
96+
.icon .line2 {
97+
top: auto;
98+
bottom: 10px;
99+
}
100+
101+
nav.active .icon .line1 {
102+
transform: rotate(-765deg) translateY(5.5px);
103+
}
104+
105+
nav.active .icon .line2 {
106+
transform: rotate(765deg) translateY(-5.5px);
107+
}

0 commit comments

Comments
 (0)