Detail pages and list pages are created

This commit is contained in:
Roshan476
2025-12-22 17:08:27 +05:45
parent 1eaccedaae
commit 86efb066a5
14 changed files with 4236 additions and 303 deletions

View File

@@ -4,13 +4,14 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/assets/images/header-image.svg" type="image/gif" />
<title>Courses</title>
<title>About page</title>
<!-- <link rel="stylesheet" href="./assets/css/"> -->
<link rel="stylesheet" href="/assets/aboutpage.css">
<link rel="stylesheet" href="/assets/style.css">
<!-- Link to Bootstrap CSS -->
<link rel="stylesheet" href="/bootstraps/css/bootstrap.min.css">
<link rel="stylesheet" href="./assets/bootstraps/css/bootstrap.min.css">
<!-- Link to Font Awesome (via CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
@@ -24,15 +25,160 @@
" rel="stylesheet">
<!-- bootstraps -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<!-- Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>
<body>
<section id="navbar" >
<div class="header-top-wrap">
<div class="row justify-content-between align-items-center g-0">
<!-- Left Section -->
<div class="col-lg-7">
<div class="header-top-left">
<ul class="list-wrap">
<li>
<i class="fa-solid fa-location-dot"></i>
<a href="#">Birgunj-15,Parsa</a>
</li>
<li>
<i class="fa-regular fa-envelope"></i>
<a href="mailto:#">
sample@abc.edu.np
</a>
</li>
</ul>
</div>
</div>
<!-- Right Section -->
<div class="col-lg-2 ps-5">
<div class="header-top-right">
<div class="header-social">
<ul class="list-wrap">
<li>
<a target="_blank" href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fab fa-instagram"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fab fa-youtube"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fab fa-linkedin"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="navbar-logo">
<a class="navbar-brand" href="#">
<img src="./assets/image/scc.png" alt="">
</a>
</div>
<button type="button" class="navbar-toggler" type="button" style="border: none;"
data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">
<div class="hamburgermenu">
<div class="hamburger line-1"></div>
<div class="hamburger line-2"></div>
<div class="hamburger line-3"></div>
</div>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link " href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>HOME</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/aboutpage.html">
<span>ABOUT</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link " href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span> Admissions</span>
<i class="fas fa-chevron-down"></i>
</a>
<ul class="subdropdown-menu ">
<li>
<a href="./courses.html">Admission process</a>
</li>
<li>
<a href="./courseDetail.html">Scholarship</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link " href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span> events</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link " href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Blogs</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link " href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Gallery</span>
<i class="fas fa-chevron-down"></i>
</a>
<ul class="subdropdown-menu subdropdown-menu11 ">
<li class="vdo">
<a href="./courses.html">Photos</a>
</li>
<li class="vdo">
<a href="./courseDetail.html">Videos</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact.html"><span>CONTACT</span></a>
</li>
<!-- <li class="nav-item">
<a class="nav-link apply-now" href="./contactpage.html">
<span>Apply Now</span>
</a>
</li> -->
</ul>
</div>
<div class="col-20 d-none d-lg-block text-end align-self-center header-action-container apply1">
<button class="btn apply-btn">
APPLY NOW
</button>
</div>
</div>
</nav>
</section>
<section class="section-top">
<div class="container">
<div class="col-lg-10 offset-lg-1 text-center">
@@ -45,7 +191,111 @@
</div>
</div>
</div>
</section>
<section class="about-us">
<div class="container">
<div class="row align-items-center g-4">
<div class="col-md-7">
<div class="heading">Overview</div>
<div class="desc">
<p>
South City College of Science and Technology is committed to providing quality education in the fields of science and information technology. The college focuses on building strong academic foundations, practical skills, and professional ethics to prepare students for successful careers in the modern technological world.
</p>
<p id="more-text" style="display: none;">
Affiliated with Kathmandu University, the college offers undergraduate programs designed to meet national and international academic standards. Through experienced faculty members, modern teaching methodologies, and a supportive learning environment, South City College emphasizes innovation, critical thinking, and hands-on learning.
The institution aims to nurture skilled professionals and responsible individuals who can contribute effectively to society, the IT industry, and the education sector, both within Nepal and beyond.
</p>
<p></p>
</div>
<a href="#" id="read-more-btn" class="view-events-btn">Read More</a>
</div>
<div class="col-md-5 d-flex justify-content-end" id="about-logo-area">
<div class="image-wrapper"> <!-- Wrapper to center the smoke -->
<img src="./assets/image/whitebg.png" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- principal view -->
<section class="testi_area section-padding overflow-hidden">
<div class="container">
<!-- Section Title -->
<div class="section-title" style="opacity: 1; transform: none; will-change: auto;">
<h2>What Our Founder Say To Do <br>Their Students</h2>
</div>
<div class="row g-4">
<!-- Left Image Section -->
<div class="col-lg-6 col-sm-12 col-xs-12 animated-box2" style="opacity: 1; transform: none; will-change: auto;">
<div class="swiper swiper-initialized swiper-horizontal owl-carousel swiper-backface-hidden" id="testimonial-slider-left">
<div class="swiper-wrapper">
<!-- Testimonial 1 -->
<div class="swiper-slide swiper-slide-active testimonial" style="width: 636px; margin-right: 40px;">
<img src="./assets/image/man.png" class="img121" alt="">
<div class="testi_pic_title">
<!-- <img src="./assets/image/image3.png" alt="img"> -->
<h4>hello hello</h4>
<p>Principal</p>
</div>
</div>
<!-- Testimonial 1 -->
<div class="swiper-slide swiper-slide-active testimonial" style="width: 636px; margin-right: 40px;">
<img src="./assets/image/image.png" class="img121" alt="">
<div class="testi_pic_title">
<!-- <img src="./assets/image/image3.png" alt="img"> -->
<h4>hello hello</h4>
<p>Coordinator</p>
</div>
</div>
</div>
</div>
</div>
<!-- Right Testimonial Slider Section -->
<div class="col-lg-6 col-sm-12 col-xs-12 animated-box2" style="opacity: 1; transform: none; will-change: auto;">
<div class="swiper swiper-initialized swiper-horizontal owl-carousel swiper-backface-hidden" id="testimonial-slider-right">
<div class="swiper-wrapper">
<!-- Testimonial 1 -->
<div class="swiper-slide swiper-slide-active testimonial testimonial121" style="width: 636px; margin-right: 40px;">
<img src="./assets/image/message.png" alt="">
<div class="testimonial_content">
<p> namete every one Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur sapiente adipisci cumque! Ratione expedita fuga libero eveniet id quisquam delectus omnis, nihil, voluptate reprehenderit maiores temporibus velit aspernatur a commodi!</p>
</div>
<!-- <div class="testi_pic_title">
<img src="./assets/image/image3.png" alt="img">
<h4>hello hello</h4>
<p>developer</p>
</div> -->
</div>
<!-- Testimonial 1 -->
<div class="swiper-slide swiper-slide-active testimonial testimonial121" style="width: 636px; margin-right: 40px;">
<img src="./assets/image/message.png" alt="">
<div class="testimonial_content">
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur sapiente adipisci cumque! Ratione expedita fuga libero eveniet id quisquam delectus omnis, nihil, voluptate reprehenderit maiores temporibus velit aspernatur a commodi!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="top_cat__area section-padding undefined overflow-hidden"
style="background-image: url('./assets/images/shape-1\ \(1\).png'); background-size: cover; background-position: center center;">
<div class="container" style="opacity: 1; transform: none; will-change: auto;">
@@ -97,6 +347,35 @@
</div>
</section>
<!-- Vision Mission and GOAL part -->
<section class=" vjn-msn-gl"
style="background-image: url('./assets/images/shape-1.png'); background-size: cover; background-position: center center;">
<div class="container container2">
<div class="row" id="boxes">
<div class="col-lg-4 col-sm-12 col-xs-12 wow fadeInUp" id="card-part">
<div class="card vision">
<div class="icon"><i class="fa-solid fa-eye"></i></div>
<h2>Vision</h2>
<p>To build a world where individuals recovering from drug abuse have access to support, opportunities, and a strong community to help them lead fulfilling lives as future leaders.</p>
</div>
</div>
<div class="col-lg-4 col-sm-12 col-xs-12 wow fadeInUp" id="card-part">
<div class="card mission">
<div class="icon"><i class="fa-solid fa-rocket"></i></div>
<h2>Mission</h2>
<p> Empower recovering individuals through mental health support, skills training, job opportunities, and community engagement.</p>
</div>
</div>
<div class="col-lg-4 col-sm-12 col-xs-12 wow fadeInUp" id="card-part">
<div class="card goal">
<div class="icon"><i class="fa-solid fa-medal"></i></div>
<h2>Goal</h2>
<p> Reduce relapse, expand counseling, strengthen community support, and develop leadership among the recovering community.</p>
</div>
</div>
</div>
</div>
</section>
<!-- we are providing the online course in global world part -->
<section class="ab_area section-padding overflow-hidden">
<div class="container">
@@ -104,7 +383,7 @@
<!-- Image Section -->
<div class="col-lg-6 col-sm-12 col-xs-12 animated-box" id="" style="opacity: 1; transform: none; will-change: auto;">
<div class="ab_img">
<img src="./assets/images/girls2.png" class="img-fluid" alt="image">
<img src="./assets/image/man.png" class="img-fluid" alt="image">
</div>
</div>
@@ -126,7 +405,7 @@
</div>
</section>
<section class="vid_area va2"
<!-- <section class="vid_area va2"
style="background-image: url(./assets/images/child.jpg); background-size: cover; background-position: center center;">
<div class="container">
<div class="row">
@@ -139,8 +418,8 @@ style="background-image: url(./assets/images/child.jpg); background-size: cover;
</div>
</div>
</div>
</section>
<section class="count_area counter_feature hidden overflow-hidden">
</section> -->
<!-- <section class="count_area counter_feature hidden overflow-hidden">
<div class="container">
<div class="row g-4 animated-box1">
<div class="col-lg-3 col-sm-6 col-xs-12">
@@ -181,7 +460,7 @@ style="background-image: url(./assets/images/child.jpg); background-size: cover;
</div>
</div>
</div>
</section>
</section> -->
<section class="section-padding insfreecourse overflow-hidden">
<div class="container">
<div class="row" style="opacity: 1; transform: none; will-change: auto;">
@@ -189,7 +468,7 @@ style="background-image: url(./assets/images/child.jpg); background-size: cover;
<!-- Instructor Card -->
<div class="col-lg-6 col-sm-12 col-xs-12">
<div class="single_ins"
style="background-image: url('./assets/images/aboutpage.png'); background-size: cover; background-position: center center;">
style="background-image: url('./assets/image/aboutpage.png'); background-size: cover; background-position: center center;">
<div class="single_ins_content">
<h4>Build Your Career</h4>
<h1>Become an Instructor</h1>
@@ -202,7 +481,7 @@ style="background-image: url(./assets/images/child.jpg); background-size: cover;
<!-- Free Courses Card -->
<div class="col-lg-6 col-sm-12 col-xs-12">
<div class="single_ins"
style="background-image: url('./assets/images/aboutpage.png'); background-size: cover; background-position: center center;">
style="background-image: url('./assets/image/aboutpage.png'); background-size: cover; background-position: center center;">
<div class="single_ins_content">
<h4>Build Your Career</h4>
<h1>Get Free Courses</h1>
@@ -215,118 +494,103 @@ style="background-image: url(./assets/images/child.jpg); background-size: cover;
</div>
</div>
</section>
<section class="testi_area section-padding undefined overflow-hidden about-page">
<div class="footer section-padding">
<div class="container">
<!-- Section Title -->
<div class="section-title" style="opacity: 1; transform: none; will-change: auto;">
<h2>What Students Say To Do <br>Their Online Course</h2>
</div>
<!-- Right Testimonial Slider Section -->
<div class="col-lg-12 col-sm-12 col-xs-12 animated-box2" style="opacity: 1; transform: none; will-change: auto;">
<div class="swiper swiper-initialized swiper-horizontal owl-carousel swiper-backface-hidden" id="testimonial-slider">
<div class="swiper-wrapper">
<!-- Testimonial 1 -->
<div class="swiper-slide swiper-slide-active testimonial" style="width: 636px; margin-right: 40px;">
<div class="testimonial_content">
<i class="bi bi-star"></i>
<i class="bi bi-star"></i>
<i class="bi bi-star"></i>
<i class="bi bi-star"></i>
<i class="bi bi-star"></i>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur sapiente adipisci cumque! Ratione expedita fuga libero eveniet id quisquam delectus omnis, nihil, voluptate reprehenderit maiores temporibus velit aspernatur a commodi!</p>
</div>
<div class="testi_pic_title">
<img src="./assets/images/testimonial.png" alt="img">
<h4>hello hello</h4>
<p>developer</p>
</div>
</div>
<!-- Testimonial 2 -->
<div class="swiper-slide swiper-slide-next testimonial" style="width: 636px; margin-right: 40px;">
<div class="testimonial_content">
<i class="ti-star"></i>
<i class="ti-star"></i>
<i class="ti-star"></i>
<i class="ti-star"></i>
<i class="ti-star"></i>
<p>Aqestic optio amet a ququam saepe aliquid voluate dicta fuga dolor saerror sed earum a magni soluta quam minus dolor dolor sed earum a magni soluta autem dolor error error sit quam minus sint rem a rerum dolobus veritatis delectus.</p>
</div>
<div class="testi_pic_title">
<img src="./assets/images/testimonial.png" alt="img">
<h4>Sharukh Khan</h4>
<p>Red Chili Inc</p>
</div>
</div>
<!-- Testimonial 3 -->
<div class="swiper-slide testimonial" style="width: 636px; margin-right: 40px;">
<div class="testimonial_content">
<i class="ti-star"></i>
<i class="ti-star"></i>
<i class="ti-star"></i>
<i class="ti-star"></i>
<i class="ti-star"></i>
<p>Aqestic optio amet a ququam saepe aliquid voluate dicta fuga dolor saerror sed earum a magni soluta quam minus dolor dolor sed earum a magni soluta autem dolor error error sit quam minus sint rem a rerum dolobus veritatis delectus.</p>
</div>
<div class="testi_pic_title">
<img src="./assets/images/testimonial.png" alt="img">
<h4>Anushka Sharma</h4>
<p>Naika Company</p>
</div>
</div>
<!-- Testimonial 4 -->
<div class="swiper-slide testimonial" style="width: 636px; margin-right: 40px;">
<div class="row g-4">
<div class="testimonial_content">
<i class="ti-star"></i>
<i class="ti-star"></i>
<i class="ti-star"></i>
<i class="ti-star"></i>
<i class="ti-star"></i>
<p>Aqestic optio amet a ququam saepe aliquid voluate dicta fuga dolor saerror sed earum a magni soluta quam minus dolor dolor sed earum a magni soluta autem dolor error error sit quam minus sint rem a rerum dolobus veritatis delectus.</p>
</div>
<div class="testi_pic_title">
<img src="./assets/images/testimonial.png" alt="img">
<h4>Ajmain Adil</h4>
<p>Groton Inc</p>
</div>
<!-- Footer Column 1: Logo and Social Links -->
<div class="col-lg-3 col-sm-6 col-xs-12">
<div class="single_footer footer-left-image">
<a href="/"><img src="/assets/image/scc.png" alt="Logo"></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae risus nec dui venenatis dignissim.</p>
<div class="social_profile">
<ul>
<li><a class="f_facebook" href="/"><i class="bi bi-facebook"></i></a></li>
<li><a class="f_twitter" href="/"><i class="bi bi-twitter"></i></a></li>
<li><a class="f_instagram" href="/"><i class="bi bi-instagram"></i></a></li>
<li><a class="f_linkedin" href="/"><i class="bi bi-linkedin"></i></a></li>
</ul>
</div>
<!-- Testimonial 5 -->
<div class="swiper-slide testimonial" style="width: 636px; margin-right: 40px;">
<div class="testimonial_content">
<i class="ti-star"></i>
<i class="ti-star"></i>
<i class="ti-star"></i>
<i class="ti-star"></i>
<i class="ti-star"></i>
<p>Aqestic optio amet a ququam saepe aliquid voluate dicta fuga dolor saerror sed earum a magni soluta quam minus dolor dolor sed earum a magni soluta autem dolor error error sit quam minus sint rem a rerum dolobus veritatis delectus.</p>
</div>
<div class="testi_pic_title">
<img src="./assets/images/testimonial.png" alt="img">
<h4>Ajmain Adil</h4>
<p>Groton Inc</p>
</div>
</div>
</div>
</div>
<!-- Footer Column 2: About Eduleb -->
<div class="col-lg-3 col-sm-6 col-xs-12">
<div class="single_footer1">
<h4>About Eduleb</h4>
<ul>
<li><a href="/">About us</a></li>
<li><a href="/">Event</a></li>
<li><a href="/">Blog</a></li>
<li><a href="/">Contact us</a></li>
</ul>
</div>
</div>
<!-- Footer Column 3: Popular Courses -->
<div class="col-lg-3 col-sm-6 col-xs-12">
<div class="single_footer1">
<h4>Popular Courses</h4>
<ul>
<li><a href="/">BIT</a></li>
<li><a href="/">Arts &amp; design</a></li>
<li><a href="/">BTechEdIT</a></li>
<li><a href="/">Digital Marketing</a></li>
</ul>
</div>
</div>
<!-- Footer Column 4: Contact Info -->
<div class="col-lg-3 col-sm-6 col-xs-12">
<div class="single_footer1">
<h4>Contact Info</h4>
<div class="sf_contact">
<i class="fa-solid fa-location-dot"></i>
<p>Birgunj-15, Birgunj, Parsa</p>
</div>
<div class="sf_contact">
<i class="fa-solid fa-phone"></i>
<p>+97*********</p>
</div>
<div class="sf_contact">
<i class="fa-brands fa-whatsapp"></i>
<p><a href="tel:+88457845695">Contact via Whatsapp</a></p>
</div>
<div class="sf_contact">
<i class="fa-regular fa-envelope"></i>
<p>example@yourmail.com</p>
</div>
</div>
</div>
<!-- Footer Column 5: Download App -->
<!-- <div class="col-lg-2 col-sm-6 col-xs-12">
<div class="single_footer">
<h4>Download App</h4>
<p>Download our app from the App Store and Google Play Store.</p>
<a href="/"><img src="./assets/images/googleplay.jpg" class="foot_img mb-3" alt="Google Play"></a>
<a href="/"><img src="./assets/images/app-store.jpg" class="foot_img" alt="App Store"></a>
</div>
</div> -->
</div>
</div>
</section>
</div>
<div class="foot_copy">
<div class="footer_copyright">
<p>© 2025. All Rights Reserved.</p>
</div>
</div>
<!-- Link to Bootstrap JS (optional) -->
<script src="/bootstraps/js/bootstrap.bundle.min.js"></script>
<script src="./assets/bootstraps/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-element-bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const counters = document.querySelectorAll('.counter-num'); // Select all counter elements
@@ -354,46 +618,74 @@ style="background-image: url(./assets/images/child.jpg); background-size: cover;
// swiper for testimonial
// swiper for testimonial and global company logo
//swiper for testimonial and global company logo
function initializeSwiper(swiperId, autoplayDelay, slidesPerView, breakpointsConfig = {}) {
return new Swiper(swiperId, {
slidesPerView: slidesPerView, // Dynamic slides per view
spaceBetween: 40, // Space between slides
loop: true, // Loop the slides indefinitely
slidesPerView: slidesPerView,
spaceBetween: 40,
loop: true,
autoplay: {
delay: autoplayDelay, // Dynamic autoplay delay
disableOnInteraction: false, // Continue autoplay after user interaction
},
touchEventsTarget: 'container', // Enables touch/swipe events
navigation: {
nextEl: `${swiperId} .swiper-button-next`, // Navigation for this swiper
prevEl: `${swiperId} .swiper-button-prev`,
delay: autoplayDelay,
disableOnInteraction: false,
},
pagination: {
el: `${swiperId} .swiper-pagination`, // Pagination for this swiper
el: `${swiperId} .swiper-pagination`,
clickable: true,
},
direction: 'horizontal', // Horizontal direction (can be changed to 'vertical')
breakpoints: breakpointsConfig, // Apply breakpoints only if passed
breakpoints: breakpointsConfig,
});
}
// Initialize Swipers with dynamic settings
const swiper1 = initializeSwiper('#testimonial-slider', 4000, 3, {
// Breakpoints for logo-slider only
320: {
slidesPerView: 1, // Show 2 slides per view
spaceBetween: 20, // Adjust space between slides
},
992: {
slidesPerView: 3, // Show 3 slides per view
spaceBetween: 30, // Adjust space between slides
},
1200: {
// slidesPerView: , // Default: 4 slides per view
spaceBetween: 40, // Default space between slides
},
});
// LEFT testimonial
initializeSwiper('#testimonial-slider-left', 3000, 1);
// RIGHT testimonial
initializeSwiper('#testimonial-slider-right', 3000, 1);
// event
$(document).ready(function(){
$(".blog-slide").owlCarousel({
loop: false, // Optional: set to true if you want infinite scroll
margin: 15, // Space between items
nav: true, // Show next/prev buttons
dots: false, // Hide dots
navText: [
"<i class='icofont-thin-left'></i>",
"<i class='icofont-thin-right'></i>"
],
responsive: {
0: { items: 1 }, // Mobile
768: { items: 2 }, // Tablet
992: { items: 2 } // Desktop
}
});
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const readMoreBtn = document.getElementById("read-more-btn");
const moreText = document.getElementById("more-text");
if (!readMoreBtn || !moreText) return;
readMoreBtn.addEventListener("click", function (event) {
event.preventDefault();
if (moreText.style.display === "none") {
moreText.style.display = "block";
readMoreBtn.textContent = "Read Less";
} else {
moreText.style.display = "none";
readMoreBtn.textContent = "Read More";
}
});
});
</script>
</body>
</html>