Skip to content

Added a slide navigation button,fixed "learn more" buttons to redirec… #584

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

Merged
merged 2 commits into from
Sep 22, 2025
Merged

Added a slide navigation button,fixed "learn more" buttons to redirec… #584

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0d6bc23
Added a slide navigation button,fixed "learn more" buttons to redirec…
DiyaGhorpade Sep 20, 2025
23e4808
Merge branch 'master' into ui-change-index
DiyaGhorpade Sep 21, 2025
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
97 changes: 87 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,7 @@
}

.about-card h4 {
color: #409B44;
color: #28a745
font-weight: 600;
white-space: nowrap;
}
Expand Down Expand Up @@ -1508,8 +1508,66 @@
transform: none !important;
box-shadow: none !important;
}

/*Dark Mode*/

.arrow-slide-btn {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
border: 2px solid #fff;
color: #3498db;
cursor: pointer;
position: absolute;
right: 20px;
top: 40%; /* Changed from 50% to position it higher */
transform: translateY(-50%);
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}

.arrow-slide-btn:hover {
transform: translateY(-50%) translateX(5px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
background: #fff;
}

.arrow-slide-btn:active {
transform: translateY(-50%);
}

.arrow-icon {
font-size: 24px;
transition: all 0.3s ease;
color: #3498db;
}

.arrow-slide-btn:hover .arrow-icon {
transform: translateX(3px);
color: #8e44ad;
}

/* Optional pulse animation */
@keyframes pulse {
0% { transform: translateY(-50%) scale(1); }
50% { transform: translateY(-50%) scale(1.05); }
100% { transform: translateY(-50%) scale(1); }
}

.arrow-slide-btn {
animation: pulse 2s infinite;
}

/* Make sure the container has relative positioning */
.container {
position: relative;
padding-right: 90px; /* Add space for the button */
}

</style>
<!-- END: Custom CSS changes -->
</head>
Expand Down Expand Up @@ -1666,7 +1724,7 @@ <h6 class="mb-0">Cyber Analyst</h6>
<div class="carousel-caption d-block">
<h2>Website Development</h2>
<div class="redirect-btns m-4">
<a href="#learn" class="btn btn-primary m-1 fade-in">Learn more</a>
<a href="src/web.html" class="btn btn-primary m-1 fade-in">Learn More</a>
<a href="learn/webdev.html" class="btn btn-custom-purple m-1 fade-in">Portfolio</a>
</div>
</div>
Expand All @@ -1682,7 +1740,7 @@ <h2>Website Development</h2>
<div class="carousel-caption d-block">
<h2>Graphic Design</h2>
<div class="redirect-btns m-4">
<a href="#learn" class="btn btn-primary m-1 fade-in">Learn more</a>
<a href="src/graphic_design.html" class="btn btn-primary m-1 fade-in">Learn More</a>
<a href="learn/graphic.html" class="btn btn-custom-purple m-1 fade-in">Portfolio</a>
</div>
</div>
Expand All @@ -1698,7 +1756,7 @@ <h2>Graphic Design</h2>
<div class="carousel-caption d-block">
<h2>Digital Marketing</h2>
<div class="redirect-btns m-4">
<a href="src/digital-marketing.html" class="btn btn-primary m-1 fade-in">Learn more</a>
<a href="src/digital-marketing.html" class="btn btn-primary m-1 fade-in">Learn More</a>
<a href="learn/marketing.html" class="btn btn-custom-purple m-1 fade-in">Portfolio</a>
</div>
</div>
Expand All @@ -1714,7 +1772,7 @@ <h2>Digital Marketing</h2>
<div class="carousel-caption d-block">
<h2>Social Media Management</h2>
<div class="redirect-btns m-4">
<a href="#learn" class="btn btn-primary m-1 fade-in">Learn more</a>
<a href="src/social-media.html" class="btn btn-primary m-1 fade-in">Learn More</a>
<a href="learn/socialmedia.html" class="btn btn-custom-purple m-1 fade-in">Portfolio</a>
</div>
</div>
Expand All @@ -1730,7 +1788,7 @@ <h2>Social Media Management</h2>
<div class="carousel-caption d-block">
<h2>Content Writing</h2>
<div class="redirect-btns m-4">
<a href="#learn" class="btn btn-primary m-1 fade-in">Learn more</a>
<a href="src/content-writing.html" class="btn btn-primary m-1 fade-in">Learn More</a>
<a href="learn/contentwriting.html" class="btn btn-custom-purple m-1 fade-in">Portfolio</a>
</div>
</div>
Expand All @@ -1745,11 +1803,17 @@ <h2>Content Writing</h2>
<div class="carousel-caption d-block">
<h2>Cyber Analyst</h2>
<div class="redirect-btns m-4">
<a href="#learn" class="btn btn-primary m-1 fade-in">Learn more</a>
<a href="src/cyber-analyst.html" class="btn btn-primary m-1 fade-in">Learn More</a>
<a href="learn/cyberanalyst.html" class="btn btn-custom-purple m-1 fade-in">Portfolio</a>
</div>
</div>
</div>
<button class="arrow-slide-btn" id="customNextButton">
<span class="arrow-icon">
<i class="fas fa-arrow-right"></i>
</span>
</button>

</div>

</div>
Expand Down Expand Up @@ -2292,7 +2356,20 @@ <h5 class="footer-title">Newsletter</h5>
yearSpan.textContent = new Date().getFullYear();
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
// Get the custom button and Bootstrap carousel
const customNextButton = document.getElementById('customNextButton');
const carousel = new bootstrap.Carousel(document.getElementById('carouselExampleDark'));

// Add click event to custom button
if (customNextButton) {
customNextButton.addEventListener('click', function() {
carousel.next(); // Go to next slide
});
}
});
</script>
</body>

</html>