diff --git a/Pagination/banner1.jpeg b/Pagination/banner1.jpeg new file mode 100644 index 0000000..f0c8dfb Binary files /dev/null and b/Pagination/banner1.jpeg differ diff --git a/Pagination/banner2.jpeg b/Pagination/banner2.jpeg new file mode 100644 index 0000000..9f3e75d Binary files /dev/null and b/Pagination/banner2.jpeg differ diff --git a/Pagination/banner3.jpeg b/Pagination/banner3.jpeg new file mode 100644 index 0000000..c747007 Binary files /dev/null and b/Pagination/banner3.jpeg differ diff --git a/Pagination/banner4.jpeg b/Pagination/banner4.jpeg new file mode 100644 index 0000000..16af4ac Binary files /dev/null and b/Pagination/banner4.jpeg differ diff --git a/Pagination/banner5.jpeg b/Pagination/banner5.jpeg new file mode 100644 index 0000000..baf6fcc Binary files /dev/null and b/Pagination/banner5.jpeg differ diff --git a/Pagination/banner6.jpeg b/Pagination/banner6.jpeg new file mode 100644 index 0000000..6a86943 Binary files /dev/null and b/Pagination/banner6.jpeg differ diff --git a/Pagination/banner7.jpeg b/Pagination/banner7.jpeg new file mode 100644 index 0000000..296c508 Binary files /dev/null and b/Pagination/banner7.jpeg differ diff --git a/Pagination/index.html b/Pagination/index.html new file mode 100644 index 0000000..79b5b2c --- /dev/null +++ b/Pagination/index.html @@ -0,0 +1,114 @@ + + + + + + + + + + + + + + + + + + + + Pagination + + + + +
+ + +
+
+ +
+

Tech Bizz Girls Club

+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/Pagination/script.js b/Pagination/script.js new file mode 100644 index 0000000..b78cbec --- /dev/null +++ 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, + }, + }, +}); \ No newline at end of file diff --git a/Pagination/style.css b/Pagination/style.css new file mode 100644 index 0000000..c54c96a --- /dev/null +++ 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 new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/Pagination/t1 @@ -0,0 +1 @@ + diff --git a/Pagination/tech-bizz-logo.png b/Pagination/tech-bizz-logo.png new file mode 100644 index 0000000..3cb766a Binary files /dev/null and b/Pagination/tech-bizz-logo.png differ diff --git a/README copy.md b/README copy.md new file mode 100644 index 0000000..bfe675e --- /dev/null +++ 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 new file mode 100644 index 0000000..cf0bbf3 Binary files /dev/null and b/about img.png differ diff --git a/about-img1.jpeg b/about-img1.jpeg new file mode 100644 index 0000000..a8696ff Binary files /dev/null and b/about-img1.jpeg differ diff --git a/about.html b/about.html new file mode 100644 index 0000000..9a00836 --- /dev/null +++ b/about.html @@ -0,0 +1,194 @@ + + + + + + + + + + + + + + + + + + + + About JSSK & Team + + + + +
+ + + + + + + +
+

Girls Coding Club, we are committed to not only fostering a passion for coding but also preparing our members for successful futures in college and careers. Our College and Career Programs are meticulously designed to provide girls with the skills, guidance, and confidence needed to excel in the ever-evolving tech landscape. Join us as we bridge the gap between ambition and achievement, ensuring that every girl in our community is well-equipped to thrive in college and pursue fulfilling careers in technology. +

+
+ +
+
+ +
+

Our Impact

+ +
+
+
+

0

+

Volunteers

+
+
+

0

+

Campaigns

+
+
+

0

+

Achievements

+
+
+

+

+

Established Years

+
+
+
+
+ + +
+

Our Vision

+
Empowering Girls Through Code Together
+ +
+
+

Empowerment

+

Empowerment is the heartbeat of our mission, fostering an environment where every girl discovers her unique voice in the digital realm. We believe that coding is a powerful tool for self-expression and problem-solving, empowering our members to break barriers and redefine possibilities.

+
+
+

Creativity

+

Creativity is the guiding star that illuminates our coding journey. We inspire our girls to unleash their imaginative potential, transforming lines of code into art, innovation, and tangible solutions. Through the lens of creativity, coding becomes a canvas for endless possibilities, where every keystroke is a stroke of genius.

+
+
+

Community

+

