Skip to content
This repository has been archived by the owner on Jun 19, 2021. It is now read-only.

Navigation Bar Component Added. #34

Closed
wants to merge 2 commits into from
Closed

Navigation Bar Component Added. #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c316c68
Create navbar.html
RahulAnand442001 May 2, 2021
48a9592
Add files via upload
RahulAnand442001 May 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
31 changes: 31 additions & 0 deletions Navbar/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>Bubble Effect</title>
</head>
<body>
<!-- SLICE (COPY) THIS PIECE OF CODE -->
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a href="apply.html" id="apply_button">APPLY</a></li>
<li><a href="index.html">HOME</a></li>
<li><a href="theme.html">THEMES</a></li>
<li><a href="events.html">EVENTS</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="faq.html">FAQs</a></li>
</ul>
</nav>
<script src="script.js"></script>

<!-- SLICE (COPY) THIS PIECE OF CODE -->
</body>
</html>
10 changes: 10 additions & 0 deletions Navbar/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");

hamburger.addEventListener("click", () => {
navLinks.classList.toggle("open");
links.forEach((link) => {
link.classList.toggle("fade");
});
});
105 changes: 105 additions & 0 deletions Navbar/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}

nav {
height: 10vh;
background: #050914;
display: flex;
}

.nav-links {
display: flex;
list-style: none;
width: 50%;
height: 100%;
justify-content: space-evenly;
align-items: center;
margin-left: auto;
}

.nav-links li a {
color: white;
text-decoration: none;
font-size: 16px;
letter-spacing: 3px;
font-weight: 100;
padding: 5px;
align-self: stretch;
}

#apply_button {
padding: 0.7rem 1rem;
border: 2px solid orangered;
}

#apply_button:hover {
background: orangered;
color: #050914;
transition: all 0.6s;
}

@media screen and (max-width: 768px) {
.line {
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
nav {
position: relative;
}

.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}

.nav-links {
position: fixed;
background: #050914;
height: 100vh;
width: 100%;
flex-direction: column;
clip-path: circle(100px at 90% -10%);
-webkit-clip-path: circle(100px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
margin: 1.5rem auto;
}
.nav-links.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;
}
.landing {
flex-direction: column;
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.6s;
}
li.fade {
opacity: 1;
}
}