Skip to content

Commit

Permalink
had undo changes and add an arrow
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ayushswirlon
Ayushswirlon committed Jul 17, 2024
1 parent ec22e5b commit 57d8639
Showing 1 changed file with 94 additions and 41 deletions.
135 changes: 94 additions & 41 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,23 +111,34 @@
.image-wrapper:hover .ripple-effect {
opacity: 1;
}

body {
font-family: 'Roboto', sans-serif;
/* background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%); */
}

.intro-section {
display: flex;
align-items: center;
min-height: 100vh;
padding: 2rem 0;
overflow: hidden;

display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
padding-bottom: 60px;
overflow: hidden;
opacity: 0;
transition: opacity 1s ease-out;
}

.intro-section.fade-in {
opacity: 1;
}
.scroll-arrow-container{
position: relative;
height: 60px;
margin-top: 20px;
bottom:20px;
}


.floating-shape {
position: absolute;
Expand Down Expand Up @@ -232,8 +243,8 @@
}

.landing-animate {
opacity: 0;
animation: fadeIn 1s ease-out forwards;
opacity: 0;
animation: landingAnimation 0.8s ease-out forwards;
}

.text-container.landing-animate {
Expand All @@ -260,7 +271,36 @@
padding-top: 5rem; /* Adjust based on your navbar height */
}
}
.scroll-arrow {
position: absolute;
bottom:-8px;
left: 50%;
/* transform: translateX(-50%); */
font-size: 2rem;
opacity: 1;
color: rgb(219, 127, 219);
animation: bounce 2s infinite;
/* transition: opacity 0.3s ease; */
cursor: pointer;
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0) translateX(-50%);
}
40% {
transform: translateY(-20px) translateX(-50%);
}
60% {
transform: translateY(-10px) translateX(-50%);
}
}
@media (max-width: 768px) {
.scroll-arrow {
bottom: 10px;
font-size: 1.5rem;
}
}
</style>
</head>

Expand Down Expand Up @@ -346,49 +386,47 @@



<div class="intro-section min-h-screen flex items-center" id="home-section">
<div class="floating-shape shape-1"></div>
<div class="floating-shape shape-2"></div>
<div class="floating-shape shape-3"></div>
<div class="floating-shape shape-4"></div>

<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="w-full md:w-1/2 mb-8 md:mb-0">
<div class="text-container landing-animate">
<h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-black mb-4 animate-fade-in-up">
<span class="block">The <span style="color: rgb(219, 127, 219);">#1</span> Sorting</span>
<span class="block">Visualization Tool</span>
<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 text-container landing-animate">
<h1 class="text-4xl font-semibold sm:text-5xl md:text-6xl text-black mb-4 animate-fade-in-up">
The <span style="color: rgb(219, 127, 219);">#1</span> Sorting
<span class="whitespace-nowrap">Visualization Tool</span>
</h1>

<p class="mb-6 text-sm sm:text-base text-gray-700 animate-fade-in-up delay-100">
<i class="fas fa-chart-bar feature-icon"></i>Interactive visualization
<br>
<i class="fas fa-tachometer-alt feature-icon"></i>Understand algorithm efficiency
<br>
<i class="fas fa-lightbulb feature-icon"></i>Learn sorting techniques
<p class="mb-4 text-base sm:text-sm md:text-lg text-black animate-fade-in-up delay-100">
Sorting algorithm visualisation tool which provides an interactive way to visualize various sorting algorithm.
</p>
</div>
<div class="button-container animate-fade-in-up delay-200">
<a class="inline-block mr-4 px-6 py-3 rounded-full font-semibold text-white transition duration-300 ease-in-out hover:shadow-lg" style="background: rgb(219, 127, 219);" href="visual.html">
<span>Get Started</span>
<p class="mb-4 text-base sm:text-sm md:text-lg text-black animate-fade-in-up delay-100">
<i class="fas fa-chart-bar feature-icon"></i>Interactive visualization
<br>
<i class="fas fa-tachometer-alt feature-icon"></i>Understand algorithm efficiency
<br>
<i class="fas fa-lightbulb feature-icon"></i>Learn sorting techniques
</div>
<div class="button-container animate-fade-in-up delay-200">
<a class="mr-3 p-2 rounded-md font-semibold text-white" style="background: rgb(219, 127, 219);" href="visual.html">
<span>Get Started</span>
</a>
<a class="inline-block px-6 py-3 bg-gray-200 rounded-full font-semibold text-gray-700 transition duration-300 ease-in-out hover:bg-gray-300 hover:text-purple-700" href="#programs-section">
<span>Explore</span>
<a class="mr-3 bg-gray-300 p-2 rounded-md font-semibold hover:text-purple-700" href="#programs-section">
<span class="items-center">Explore</span>
</a>
</div>
</div>
<div class="w-full md:w-1/2 image-container animate-fade-in-up delay-300">
<div class="image-wrapper">
</div>
<div class="w-2/4 md:flex hidden image-container animate-fade-in-up delay-300">
<div class="image-wrapper">
<div class="image-inner">
<img src="./images/home.png" alt="Sorting Visualization" class="main-image w-full h-auto max-w-md mx-auto">
<div class="ripple-effect"></div>
<img src="./images/home.png" alt="" class="main-image">
<div class="ripple-effect"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="scroll-arrow-container">
<div class="scroll-arrow">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>

<div class="site-section algorithm-title" id="algorithm-section">
<div class="container">
Expand Down Expand Up @@ -1390,6 +1428,21 @@ <h5>Legal</h5>
behavior: 'smooth'
});
};
document.addEventListener('DOMContentLoaded', function() {
const arrow = document.querySelector('.scroll-arrow');
const heroSection = document.getElementById('home-section');

window.addEventListener('scroll', function() {
const heroBottom = heroSection.getBoundingClientRect().bottom;
const windowHeight = window.innerHeight;

if (window.scrollY > 200 || heroBottom < 0) {
arrow.style.opacity = '0';
} else {
arrow.style.opacity = '1';
}
});
});
</script>


Expand Down

0 comments on commit 57d8639

Please sign in to comment.