Our shared experiences and collective knowledge amplify the impact of each girl. Fostering a community that thrives on collaboration, mutual support, and the shared joy of conquering the coding frontier. Together, we envision a future where empowered, creative, and united girls lead the way in the ever-evolving landscape of technology.

+
+
+
+ +
+

OUR PROGRAMS

+
+ +

🌞 Girls Summer Code Campaign: Igniting Brilliance in Tech! 🚀 +
+ Welcome to a summer of innovation, learning, and coding brilliance with our Girls Summer + Code Campaign! This program is tailored to inspire and equip girls with the skills and confidence + to shine in the world of technology. Throughout the campaign, participants engage in dynamic + coding sessions, hands-on projects, and collaborative challenges that unleash their creativity + and problem-solving abilities.

+
+
+ + + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/about.js b/about.js new file mode 100644 index 0000000..08d9dad --- /dev/null +++ b/about.js @@ -0,0 +1,17 @@ +let valueDisplays = document.querySelectorAll(".count"); +let interval = 5000; + +valueDisplays.forEach((valueDisplay) => { + let startValue = 0; + let endValue = parseInt(valueDisplay.getAttribute("data-val")); + let duration = Math.floor(interval / endValue); + let counter = setInterval(function() { + startValue += 1; + valueDisplay.textContent = startValue; + if (startValue == endValue) { + clearInterval(counter); + } + }, duration); +}) + +AOS.init(); \ No newline at end of file diff --git a/awards-imgs/award1.jpeg b/awards-imgs/award1.jpeg new file mode 100644 index 0000000..c6c9470 Binary files /dev/null and b/awards-imgs/award1.jpeg differ diff --git a/awards-imgs/award2.jpeg b/awards-imgs/award2.jpeg new file mode 100644 index 0000000..72d9038 Binary files /dev/null and b/awards-imgs/award2.jpeg differ diff --git a/awards-imgs/award3.jpeg b/awards-imgs/award3.jpeg new file mode 100644 index 0000000..8ec1865 Binary files /dev/null and b/awards-imgs/award3.jpeg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a1060d7 --- /dev/null +++ b/index.html @@ -0,0 +1,303 @@ + + + + + + + + + + + + + + + + + + + + + + Tech Bizz Promotion + + + + +
+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + + + +
+
+ + +
+

Tech Bizz Girls Club is to join a sisterhood of supportive peers and role models using computer science to change the world. Our mission is to break down stereotypes and empower girls to become confident coders, problem solvers, and creators. + Girls Coding Club is a space where aspiring young women come together to learn, share, and innovate in the realm of technology. We offer fun activities through a flexible curriculum that adapts to your unique needs.< +

+
+ + +
+

Our Vision

+
Empowering Girls Through Code Together
+ +
+
+

Empowerment

+

Empowerment is the heartbeat of our mission, fostering an environment where every girl discovers her unique voice in the digital realm. We believe that coding is a powerful tool for self-expression and problem-solving, empowering our members to break barriers and redefine possibilities.

+
+
+

Creativity

+

Creativity is the guiding star that illuminates our coding journey. We inspire our girls to unleash their imaginative potential, transforming lines of code into art, innovation, and tangible solutions. Through the lens of creativity, coding becomes a canvas for endless possibilities, where every keystroke is a stroke of genius.

+
+
+

Community

+

Our shared experiences and collective knowledge amplify the impact of each girl. Fostering a community that thrives on collaboration, mutual support, and the shared joy of conquering the coding frontier. Together, we envision a future where empowered, creative, and united girls lead the way in the ever-evolving landscape of technology.

+
+
+
+ + +
+

Our Programs

+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+ + + + + +
+

Media Coverage

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + +
+

Achievements & Credentials

+
+
+
+
+
+ +
+
+

Awarded by AGCII impactful journey in South Africa learners in 2022

+
+
+
+
+ +
+
+

Awarded by AGCII impactful journey in South Africa with First cohort girl learners in 2023

+
+
+
+
+ +
+
+

Coding Girls award for Best Social Project at Splash Awards in 2022

