Tech-Bizz-Devs · akshitaparshar · Feb 25, 2024
diff --git a/Pagination/banner1.jpeg b/Pagination/banner1.jpeg
diff --git a/Pagination/banner2.jpeg b/Pagination/banner2.jpeg
diff --git a/Pagination/banner3.jpeg b/Pagination/banner3.jpeg
diff --git a/Pagination/banner4.jpeg b/Pagination/banner4.jpeg
diff --git a/Pagination/banner5.jpeg b/Pagination/banner5.jpeg
diff --git a/Pagination/banner6.jpeg b/Pagination/banner6.jpeg
diff --git a/Pagination/banner7.jpeg b/Pagination/banner7.jpeg
diff --git a/Pagination/index.html b/Pagination/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewpuort" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+
+    <link
+        href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap"
+        rel="stylesheet">
+
+    <!-- Swiper CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
+
+    <link rel="stylesheet" href="./style.css">
+
+    <title>Pagination</title>
+</head>
+
+<body>
+    <!-- Logo Name & Header -->
+    <header>
+        <!-- Navbar -->
+        <nav>
+            <div class="navbar">
+                <!-- Logo of img and header name -->
+                <div class="logo">
+                    <a href="./index.html">
+                        <img src="./tech-bizz-logo.png" alt="Toursim" height="10%" width="10%">
+                        Tourism</a>
+                </div>
+                <!-- Four pages of website -->
+                <ul class="links">
+                    <li><a href="./index.html">Home</a></li>
+                    <li><a href="./about.html">About US</a></li>
+                    <li><a href="./media-coverage.html">Media Coverage</a></li>
+                    <li><a href="./contact.html">Contact US</a></li>
+                </ul>
+                <!-- Action btn or responsive bar -->
+                <div class="toggle_btn">
+                    <i class="fa-solid fa-bars"></i>
+                </div>
+            </div>
+
+            <!-- Dropdown Menu of Responsive navbar -->
+            <div class="dropdown_menu">
+                <li><a href="./index.html">Home</a></li>
+                <li><a href="./about.html">About US</a></li>
+                <li><a href="./media-coverage.html">Media Coverage</a></li>
+                <li><a href="./contact.html">Contact US</a></li>
+            </div>
+        </nav>
+    </header>
+    <main>
+        <!-- Image Casarol -->
+        <section class="image-pagination">
+            <h1>Tech Bizz Girls Club</h1>
+            <div class="container">
+                <div class="swiper mySwiper">
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                            <div class="img-box">
+                                <img src="./banner1.jpeg" width="500px" height="700px" alt="">
+                            </div>
+                        </div>
+                        <div class="swiper-slide">
+                            <div class="img-box">
+                                <img src="./banner2.jpeg" idth="500px" height="700px" alt="">
+                            </div>
+                        </div>
+                        <div class="swiper-slide">
+                            <div class="img-box">
+                                <img src="./banner3.jpeg" idth="500px" height="700px" alt="">
+                            </div>
+                        </div>
+                        <div class="swiper-slide">
+                            <div class="img-box">
+                                <img src="./banner4.jpeg" idth="500px" height="700px" alt="">
+                            </div>
+                        </div>
+                        <div class="swiper-slide">
+                            <div class="img-box">
+                                <img src="./banner5.jpeg" idth="500px" height="700px" alt="">
+                            </div>
+                        </div>
+                        <div class="swiper-slide">
+                            <div class="img-box">
+                                <img src="./banner6.jpeg" idth="500px" height="700px" alt="">
+                            </div>
+                        </div>
+                        <div class="swiper-slide">
+                            <div class="img-box">
+                                <img src="./banner7.jpeg" idth="500px" height="700px" alt="">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="swiper-pagination"></div>
+                    <div class="swiper-button-next"></div>
+                    <div class="swiper-button-prev"></div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Swiper JS -->
+        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+        <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/Pagination/script.js b/Pagination/script.js
@@ -0,0 +1,49 @@
+const toggleBtn = document.querySelector('.toggle_btn')
+const toggleBtnIcon = document.querySelector('.toggle_btn i')
+const dropDownMenu = document.querySelector('.dropdown_menu')
+
+toggleBtn.onclick = function () {
+    dropDownMenu.classList.toggle('open')
+    const isOpen = dropDownMenu.classList.contains('open')
+
+    toggleBtnIcon.classList = isOpen
+        ? 'fa-solid fa-xmark'
+        : 'fa-solid fa-bars'
+}
+
+// imgae casarol
+var swiper = new Swiper(".mySwiper", {
+    slidesPerView: 1,
+    spaceBetween: 30,
+    loop: true,
+    speed: 1000,
+    autoplay: {
+        delay: 3000,
+    },
+    pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+    },
+    navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+    },
+    breakpoints: {
+        320: {
+            slidesPerView: 1,
+            spaceBetween: 20,
+        },
+        480: {
+            slidesPerView: 2,
+            spaceBetween: 40,
+        },
+        760: {
+            slidesPerView: 3,
+            spaceBetween: 50,
+        },
+        1200: {
+            slidesPerView: 4,
+            spaceBetween: 60,
+        },
+    },
+});
diff --git a/Pagination/style.css b/Pagination/style.css
@@ -0,0 +1,147 @@
+* {
+    padding: 0;
+    margin: 0;
+    font-family: 'Poppins', sans-serif;
+}
+
+body {
+    height: 100vh;
+    background: beige;
+}
+
+li {
+    list-style: none;
+}
+
+.logo a,
+.links a,
+.dropdown_menu a {
+    text-decoration: none;
+    color: #0e0e0f;
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+/* HEADER */
+header {
+    position: relative;
+    padding: 0 2rem;
+}
+
+.navbar {
+    width: 100%;
+    height: 100px;
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+}
+
+.navbar .logo a {
+    font-size: 1.5rem;
+    font-weight: bolder;
+}
+
+.navbar .links {
+    white-space: nowrap;
+    display: flex;
+    margin-left: 5%;
+    gap: 6rem;
+}
+
+.navbar .toggle_btn {
+    color: #000;
+    font-size: 1rem;
+    cursor: pointer;
+    display: none;
+}
+
+/* DropDown Menu */
+.dropdown_menu {
+    -webkit-overflow-scrolling: touch;
+    position: absolute;
+    top: 30px;
+    z-index: 10;
+    display: block;
+    right: 2rem;
+    top: 6.25rem;
+    height: 0;
+    background-color: rgba(240, 240, 240, 0.6);
+    border-radius: 10px;
+    overflow: hidden;
+    transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 0.02);
+}
+
+.dropdown_menu.open {
+    height: 240px;
+}
+
+.dropdown_menu li {
+    padding: 0.7rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.dropdown_menu {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+/* Responsive Design */
+
+@media (max-width: 1110px) {
+
+    .navbar .links {
+        display: none;
+    }
+
+    .navbar .toggle_btn {
+        display: block;
+        margin-left: 69%;
+    }
+
+    .dropdown_menu {
+        display: block;
+    }
+}
+
+@media (max-width: 576px) {
+    .dropdown_menu {
+        left: 2rem;
+        width: unset;
+        margin: 1rem;
+    }
+}
+
+/* Image Carousel */
+
+.image-pagination {
+    padding: 20px 40px 40px 50px;
+    margin: auto;
+}
+
+h1 {
+    padding-bottom: 10px;
+}
+
+.img-box img {
+      max-width: 100%;
+}
+
+.slider-container .cotnainer {
+    padding: 0 15px;
+    max-width: 1230px;
+    margin: 0 auto;
+}
+
+.card-slider {
+    padding: 50px;
+}
+
+@media only screen and (min-device-width:300px) and (max-device-width: 768px) {
+    .swiper-navBtn {
+        display: none;
+    }
+}
diff --git a/Pagination/t1 b/Pagination/t1
@@ -0,0 +1 @@
+
diff --git a/Pagination/tech-bizz-logo.png b/Pagination/tech-bizz-logo.png
diff --git a/README copy.md b/README copy.md
@@ -0,0 +1,16 @@
+# OH24-WebEnhancing List Views with Pagination in a Web Application 
+OpenHack 2024 Web Projects
+#014 [Link](https://riyaranka.github.io/OH24-Web/)
+
+# Website Development for Team Promotion
+1. Designed and developed an engaging website to promote Tech Bizz Girls Coding Club and incorporating creative elements, animations, and responsive design principles.
+2. Used Animation on Scroll Library for animations.
+3. Boxicon and Swiper JS are used.
+4. The objective is to create an interactive online platform that effectively showcases your team's strengths, achievements, and offerings while providing an enjoyable browsing experience for visitors.
+5. It is a Responsive and interactive website with on scroll animations to interacte with users. 
+
+# Enhancing List Views with Pagination in a Web Application #7
+1. Implemented Pagination functionality using Swiper JS.
+2. It enhances the list views in a web application, enabling users to efficiently navigate through large datasets.
+3. Providing intuitive controls for pagination, users can seamlessly access and interact with extensive data sets, improving usability and user experience.
+4. Implement logic for fetching paginated data from the database.
diff --git a/about img.png b/about img.png
diff --git a/about-img1.jpeg b/about-img1.jpeg