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

Jump to bottom

enhanced the footer and dark theme also #146

Merged
merged 4 commits into from
Oct 3, 2024
Merged

enhanced the footer and dark theme also #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c58cba0
Update index.html
Rehan0016 Oct 3, 2024
48a6ce0
Update style.css
Rehan0016 Oct 3, 2024
3e98d5b
Update index.html
Rehan0016 Oct 3, 2024
2698534
Update style.css
Rehan0016 Oct 3, 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
360 changes: 175 additions & 185 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,78 +19,65 @@
</head>
<body>
<!--header-->

<section class="navbar">
<header id="header" class="shadow bg-light">
<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="#contact" class="nav-link">About</a>
<a href="#contact" class="nav-link">Contact Us </a>
</ul>


<nav>
<div class="logo">

<h1>WordWise</h1>
</div>

<div class="search-bar">
<input type="search" id="search-input" class="search-input" placeholder="Search...">
<button class="search-button"><i class="fas fa-search"></i></button>
</div>
<div>
<a href="#" class="">
<img width="24" height="24" src="https://img.icons8.com/?size=100&id=T4nnbmHS4kEt&format=png&color=000000
alt="external-trending-content-creator-tanah-basah-basic-outline-tanah-basah" />
Trending
</a>
<a href="start.html">
<img width="50" height="50" src="https://img.icons8.com/?size=100&id=18877&format=png&color=000000"
alt="blog" />
Start
</a>
<div class="dropdown">
<a href="category.html" class="dropdown-toggle">
<img width="50" height="50" src="https://img.icons8.com/?size=100&id=13705&format=png&color=000000"
alt="category" />
Categories
</a>
<div class="dropdown-content">
<a href="#">Education</a>
<a href="#">Food</a>
<a href="#">Technology</a>
<a href="#">Sports</a>
<a href="#">Innovation</a>
<a href="#">Global News</a>
</div>
</div>

<a href="about.html">
<img src="https://img.icons8.com/?size=100&id=82450&format=png&color=000000" alt="">
About
</a>
<div class="dropdown">
<a href="contact.html" class="dropdown-toggle">
<img src="https://img.icons8.com/?size=100&id=2817&format=png&color=000000" alt=""> Contact
</a>
<div class="dropdown-content">
<a href="#"><i class="fa-brands fa-facebook"></i>&nbsp;Facebook</a>
<a href="#"><i class="fa-brands fa-instagram"></i> &nbsp;Instagram</a>
<a href="#"><i class="fa-brands fa-twitter"></i> &nbsp;Twitter</a>
<a href="#"><i class="fa-brands fa-dribbble"></i> &nbsp;Dribble</a>
</div>
</div>
</div>

<div>
<input type="checkbox" class="checkbox" id="checkbox">
<label for="checkbox" class="checkbox-label">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<span class="ball"></span>
</label>
</div>


</nav>

</section>


</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="collapse">
<label id="theme-switch" class="theme-switch" for="theme-switch">
<input type="checkbox" id="theme-switch">
Dark Theme
</label>
</div>

</nav>
</header>

<!--header-->
<!--mainn-->
Expand Down Expand Up @@ -491,26 +478,14 @@ <h1>WordWise</h1>
</article>
</div>
<!-- article-->
</div>
<div class="text-center">
<button class="btn btn-primary secondary-title text-light"
style="

color: rgb(6, 2, 2);
background-color: aqua;
height: 40px;
border-radius: 4px solid black;
font-family: sans-serif;



"



> <b>Load More Posts...</b></button>
</div>
</div>

</div>
<div class="text-center">
<button class="btn btn-primary secondary-title text-light">Load More Posts...</button>
</div>
</div>




</section>
Expand Down Expand Up @@ -543,99 +518,114 @@ <h1>WordWise</h1>
</main>

<!--mainn-->
<!-- Footer -->
<footer id="footer" class="bg-dark text-white pt-5">
<div class="container">
<div class="row gx-3 mb-3"> <!-- Added gx-3 for horizontal spacing -->
<!-- About Us -->
<div class="col-md-3 mb-4"> <!-- Added mb-4 for vertical spacing -->
<h2 class="footer-title secondary-title">About Us</h2>
<p class="mt-2 text-secondary">
We are a close-knit team of passionate storytellers dedicated to sharing captivating content with the world.
</p>
<address>
<i class="fas fa-map-marker-alt text-primary"></i>
5 South Main Street, Los Angeles, ZZ-9611, USA
</address>
<div class="phone mt-2">
<i class="fas fa-mobile text-primary"></i>
<span>125-896-485</span>
</div>
<div class="email mt-2">
<i class="fas fa-envelope text-primary"></i>
<span>[email protected]</span>
</div>
</div>

<!-- Featured Posts -->
<div class="col-md-3 mb-4"> <!-- Added mb-4 for vertical spacing -->
<h2 class="footer-title secondary-title">Featured Posts</h2>
<div class="feature-post">
<article class="d-flex mb-2">
<img src="./assets/img9.jpg" class="object-fit px-1" alt="Nature Blog Image">
<div class="px-2">
<a href="#" class="text-title display-2 text-white">Embrace the beauty of nature...</a>
<p class="secondary-title text-secondary display-3">
<i class="far fa-clock text-primary"></i> Wed 02, 2022
</p>
</div>
</article>
<article class="d-flex mb-2">
<img src="./assets/img1.jpg" class="object-fit px-1" alt="Travel Blog Image">
<div class="px-2">
<a href="#" class="text-title display-2 text-white">Embark on unforgettable journeys...</a>
<p class="secondary-title text-secondary display-3">
<i class="far fa-clock text-primary"></i> Wed 05, 2020
</p>
</div>
</article>
<article class="d-flex">
<img src="./assets/img2.jpg" class="object-fit px-1" alt="Gaming Blog Image">
<div class="px-2">
<a href="#" class="text-title display-2 text-white">Gaming Adventures Unleashed</a>
<p class="secondary-title text-secondary display-3">
<i class="far fa-clock text-primary"></i> Wed 02, 2021
</p>
</div>
</article>
</div>
</div>