+
+
+ +
+
+
+
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/logo-images/tech-bizz-logo.png b/logo-images/tech-bizz-logo.png new file mode 100644 index 0000000..3cb766a Binary files /dev/null and b/logo-images/tech-bizz-logo.png differ diff --git a/media-imgs/img1.jpeg b/media-imgs/img1.jpeg new file mode 100644 index 0000000..4139ce2 Binary files /dev/null and b/media-imgs/img1.jpeg differ diff --git a/media-imgs/img2.jpeg b/media-imgs/img2.jpeg new file mode 100644 index 0000000..5ec575c Binary files /dev/null and b/media-imgs/img2.jpeg differ diff --git a/media-imgs/img3.jpeg b/media-imgs/img3.jpeg new file mode 100644 index 0000000..383b505 Binary files /dev/null and b/media-imgs/img3.jpeg differ diff --git a/media-imgs/img4.webp b/media-imgs/img4.webp new file mode 100644 index 0000000..baf5718 Binary files /dev/null and b/media-imgs/img4.webp differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..4bf4c00 --- /dev/null +++ b/script.js @@ -0,0 +1,78 @@ +// AOS Initialization +AOS.init(); + +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' +} + +// slider +var slideIndex = 0; +showSlides(); + +function showSlides() { + var i; + var slides = document.getElementsByClassName("mySlides"); + var dots = document.getElementsByClassName("dot"); + for (i = 0; i < slides.length; i++) { + slides[i].style.display = "none"; + } + slideIndex++; + if (slideIndex > slides.length) {slideIndex = 1} + for (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 +} + +// video casarol +var swiper = new Swiper(".card_slider", { + spaceBetween: 30, + loop: true, + speed: 1000, + autoplay: { + delay: 5000, + }, + navigation: { + nextEl: ".swiper-button-next", + prevEl: ".swiper-button-prev", + }, + breakpoints: { + 320: { + slidesPerView: 1, + }, + 480: { + slidesPerView: 2, + }, + 760: { + slidesPerView: 3, + }, + 1200: { + slidesPerView: 4, + } + } +}); + +// Achivements Slider +var swiper = new Swiper(".achievements-slide-container", { + slidesPerView: 2, + spaceBetween: 40, + loop: true, + centerSlide: "true", + grabCursor: "true", + fade: "true", + speed: 1000, + autoplay: { + delay: 2000, + } +}); diff --git a/slider-images/banner-1.jpeg b/slider-images/banner-1.jpeg new file mode 100644 index 0000000..b1b15fa Binary files /dev/null and b/slider-images/banner-1.jpeg differ diff --git a/slider-images/banner-2.avif b/slider-images/banner-2.avif new file mode 100644 index 0000000..39c75b0 Binary files /dev/null and b/slider-images/banner-2.avif differ diff --git a/slider-images/banner-3.png b/slider-images/banner-3.png new file mode 100644 index 0000000..6dbdc79 Binary files /dev/null and b/slider-images/banner-3.png differ diff --git a/slider-images/banner-4.png b/slider-images/banner-4.png new file mode 100644 index 0000000..227c2d9 Binary files /dev/null and b/slider-images/banner-4.png differ diff --git a/slider-images/banner-5.jpeg b/slider-images/banner-5.jpeg new file mode 100644 index 0000000..8b5c4a6 Binary files /dev/null and b/slider-images/banner-5.jpeg differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..226d418 --- /dev/null +++ b/style.css @@ -0,0 +1,670 @@ +* { + padding: 0; + margin: 0; + font-family: 'Poppins', sans-serif; +} + +/* removes the list dot from the website */ +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; + background-color: #A8E4A0; + margin-bottom: 50px; +} + +.navbar { + width: 100%; + height: 100px; + max-width: 1200px; + margin: 0 auto; + display: flex; + align-items: center; +} + +.navbar .logo a { + font-size: 1.5rem; + position: relative; + /* font-weight: bolder; */ +} + +.navbar .logo { + display: flex; + justify-content: space-between; +} + +/* .navbar .team-name { + position: absolute; +} */ + +.navbar .links { + white-space: nowrap; + display: flex; + margin-left: 25%; + 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; + } +} + +/* slider */ +.slideshow-container { + max-width: 90%; + position: relative; + margin: auto; +} + + +/* For images */ +.image-container { + width: 100%; + max-width: 100%; + height: 0; + padding-bottom: 40%; + position: relative; +} + +.image-container img { + border-radius: 25px; + position: absolute; + width: 100%; + height: 100%; + object-fit: fill; +} + +/* The dots/bullets/indicators */ +.dot { + height: 15px; + width: 15px; + margin: 0 2px; + /* background-color: #bbb; */ + border-radius: 50%; + display: inline-block; + transition: 0.6s ease; + position: relative; +} + +@media only screen and (min-width: 700px) and (max-width:1550px) { + .dot { + margin-top: 10px; + } +} + +/* Button color */ +/* .active { + background-color: #bf1616; +} */ + +/* Fading animation */ +.fade { + -webkit-animation-name: fade; + -webkit-animation-duration: 1.5s; + animation-name: fade; + animation-duration: 1.5s; +} + +@-webkit-keyframes fade { + from { + opacity: .4 + } + + to { + opacity: 1 + } +} + +@keyframes fade { + from { + opacity: .4 + } + + to { + opacity: 1 + } +} + +/* On smaller screens, decrease text size */ +@media only screen and (max-width: 300px) { + .text { + font-size: 11px + } +} + +/* About JSSK or Formation of JSSK*/ +.formation { + text-align: center; + font-weight: 500; + width: 75%; + margin: 2px 5% 2% 12%; + line-height: 2.5; + padding-top: 10px; + line-height: 2rem; +} + +/* Decreasing the amount of text displaying in phone screen */ +@media only screen and (min-device-width:250px) and (max-device-width: 500px) { + .hide-on-phone-screen { + display: none; + } +} + +/* Vision box */ +.vision { + padding: 50px 50px 0px 50px; + margin: auto; + text-align: center; +} + +h1 { + font-size: 36px; + font-weight: 600; +} + +.vision-text { + color: #dd5858; + margin-bottom: 20px; + font-size: clamp(0.2rem, 1vw + 0.2rem, 7rem); +} + +.vision-text p { + color: #777; + font-size: 14px; + font-weight: 300; + line-height: 22px; + padding: 10px; +} + +.row { + margin-top: 4%; + display: flex; + justify-content: space-between; +} + +.vision-column { + flex-basis: 31%; + background: #fff3f3; + border-radius: 10px; + margin-bottom: 5%; + padding: 20px 12px; + box-sizing: border-box; + transition: 0.5s; +} + +h3 { + text-align: center; + font-weight: 600; + margin: 10px 0; +} + +.vision-column p { + line-height: 2em; + font-weight: medium; + word-spacing: 2px; + padding: 0px 30px 0px 30px; +} + +@media only screen and (min-device-width: 300px) and (max-device-width:650px) { + .vision-column p { + line-height: 3em; + word-spacing: 4px; + font-weight: 420; + padding-top: 7px; + } +} + +.vision-column:hover { + box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2); +} + +/* About page vision column */ + +.about-us-no-hover { + box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2); +} + +@media only screen and (min-device-width: 300px) and (max-device-width:650px) { + .row { + flex-direction: column; + } +} + +/* Video Carousel */ + +.contribution_video_gallery { + padding: 20px 40px 40px 50px; + margin: auto; + text-align: center; +} + +h1 { + padding-bottom: 10px; +} + +.container { + padding: 0 15px; + margin: 0 auto; +} + +.video-box iframe { + border-radius: 25px; + max-width: 100%; +} + +.swiper-navBtn { + color: #000; + height: 30px; + width: 30px; + background: #fff; + border-radius: 50%; +} + +.swiper-navBtn::before, +.swiper-navBtn::after { + font-size: 20px; +} + +@media only screen and (min-device-width:300px) and (max-device-width: 768px) { + .swiper-navBtn { + display: none; + } +} + +/* Sponsor / Volunteer Card */ + +.sponsor-volunteer { + padding: 0px 50px 0px 50px; + margin: auto; + text-align: center; +} + +.spons-vol { + margin-top: 2%; + display: flex; + justify-content: space-between; + padding: 0% 10%; +} + +.icons { + font-size: 6em; + color: rgb(49, 111, 219); +} + +.card h2 { + padding-bottom: 10px; + color: rgb(47, 42, 42); +} + +.card { + flex-basis: 40%; + /* background: #f1f1f1; */ + /* background: #ffd1ce; */ + background: rgba(255, 195, 175, 0.905); + border-radius: 20px; + margin-bottom: 5%; + padding: 20px 12px; + box-sizing: border-box; + min-height: 220px; + box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2); +} + +@media only screen and (min-device-width: 300px) and (max-device-width:650px) { + .spons-vol { + flex-direction: column; + } + + .spons-vol-button button { + padding: 15px; + font-size: 2rem; + border-radius: 8px; + } +} + +button { + border: none; + border-radius: 5px; + padding: 6px 10px; + margin: 12px; + font-weight: 800; + color: #fff; + background: #4070f4; +} + +a { + color: #fff; + text-decoration: none; +} + +/* Media Coverage */ + +.media-coverage { + padding: 30px 20px 40px 20px; + margin: auto; + text-align: center; +} + +.media-container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + background: #c5c9ff; + border-radius: 10px; + padding: 20px; +} + +.media-images { + flex-basis: 5%; + box-sizing: border-box; + margin-bottom: 6px; +} + +.media-images img { + border-radius: 10px; + width: 450px; + height: 500px; +} + +@media only screen and (min-device-width: 300px) and (max-device-width:650px) { + .media-images img { + flex-direction: column; + width: 440px; + } +} + +/* Achievements & Credentials */ + +.achievements_credentials { + padding: 0px 40px 40px 50px; +} + +.achievements_credentials h1 { + text-align: center; +} + +.achievements-container { + display: flex; + align-items: center; + justify-content: center; +} + +.achievements-slide-container { + width: 50rem; + margin: 10px; + overflow: hidden; +} + +.achievements-card { + border-radius: 8px; +} + +.achievements-card .image-box { + height: 500px; +} + +.achievements-card .image-box img { + width: 100%; + height: 100%; + border-radius: 8px 8px 0px 0px; + box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.5); +} + +.achievements-card .credentials-header { + display: flex; + align-items: center; + padding: 15px; + padding-bottom: 5%; + height: 100%; + justify-content: space-between; + background: rgba(143, 143, 143, 0.272); + border-radius: 0 0 12px 12px; +} + +.credentials-header p { + font-size: 20px; + font-weight: 450; + display: flex; + flex-direction: column; + align-items: center; + padding: 10px 14px; +} + +/* Footer */ +.footer { + position: relative; + width: 100%; + background: #3586ff; + min-height: 100px; + padding: 20px 0px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.footer .social-icon, +.footer .menu { + position: relative; + display: flex; + justify-content: center; + align-items: center; + margin: 10px 0; +} + +.footer .social-icon li a { + font-size: 2em; + color: #fff; + margin: 0 10px; + display: inline-block; + transition: 0.5s; +} + +.footer .social-icon li a:hover { + transform: translateY(-10px) +} + +.footer .menu li a { + font-size: 1.2em; + color: #fff; + margin: 0 10px; + display: inline-block; + text-decoration: none; +} + +.footer .footer-text-copyright { + color: #fff; + text-align: center; + margin-top: 15px; + margin-bottom: 10px; + font-size: 1.1em; +} + +/* About US Page */ + +.banner { + width: 100%; + height: 500px; + border-radius: 8px; + /* background-image: url(./about-us-images/top-banner-1.webp); */ + background-image: url(./about\ img.png); + -webkit-background-size: cover; + background-size: contain; + background-position: center center; + margin-bottom: 4%; +} + +@media only screen and (min-device-width: 300px) and (max-device-width:650px) { + .about-us-formation { + word-spacing: 3px; + line-height: 3.5em; + } +} + +/* About Page -> Data Work Counters */ + +.work-data-containers { + padding: 40px 50px 0px 50px; + margin: auto; + text-align: center; + background: #4193ff; +} + +.work-data-containers h1 { + text-align: center; +} + +.work-data-counters { + padding: 2em 2em 3em 2em; + color: #fff; +} + +.grid-num-data-counter { + max-width: 900px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 4em; +} + +.data-counter { + position: relative; +} + +.data-counter h2 { + font-size: 3em; + margin-bottom: 0.5em; +} + +@media only screen and (min-device-width: 300px) and (max-device-width:650px) { + .grid-num-data-counter { + grid-template-columns: 1fr 1fr; + } + + .data-counter:nth-child(2)::before { + display: none; + } +} + +/* About Page -> Team Member Section */ + +.team-section { + padding: 10px 50px 50px 50px; + margin-bottom: 100px; + position: relative; + height: 100%; + background: orange; + display: flex; + /* align-items: center; */ + /* justify-content: center; */ + flex-direction: column; +} + +.team-title h1 { + text-align: center; + padding-top: 20px; + font-size: 50px; + position: relative; +} + +.team-cards { + width: 100%; + max-width: 1350px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, auto)); + align-items: center; + gap: 2rem; + text-align: center; + margin-top: 4rem; +} + +.team-campains { + display: flex; + justify-content: space-between; + /* left: 1; */ +} +.team-campains p { + font-size: 20px; + margin: 50px; + padding: 25px; +} + +.team-campains p { + font-size: 20px; + margin: 50px; + padding: 25px; +}