Skip to content

Commit b61abc5

Browse files
ShivamMaurya2002ShivamMaurya2002
authored
Update index.html
1 parent 4d1949a commit b61abc5

1 file changed

Lines changed: 125 additions & 37 deletions

File tree

‎index.html‎

Lines changed: 125 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,60 +2,148 @@
22
<html lang="en">
33

44
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Interview Questions</title>
88
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
9-
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
9+
crossorigin="anonymous" />
1010
<style>
11-
.navbar-nav .nav-link {
12-
background-color: #bab6b6;
13-
color: rgb(14, 14, 14) !important;
11+
body {
12+
background-color: #0f1923;
13+
color: #ffffff;
14+
}
15+
16+
.bg-light {
17+
background-color: #112e42 !important;
18+
}
19+
20+
/* Website Title */
21+
.navbar-brand {
22+
font-weight: bold;
23+
font-size: 24px;
24+
background: linear-gradient(90deg, #38bdf8, #805ad5);
25+
-webkit-background-clip: text;
26+
-webkit-text-fill-color: transparent;
27+
}
28+
29+
/* Top Nav Buttons */
30+
.nav-link {
31+
color: #64ffda !important;
32+
border: 1.5px solid #64ffda !important;
33+
background-color: transparent !important;
34+
font-weight: 500;
35+
padding: 8px 16px;
36+
border-radius: 15px;
37+
transition: all 0.3s ease;
38+
text-align: center;
39+
}
40+
41+
.nav-link:hover {
42+
transform: translateY(-0.5px);
43+
box-shadow: 0 0 12px #64ffda;
44+
background-color: rgba(255, 255, 255, 0.05) !important;
45+
}
46+
47+
/* Side Menu */
48+
.side-menu {
49+
position: fixed;
50+
top: 55px;
51+
right: -270px;
52+
width: 270px;
53+
height: 50vh;
54+
background-color: #112e42;
55+
padding: 10px;
56+
transition: right 0.3s ease;
57+
z-index: 1050;
58+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
59+
}
60+
61+
.side-menu.show {
62+
right: 0;
63+
}
64+
65+
.side-menu .close-btn {
66+
border: 1.5px solid #64ffda;
67+
font-weight: 900;
68+
border-radius: 5px;
69+
background: none;
70+
font-size: 22px;
71+
color: #ff4444;
72+
float: right;
73+
cursor: pointer;
74+
}
75+
76+
.side-menu ul {
77+
list-style: none;
78+
padding-left: 0;
79+
margin-top: 50px;
80+
}
81+
82+
.side-menu ul li {
83+
margin-bottom: 20px;
84+
}
85+
86+
.side-menu .nav-link {
87+
color: #64ffda !important;
88+
border: 1.5px solid #64ffda !important;
89+
font-weight: 600;
90+
padding: 8px 16px;
1491
border-radius: 10px;
15-
padding: 5px 10px;
16-
margin: 5px;
92+
text-align: center;
93+
transition: all 0.3s ease;
1794
}
1895

19-
.navbar-nav .nav-link:hover {
20-
background-color: #acaca8;
96+
.side-menu .nav-link:hover {
97+
transform: translateY(-0.5px);
98+
background-color: rgba(255, 255, 255, 0.1) !important;
99+
box-shadow: 0 0 12px #64ffda;
21100
}
22101
</style>
23102
</head>
24103

25104
<body>
26105
<nav class="navbar navbar-expand-lg navbar-light bg-light">
27-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
28-
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
29-
<span class="navbar-toggler-icon"></span>
30-
</button>
31-
<div class="collapse navbar-collapse" id="navbarSupportedContent">
32-
<ul class="navbar-nav mr-auto">
33-
<li class="nav-item active"><a class="nav-link" href="./JS/JS.html" target="tag">JavaScript<span
34-
class="sr-only">(current)</span></a></li>
35-
36-
</ul>
37-
<!-- <form class="form-inline my-2 my-lg-0">
38-
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
39-
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
40-
</form> -->
106+
<div class="container-fluid">
107+
<!-- Website Title on the Left -->
108+
<a class="navbar-brand">InterviewPreparation</a>
109+
110+
<!-- Toggler for small screens -->
111+
<button class="navbar-toggler ml-auto" type="button" onclick="toggleMenu()">
112+
<span class="navbar-toggler-icon"></span>
113+
</button>
114+
115+
<!-- Top Nav for large screens -->
116+
<div class="collapse navbar-collapse d-none d-lg-flex justify-content-end">
117+
<ul class="navbar-nav">
118+
<li class="nav-item active">
119+
<a class="nav-link" href="./JS/JS.html" target="tag">JavaScript</a>
120+
</li>
121+
</ul>
122+
</div>
41123
</div>
42124
</nav>
125+
126+
<!-- Side Toggle Menu -->
127+
<div id="menu" class="side-menu">
128+
<button class="close-btn" onclick="toggleMenu()">&times;</button>
129+
<ul>
130+
<li><a class="nav-link" href="./JS/JS.html" target="tag">JavaScript</a></li>
131+
</ul>
132+
</div>
133+
43134
<section>
44-
<iframe name="tag" style="border-style: none;
45-
width: 100%;
46-
height: 520px;">
47-
</iframe>
135+
<iframe name="tag" style="border: none; width: 100%; height: 520px;"></iframe>
48136
</section>
49137

50-
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
51-
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
52-
crossorigin="anonymous"></script>
53-
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
54-
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
55-
crossorigin="anonymous"></script>
56-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
57-
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
58-
crossorigin="anonymous"></script>
138+
<script>
139+
function toggleMenu() {
140+
document.getElementById('menu').classList.toggle('show');
141+
}
142+
</script>
143+
144+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
145+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" crossorigin="anonymous"></script>
146+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
59147
</body>
60148

61149
</html>

0 commit comments

Comments
 (0)