<!-- Tags -->
<div class="col-md-3 mb-4"> <!-- Added mb-4 for vertical spacing -->
<h2 class="footer-title secondary-title">Tags</h2>
<div class="d-flex flex-column"> <!-- Changed to flex-column -->
<a href="#" class="btn btn-outline-light mb-1">Travel</a>
<a href="#" class="btn btn-outline-light mb-1">Food</a>
<a href="#" class="btn btn-outline-light mb-1">Lifestyle</a>
<a href="#" class="btn btn-outline-light mb-1">Technology</a>
<a href="#" class="btn btn-outline-light mb-1">Fashion</a>
</div>
</div>

<!-- Social Links -->
<div class="col-md-3 mb-4"> <!-- Added mb-4 for vertical spacing -->
<h2 class="footer-title secondary-title">Social</h2>
<div class="d-flex flex-column"> <!-- Changed flex-wrap to flex-column -->
<a href="#" class="btn btn-outline-light m-1"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="btn btn-outline-light m-1"><i class="fab fa-twitter"></i></a>
<a href="#" class="btn btn-outline-light m-1"><i class="fab fa-instagram"></i></a>
<a href="#" class="btn btn-outline-light m-1"><i class="fab fa-dribbble"></i></a>
</div>
<!-- footer -->
<footer id="footer">
<div class="container">
<div class="row mb-3">
<div class="col-3">
<h2 class="footer-title secondary-title" style="color: white;">About Us</h2>
<div class="secondary-title text-secondary">
<p class="mt-2" style="color: white;">
We are a close-knit team of passionate storytellers dedicated to sharing captivating content with the world.
</p>
<address style="color: white;">
<i class="fas fa-map-marker-alt text-primary"></i>
5 South Main Street, Los Angeles, ZZ-9611, USA
</address>
<div class="phone" style="color: white;">
<i class="fas fa-mobile text-primary"></i>
<a href="tel:+125896485">125-896-485</a>
</div>
<div class="email">
<i class="fas fa-envelope text-primary"></i>
<a href="mailto:[email protected]" style="color: white;">[email protected]</a>
</div>
</div>
</div>
<div class="col-3">
<h2 class="footer-title secondary-title" style="color: white;">Featured Posts</h2>
<div class="feature-post">
<div class="flex-item">
<article class="article">
<div class="d-flex">
<a href="#">
<img src="./assets/img9.jpg" class="object-fit px-1" alt="Nature Blog">
<div class="px-1">
<h3 class="text-title display-2 text-dark">
Embrace the beauty of nature through our enchanting blog, where we celebrate the wonders of the natural world
</h3>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Wed 02, 2022</span>
</p>
</div>
</a>
</div>
</article>
</div>
<div class="flex-item">
<article class="article">
<div class="d-flex">
<a href="#">
<img src="./assets/img1.jpg" class="object-fit px-1" alt="Travel Blog">
<div class="px-1">
<h3 class="text-title display-2 text-dark">
Embark on unforgettable journeys through our travel blog, where wanderlust meets inspiration
</h3>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Wed 05, 2020</span>
</p>
</div>
</a>
</div>
</article>
</div>
<div class="flex-item">
<article class="article">
<div class="d-flex">
<a href="#">
<img src="./assets/img2.jpg" class="object-fit px-1" alt="Gaming Adventures">
<div class="px-1">
<h3 class="text-title display-2 text-dark">Gaming Adventures Unleashed</h3>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Wed 02, 2021</span>
</p>
</div>
</a>
</div>
</article>
</div>
</div>
</div>
<div class="col-3">
<h2 class="footer-title secondary-title"style="color: white;">Tags</h2>
<div class="tags">
<div class="d-flex flex-wrap">
<a href="#" class="nav-link btn bg-light">Travel</a>
<a href="#" class="nav-link btn bg-light">Food</a>
<a href="#" class="nav-link btn bg-light">Lifestyle</a>
<a href="#" class="nav-link btn bg-light">Technology</a>
<a href="#" class="nav-link btn bg-light">Fashion</a>
</div>
</div>
<h2 class="footer-title secondary-title mt-2"style="color: white;">Social</h2>
<div class="tags social" id="contact">
<div class="d-flex flex-wrap">
<a href="#" class="nav-link btn bg-light"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="nav-link btn bg-light"><i class="fab fa-twitter"></i></a>
<a href="#" class="nav-link btn bg-light"><i class="fab fa-instagram"></i></a>
<a href="#" class="nav-link btn bg-light"><i class="fab fa-dribbble"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Copyright -->
<div class="text-center py-3 mt-3 border-top border-light">
<p class="m-0">&copy; 2024 WordWise. All rights reserved.</p>
</div>
</div>
</footer>
<!-- .footer -->



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

</footer>

<!-- .footer -->


<script src="main.js"></script>


</body>
</html>
Loading
Loading