Skip to content

Commit 2b0d88b

Browse files
shubrauttshubrautt
committed
files Added
1 parent 58a77d7 commit 2b0d88b

File tree

2 files changed

+169
-0
lines changed

2 files changed

+169
-0
lines changed

‎nav/index.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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+
<title>Document</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<nav class="navbar">
13+
<button class="btn clc-btn"><i class="fas fa-times fa-3x"></i></button>
14+
<a href="#Home">Home</a>
15+
<a href="#Services">Services</a>
16+
<a href="#About">About</a>
17+
<a href="#Contact">Contact</a>
18+
</nav>
19+
<div class="main">
20+
<button class="btn hum-btn"><i class="fas fa-bars fa-3x"></i></button>
21+
<div>
22+
<section id="Home">Home</section>
23+
<section id="Services">Services</section>
24+
<section id="About">About</section>
25+
<section id="Contact">Contact</section>
26+
</div>
27+
</div>
28+
</div>
29+
30+
31+
<script>
32+
33+
const clc = document.querySelector('.clc-btn');
34+
const hum = document.querySelector('.hum-btn');
35+
const navbar = document.querySelector('.navbar');
36+
const main = document.querySelector('.main');
37+
const a = document.querySelectorAll('a');
38+
39+
hum.addEventListener("click", ()=> {
40+
navbar.classList.add('active_navbar');
41+
main.classList.add('active_main');
42+
});
43+
44+
clc.addEventListener("click", ()=> {
45+
navbar.classList.remove('active_navbar');
46+
main.classList.remove('active_main');
47+
});
48+
49+
a.forEach(function(e){
50+
e.addEventListener("click", ()=>{
51+
navbar.classList.remove('active_navbar');
52+
main.classList.remove('active_main');
53+
})
54+
});
55+
</script>
56+
</body>
57+
</html>

‎nav/style.css‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body{
7+
height: 100vh;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
overflow: hidden;
12+
}
13+
.container{
14+
width: 90%;
15+
height: 90vh;
16+
position: relative;
17+
}
18+
.navbar{
19+
width: 100%;
20+
height: 100%;
21+
background: #242424;
22+
position: absolute;
23+
transform: perspective(1000px) rotateY(-180deg);
24+
backface-visibility: hidden;
25+
display: flex;
26+
justify-content: center;
27+
flex-direction: column;
28+
align-items: center;
29+
transition: transform .4s;
30+
}
31+
.navbar a{
32+
margin: 0.4em;
33+
padding: 0.2em 0.4em;
34+
text-decoration: none;
35+
font-size: 1.5em;
36+
color: white;
37+
position: relative;
38+
cursor: pointer;
39+
}
40+
.navbar a::before{
41+
content: '';
42+
position: absolute;
43+
top: 0;
44+
left: 0;
45+
width: 100%;
46+
height: 100%;
47+
background: pink;
48+
z-index: -1;
49+
transform: scaleX(0);
50+
transform-origin: left;
51+
transition: transform .4s;
52+
}
53+
.navbar a:hover::before{
54+
transform: scaleX(0.5);
55+
}
56+
.main{
57+
width: 100%;
58+
height: 100%;
59+
background: #454545;
60+
position: absolute;
61+
transform: perspective(1000px) rotateY(0deg);
62+
backface-visibility: hidden;
63+
position: relative;
64+
transition: transform .4s;
65+
}
66+
.active_navbar{
67+
transform: rotateY(0deg);
68+
}
69+
.active_main{
70+
transform: rotateY(180deg);
71+
}
72+
.btn{
73+
width: 50px;
74+
position: absolute;
75+
top: 50%;
76+
left: 0;
77+
transform: translate(-20px, -50%);
78+
background: #2b2b2b;
79+
padding: 0.5em;
80+
border-radius: 10px;
81+
color: white;
82+
z-index: 20;
83+
border: none;
84+
cursor: pointer;
85+
}
86+
.main div{
87+
width: 100%;
88+
height: 100%;
89+
position: absolute;
90+
overflow-x: auto;
91+
}
92+
section{
93+
width: 100%;
94+
height: 100%;
95+
display: flex;
96+
justify-content: center;
97+
align-items: center;
98+
font-size: 5em;
99+
color: white;
100+
}
101+
section:nth-child(1){
102+
background: #e93b81;
103+
}
104+
section:nth-child(2){
105+
background: #511281;
106+
}
107+
section:nth-child(3){
108+
background: #fb3640;
109+
}
110+
section:nth-child(4){
111+
background: #19b5c0;
112+
}

0 commit comments

Comments
 (0)