Skip to content

Commit

Permalink
Merge pull request #61 from davejane25/main
Browse files Browse the repository at this point in the history 
Improved Navbar
  • Loading branch information
@numcys
numcys authored Oct 15, 2022
2 parents 6563626 + 4048229 commit d1e0ddb
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 57 deletions.
98 changes: 67 additions & 31 deletions Contact.html
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,79 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact us</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/27551d6060.js" crossorigin="anonymous"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/contact.css">
</head>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
</head>

<body>
<main>
<div class="title">Contact us</div>
<div class="title-info">We'll get back to you soon!</div>

<form action="" method="" class="form">
<div class="input-group">
<input type="text" name="first_name" id="first-name" placeholder="First name">
<label for="first-name">First name</label>
</div>

<div class="input-group">
<input type="text" name="last_name" id="last-name" placeholder="Last Name">
<label for="last-name">Last name</label>
</div>

<div class="input-group">
<input type="email" name="e-mail" id="e-mail" placeholder="e-mail">
<label for="e-mail">e-mail</label>
</div>

<div class="textarea-group">
<textarea name="message" id="message" rows="5" placeholder="Message"></textarea>
<label for="message">Message</label>
</div>

<div class="button-div">
<button type="submit">Send</button>
</div>
</form>
</main>
<nav>
<div class="topnav" id="myTopnav">
<div class="logo"><img src="img/online-shop.jpg" alt="" />
<img src="/img/moon.png" alt="" id="darkmode-icon">
</div>
<div class="nvl">
<a class="nav-link" href="index.html">Home</a>
<a class="nav-link" href="#news">About</a>
<a class="nav-link" href="#contact">Services</a>
<a class="nav-link" href="Contact.html" class="active">Contact Us</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<form class="srch" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-dark" type="submit"><img style="width: 26px;" src="img/search.png"
alt=""></button>
</form>
</div>
</div>
</nav>

<main>
<div class="title">Contact us</div>
<div class="title-info">We'll get back to you soon!</div>

<form action="" method="" class="form">
<div class="input-group">
<input type="text" name="first_name" id="first-name" placeholder="First name">
<label for="first-name">First name</label>
</div>

<div class="input-group">
<input type="text" name="last_name" id="last-name" placeholder="Last Name">
<label for="last-name">Last name</label>
</div>

<div class="input-group">
<input type="email" name="e-mail" id="e-mail" placeholder="e-mail">
<label for="e-mail">e-mail</label>
</div>

<div class="textarea-group">
<textarea name="message" id="message" rows="5" placeholder="Message"></textarea>
<label for="message">Message</label>
</div>

<div class="button-div">
<button type="submit">Send</button>
</div>
</form>
</main>
<script src="script.js"></script>

</body>

</html>
70 changes: 70 additions & 0 deletions css/nav.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
.topnav {
overflow: hidden;
background-color: #212529;
overflow: hidden;
background-color: #212529;
display: flex;
justify-content: space-between;
align-items: center;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2b6;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a:hover {
color: rgb(255, 255, 255);
font-weight: 500;
}

.topnav a.active {
color: white;
}

.topnav .icon {
display: none;
}
.nvl{
display: flex;
align-items: center;
justify-content: flex-end;
}
.srch{
display: flex;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
.nvl{
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
}
.srch {
display: none!important;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
1 change: 0 additions & 1 deletion css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ body{
/* Header styling */
nav{
width: 100%;
height: 8vh;
}

.header-div{
Expand Down
42 changes: 17 additions & 25 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<title>Project</title>
<link rel="icon" type="image/x-icon" href="img/online-shop.jpg">
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/nav.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/27551d6060.js" crossorigin="anonymous"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Expand All @@ -17,40 +18,30 @@
</head>

<body class="light-mode">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
<div class="logo"><img src="img/online-shop.jpg" alt="" /><img src="/img/moon.png" alt="" id="darkmode-icon"></div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav ms-auto">
<li class="navbar-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="navbar-item">
<a class="nav-link" href="#">About us</a>
</li>
<li class="navbar-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="navbar-item">
<a class="nav-link" href="Contact.html">Contact us</a>
</li>
</ul>
<form class="d-flex" role="search">
<nav>
<div class="topnav" id="myTopnav">
<div class="logo"><img src="img/online-shop.jpg" alt="" />
<img src="/img/moon.png" alt="" id="darkmode-icon">
</div>
<div class="nvl">
<a class="nav-link" href="#home" class="active">Home</a>
<a class="nav-link" href="#news">About</a>
<a class="nav-link" href="#contact">Services</a>
<a class="nav-link" href="Contact.html">Contact Us</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<form class="srch" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-dark" type="submit"><img style="width: 26px;" src="img/search.png" alt=""></button>
</form>
</div>
</div>
</div>
</nav>

</header>
<section class="firstsection background">

<div class=" box-main">
<div class="firsthalf">
<div class="secondhalf">
Expand Down Expand Up @@ -330,6 +321,7 @@ <h5 class="footer_About_para"><a class="footer_About_links" href="">Risk Of Fact


<script src="console.js"></script>
<script src="script.js"></script>
</body>
</html>

8 changes: 8 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

0 comments on commit d1e0ddb

Please sign in to comment.