Skip to content

Commit

Permalink
Merge pull request #89 from Mehak-Mattoo/nav
Browse files Browse the repository at this point in the history 
Nav creation
  • Loading branch information
@MastanSayyad
MastanSayyad authored Jul 9, 2024
2 parents b3396dd + 97205e0 commit 47471f0
Show file tree
Hide file tree
Showing 4 changed files with 167 additions and 79 deletions.
38 changes: 9 additions & 29 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1543,16 +1543,6 @@ h5,
transform: scale(1.2);
}

.nav-link {
color: #7971ea;
text-decoration: none;
transition: color 0.3s ease;
}

.nav-link:hover {
color: #555;
}

.container_1 {
width: 100%;
margin: auto;
Expand Down Expand Up @@ -1646,23 +1636,15 @@ h5,
}

.nav-link {
color: white;
color: black;
text-decoration: none;
}

.nav-link:hover {
color: purple;
color: rgb(219, 127, 219);
transition: all 0.3s ease;
}

.navbar.fixed-top.navbar-light .navbar-brand,
.navbar.fixed-top.navbar-light .navbar-nav .nav-link {
color: black;
}

.navbar.fixed-top.navbar-light .navbar-nav .nav-link:hover {
color: purple;
}

/* Style for placeholder text */
::placeholder {
color: white; /* Color of the placeholder text */
Expand Down Expand Up @@ -1853,22 +1835,20 @@ body {

@media (max-width: 768px) {
.container {
padding-left: 15px;
padding-right: 15px;
padding-left: 15px;
padding-right: 15px;
}

h1 {
font-size: 2rem;
font-size: 2rem;
}

h2 {
font-size: 1.5rem;
font-size: 1.5rem;
}
}



.topbtn{
.topbtn {
position: fixed;
width: 50px;
height: 50px;
Expand All @@ -1880,7 +1860,7 @@ body {
line-height: 50px;
color: white !important;
font-size: 22px;
border-radius: 50%
border-radius: 50%;
}

.gotopbtn i {
Expand Down
Binary file added images/home.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
152 changes: 110 additions & 42 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">

<head>
<title>SortIt</title>
<title>Sort It</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Expand Down Expand Up @@ -56,6 +56,15 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<style>
.hover-move {
transition: transform 0.3s ease-in-out;
}

.hover-move:hover {
transform: translateX(20px);
}
</style>
</head>

<body data-spy="scroll" data-target=".site-navbar-target" data-offset="72">
Expand All @@ -74,54 +83,58 @@
</div>


<nav class="navbar navbar-expand-lg fixed-top" style="background-color: #303842;">
<nav class="navbar navbar-expand-lg fixed-top bg-white" >

<div class="container-fluid">
<a class="navbar-brand" style="font-weight: 900 ; color: white;" href="#">Visual Sort</a>
<button class="navbar-toggler" style="border-color: white;" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
<div class="flex items-center"> <img src="images/fevicon.png" class="h-6 mr-2" alt=""><a class="navbar-brand" style="font-weight: 900 ; color:rgb(219, 127, 219);" href="#">Visual Sort</a></div>
<button class="navbar-toggler" style=" background-color: rgb(202, 111, 202) ;color: black;" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" ></span>
<span class="navbar-toggler-icon " ></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<div class="collapse navbar-collapse justify-content-end " id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" style="font-weight: 500;" href="#home-section">Home</a>
<li class="nav-item" >
<a class="nav-link" href="#home-section">Home</a>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle font-medium" href="./visual.html" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Sorting Visualizers
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="Bubble.html">Bubble Sort</a></li>
<li><a class="dropdown-item" href="selectionsort.html">Selection Sort</a></li>
<li><a class="dropdown-item" href="Insertion.html">Insertion Sort</a></li>
<li><a class="dropdown-item" href="">Comb Sort</a></li>
<li><a class="dropdown-item" href="mergesort.html">Merge Sort</a></li>
<li><a class="dropdown-item" href="">Heap Sort</a></li>
<li><a class="dropdown-item" href="">Quick Sort</a></li>

</ul>
</li>
<!-- <li class="nav-item">
<a class="nav-link" style="font-weight: 500;" href="#algorithm-section">Sorting Visualizers</a>
<a class="nav-link" style="font-weight: 600;" href="#algorithm-section">Sorting Visualizers</a>
</li> -->
<li class="nav-item dropdown">
<a class="nav-link" href="./visual.html">
<!-- <li class="nav-item dropdown">
<a class="nav-link" style="font-weight: 600;" href="./visual.html">
Sorting Visualizers
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" style="font-weight: 500;" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Algorithms
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#bubble-sort-section">Bubble Sort</a></li>
<li><a class="dropdown-item" href="#merge-sort-section">Merge Sort</a></li>
<li><a class="dropdown-item" href="#quick-sort-section">Quick Sort</a></li>
<li><a class="dropdown-item" href="#selection-sort-section">Selection Sort</a></li>
<li><a class="dropdown-item" href="#bubble-sort-section">Insertion Sort</a></li>
<li><a class="dropdown-item" href="#bubble-sort-section">Heap Sort</a></li>
<li><a class="dropdown-item" href="#bubble-sort-section">Comb Sort</a></li>
<!-- Add more sorting algorithms as needed -->
</ul>
</li>
<li class="nav-item">
<a class="nav-link" style="font-weight: 500;" href="#features-section">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" style="font-weight: 500;" href="#About-Us">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link log" style="font-weight: 500; background-color: rgb(55, 55, 172); border-radius: 0.4rem; margin-left: 0.7rem;" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link log" style="font-weight: 500; background-color: rgb(55, 55, 172); border-radius: 0.4rem; margin-left: 0.7rem;" href="signup.html">Sign Up</a>
</li>
<li class="nav-item"> -->
<a class="nav-link" style="font-weight: 500;" href="#programs-section">Algorithms</a>
</li>
<li class="nav-item">
<a class="nav-link" style="font-weight: 500;" href="#features-section">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" style="font-weight: 500;" href="#About-Us">About Us</a>
</li>
<li class="nav-item ">
<a class="nav-link log px-3" href="login.html">Login</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link log" style="font-weight: 600; background-color: rgb(219, 127, 219); border-radius: 0.4rem; margin-left: 0.7rem;" href="signup.html">Sign Up</a>
</li> -->

</ul>
</div>
Expand All @@ -131,8 +144,8 @@

<div class="intro-section" id="home-section">

<div class="slide-1" style="background-image: url('images/1.jpg');" data-stellar-background-ratio="0.5">
<div class="container">
<div class="slide-1" style="background-image: url('images/1.jpg');" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row align-items-center">
<div class="col-12">
<div class="row align-items-center">
Expand All @@ -147,6 +160,36 @@ <h1 data-aos="fade-up" data-aos-delay="100">Sorting Algorithm</h1>

</div>
</div>


<!-- <div class="flex p-5 items-center justify-center ml-5 mr-5">
<div class="sm:w-full md:w-2/4">
<div class="mr-5">
<h1 class="text-4xl font-semibold sm:text-5xl md:text-6xl text-black mb-4">
The <span style="color: rgb(219, 127, 219);">#1</span> Sorting
<p class="mt-3">Visualization Tool</p>
</h1>
<p class="mb-4 text-base sm:text-sm md:text-lg text-black">
Our sorting visualizer tool provides an interactive way to visualize sorting algorithms in action helping users understand how different algorithm work and their efficiency in sorting data.
</p>
</div>
<a class="mr-3 p-2 rounded-md font-semibold text-white" style="background: rgb(219, 127, 219);" href="visual.html">
<button>Get Started</button>
</a>
<a class="mr-3 bg-gray-300 p-2 rounded-md font-semibold hover:text-purple-700" href="#programs-section">
<button class="items-center">Explore <span class="text-2xl">&#x203A;</span></button>
</a>
</div>
<div class="w-2/4 md:flex hidden">
<img src="./images/home.jpg" alt="">
</div>
</div> -->




</div>
</div>

Expand Down Expand Up @@ -525,15 +568,15 @@ <h2 class="text-black mb-4">Quick Sort</h2>
</section>
<div>
<main>
<div class="main" id="About-Us">
<div class="main" id="About-Us" >
<div class="card" data-aos="fade-up" data-aos-delay="200">
<h1> ABOUT US</h1>
<img class="img" src="images/coding.gif" alt="">
<p class="text-base md:text-lg lg:text-2xl text-gray-400 text-center"><b>Visual Sort</b> offers an engaging platform to learn sorting algorithms through interactive visualizations. It covers popular algorithms like <b>Bubble Sort, Merge Sort,</b> and more, making complex concepts easy to understand. Ideal for students and educators, it combines education and user-friendly design to enhance learning experiences.</p>
</div>
</div>
</div>
<section class="mb-10 mt-40 bg-white">
<section class="mb-10 mt-40 bg-white" >
<div class="py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
Expand Down Expand Up @@ -1054,6 +1097,31 @@ <h5>Legal</h5>


<script>






document.addEventListener('DOMContentLoaded', function() {
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.nav-link');

function changeLinkState() {
let index = sections.length;

while(--index && window.scrollY + 10 < sections[index].offsetTop) {}

navLinks.forEach((link) => link.classList.remove('active'));
navLinks[index].classList.add('active');
}

changeLinkState();
window.addEventListener('scroll', changeLinkState);
});



const topButton = document.getElementById("topbtn");
window.onscroll = function () {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
Expand Down
56 changes: 48 additions & 8 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -324,15 +324,55 @@ pre code {
content: "ghhj";
}

.log:hover {
.nav-item .log {
color: white !important;
background: rgb(34, 34, 139) !important;
width: fit-content;
font-weight: 700;
background-color: rgb(219, 127, 219);
border-radius: 1rem;
}

.log:hover {
background: purple !important;
}

#Loader {
background: white url(img/pre-loader.gif) no-repeat center center;
height: 100vh;
width: 100%;
position: fixed;
z-index: 100;
}

.nav-link {
color: black;
display: inline-block; /* Ensures the link takes only the necessary width */
position: relative; /* Allows the use of pseudo-elements */
transition: color 0.3s, border-bottom 0.3s;
border-bottom: none;
width: fit-content;
}

.nav-link.active {
color: rgb(219, 127, 219);
border-bottom: 2px solid rgb(219, 127, 219);
font-weight: 800;
}

.dropdown-item:hover {
background: rgb(236, 188, 236) !important;
}

.hover-move {
position: relative;
transition: transform 0.3s ease-in-out;
}

.navbar-toggler {
background-color: #7e22ce; /* Purple background color */
border-color: #7e22ce; /* Purple border color */
}

#Loader{
background: white url(img/pre-loader.gif) no-repeat center center;
height: 100vh;
width: 100%;
position: fixed;
z-index: 100;
.navbar-toggler-icon {
background-image: url('data:image/svg+xml;charset=UTF8,%3Csvg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="rgba(255, 255, 255, 1)" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E');
}

0 comments on commit 47471f0

Please sign in to comment.