Skip to content

Commit

Permalink
Merge pull request #9 from VaithiSniper/NewNavbar1
Browse files Browse the repository at this point in the history
New navbar1
  • Loading branch information
pulkithanda authored Oct 10, 2021
2 parents 9151cd0 + 381db70 commit d633472
Show file tree
Hide file tree
Showing 7 changed files with 139 additions and 12 deletions.
7 changes: 4 additions & 3 deletions assets/css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,17 @@ body{
width: 100%;
min-height: 100vh;
position: relative;
display: flex;
display: block;
justify-content: center;
align-items: center;
background: #f1efec;
font-family: 'roboto', sans-serif;
padding-top: 2rem;
}

.product{
position: relative;
width: 1000px;
width: 90%;
min-width: 350px;
min-height: 500px;
height: auto;
Expand All @@ -24,7 +25,7 @@ body{
}

.product-img{
width: 40%;
width: 30%;
height: 500px;
background: #fff;
position: relative;
Expand Down
5 changes: 4 additions & 1 deletion contributors.md
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
Add your name here along with the issue you solved 👇 If your PR will be submitted in Hacktoberfest period It'll be counted
Add your name here along with the issue you solved 👇 If your PR will be submitted in Hacktoberfest period It'll be counted

VaithiSniper : Added navbar1 to pulkithanda/navbars-hf, issue link - https://github.com/pulkithanda/navbars-hf/issues/2#issue-102159599.

41 changes: 41 additions & 0 deletions navbar codes/VaithiSniper-navbar-1/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by Vaithee</title>
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<html>

<head>

</head>

<body>
<div class="navbar">
<a href="#home" class="navbar-brand"><img src="https://img.icons8.com/ios/50/000000/logo.png" /></a>
<div id="navbarLinks">
<a href="#home">Home</a>
<hr id="divider">
<a href="#team">Team</a>
<hr id="divider">
<a href="#contact">Contact</a>
<hr id="divider">
<a href="#about">About</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<img src="https://img.icons8.com/material-outlined/48/000000/menu--v1.png" id="menu" />
</a>
</div>
<hr id="divider-end">
</body>

</html>
<!-- partial -->
<script src="./script.js"></script>

</body>
</html>
Binary file added navbar codes/VaithiSniper-navbar-1/navbar1.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions navbar codes/VaithiSniper-navbar-1/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
function myFunction() {
var x = document.getElementById("navbarLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
49 changes: 49 additions & 0 deletions navbar codes/VaithiSniper-navbar-1/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/* navbar styling */
.navbar {
overflow: hidden;
position: relative;
}

/* navbar links are hidden by-default */
.navbar #navbarLinks {
display: none;
text-align: center;
}

/* Styling for nav links*/
.navbar a {
color: black;
font-family: Helvetica;
font-weight: 800;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}

/* On hover effect */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Hamburger styling */
#menu {
right: 3%;
top: 8%;
display: block;
position: absolute;
padding: 0.6%;
}
/* nav links divider */
#divider {
width: 10rem;
color: #ddd;
}
/* navbar end divider */
#divider-end {
width: 100%;
text-align: center;
border-color: #ddd;
margin-top: 0;
padding-top: 0;
}
41 changes: 33 additions & 8 deletions navbars.html
Original file line number Diff line number Diff line change
Expand Up @@ -45,19 +45,44 @@
<a href="https://github.com/pulkithanda" class="button button__header">Drop a follow</a>
</nav>
</header><br><br>

<div class="product">
<div class="product-img">
<img src="https://thumbs.gfycat.com/EqualAptKoodoo-size_restricted.gif" alt="">
<span class="tag">Navbar 1</span>
</div>
<div class="product-listing" >
<div class="content">
<h1 class="name">Mobile Full Nav</h1>
<p class="info">HAMBURGER: Uses clip-path to create a hamburger menu open effect. Description
includes full screen property sizes for phone size navbar with slide out effects.
(Preview on the side and see the source code of the navbar below on codepen.)</p>
<p class="stack">Tech stack : HTML/CSS</p>
<div class="btn-and-rating-box">
<div class="rating">
<img src="https://github.com/kunaal438/product-page/blob/master/img/star.png?raw=true" alt="">
<img src="https://github.com/kunaal438/product-page/blob/master/img/star.png?raw=true" alt="">
<img src="https://github.com/kunaal438/product-page/blob/master/img/star.png?raw=true" alt="">
<img src="https://github.com/kunaal438/product-page/blob/master/img/star.png?raw=true" alt="">
<img src="https://github.com/kunaal438/product-page/blob/master/img/star%20stroke.png?raw=true" alt="">
</div>
<a class="btn" href="https://codepen.io/ainalem/pen/OJWQbor" target="_blank">See Code</a>
</div>
</div>
</div>
</div>
<br><br>
<div class="product">
<div class="product-img">
<img src="https://thumbs.gfycat.com/EqualAptKoodoo-size_restricted.gif" alt="">
<span class="tag">Navbar 1</span>
<img src="./navbar codes/VaithiSniper-navbar-1/navbar1.gif" alt="VaithiSniper's Navbar1">
<span class="tag">Navbar 2</span>
</div>
<div class="product-listing">
<div class="content">
<h1 class="name">Mobile Full Nav</h1>
<p class="info">HAMBURGER: Uses clip-path to create a hamburger menu open effect. Description
<h1 class="name">Mobile Nav</h1>
<p class="info">Hamburger operated minimalistic navbar: Uses display CSS property to create a hamburger menu open effect. Description
includes full screen property sizes for phone size navbar with slide out effects.
(Preview on the side and see the source code of the navbar below on codepen.)</p>
<p class="stack">Tech stack : HTML/CSS</p>
<p class="stack">Tech stack : HTML/CSS/JS</p>
<div class="btn-and-rating-box">
<div class="rating">
<img src="https://github.com/kunaal438/product-page/blob/master/img/star.png?raw=true" alt="">
Expand All @@ -66,12 +91,12 @@ <h1 class="name">Mobile Full Nav</h1>
<img src="https://github.com/kunaal438/product-page/blob/master/img/star.png?raw=true" alt="">
<img src="https://github.com/kunaal438/product-page/blob/master/img/star%20stroke.png?raw=true" alt="">
</div>
<a class="btn" href="https://codepen.io/ainalem/pen/OJWQbor" target="_blank">See Code</a>
<a class="btn" href="https://codepen.io/vaithisniper/pen/QWMWNZp" target="_blank">See Code</a>
</div>
</div>
</div>
</div>

<br><br>
<!--=============== SCROLL UP ===============-->
<a href="#" class="scrollup" id="scroll-up">
<i class='bx bx-up-arrow-alt scrollup__icon'></i>
Expand Down

0 comments on commit d633472

Please sign in to comment.