Skip to content

Commit

Permalink
updated nav bar section in html and css files
Browse files Browse the repository at this point in the history
  • Loading branch information
@DivyaJyothi9
DivyaJyothi9 committed Oct 4, 2024
1 parent ac70e33 commit 0a4497b
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 109 deletions.
2 changes: 1 addition & 1 deletion about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
padding-top: 70px;
margin-top: 80px;
font-size: 36px; /* Adjust size as needed */
color: #2c3e50; /* Dark blue color */
color: #373df3; /* Dark blue color */
font-family: 'Arial', sans-serif; /* Change font family */
margin-bottom: 20px; /* Space below the heading */
transition: color 0.3s; /* Smooth transition for color change */
Expand Down
82 changes: 37 additions & 45 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,57 +21,50 @@
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
</head>
<body>
<!--header-->
<header id="header" class="shadow bg-light">
<nav class="container navbar">
<nav class="container-fluid navbar d-flex justify-content-between align-items-center w-100">
<a href="index.html" class="nav-brand text-dark">
WordWise
WordWise
</a>
<!--toggle button-->
<button class="toggle-button">
<span><i class="fas fa-bars"> </i></span>


<span><i class="fas fa-bars"></i></span>
</button>
<!--collapse on toggle button click-->
<div class="collapse">
<ul class="navbar-nav">
<a href="index.html" class="nav-link">Home</a>
<a href="blog.html" class="nav-link"> Leading Blog</a>
<a href="start.html" class="nav-link">Start Writing</a>
<a href="category.html" class="nav-link">Categories</a>
<a href="#contact" class="nav-link">About</a>
<a href="#contact" class="nav-link">Contact Us </a>
<div class="collapse d-flex justify-content-between w-100">
<!-- Left Side (First 3 links) -->
<ul class="navbar-nav d-flex">
<li><a href="index.html" class="nav-link">Home</a></li>
<li><a href="blog.html" class="nav-link">Leading Blog</a></li>
<li><a href="start.html" class="nav-link">Start Writing</a></li>
</ul>



</div>
<!--collapse on toggle button click-->
<div class="collapse">
<ul class="navbar-nav">
<div class="search-box">
<a href="#" class="nav-link">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
<a href="#" class="nav-link">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="nav-link">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#" class="nav-link">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="#" class="nav-link">
<i class="fa-brands fa-dribbble"></i>
</a>



<!-- Right Side (Last 3 links) -->
<ul class="navbar-nav d-flex">
<li><a href="category.html" class="nav-link">Categories</a></li>
<li><a href="#contact" class="nav-link">About</a></li>
<li><a href="#contact" class="nav-link">Contact Us</a></li>
</ul>
</div>
<!-- Search & Social Icons -->
<div class="collapse d-flex align-items-center">
<div class="search-box">
<a href="#" class="nav-link">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
<a href="#" class="nav-link">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="nav-link">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#" class="nav-link">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="#" class="nav-link">
<i class="fa-brands fa-dribbble"></i>
</a>
</div>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox">
Expand All @@ -80,10 +73,9 @@
<span id="mode-label">Light Mode</span>
</div>
</nav>
</header>

<!--header-->
<!--mainn-->
</header>

<!--main-->
<main id="site-main">
<!--blog post section-->
<section id="posts">
Expand Down
110 changes: 48 additions & 62 deletions start.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,68 +22,54 @@

</head>
<body>
<!--header-->
<header id="header" class="shadow ">
<nav class="container navbar">
<a href="index.html" class="nav-brand text-dark">
WordWise
</a>
<!--toggle button-->
<button class="toggle-button">
<span><i class="fas fa-bars"> </i></span>


</button>
<!--collapse on toggle button click-->
<div class="collapse">
<ul class="navbar-nav">
<a href="index.html" class="nav-link">Home</a>
<a href="blog.html" class="nav-link"> Leading Blog</a>
<a href="start.html" class="nav-link">Start Writing</a>
<a href="category.html" class="nav-link">Categories</a>

<a href="about.html" class="nav-link">About</a>
<a href="contact.html" class="nav-link">Contact Us </a>



</ul>
</div>
<!--collapse on toggle button click-->
<div class="collapse">
<ul class="navbar-nav">
<div class="search-box">
<a href="#" class="nav-link">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
<a href="#" class="nav-link">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="nav-link">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#" class="nav-link">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="#" class="nav-link">
<i class="fa-brands fa-dribbble"></i>
</a>
</ul>
</div>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox">
<div class="slider"></div>
</label>
<span id="mode-label"><i class='bx bx-sun'></i></span>
</div>

</nav>
</header>

<!--header-->

<!--header-->
<header id="header" class="shadow bg-light">
<nav class="container-fluid navbar d-flex justify-content-between align-items-center w-100">
<a href="index.html" class="nav-brand text-dark">
WordWise
</a>
<button class="toggle-button">
<span><i class="fas fa-bars"></i></span>
</button>
<div class="collapse d-flex justify-content-between w-100">
<ul class="navbar-nav d-flex">
<li><a href="index.html" class="nav-link">Home</a></li>
<li><a href="blog.html" class="nav-link">Leading Blog</a></li>
<li><a href="start.html" class="nav-link">Start Writing</a></li>
<li><a href="category.html" class="nav-link">Categories</a></li>
<li><a href="about.html" class="nav-link">About</a></li>
<li><a href="contact.html" class="nav-link">Contact Us</a></li>
</ul>
<ul class="navbar-nav d-flex">
<div class="search-box">
<a href="#" class="nav-link">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
<a href="#" class="nav-link">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="nav-link">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#" class="nav-link">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="#" class="nav-link">
<i class="fa-brands fa-dribbble"></i>
</a>
</ul>
</div>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox">
<div class="slider"></div>
</label>
<span id="mode-label"><i class='bx bx-sun'></i></span>
</div>
</nav>
</header>
<!--header-->

<div class="container2 px-3 py-4">
<div class="row light-blue">
Expand Down
11 changes: 10 additions & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ header {
.logo img {
height: 50px;
}

/* Navbar styles */
.navbar {
margin-bottom: 3em;
Expand Down Expand Up @@ -144,6 +143,15 @@ nav a img {
margin-right: 10px;
}

.navbar {
background-color: rgb(54, 54, 54);; /* Existing background */
}

.navbar a {
color: white; /* Change text color to white */
}


.active-page {
color: #EEC48B;
background: rgba(159, 159, 159, 0.2);
Expand Down Expand Up @@ -249,6 +257,7 @@ body.dark .support a {

/*navbar */


.btn-primary {
border-radius: 4px;
background-color: var(--secondary-color);
Expand Down

0 comments on commit 0a4497b

Please sign in to comment.