Skip to content

Commit 7a8db16

Browse files
Ayushmaanagarwal1211Ayushmaanagarwal1211
committed
uodated
1 parent db2b116 commit 7a8db16

2 files changed

Lines changed: 99 additions & 1 deletion

File tree

‎website2.0/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,15 @@
2121
overflow-y: scroll;
2222
height: auto;
2323
}
24+
.hamburger div {
25+
width: 25px;
26+
height: 3px;
27+
background-color: #333;
28+
margin: 4px;
29+
transition: 0.4s;
30+
}
2431
</style>
32+
2533
</head>
2634
<body>
2735
<header>
@@ -42,8 +50,23 @@
4250
<button class="sponsor-btn">Sponsor <i id="heart" class="fas fa-heart"></i></button>
4351
</a>
4452
</div>
53+
<div class="hamburger" id="hamburger">
54+
<div></div>
55+
<div></div>
56+
<div></div>
57+
</div>
4558
</nav>
4659
</header>
60+
<ul class="nav-links1" id="navlinks1">
61+
<li><a href="index.html">Home</a></li>
62+
<li><a href="#">About</a></li>
63+
<li><a href="contributor.html">Team</a></li>
64+
<li><a href="#">Contact</a></li>
65+
<li>
66+
<a href="https://github.com/sponsors/mdazfar2">
67+
<button class="sponsor-btn">Sponsor <i id="heart" class="fas fa-heart"></i></button>
68+
</a> </li>
69+
</ul>
4770
<main>
4871
<div class="main-content">
4972

@@ -60,5 +83,15 @@ <h1>HelpOps-Hub</h1>
6083
</div>
6184
</main>
6285
<script src="scripts.js"></script>
86+
<script>
87+
88+
// if(window.innerWidth>800){
89+
// document.getElementById("navlinks1").style.display='none'
90+
// }
91+
document.getElementById('hamburger').addEventListener('click',(e)=>{
92+
let ele=document.getElementById("navlinks1")
93+
document.querySelector('.nav-links1').classList.toggle('active');
94+
})
95+
</script>
6396
</body>
6497
</html>

‎website2.0/styles.css‎

Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,72 @@
99
justify-content: center;
1010
/* height: 100vh; */
1111
/* } */
12+
@media only screen and (max-width:987px){
13+
.nav-links{
14+
display: none !important;
15+
}
16+
.nav-actions{
1217

18+
display: none !important;
19+
}
20+
.hamburger{
21+
display: block !important;
22+
}
23+
/* nav{
24+
gap: 30%;
25+
} */
26+
.nav-links1 li a {
27+
text-decoration: none;
28+
color: #000;
29+
padding: 10px 15px;
30+
font-size: x-large;
31+
32+
}
33+
}
34+
.active{
35+
animation: animate forwards ease-in 0.2s;
36+
list-style: none;
37+
display: flex;
38+
gap: 20px;
39+
padding: 10px 20px;
40+
background-color: #fdd76b;
41+
flex-wrap: wrap;
42+
flex-direction: column;
43+
align-items: center;
44+
text-decoration: none;
45+
46+
/* box-shadow: 0 4px 6px #FF7D1F; */
47+
width: 100%;
48+
}
49+
@media only screen and (max-width:790px) {
50+
nav{
51+
gap: 10%;
52+
}
53+
}
54+
@media only screen and (max-width:409px) {
55+
56+
57+
.logo{
58+
width: 100px;
59+
}
60+
}
61+
.nav-links1{
62+
height: 0px ;
63+
overflow: hidden;
64+
display: flex;
65+
flex-direction: column;
66+
67+
}
68+
@keyframes animate {
69+
from{
70+
height: 0px;
71+
}to{
72+
height: 350px;
73+
}
74+
}
75+
.hamburger{
76+
display: none;
77+
}
1378
header {
1479
width: 100%;
1580
position: relative;
@@ -20,7 +85,7 @@ header {
2085

2186
nav {
2287
display: flex;
23-
justify-content: space-between;
88+
justify-content: space-between !important;
2489
flex-wrap: wrap;
2590
justify-content: center;
2691
position: relative;

0 commit comments

Comments
 (0)