Skip to content

Commit

Permalink
Making of Carousel -I had resolved the conflicts (#80)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Anjaliavv51
Anjaliavv51 authored Jan 8, 2025
2 parents 14dc01c + 2c42eed commit bbed6f4
Show file tree
Hide file tree
Showing 4 changed files with 317 additions and 29 deletions.
157 changes: 134 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,33 +16,38 @@
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>
</head>
<body>
<header>
<nav>
<!-- Wrap the logo text in an anchor tag -->
<a href="#hero" class="logo">मातृबोधः</a>
<ul class="nav-links">
<li><a href="#hero">Home</a></li>
<li><a href="#wisdom">About</a></li>

<li class="dropdown">
<a href="#">Content</a>
<ul class="dropdown-content">
<li><a href="countingpage.html">Counting</a></li>
<li><a href="#">Days</a></li>
<li><a href="#">Activities</a></li>
<li><a href="feedback.html">Feedback</a></li>
</ul>
</li>
<li><a href="login.html">Login</a></li>
<a href="#" class="btn-contact">Contact</a>
</ul>
<div class="toggle-menu">☰</div>
</nav>
<nav>
<!-- Wrap the logo text in an anchor tag -->
<a href="#hero" class="logo">मातृबोधः</a>
<ul class="nav-links">
<li><a href="#hero">Home</a></li>
<li><a href="#wisdom">About</a></li>
<li class="dropdown">
<a href="#">Content</a>
<ul class="dropdown-content">
<li><a href="countingpage.html">Counting</a></li>
<li><a href="#">Days</a></li>
<li><a href="#">Activities</a></li>
<li><a href="feedback.html">Feedback</a></li>
</ul>
</li>
<li><a href="login.html">Login</a></li>
<a href="#" class="btn-contact">Contact</a>
</ul>
</nav>
</header>
<!-- Hero Section -->
<section id="hero" class="hero">
<!-- <div class=""> -->
<!-- <section id="hero" class="hero">
<h1 class="wave-text">
<span>मा</span><span>तृ</span><span>बो</span><span>धः</span
><span
Expand All @@ -59,7 +64,110 @@ <h2>
A Chariot of Indian Children with Ancient Wisdom for Modern Times
</p>
<a href="#" class="btn">View Services</a>
</section>
</section> -->

<!-- </div> -->
<section id="hero" class="hero" >
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- Carousel Indicators -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>

<!-- Carousel Content -->
<div class="carousel-inner ">
<!-- Slide 1 -->
<div class="carousel-item active">
<img src="WhatsApp Image 2024-09-24 at 01.04.26_9c5f6797.jpg" class="d-block w-100 carousel-image" alt="Slide 3 Image">

<div class="carousel_caption d-none d-md-block hero-duplicate">
<h1 class="wave-text">
<span>मा</span><span>तृ</span><span>बो</span><span>धः</span
>
<span
><img
id="audio-icon"
src="https://ttdevasthanams.ap.gov.in/muteIcon.svg"
alt="slide1 image"
/></span>
<br>
<br>
</h1>
<h2 >
वक्रतुण्ड महाकाय सूर्यकोटि समप्रभ। निर्विघ्नं कुरु मे देव सर्वकार्येषु
सर्वदा॥
</h2>
<p class="subtitle ">
A Chariot of Indian Children with Ancient Wisdom for Modern Times
</p>
<a href="#" class="btn btn-primary">View Services</a>
</div>
</div>

<!-- Slide 2 -->
<div class="carousel-item">
<img src="pexels-pixabay-326055.jpg" class="d-block w-100" alt="Slide 2 Image">
<div class="carousel_caption">
<h1 class="wave-text">
<span>मा</span><span>तृ</span><span>बो</span><span>धः</span
><span
><img
id="audio-icon"
src="https://ttdevasthanams.ap.gov.in/muteIcon.svg"
/></span>
<br>
<br>
</h1>
<h2>
वक्रतुण्ड महाकाय सूर्यकोटि समप्रभ। निर्विघ्नं कुरु मे देव सर्वकार्येषु
सर्वदा॥
</h2>
<p class="subtitle ">
A Chariot of Indian Children with Ancient Wisdom for Modern Times
</p>
<a href="#" class="btn btn-primary">View Services</a>
</div>
</div>

<!-- Slide 3 -->
<div class="carousel-item">
<img src="WhatsApp Image 2024-09-05 at 23.59.21_11f94952.jpg" class="d-block w-100 carousel-image" alt="Slide 3 Image">
<div class="carousel_caption">
<h1 class="wave-text">
<span>मा</span><span>तृ</span><span>बो</span><span>धः</span
><span
><img
id="audio-icon"
src="https://ttdevasthanams.ap.gov.in/muteIcon.svg"
/></span>
<br>
<br>
</h1>
<h2>
वक्रतुण्ड महाकाय सूर्यकोटि समप्रभ। निर्विघ्नं कुरु मे देव सर्वकार्येषु
सर्वदा॥
</h2>
<p class="subtitle ">
A Chariot of Indian Children with Ancient Wisdom for Modern Times
</p>
<a href="#" class="btn btn-primary">View Services</a>
</div>
</div>
</div>

<!-- Carousel Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>

<!-- Wisdom Section -->
<section id="wisdom" class="wisdom-section">
Expand Down Expand Up @@ -228,6 +336,9 @@ <h4>Contact Us</h4>
></script>
<script src="scrollscript.js"></script>
<script src="audio.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="index.js"></script>
</body>
</html>

Binary file added pexels-pixabay-326055.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.
2 changes: 2 additions & 0 deletions scontentjs.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
document.addEventListener("DOMContentLoaded", function() {
document.addEventListener("scroll", function() {
const cards = document.querySelectorAll(".roadmap-card");
const triggerBottom = window.innerHeight / 5 * 4;
Expand All @@ -12,3 +13,4 @@ document.addEventListener("scroll", function() {
}
});
});
});
Loading

0 comments on commit bbed6f4

Please sign in to comment.