Files
.south-city-college/aboutpage.html

653 lines
29 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<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>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="./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">
<!-- bootstraps icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<!-- themify-icons -->
<link href="
https://cdn.jsdelivr.net/npm/@icon/themify-icons@1.0.1-alpha.3/themify-icons.min.css
" rel="stylesheet">
<!-- bootstraps -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<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>
</head>
<body>
<div class="side-bar">
<div class="offcanvas offcanvas-end offcanvas1" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel" style="width: 330px;top: 100px;">
<div class="side-menu-items">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link " href="./index.html" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>HOME</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link " href="./aboutpage.html" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<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="#">
Admission Process
</a>
</li>
<li>
<a href="#">
Scholarship
</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="./event-list.html"><span>Events</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./blog-list.html"><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 ">
<li>
<a href="./image.html">
Images
</a>
</li>
<li>
<a href="./videos.html">
Videos
</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="./contactpage.html"><span>CONTACT</span></a>
</li>
</ul>
</div>
</div>
</div>
<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="./index.html" 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="#">Admission process</a>
</li>
<li>
<a href="#">Scholarship</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link " href="./event-list.html" 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="./blog-list.html" 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="/image.html">Photos</a>
</li>
<li class="vdo">
<a href="/videos.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">
<a href="#">
<button class="btn apply-btn">
APPLY NOW
</button>
</a>
</div>
</div>
</nav>
</section>
<section class="section-top">
<div class="container">
<div class="col-lg-10 offset-lg-1 text-center">
<div class="section-top-title">
<h1>About</h1>
<ul>
<li><a href="/">Home</a></li>
<li class="ms-1"> / About</li>
</ul>
</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>
<!-- 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">
<div class="row g-4">
<!-- 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/image/man.png" class="img-fluid" alt="image">
</div>
</div>
<!-- Content Section -->
<div class="col-lg-6 col-sm-12 col-xs-12 animated-box2" id="" style="opacity: 1; transform: none; will-change: auto;">
<div class="ab_content">
<h2>We Are Providing The Online Course In Global World</h2>
<p>We offer a brand new approach to the most basic learning paradigms. Choose from a wide range of learning options and gain new skills! Our school is known.</p>
<p>We offer a brand new approach to the most basic learning paradigms. Choose from a wide range of learning options and gain new skills! Our school is known.</p>
<ul>
<li><i class="bi bi-check2"></i></span> Get access to <b>12,000+</b> of our top courses</li>
<li><i class="bi bi-check2"></i></span> Populars topiics to learn now in our online courses for students</li>
<li><i class="bi bi-check2"></i></span> Find the right instructor for you</li>
</ul>
<a class="btn_one" href="/course">View All Courses <i class="bi bi-arrow-up-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<section class="section-padding insfreecourse overflow-hidden">
<div class="container">
<div class="row" style="opacity: 1; transform: none; will-change: auto;">
<!-- Instructor Card -->
<div class="col-lg-6 col-sm-12 col-xs-12">
<div class="single_ins"
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 Tech Engineer</h1>
<p>Learn at your own pace, move between multiple courses.</p>
<a class="btn_one btn222" href="#">Apply now <i class="bi bi-arrow-up-right"></i></a>
</div>
</div>
</div>
<!-- Free Courses Card -->
<div class="col-lg-6 col-sm-12 col-xs-12">
<div class="single_ins"
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>Lets message us</h1>
<p>Learn at your own pace, move between multiple courses.</p>
<a class="btn_one btn222" href="./contact.html">Contact now <i class="bi bi-arrow-up-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="footer section-padding">
<div class="container">
<div class="row g-4">
<!-- 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>
</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>
</div>
<div class="foot_copy">
<div class="footer_copyright">
<p>© 2025. All Rights Reserved.</p>
</div>
</div>
<!-- Link to Bootstrap JS (optional) -->
<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
const speed = 200; // Adjust the speed of the animation
counters.forEach(counter => {
const target = +counter.getAttribute('data-target'); // Get the target value from data-target
let count = 0; // Initialize the count
const updateCount = () => {
const increment = target / speed; // Calculate increment step
if (count < target) {
count += increment; // Increment the count
counter.innerText = Math.ceil(count); // Update the counter text
setTimeout(updateCount, 10); // Recursive call for animation
} else {
counter.innerText = target+'+'; // Ensure it ends exactly at the target
}
};
updateCount();
});
});
// swiper for testimonial
//swiper for testimonial and global company logo
function initializeSwiper(swiperId, autoplayDelay, slidesPerView, breakpointsConfig = {}) {
return new Swiper(swiperId, {
slidesPerView: slidesPerView,
spaceBetween: 40,
loop: true,
autoplay: {
delay: autoplayDelay,
disableOnInteraction: false,
},
pagination: {
el: `${swiperId} .swiper-pagination`,
clickable: true,
},
breakpoints: breakpointsConfig,
});
}
// LEFT testimonial
initializeSwiper('#testimonial-slider-left', 7000, 1);
// RIGHT testimonial
initializeSwiper('#testimonial-slider-right', 7000, 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>