Skip to content

Commit fcb07d5

Browse files
DineshjnldDineshjnld
authored
Add files via upload
0 parents  commit fcb07d5

3 files changed

Lines changed: 322 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Documents Insights</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<header class="header">
11+
<nav class="navbar">
12+
<span class="open-menu">
13+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16">
14+
<g fill="#252a32" fill-rule="evenodd">
15+
<path d="M0 0h24v2H0zM0 7h24v2H0zM0 14h24v2H0z" />
16+
</g>
17+
</svg>
18+
</span>
19+
<h1><a href="./index.html" class="brand">Documents Insights</a></h1>
20+
<div class="menu-wrapper">
21+
<ul class="menu">
22+
<li class="menu-block">
23+
<span class="close-menu">
24+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
25+
<path
26+
fill="#252a32"
27+
fill-rule="evenodd"
28+
d="M17.778.808l1.414 1.414L11.414 10l7.778 7.778-1.414 1.414L10 11.414l-7.778 7.778-1.414-1.414L8.586 10 .808 2.222 2.222.808 10 8.586 17.778.808z"
29+
/>
30+
</svg>
31+
</span>
32+
</li>
33+
<li class="menu-item">
34+
<a href="#" class="menu-link">Applications</a>
35+
</li>
36+
<li class="menu-item has-collapsible">
37+
<a href="#"><span></span>Students </a>
38+
<ul class="menu-child">
39+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
40+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
41+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
42+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
43+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
44+
</ul>
45+
</li>
46+
<li class="menu-item has-collapsible">
47+
<a href="#"><span></span>Abroad</a>
48+
<ul class="menu-child">
49+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
50+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
51+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
52+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
53+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
54+
</ul>
55+
</li>
56+
<li class="menu-item has-collapsible">
57+
<a href="#"><span></span>General</a>
58+
<ul class="menu-child">
59+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
60+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
61+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
62+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
63+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
64+
</ul>
65+
</li>
66+
<li class="menu-item has-collapsible">
67+
<a href="#"><span></span>Menu Item</a>
68+
<ul class="menu-child">
69+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
70+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
71+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
72+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
73+
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
74+
</ul>
75+
</li>
76+
77+
</ul>
78+
</div>
79+
</nav>
80+
</header>
81+
<section>
82+
<img
83+
src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
84+
/>
85+
</section>
86+
<script src="index.js"></script>
87+
</body>
88+
</html>

‎index.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const openMenu = document.querySelector(".open-menu");
2+
const closeMenu = document.querySelector(".close-menu");
3+
const menuWrapper = document.querySelector(".menu-wrapper");
4+
const hasCollapsible = document.querySelectorAll(".has-collapsible");
5+
6+
// Sidenav Toggle
7+
openMenu.addEventListener("click", function () {
8+
menuWrapper.classList.add("offcanvas");
9+
});
10+
11+
closeMenu.addEventListener("click", function () {
12+
menuWrapper.classList.remove("offcanvas");
13+
});
14+
15+
// Collapsible Menu
16+
hasCollapsible.forEach(function (collapsible) {
17+
collapsible.addEventListener("click", function () {
18+
collapsible.classList.toggle("active");
19+
20+
// Close Other Collapsible
21+
hasCollapsible.forEach(function (otherCollapsible) {
22+
if (otherCollapsible !== collapsible) {
23+
otherCollapsible.classList.remove("active");
24+
}
25+
});
26+
});
27+
});

