Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

updated NavBar #211

Merged
merged 2 commits into from
Oct 4, 2024
Merged

updated NavBar #211

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
8b34357
Update index.html
Priyanshi231 Oct 4, 2024
f5f92e7
Update style.css
Priyanshi231 Oct 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
152 changes: 54 additions & 98 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,40 +13,6 @@
<!--css-->
<link rel="stylesheet" href="style.css">

<style>
/* CSS for uniform image layout */
.grid {
display: flex;
flex-wrap: wrap; /* Allows items to wrap onto the next line */
gap: 30px; /* Space between grid items */
}

.grid-item {
flex: 1 1 calc(33.33% - 20px); /* 3 items per row */
max-width: calc(33.33% - 20px); /* Ensures grid items do not exceed container */
box-sizing: border-box; /* Includes padding in width calculations */
}

.card {
border-radius: 8px; /* Optional: rounded corners */
overflow: hidden; /* Hides overflow for better aesthetics */
}

.overflow-img img {
width: 100%;
height: 250px; /* Set a fixed height */
object-fit: cover; /* Cover to maintain aspect ratio */
}

.text-title {
font-size: 1.25rem; /* Adjust size as needed */
}

.secondary-title {
font-size: 0.875rem; /* Adjust size as needed */
}
</style>

<!--favicon-->
<link rel="apple-touch-icon" sizes="180x180" href="../images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">
Expand All @@ -55,61 +21,37 @@
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
</head>
<body>
<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>
<!--toggle button-->
<button class="toggle-button">
<span><i class="fas fa-bars"></i></span>
</button>
<!--collapse on toggle button click-->
<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>
<!-- 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">
<div class="slider"></div>
</label>
<span id="mode-label">Light Mode</span>
</div>
<!--header-->
<header class="navbar">
<div class="logo">
<h2>WordWise</h2>
</div>

<nav class="nav-menu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#leading-blog">Leading Blog</a></li>
<li><a href="#start-writing">Start Writing</a></li>
<li><a href="#categories">Categories</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact Us</a></li>
<li><a href="#feedback">Give Feedback</a></li>
</ul>
</nav>

<div class="auth-buttons">
<a href="#login" class="login-btn">Login</a>
<a href="#signup" class="signup-btn">Signup</a>
</div>

<div class="toggle-mode">
<label for="Dark mode">Dark Mode</label>
<input type="checkbox" id="dark-mode">
</div>

</header>

<!--main-->
<!--header-->
<!--mainn-->
<main id="site-main">
<!--blog post section-->
<section id="posts">
Expand All @@ -121,16 +63,24 @@
<div class="card">
<div class="overflow-img">
<a href="#">
<img src="./assets/img1.jpg" class="img-fluid" alt="Roaming Routes">
<img src="./assets/img1.jpg" class="img-fluid">


</a>
</div>
<div class="card-body text-center px-1">
<a href="blog.html" class="text-title display-1 text-dark">Roaming Routes</a>
<a href="blog.html" class="text-title display-1 text-dark">
Roaming Routes



</a>
<p class="secondary-title text-secondary display-3">
<span><i class="fa-regular fa-clock"></i> Wed 01,2020</span>
<span><i class="fa-solid fa-comment"></i> 13</span>
<span><i class="fa-regular fa-clock"></i> wed 01,2020</span>
<span><i class="fa-solid fa-comment"></i>13</span>
</p>
</div>

</div>
</article>
</div>
Expand All @@ -141,20 +91,26 @@
<div class="card">
<div class="overflow-img">
<a href="#">
<img src="./assets/img2.jpg" class="img-fluid" alt="Adventure Awaits">
<img src="./assets/img2.jpg" class="img-fluid">


</a>
</div>
<div class="card-body text-center px-1">
<a href="blog.html" class="text-title display-1 text-dark">Adventure Awaits</a>
<a href="#" class="text-title display-1 text-dark">
Gaming Chronicles


</a>
<p class="secondary-title text-secondary display-3">
<span><i class="fa-regular fa-clock"></i> Thu 02,2020</span>
<span><i class="fa-solid fa-comment"></i> 8</span>
<span><i class="fa-regular fa-clock"></i> Mon 13,2023</span>
<span><i class="fa-solid fa-comment"></i>12</span>
</p>
</div>

</div>
</article>
</div>

<!-- article-->
<!-- article-->
<div class="grid-item">
Expand Down Expand Up @@ -651,9 +607,9 @@ <h2 class="footer-title secondary-title mt-2">Social</h2>
</footer>
<!-- .footer -->


<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<script src="main.js"></script>
<script src="darkMode.js"></script>

</body>
</html>
</html>
Loading
Loading