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

Issue Fixed #101

Merged
merged 1 commit into from
Jan 12, 2025
Merged

Issue Fixed #101

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
224 changes: 105 additions & 119 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,32 +39,68 @@
}

.slideshow-container {
position: relative;

margin: auto;
overflow: hidden;
color: #ffd465;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.mySlides {
display: none;
position: relative;
}

.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
position: relative;
max-width: 100%;
margin: auto;
overflow: hidden;
}

.mySlides {
display: none;
}

.banner-image {
width: 100%;
height: auto;
}

.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
user-select: none;
}

.prev {
left: 10px;
}

.next {
right: 10px;
}

.prev:hover, .next:hover {
background: rgba(0, 0, 0, 0.8);
}

.dot-container {
text-align: center;
margin-top: 10px;
}

.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.dot.active {
background-color: #717171;
}

.text {
color: #fff;
Expand All @@ -77,60 +113,6 @@
background-color: rgba(0, 0, 0, 0.5);
}

.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}

.banner-image {
width: 100%;
height: 300px;
object-fit: cover;
}

.prev {
left: 0;
border-radius: 3px 0 0 3px;
}

.next {
right: 0;
border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: var(--heading-color);
color: #ffd465;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active,
.dot:hover {
background-color: #717171;
}

.options-section {
text-align: center;
padding: 40px 20px;
Expand Down Expand Up @@ -809,37 +791,29 @@ <h2>Ajivika</h2>
<!-- Banner -->
<h1 style="color: var(--heading-color)">Welcome to Ajivika</h1>
<p style="color: var(--para-color);">Your one-stop destination for career growth and learning.</p>
<div class="slideshow-container" style="width: 1190px; margin-left: 0px;">
<div class="slideshow-container">
<!-- Slide 1 -->
<div class="mySlides fade">
<div class="mySlides">
<img src="./upskill-banner.jpg" alt="Upskill" class="banner-image" />
</div>

<!-- Slide 2 -->
<div class="mySlides fade">
<img
src="./apply-jobs-banner.jpg"
alt="Apply for the best jobs"
class="banner-image"
/>
<div class="mySlides">
<img src="./apply-jobs-banner.jpg" alt="Apply for the best jobs" class="banner-image" />
</div>

<!-- Slide 3 -->
<div class="mySlides fade">
<img
src="./resume-banner.jpg"
alt="Get your resume made"
class="banner-image"
/>
<div class="mySlides">
<img src="./resume-banner.jpg" alt="Get your resume made" class="banner-image" />
</div>

<!-- Navigation buttons -->
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br />

<!-- Dots -->
<div style="text-align: center">
<div class="dot-container">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
Expand Down Expand Up @@ -1152,26 +1126,38 @@ <h3>Subscribe to Our Newsletter</h3>
<script src="index.js"></script>

<script>
let slideIndex = 0;
showSlides();

function showSlides() {
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
for (let i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
const slides = document.getElementsByClassName("mySlides");
const dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (let i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}

// Auto-play functionality
setInterval(() => {
plusSlides(1);
}, 3000); // Change image every 3 seconds
</script>

<script>
Expand Down
Loading