‎style.CSS‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
*, *::before, *::after {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
list-style: none;
6+
list-style-type: none;
7+
text-decoration: none;
8+
-moz-osx-font-smoothing: grayscale;
9+
-webkit-font-smoothing: antialiased;
10+
text-rendering: optimizeLegibility;
11+
}
12+
body {
13+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
14+
font-size: 1rem;
15+
font-weight: normal;
16+
line-height: 1.5;
17+
color: #252a32;
18+
background: #f1f5f8;
19+
overflow: hidden;
20+
}
21+
img {
22+
display: block;
23+
width: 60%;
24+
height: 50%;
25+
margin: 1rem 20rem;
26+
}
27+
a, button {
28+
font-family: inherit;
29+
font-size: inherit;
30+
cursor: pointer;
31+
border: none;
32+
outline: none;
33+
background: none;
34+
text-decoration: none;
35+
}
36+
37+
.open-menu, .close-menu {
38+
cursor: pointer;
39+
border: none;
40+
outline: none;
41+
color: #252a32;
42+
background: none;
43+
}
44+
.close-menu {
45+
position: absolute;
46+
top: 0;
47+
right: 1rem;
48+
border: none;
49+
outline: none;
50+
color: #252a32;
51+
background: none;
52+
}
53+
.brand {
54+
font-family: inherit;
55+
font-size: 1.75rem;
56+
font-weight: 700;
57+
line-height: 1.5;
58+
color: #d32f2f;
59+
text-transform: uppercase;
60+
text-rendering: optimizeLegibility;
61+
}
62+
63+
.header {
64+
position: relative;
65+
width: 100%;
66+
height: auto;
67+
padding: 0.75rem 1.5rem;
68+
color: #252a32;
69+
background: #fff;
70+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
71+
}
72+
.header .navbar {
73+
display: flex;
74+
align-items: center;
75+
justify-content: space-between;
76+
}
77+
.header .navbar .menu-wrapper::before {
78+
content: "";
79+
position: fixed;
80+
top: 0;
81+
left: 0;
82+
right: 0;
83+
bottom: 0;
84+
z-index: -1;
85+
transition: background 0.5s;
86+
}
87+
.header .navbar .menu-wrapper.offcanvas .menu {
88+
transform: translate3d(0, 0, 0);
89+
transition-duration: 0.7s;
90+
transition-delay: 0.2s;
91+
}
92+
.header .navbar .menu-wrapper.offcanvas::before {
93+
background: rgba(37, 42, 50, 0.6);
94+
z-index: 1;
95+
}
96+
.header .navbar .menu {
97+
position: fixed;
98+
display: flex;
99+
flex-direction: column;
100+
top: 0;
101+
left: 0;
102+
bottom: 0;
103+
max-width: 20rem;
104+
width: 100%;
105+
padding: 1.5rem 1rem;
106+
z-index: 2;
107+
overflow-y: auto;
108+
color: #252a32;
109+
background: #fff;
110+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
111+
transform: translate3d(-100%, 0, 0);
112+
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
113+
}
114+
.header .navbar .menu-block {
115+
position: relative;
116+
display: flex;
117+
align-items: center;
118+
justify-content: space-between;
119+
margin-bottom: 3rem;
120+
}
121+
.header .navbar .menu-link {
122+
font-family: inherit;
123+
font-size: 1rem;
124+
font-weight: 600;
125+
line-height: inherit;
126+
text-transform: uppercase;
127+
transition: color 0.35s ease-out;
128+
}
129+
.header .navbar .menu-link:hover {
130+
color: #d32f2f;
131+
}
132+
.header .navbar .menu-item {
133+
position: relative;
134+
}
135+
.header .navbar .menu-item a {
136+
font-family: inherit;
137+
font-size: 1rem;
138+
font-weight: 600;
139+
line-height: inherit;
140+
text-transform: uppercase;
141+
padding: 0.5rem 1rem;
142+
display: block;
143+
color: #252a32;
144+
transition: color 0.35s ease-out;
145+
}
146+
.header .navbar .menu-item a:hover {
147+
color: #d32f2f;
148+
}
149+
.header .navbar .menu-item.has-collapsible {
150+
position: relative;
151+
}
152+
.header .navbar .menu-item.has-collapsible .menu-child {
153+
display: none;
154+
}
155+
.header .navbar .menu-item.has-collapsible .menu-child .menu-child-item a {
156+
font-family: inherit;
157+
font-size: 1rem;
158+
font-weight: 600;
159+
line-height: inherit;
160+
padding: 0.25rem;
161+
color: #252a32;
162+
padding-left: 2.5rem;
163+
text-transform: uppercase;
164+
transition: color 0.35s ease-out;
165+
}
166+
.header .navbar .menu-item.has-collapsible .menu-child .menu-child-item a:hover {
167+
color: #d32f2f;
168+
}
169+
.header .navbar .menu-item.has-collapsible span::after {
170+
font-family: "Material Icons";
171+
content: "\2B9A";
172+
font-size: 1.5rem;
173+
font-weight: 400;
174+
line-height: inherit;
175+
position: absolute;
176+
top: 0.15rem;
177+
right: 1rem;
178+
color: #252a32;
179+
transition: all 0.35s ease;
180+
}
181+
.header .navbar .menu-item.has-collapsible span::after:hover {
182+
color: #d32f2f;
183+
}
184+
.header .navbar .menu-item.active.has-collapsible .menu-child {
185+
display: block;
186+
transition: all 0.35s ease;
187+
}
188+
.header .navbar .menu-item.active.has-collapsible span::after {
189+
transform: rotate(90deg);
190+
}
191+
192+
@media screen and (max-width:900px){
193+
img{
194+
width: 90%;
195+
height: 500px;
196+
margin: 10px 30px;
197+
background-color: #d32f2f;
198+
}
199+
}
200+
@media screen and (max-width:500px){
201+
img{
202+
width: 70%;
203+
height: 300px;
204+
margin: 10px 30px;
205+
background-color: #d32f2f;
206+
}
207+
}

0 commit comments

Comments
 (0)