diff --git a/.DS_Store b/.DS_Store index 91981e3e..86db35f4 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..bca51b35 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/ diff --git a/Changed_contact_us_in_index_html b/Changed_contact_us_in_index_html new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/Changed_contact_us_in_index_html @@ -0,0 +1 @@ + diff --git a/Faq.html b/Faq.html index 720ca396..5596e4a9 100644 --- a/Faq.html +++ b/Faq.html @@ -7,74 +7,84 @@ SkillWise FAQ - + - + - - + +
- SkillWise home Start Free Trial @@ -84,30 +94,27 @@
-
-
+ +
-

Frequently Asked Questions

-

- At SkillWise, we are dedicated to providing a seamless learning experience for all our users. - Whether you're curious about our course offerings, payment options, or certification details, you’ll - find the answers to your most common questions here. We aim to make your journey with us as smooth - and enjoyable as possible, empowering you to achieve your learning goals. + +

Welcome to SkillWise’s Learning Hub!

+ +

At SkillWise, we’re committed to delivering an exceptional learning experience tailored to your goals. Whether you’re exploring new courses, seeking flexible payment options, or curious about certifications, our FAQ section has you covered. We’ve crafted it to ensure you find clear, helpful answers that guide you every step of the way. Your success is our priority, and we’re here to make your journey enriching, seamless, and empowering—so you can focus on what truly matters: achieving your full potential. +

-
+
hero banner
-
@@ -128,7 +135,15 @@

Design, Modern Physics, Music Production, Finances, and more. All courses are designed by experts and provide practical knowledge for learners of all levels.

+ +
+

Was this helpful?

+ + +

+
+

2. What payment methods are accepted?

@@ -138,6 +153,13 @@

We accept a variety of payment methods including credit/debit cards, PayPal, and other online payment gateways. For more details, please refer to our Payment Method section.

+ +
+

Was this helpful?

+ + +

+
@@ -149,6 +171,13 @@

Yes! All courses provide a certificate of completion that can be downloaded and added to your resume or LinkedIn profile.

+ +
+

Was this helpful?

+ + +

+
@@ -161,42 +190,82 @@

browser or checking your internet connection. You can also reach out to our support team for further assistance.

+ +
+

Was this helpful?

+ + +

+
-

5. How long do I have access to a course after purchasing it?

+

5. Can I get a refund if I'm not satisfied with a course?

+

-
-

Once you purchase a course, you get lifetime access, allowing you to learn at your own pace.

+

Yes, we have a refund policy in place. Please refer to our Refund Policy section for more details + on how to request a refund.

+
+ +
+

Was this helpful?

+ + +

-

6. Do I need any prerequisites to enroll in a course?

+

6. How long do I have access to a course after purchasing it?

+

-
-

Most beginner courses do not require any prerequisites, but intermediate and advanced courses - might need some prior knowledge. You can find any required prerequisites mentioned in the course - description.

+

Once you purchase a course, you get lifetime access, allowing you to learn at your own pace.

+
+ +
+

Was this helpful?

+ + +

+
- - + - + + - \ No newline at end of file + diff --git a/LICENSE/MIT_License.txt b/LICENSE/MIT_License.txt new file mode 100644 index 00000000..50d4175e --- /dev/null +++ b/LICENSE/MIT_License.txt @@ -0,0 +1,7 @@ +MIT License + +''' +Permission is hereby granted, +free of charge, to any person +obtaining a copy of this software and associated documentation files (the "Software") +''' diff --git a/LoginPage.html b/LoginPage.html new file mode 100644 index 00000000..e7a5f006 --- /dev/null +++ b/LoginPage.html @@ -0,0 +1,118 @@ + + + Login Page + + + + + + + + diff --git a/README.md b/README.md index 4642e660..ce6a9e2d 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@
-*SkillWise is an innovative online platform designed to help learners of all ages acquire new skills and knowledge. With a wide range of engaging courses and expert instructors, SkillWise provides the tools you need to succeed in today’s competitive world.* +_SkillWise is an innovative online platform designed to help learners of all ages acquire new skills and knowledge. With a wide range of engaging courses and expert instructors, SkillWise provides the tools you need to succeed in today’s competitive world._
@@ -33,18 +33,26 @@
+## Features💡 +- 📚**Interactive and Engaging Courses:** Immerse yourself in dynamic learning experiences that combine theory with practical application. +- 👩‍🏫**Expert Instructors:** Learn from seasoned professionals who are passionate about their subjects and dedicated to your success. +- 🌐**Supportive Community:** Connect with like-minded learners, share insights, and build valuable relationships. +- 🎯**Personalized Learning Paths:** Tailor your learning journey to your specific goals and interests with our personalized learning paths. +- ⏳**Flexible Learning:** Study at your own pace and on your preferred devices. +- 💼**Real-World Projects:** Apply your knowledge through hands-on projects that simulate real-world scenarios. +## About Us❤️ +At **SkillWise** , we’re committed to transforming learning through immersive and tailored experiences. Catering to all ages and skill levels, our platform offers diverse interactive courses. We believe in personalized learning paths that adapt to your needs. With expert instructors, real-world projects, and a supportive community, we empower you to succeed.🥇 + +Our mission is to bridge the gap between theoretical knowledge and practical application, ensuring that our learners not only acquire new skills but also feel confident in applying them in real-life situations.💡 Welcome to **SkillWise**, an innovative online platform designed to help learners of all ages acquire new skills and knowledge. With a wide range of engaging courses and expert instructors, SkillWise provides the tools you need to succeed in today’s competitive world. -## Features +We are more than just an educational platform—we are a community of lifelong learners, dedicated to making education accessible, engaging, and impactful.🌍✨ -- **Interactive Courses**: Engaging and interactive courses across various fields. -- **Expert Instructors**: Learn from industry experts who offer valuable insights. -- **Supportive Community**: Join a community of learners who support each other. -- **Personalized Learning Paths**: Tailored learning paths to help you reach your goals. +With our expert instructors, real-world projects, and a supportive learning community, SkillWise empowers individuals to achieve personal and professional success. -## Prerequisites +## Prerequisites🛠️ Ensure you have the following installed: @@ -53,77 +61,91 @@ Ensure you have the following installed: - **npm**: Node package manager to install dependencies. It comes bundled with Node.js. - **Web Browser**: A modern web browser like Google Chrome or Firefox for testing the application. -## Getting Started - -## Getting Started +## Getting Started🚀 Follow these steps to start your learning journey with SkillWise: -1. **Sign Up**: Create your SkillWise account by visiting our [sign-up page](#). -2. **Browse Courses**: Discover a variety of courses across different fields. Use the search and filter options to find courses that match your interests. -3. **Enroll**: Join the courses that interest you by clicking the "Enroll" button on the course page. -4. **Learn and Grow**: Start learning at your own pace. Track your progress through the course dashboard and complete assignments to reinforce your knowledge. +1. **Sign Up**📝: Create your SkillWise account by visiting our [sign-up page](#). +2. **Browse Courses**📚: Discover a variety of courses across different fields. Use the search and filter options to find courses that match your interests. +3. **Enroll**🎓: Join the courses that interest you by clicking the "Enroll" button on the course page. +4. **Learn and Grow**📈: Start learning at your own pace. Track your progress through the course dashboard and complete assignments to reinforce your knowledge. -Enjoy your learning experience with SkillWise! +Enjoy your learning experience with SkillWise!😊 -## Contributing +## Contributing🌍 We welcome contributions from the community. To contribute, follow these detailed steps: 1. **Fork the Repository**: - - Navigate to the repository on GitHub. - - Click the [Fork](https://github.com/PriyaGhosal/SkillWise/fork) button at the top right of the page to create a copy of the repository under your GitHub account. - - For more information, see [GitHub's Forking Guide](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo). + + - Navigate to the repository on GitHub. + - Click the [Fork](https://github.com/PriyaGhosal/SkillWise/fork) button at the top right of the page to create a copy of the repository under your GitHub account. + - For more information, see [GitHub's Forking Guide](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo). 2. **Clone the Forked Repository**: - - Open your terminal or command prompt. - - Clone your forked repository to your local machine using the command: - ```bash - git clone https://github.com/your-username/SkillWise.git - ``` - - Replace `your-username` with your GitHub username. + + - Open your terminal or command prompt. + - Clone your forked repository to your local machine using the command: + ```bash + git clone https://github.com/your-username/SkillWise.git + ``` + - Replace `your-username` with your GitHub username. 3. **Create a New Branch**: - - Navigate to the repository directory: - ```bash - cd SkillWise - ``` - - Create a new branch for your feature or bug fix: - ```bash - git checkout -b feature-branch - ``` - - Replace `feature-branch` with a descriptive name for your branch. + + - Navigate to the repository directory: + ```bash + cd SkillWise + ``` + - Create a new branch for your feature or bug fix: + ```bash + git checkout -b feature-branch + ``` + - Replace `feature-branch` with a descriptive name for your branch. 4. **Make Your Changes**: - - Implement your changes or additions in the codebase. - - Ensure your changes follow the project's coding standards and guidelines. + + - Implement your changes or additions in the codebase. + - Ensure your changes follow the project's coding standards and guidelines. 5. **Commit Your Changes**: - - Stage your changes: - ```bash - git add . - ``` - - Commit your changes with a meaningful commit message: - ```bash - git commit -m 'Add some feature' - ``` - - Replace `'Add some feature'` with a descriptive message about your changes. + + - Stage your changes: + ```bash + git add . + ``` + - Commit your changes with a meaningful commit message: + ```bash + git commit -m 'Add some feature' + ``` + - Replace `'Add some feature'` with a descriptive message about your changes. 6. **Push to the Branch**: - - Push your changes to your forked repository on GitHub: - ```bash - git push origin feature-branch - ``` + + - Push your changes to your forked repository on GitHub: + ```bash + git push origin feature-branch + ``` 7. **Open a Pull Request**: - - Navigate to the original repository on GitHub. - - Click the "Compare & pull request" button next to your recently pushed branch. - - Provide a clear and detailed description of your changes in the pull request. - - Submit the pull request for review. + - Navigate to the original repository on GitHub. + - Click the "Compare & pull request" button next to your recently pushed branch. + - Provide a clear and detailed description of your changes in the pull request. + - Submit the pull request for review. + +8. **Follow the Guidelines**: + - Ensure that your PR aligns with our contribution standards. For more detailed instructions, refer to [GitHub's Guide on Creating a Pull Request](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request). -Thank you for your contributions to SkillWise! +Thank you for your contributions to SkillWise!Every contribution, no matter the size, plays a crucial role in enhancing our educational platform and empowering learners to achieve their goals! 📚✨ + +## Website Preview🖼 +
+ + + +
# Contributors @@ -138,6 +160,13 @@ Thank you for your contributions to SkillWise! Priya Ghosal + + + yashksaini-coder +
+ Yash Kumar Saini + + yeshwanth-ds @@ -153,10 +182,40 @@ Thank you for your contributions to SkillWise! - - yashksaini-coder + + RAVICHANDRALS507
- Yash Kumar Saini + RAVICHANDRA L S + + + + + rahul-chakradhari +
+ Rahul Chakradhari + + + + + + + Abhishek-IITP +
+ Abhishek Kumar Mohanty + + + + + Mohd-FaiZ-Jr +
+ FaiZ + + + + + sainKunal +
+ Kunal Kumar @@ -172,15 +231,66 @@ Thank you for your contributions to SkillWise!
kavya-r30 + + + + Sankar-1110 +
+ NAKKA SAI SANKAR + + + + kanduru-abhiram +
+ K Abhiram + + + + + SunkaraboinaPraveenKumar +
+ SunkaraboinaPraveenKumar + + + + + satyamkoshta340 +
+ Satyam Koshta + + + + + ankit071105 +
+ Ankit Kumar + + + + + Durgaprasad-Developer +
+ Durgaprasad-Developer + + 1nsh
Vansh Chitransh + + + + + + shivamv02 +
+ shivamv02 + @@ -190,24 +300,24 @@ Thank you for your contributions to SkillWise! - - ankit071105 + + Sayantan1024
- Ankit Kumar + Sayantan Saha - - kanduru-abhiram + + shobhit15082003
- K Abhiram + shobhit15082003 - - SunkaraboinaPraveenKumar + + shivamnayak201019
- SunkaraboinaPraveenKumar + shivamnayak201019 @@ -219,6 +329,20 @@ Thank you for your contributions to SkillWise! + + + Shobhit1729Aryan +
+ Shobhit Aryan + + + + + PrajaktaPatil05 +
+ Prajakta Patil + + Nikhileshmauje @@ -227,19 +351,28 @@ Thank you for your contributions to SkillWise! - - megh-bari + + Gurpreet0022
- Megh Bari + Gurpreet Kaur - - Sankar-1110 + + Adil-Khan-N
- NAKKA SAI SANKAR + Adil-Khan-N + + + megh-bari +
+ Megh Bari + + + + karraharichandana @@ -248,10 +381,10 @@ Thank you for your contributions to SkillWise! - - Sayantan1024 + + rudrakadel
- Sayantan Saha + Rudra Kadel @@ -261,29 +394,29 @@ Thank you for your contributions to SkillWise! Sreya Sudheeran - - - - shobhit15082003 + + akash70629
- shobhit15082003 + Akash Das - - shivamnayak201019 + + TeamSelenium
- shivamnayak201019 + TeamSelenium - - TeamSelenium + + invincyx
- TeamSelenium + Tatenda + + Mritunjaii @@ -291,6 +424,43 @@ Thank you for your contributions to SkillWise! Mritunjai + + + BrahmajitMohapatra +
+ Brahmajit Mohapatra + + + + + abhipariharr +
+ Abhishek parihar + + + + + 0-SiddharthJoshi-0 +
+ Siddharth Joshi + + + + + realvishalrana +
+ Vishal Rana + + + + + VyankteshKoli +
+ Vyanktesh + + + + Yaser-2004 @@ -305,8 +475,20 @@ Thank you for your contributions to SkillWise! anshumangahlot - - + + + chawdamrunal +
+ chawda mrunal + + + + + doctor-rutvik14 +
+ Rutvik Doctor + + jaideepjaison @@ -321,6 +503,8 @@ Thank you for your contributions to SkillWise! Sangneel Deb + + mitgajera @@ -328,6 +512,13 @@ Thank you for your contributions to SkillWise! Mit Gajera + + + ndrisanseep3 +
+ ndrisanseep3 + + nitesh2920 @@ -335,6 +526,13 @@ Thank you for your contributions to SkillWise! Nitesh Tiwari + + + purnima2904 +
+ Purnima Gupta + + rahulbamnuya @@ -343,10 +541,10 @@ Thank you for your contributions to SkillWise! - - sainKunal + + sambhavbohra
- Kunal Kumar + sambhavbohra @@ -365,6 +563,13 @@ Thank you for your contributions to SkillWise! Swami Malode + + + swstkswstk +
+ Swastik + + tejasbenibagde @@ -372,6 +577,13 @@ Thank you for your contributions to SkillWise! Tejas Benibagde + + + tusharmishra069 +
+ Tushar Mishra + + umakant3525 @@ -379,41 +591,78 @@ Thank you for your contributions to SkillWise! Umakant Shinde + + - - realvishalrana + + yalsik86
- Vishal Rana + yalsik86 - - Shivaraj2003 + + Aakansha-Chavan
- Shivaraj Shetty + Aakansha-Chavan + + + + + Anan014d +
+ Anan014d + + + + + SinghaAnirban005 +
+ Anirban Singha + + + + + AnshDwivedi03 +
+ Ansh Dwivedi + + + + + Arisha033 +
+ Arisha - - RAGHAVS1304 + + Deepak0yadav
- Raghav + Deepak yadav - - rajputpritesh1 + + iAmDiksha
- Pritesh Rajput + Diksha Jain - - MohammedDayan03 + + FSBM
- MohammedDayan03 + SHyAm + + + + + Gauravtb2253 +
+ Gaurav Bomble @@ -424,57 +673,104 @@ Thank you for your contributions to SkillWise! - - Gauravtb2253 + + KanwalpreetSingh1823
- Gaurav Bomble + Kanwalpreet Singh + + - - iAmDiksha + + github4maninder
- Diksha Jain + Maninder Sidhu + + + + + sadique-2004 +
+ Md Sadique + + + + + MohammedDayan03 +
+ MohammedDayan03 + + + + + PragyaTripathi990 +
+ PragyaTripathi990 + + + + + rajputpritesh1 +
+ Pritesh Rajput + + + + + priyanshufox +
+ Priyanshu Rathore - - Deepak0yadav + + RAGHAVS1304
- Deepak yadav + Raghav - - AnshDwivedi03 + + Rishika367
- Ansh Dwivedi + Rishika Ghosh - - SinghaAnirban005 + + Shivaraj2003
- Anirban Singha + Shivaraj Shetty - - abhipariharr + + soumya1810
- Abhishek parihar + Soumya Singh - - Aakansha-Chavan + + stutxi
- Aakansha-Chavan + Stuti + +## Get in Touch with Us 💬 + +Do you have questions, ideas, or simply want to get involved in our mission? We'd love to hear from you! + +🌐 **Visit our website:** [SkillWise](https://skillwise-delta.vercel.app/#) +📧 **Contact us:** Reach out directly through our website for more information. +📱 **Follow us on social media** for the latest updates, campaigns, and conservation efforts. + +*Join a community of lifelong learners dedicated to accessible and engaging education. With flexible options and hands-on projects, SkillWise equips you to thrive in today’s dynamic world! 🌍✨🌱🌍* diff --git a/SearchMain.py b/SearchMain.py new file mode 100644 index 00000000..7ae1dd78 --- /dev/null +++ b/SearchMain.py @@ -0,0 +1,69 @@ +class Node: + + def __init__(self, data): + self.data = data + self.next = None + self.prev = None + +def newNode(x): + + temp = Node(0) + temp.data = x + temp.next = None + return temp + +def middle(start, last): + + if (start == None): + return None + + slow = start + fast = start . next + + while (fast != last): + + fast = fast . next + if (fast != last): + + slow = slow . next + fast = fast . next + + return slow + +def binarySearch(head,value): + + start = head + last = None + + while True : + + mid = middle(start, last) + + if (mid == None): + return None + + if (mid . data == value): + return mid + + elif (mid . data < value): + start = mid . next + + else: + last = mid + + if not (last == None or last != start): + break + + return None + +head = newNode(2) +head.next = newNode(5) +head.next.next = newNode(7) +head.next.next.next = newNode(11) +head.next.next.next.next = newNode(15) +head.next.next.next.next.next = newNode(18) +value = 9 +if (binarySearch(head, value) == None): + print("Element not Found\n") +else: + print("Element Found") diff --git a/TechEventSkillWise.html b/TechEventSkillWise.html new file mode 100644 index 00000000..5294059e --- /dev/null +++ b/TechEventSkillWise.html @@ -0,0 +1,109 @@ + + + + + + + Upcoming Tech Events | Skillwise + + + + + + +
+
+ +

Explore Events

+ +

+ Upcoming Tech Events +

+ +

+ Stay updated with the latest in technology by attending webinars, conferences, and hackathons. Our events cover AI, cloud computing, cybersecurity, and more. Join now to enhance your tech skills and expand your professional network! +

+ +
    +
  • +
    +
    + AI Conference image +
    +
    +

    AI Conference 2024

    +

    Date: March 15, 2024

    +

    Location: New York, NY

    +
    + +
    +
    • + +
  • +
    +
    + Cloud Summit image +
    +
    +

    Cloud Computing Summit

    +

    Date: April 10, 2024

    +

    Location: San Francisco, CA

    +
    + +
    +
    • + +
  • +
    +
    + Cybersecurity Workshop image +
    +
    +

    Cybersecurity Workshop

    +

    Date: May 22, 2024

    +

    Location: Virtual

    +
    + +
    +
    • + +
  • +
    +
    + Hackathon image +
    +
    +

    Global Tech Hackathon

    +

    Date: June 30, 2024

    +

    Location: Virtual

    +
    + +
    +
    • + +
  • +
    +
    + Data Science Summit image +
    +
    +

    Data Science Summit

    +

    Date: July 20, 2024

    +

    Location: Chicago, IL

    +
    + +
    +
    • +
+ + Register for Events + +
+
+ + diff --git a/assets/.DS_Store b/assets/.DS_Store index fb67cd5d..16397084 100644 Binary files a/assets/.DS_Store and b/assets/.DS_Store differ diff --git a/assets/css/darkmode.css b/assets/css/darkmode.css index 3568c5c9..43414b72 100644 --- a/assets/css/darkmode.css +++ b/assets/css/darkmode.css @@ -1,20 +1,18 @@ - :root { - - --light-coral: #ff4d4d; - --keppei: #2a8f7f; - --selective-yellow: #b38f00;; - --white: #F8F8FF; - --light-white:#FFFFF0; - --light-gray:#d3d3d3; - --oxford-blue:#1a1f4d; - --black:#121212; - --light-black:#2C2C2C; - --charcoal-black:#3C3C3C; - --roman-silver: #5A5A5A ; - --roman-silver_10: #7F7E851A; - - /** + --light-coral: #ff4d4d; + --keppei: #2a8f7f; + --selective-yellow: #b38f00; + --white: #f8f8ff; + --light-white: #fffff0; + --light-gray: #d3d3d3; + --oxford-blue: #1a1f4d; + --black: #1e1e1e; + --light-black: #2c2c2c; + --charcoal-black: #3c3c3c; + --roman-silver: #5a5a5a; + --roman-silver_10: #7f7e851a; + + /** * typography */ @@ -26,7 +24,7 @@ --title-lg: 2.2rem; --title-md: 2rem; --title-sm: 1.8rem; - + --fw-500: 500; --fw-600: 600; --fw-700: 700; @@ -60,11 +58,9 @@ --transition: 0.25s ease; --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97); +} - - } - - /*-----------------------------------*\ +/*-----------------------------------*\ #RESET \*-----------------------------------*/ @@ -76,20 +72,26 @@ box-sizing: border-box; } -li { list-style: none; } +li { + list-style: none; +} a, img, span, button, -ion-icon { display: block; } +ion-icon { + display: block; +} a { text-decoration: none; color: inherit; } -img { height: auto; } +img { + height: auto; +} button { background: none; @@ -113,15 +115,21 @@ body { overflow-y: auto; } -body.loaded { overflow: visible; } +body.loaded { + overflow: visible; +} -body.nav-active { overflow: hidden; } +body.nav-active { + overflow: hidden; +} /*-----------------------------------*\ #REUSED STYLE \*-----------------------------------*/ -.container { padding-inline: 16px; } +.container { + padding-inline: 16px; +} .headline-lg, .headline-md, @@ -129,6 +137,7 @@ body.nav-active { overflow: hidden; } .title-lg { color: var(--white); font-weight: var(--fw-700); + padding: 10px; } .headline-lg { @@ -141,21 +150,27 @@ body.nav-active { overflow: hidden; } line-height: 1.2; } -.headline-sm { font-size: var(--headline-sm); } +.headline-sm { + font-size: var(--headline-sm); +} .title-lg { font-size: var(--title-lg); line-height: 1.4; } -.title-md { font-size: var(--title-md); } +.title-md { + font-size: var(--title-md); +} .title-sm { font-size: var(--title-sm); font-weight: var(--fw-500); } -.section { padding-block: var(--section-padding); } +.section { + padding-block: var(--section-padding); +} .has-bg-image { background-repeat: no-repeat; @@ -179,8 +194,6 @@ body.nav-active { overflow: hidden; } background-color: var(--charcoal-black); } - - :is(.btn-primary, .btn-secondary):is(:hover, :focus-visible) { box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--bg); } @@ -202,11 +215,13 @@ body.nav-active { overflow: hidden; } margin-block-end: 4px; } -.text-center { text-align: center; } - -.section-title { margin-block-end: 24px; } +.text-center { + text-align: center; +} -.headline-md .has-after { padding-block-end: 8px; } +.headline-md .has-after { + padding-block-end: 8px; +} .headline-md .has-after::after { background-image: url("../images/line-shape.svg"); @@ -223,6 +238,7 @@ body.nav-active { overflow: hidden; } .grid-list { display: grid; gap: 28px; + margin-bottom: 30px; } .card { @@ -231,9 +247,22 @@ body.nav-active { overflow: hidden; } padding: 24px; border-radius: var(--radius-8); transition: var(--transition); + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.1), + rgba(255, 255, 255, 0) + ); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.18); + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); + transition: all 0.5s; } -.card:is(:hover, :focus-within) { box-shadow: var(--shadow-1); } +.card:is(:hover, :focus-within) { + box-shadow: var(--shadow-1); +} .layer-link { position: absolute; @@ -243,7 +272,9 @@ body.nav-active { overflow: hidden; } height: 100%; } -.w-100 { width: 100%; } +.w-100 { + width: 100%; +} .img-cover { width: 100%; @@ -251,1024 +282,1396 @@ body.nav-active { overflow: hidden; } object-fit: cover; } - - /*-----------------------------------*\ #PRELOADER \*-----------------------------------*/ .preloader { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100vh; - background-color: var(--light-coral); - display: grid; - place-items: center; - z-index: 6; - transition: var(--transition); - } - - .preloader.loaded { - visibility: hidden; - opacity: 0; - } - - .preloader .circle { - width: 50px; - height: 50px; - border-radius: var(--radius-circle); - border: 4px solid var(--light-black); - border-block-start-color: transparent; - animation: rotate360 1s ease infinite; - } - - @keyframes rotate360 { - 0% { transform: rotate(0); } - 100% { transform: rotate(1turn); } - } - - - - - - /*-----------------------------------*\ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background-color: var(--light-coral); + display: grid; + place-items: center; + z-index: 6; + transition: var(--transition); +} + +.preloader.loaded { + visibility: hidden; + opacity: 0; +} + +.preloader .circle { + width: 50px; + height: 50px; + border-radius: var(--radius-circle); + border: 4px solid var(--light-black); + border-block-start-color: transparent; + animation: rotate360 1s ease infinite; +} + +@keyframes rotate360 { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(1turn); + } +} + +/*-----------------------------------*\ #HEADER \*-----------------------------------*/ - - .header .btn { display: none; } - - .header { - position: absolute; - top: 0; - left: 0; - width: 100%; - padding-block: 15px; - z-index: 4; - } - - .header.active { - background-color: var(--light-black); - position: fixed; - box-shadow: var(--shadow-2); - animation: headerActive 0.5s ease forwards; - } - - @keyframes headerActive { - 0% { transform: translateY(-100%); } - 100% { transform: translateY(0); } - } - - .header .container, - .navbar-top { - display: flex; - justify-content: space-between; - align-items: center; + +.header .btn { + display: none; +} + +.header { + position: absolute; + top: 0; + left: 0; + width: 100%; + padding-block: 15px; + z-index: 4; +} + +.header.active { + background-color: var(--light-black); + position: fixed; + box-shadow: var(--shadow-2); + animation: headerActive 0.5s ease forwards; +} + +@keyframes headerActive { + 0% { + transform: translateY(-100%); } - - - - .navbar { - position: fixed; - top: 0; - left: -320px; - max-width: 320px; - width: 100%; - background-color: var(--light-black); - height: 100vh; - padding: 40px 16px; - z-index: 2; - transition: 0.25s var(--cubic-in); - visibility: hidden; - } - - .navbar.active { - transition: 0.5s var(--cubic-out); - visibility: visible; - transform: translateX(320px); - } - - .navbar-top { margin-block-end: 34px; } - - .nav-close-btn ion-icon { --ionicon-stroke-width: 35px; } - - .nav-close-btn{ - margin:0px; - } - - .navbar-item:not(:last-child) { border-block-end: 1px solid var(--black_10); } - - .navbar-link { - padding-block: 8px; - transition: var(--transition); - color: var(--light-gray); - } - - .navbar-link:is(:hover, :focus-visible) { - color: var(--white); - } - - .overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100vh; - background-color: var(--black); - opacity: 0; - visibility: hidden; - transition: var(--transition); - } - - .overlay.active { - opacity: 0.6; - visibility: visible; - } - - - - - - /*-----------------------------------*\ + 100% { + transform: translateY(0); + } +} + +.header .container, +.navbar-top { + display: flex; + justify-content: space-between; + align-items: center; +} + +.navbar { + position: fixed; + top: 0; + left: -320px; + max-width: 320px; + width: 100%; + background-color: var(--light-black); + height: 100vh; + padding: 40px 16px; + z-index: 2; + transition: 0.25s var(--cubic-in); + visibility: hidden; +} + +.navbar.active { + transition: 0.5s var(--cubic-out); + visibility: visible; + transform: translateX(320px); +} + +.navbar-top { + margin-block-end: 34px; +} + +.nav-close-btn ion-icon { + --ionicon-stroke-width: 35px; +} + +.nav-close-btn { + margin: 0px; +} + +.navbar-item:not(:last-child) { + border-block-end: 1px solid var(--black_10); +} + +.navbar-link { + padding-block: 8px; + transition: var(--transition); + color: var(--light-gray); +} + +.navbar-link:is(:hover, :focus-visible) { + color: var(--white); +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background-color: var(--black); + opacity: 0; + visibility: hidden; + transition: var(--transition); +} + +.overlay.active { + opacity: 0.6; + visibility: visible; +} + +/*-----------------------------------*\ #HERO \*-----------------------------------*/ - - .hero-banner { display: none; } - - .hero { padding-block-start: calc(var(--pt, 96px) + var(--section-padding)); } - - .hero .title-md { - font-weight: var(--fw-500); - padding-inline-start: 16px; - margin-block: 24px 44px; - } - - .hero .title-md::before { - top: 0; - left: 0; - width: 2px; - height: 100%; - background-color: var(--light-coral); - } - - .hero .btn-group { - display: flex; - flex-wrap: wrap; - gap: 12px; - } - - - - - - /*-----------------------------------*\ + +.hero-banner { + display: none; +} + +.hero { + padding-block-start: calc(var(--pt, 96px) + var(--section-padding)); +} + +.hero .title-md { + font-weight: var(--fw-500); + padding-inline-start: 16px; + margin-block: 24px 44px; +} + +.hero .title-md::before { + top: 0; + left: 0; + width: 2px; + height: 100%; + background-color: var(--light-coral); +} + +.hero .btn-group { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.button-container { + display: flex; + justify-content: center; /* Center horizontally */ + align-items: center; /* Center vertically */ + margin: 0; /* Remove default margin */ + padding: 0; /* Remove default padding */ +} + +.btn-primary { + position: relative; /* Positioning for the arrows */ + padding: 10px 50px; /* Add padding to make space for the arrows */ + transition: color 0.3s ease; /* Smooth transition for text color */ + font-size: 16px; /* Adjust font size as needed */ +} + +.btn-primary::after { + content: " ⪢"; /* Two arrows as content */ + position: absolute; /* Position it absolutely */ + right: 5px; /* Position on the right side */ + top: 50%; /* Center vertically */ + transform: translateY(-55%); /* Adjust vertical position */ + opacity: 0; /* Start with the arrows hidden */ + transition: opacity 0.3s ease; /* Smooth transition for opacity */ +} + +.btn-primary:hover { + color: #ffffff; /* Change text color on hover (optional) */ +} + +.btn-primary:hover::after { + opacity: 1; /* Show the arrows on hover */ +} + +/*-----------------------------------*\ #CATEGORY \*-----------------------------------*/ - - .category .grid-list { padding-block: 40px 52px; } - - .category-card { - display: flex; - align-items: flex-start; - gap: 20px; - border-inline-start: 4px solid transparent; - } - - .category-card:is(:hover, :focus-within) { border-color: var(--light-coral); } - - .category-card .title-sm { margin-block-start: 4px; } - - .category .btn { margin-inline: auto; } - - - - - - /*-----------------------------------*\ + +.category .grid-list { + padding-block: 40px 52px; +} + +.category-card { + display: flex; + align-items: flex-start; + gap: 20px; + border-inline-start: 4px solid transparent; +} + +.category-card:is(:hover, :focus-within) { + border-color: var(--light-coral); +} + +.category-card .title-sm { + margin-block-start: 4px; +} + +.category .btn { + margin-inline: auto; +} + +/*-----------------------------------*\ #ABOUT \*-----------------------------------*/ - - .about .container { - display: grid; - gap: 30px; - } - - .about .section-text, - .progress-list li:not(:last-child) { margin-block-end: 32px; } - - .progress-label-wrapper { - display: flex; - justify-content: space-between; - margin-block-end: 8px; - } - - .progress-label-wrapper .title-sm { - color: var(--light-white); - font-weight: var(-fw-600); - } - - .progress { - background-color: var(--light-gray); - height: 6px; - border-radius: var(--radius-6); - } - - .progress-fill { - height: 100%; - border-radius: inherit; - } - - .progress-fill.red { - background-color: var(--light-coral); - width: 86%; - } - - .progress-fill.green { - background-color: var(--keppei); - width: 67%; - } - - .progress-fill.yellow { - background-color: var(--selective-yellow); - width: 95%; - } - - - - - - /*-----------------------------------*\ + +.about .container { + display: grid; + gap: 30px; +} + +.about .section-text, +.progress-list li:not(:last-child) { + margin-block-end: 32px; +} + +.progress-label-wrapper { + display: flex; + justify-content: space-between; + margin-block-end: 8px; +} + +.progress-label-wrapper .title-sm { + color: var(--light-white); + font-weight: var(-fw-600); +} + +.progress { + background-color: var(--light-gray); + height: 6px; + border-radius: var(--radius-6); +} + +.progress-fill { + height: 100%; + border-radius: inherit; +} + +.progress-fill.red { + background-color: var(--light-coral); + width: 86%; +} + +.progress-fill.green { + background-color: var(--keppei); + width: 67%; +} + +.progress-fill.yellow { + background-color: var(--selective-yellow); + width: 95%; +} + +/*-----------------------------------*\ #COURSE \*-----------------------------------*/ - - .course .grid-list { padding-block: 20px 44px; } - - .course-card { - border-block-end: 4px solid transparent; - display: flex; - flex-direction: column; - gap: 24px; - } - - .course-card:is(:hover, :focus-within) { border-color: var(--light-coral); } - - .course-card .card-banner { - height: 160px; - background-color: var(--light-gray); - overflow: hidden; - border-radius: var(--radius-4); - } - - .course-card :is(.wrapper, .rating-wrapper) { - display: flex; - align-items: center; - } - - .course-card .wrapper { - justify-content: space-between; - gap: 16px; - } - - .course-card .card-price { color: var(--light-coral); } - - .course-card .rating-wrapper { gap: 4px; } - - .course-card .card-title { margin-block: 8px 16px; } - - .course-card .card-meta { justify-content: flex-start; } - - .course-card .card-meta .title-sm { - display: flex; - gap: 8px; - } - - .course .btn { margin-inline: auto; } - - - /*-----------------------------------*\ + +.course .grid-list { + padding-block: 20px 44px; +} + +.course-card { + border-block-end: 4px solid transparent; + display: flex; + flex-direction: column; + gap: 24px; +} + +.course-card:is(:hover, :focus-within) { + border-color: var(--light-coral); +} + +.course-card .card-banner { + height: 160px; + background-color: var(--light-gray); + overflow: hidden; + border-radius: var(--radius-4); +} + +.course-card :is(.wrapper, .rating-wrapper) { + display: flex; + align-items: center; +} + +.course-card .wrapper { + justify-content: space-between; + gap: 16px; +} + +.course-card .card-price { + color: var(--light-coral); +} + +.course-card .rating-wrapper { + gap: 4px; +} + +.course-card .card-title { + margin-block: 8px 16px; +} + +.course-card .card-meta { + justify-content: flex-start; +} + +.course-card .card-meta .title-sm { + display: flex; + gap: 8px; +} + +.course .btn { + margin-inline: auto; +} + +/*-----------------------------------*\ #CTA \*-----------------------------------*/ - - .cta { - background-color: var(--keppei); - padding: 48px 24px; - text-align: center; - } - - .cta .headline-md { color: var(--black); } - - .cta .btn { margin-inline: auto; - color: var(--white); - background-color: var(--light-black); - } - .cta .btn:is(:hover, :focus-within) { - box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--light-coral); - } - - - /*-----------------------------------*\ - #BLOG - \*-----------------------------------*/ - - .blog .grid-list { padding-block: 20px 44px; } - - .blog-card { - border-block-end: 4px solid transparent; - display: flex; - flex-direction: column; - gap: 24px; - } - - .blog-card:is(:hover, :focus-within) { border-color: var(--light-coral); } - - .blog-card .card-banner { - height: 160px; - background-color: var(--light-gray); - overflow: hidden; - border-radius: var(--radius-4); - } - - .blog-card p{ - text-align: justify; - margin: 13px auto; - } - - .blog .grid-list{ - padding-top: 45px; - padding-bottom: 50px; - } - - .blog-card a{ - color: var(--light-coral); - font-size: 20px; + +.cta { + background-color: var(--keppei); + padding: 48px 24px; + text-align: center; +} + +.cta .headline-md { + color: var(--black); +} + +.cta .btn { + margin-inline: auto; + color: var(--white); + background-color: var(--light-black); +} +.cta .btn:is(:hover, :focus-within) { + box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--light-coral); +} + +.parent { + display: flex; + justify-content: center; + /* Center horizontally */ + align-items: center; + /* Center vertically */ + height: 40vh; + /* Set parent height to fill the viewport */ +} + +.scroll-container h2 { + display: flex; + justify-content: center; + align-items: center; + margin: 30px; +} + +.scroll-container { + width: 100%; + max-width: 1100px; + margin-bottom: 40px; +} + +.scroll { + position: relative; + display: flex; + overflow: hidden; + -webkit-mask-image: linear-gradient( + 90deg, + transparent, + #fff 20%, + #fff 80%, + transparent + ); +} + +.scroll span img { + max-width: 30px; + margin-right: 8px; + border-radius: 50%; + vertical-align: middle; + /* Aligns the image vertically with the text */ +} + +.scroll div { + white-space: nowrap; + animation: scroll var(--time) linear infinite; + animation-delay: calc(var(--time) * -1); +} + +.scroll div:nth-child(2) { + animation: scroll2 var(--time) linear infinite; + animation-delay: calc(var(--time) / -2); +} + +@keyframes scroll { + 0% { + transform: translateX(100%); } - - .blog .btn { margin-inline: auto; } - #keppi { - color: var(--keppei); + 100% { + transform: translateX(-100%); } +} - .title-sm { - color: var(--light-gray); +@keyframes scroll2 { + 0% { + transform: translateX(0); } - - /*-----------------------------------*\ - #FOOTER - \*-----------------------------------*/ - - .footer-top .container { - display: flex; - gap: 24px; - justify-content: space-around; + + 100% { + transform: translateX(-200%); } - - .footer-logo-text{ - display: flex; - width: 300px; +} + +.scroll div span { + display: inline-flex; + margin: 10px; + letter-spacing: 0.2em; + background: #c0bdbd; + color: #fff; + min-height: 40px; + padding: 5px 10px; + border-radius: 5px; + transition: 0.5s; +} + +.scroll div span:hover { + background: #3fd2f9; + cursor: pointer; +} + +.imgBox div { + display: flex; + align-items: center; + justify-content: center; +} + +.imgBox img { + max-width: 100px; + scale: 0.8; +} + +@media (max-width: 768px) { + .footerNav ul { flex-direction: column; - - } - - .footer-text { margin-block: 40px 32px; } - - .social-list { - display: flex; - gap: 16px; } - - .footer-list-title { margin-block-end: 32px; } - - .footer-link { margin-block-start: 16px; } - - .footer-top .grid-list { - grid-template-columns: repeat(3, 1fr); - gap: 16px; - } - - #footer-logo{ - width:100px; - height:100px; - } - .footer-top .grid-list .img-cover { - width:80px; - height:80px; - border-radius: var(--radius-6); } - - .footer-bottom { - padding-block: 32px; + + .footerNav ul li { + width: 100%; text-align: center; - border-block-start: 1px solid var(--black_10); - } - .footer-link:is(:hover, :focus-visible) { - color: var(--white); + margin: 10px; } - - .copyright { font-weight: var(--fw-500); } - - - #instapost1 { - transition: transform 0.3s ease; +} + +@keyframes slide { + from { + transform: translateX(0); } - - #instapost1:hover { - transform: scale(1.15); + + to { + transform: translateX(-100%); } - - #instapost2 { - transition: transform 0.3s ease; +} + +.outer-logos { + padding: 0 100px; +} + +.logos { + overflow: hidden; + padding: 60px 0; + background: white; + white-space: nowrap; + position: relative; +} + +.logos h1 { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 80px; +} + +.logos:hover .logos-slide { + animation-play-state: paused; +} + +.logos:before, +.logos:after { + position: absolute; + top: 0; + width: 250px; + height: 100%; + content: ""; + z-index: 2; +} + +.logos:before { + left: 0; + background: linear-gradient(to left, rgba(255, 255, 255, 0), white); +} + +.logos:after { + right: 0; + background: linear-gradient(to right, rgba(255, 255, 255, 0), white); +} + +.logos-slide { + display: inline-block; + animation: 15s slide infinite linear; + width: max-content; +} + +.logos-slide img { + height: 50px; + margin: 0 20px; +} + +@media screen and (max-width: 768px) { + .outer-logos { + padding: 0 40px; } - - #instapost2:hover { - transform: scale(1.15); + + .logos-slide { + display: column; + width: max-content; } - - #instapost3 { - transition: transform 0.3s ease; + + .logos h1 { + font-size: 35px; + margin-bottom: 50px; } - - #instapost3:hover { - transform: scale(1.15); + + .logos-slide img { + height: 40px; + margin: 8px 15px; } - - #instapost4 { - transition: transform 0.3s ease; +} + +@media screen and (max-width: 431px) { + .outer-logos { + padding: 0 20px; } - - #instapost4:hover { - transform: scale(1.15); + + .logos:before, + .logos:after { + width: 110px; } - - #instapost5 { - transition: transform 0.3s ease; + + .logos-slide { + display: column; + width: max-content; } - - #instapost5:hover { - transform: scale(1.15); + + .logos { + padding: 40px 0; } - - #instapost6 { - transition: transform 0.3s ease; + + .logos h1 { + font-size: 22px; + margin-bottom: 30px; } - - #instapost6:hover { - transform: scale(1.15); + + .logos-slide img { + height: 30px; + margin: 0 10px; } - - - #footer-logo { - transition: transform 0.3s ease; - } - - #footer-logo:hover { - transform: scale(1.05); - } - - #social-link1 { - transition: transform 0.3s ease; - } - - #social-link1:hover { - transform: scale(1.1); - } - - #social-link2 { - transition: transform 0.3s ease; - } - - #social-link2:hover { - transform: scale(1.1); - } - - #social-link3 { - transition: transform 0.3s ease; - } - - #social-link3:hover { - transform: scale(1.1); - } - - #social-link4 { - transition: transform 0.3s ease; - } - - #social-link4:hover { - transform: scale(1.1); - } - #social-link5 { - transition: transform 0.3s ease; - } - - #social-link5:hover { - transform: scale(1.1); - } - - - - - - - /*-----------------------------------*\ +} + +/*-----------------------------------*\ + #BLOG + \*-----------------------------------*/ + +.blog .grid-list { + padding-block: 20px 44px; +} + +.blog-card { + border-block-end: 4px solid transparent; + display: flex; + flex-direction: column; + gap: 24px; +} + +.blog-card:is(:hover, :focus-within) { + border-color: var(--light-coral); +} + +.blog-card .card-banner { + height: 160px; + background-color: var(--light-gray); + overflow: hidden; + border-radius: var(--radius-4); +} + +.blog-card p { + text-align: justify; + margin: 13px auto; +} + +.blog .grid-list { + padding-top: 45px; + padding-bottom: 50px; +} + +.blog-card a { + color: var(--light-coral); + font-size: 20px; +} + +.blog .btn { + margin-inline: auto; +} + +#keppi { + color: var(--keppei); +} + +.title-sm { + color: var(--light-gray); +} + +/*-----------------------------------*\ + #FOOTER + \*-----------------------------------*/ + +.footer-top .container { + display: flex; + gap: 24px; + justify-content: space-around; +} + +.footer-logo-text { + display: flex; + width: 300px; + flex-direction: column; +} + +.footer-text { + margin-block: 40px 32px; +} + +.social-list { + display: flex; + gap: 16px; +} + +.footer-list-title { + margin-block-end: 32px; +} + +.footer-link { + margin-block-start: 16px; +} + +.footer-top .grid-list { + grid-template-columns: repeat(3, 1fr); + gap: 16px; +} + +#footer-logo { + width: 100px; + height: 100px; +} +.footer-top .grid-list .img-cover { + width: 80px; + height: 80px; + border-radius: var(--radius-6); +} + +.footer-bottom { + padding-block: 32px; + text-align: center; + border-block-start: 1px solid var(--black_10); +} +.footer-link:is(:hover, :focus-visible) { + color: var(--white); +} + +.copyright { + font-weight: var(--fw-500); +} + +#instapost1 { + transition: transform 0.3s ease; +} + +#instapost1:hover { + transform: scale(1.15); +} + +#instapost2 { + transition: transform 0.3s ease; +} + +#instapost2:hover { + transform: scale(1.15); +} + +#instapost3 { + transition: transform 0.3s ease; +} + +#instapost3:hover { + transform: scale(1.15); +} + +#instapost4 { + transition: transform 0.3s ease; +} + +#instapost4:hover { + transform: scale(1.15); +} + +#instapost5 { + transition: transform 0.3s ease; +} + +#instapost5:hover { + transform: scale(1.15); +} + +#instapost6 { + transition: transform 0.3s ease; +} + +#instapost6:hover { + transform: scale(1.15); +} + +#footer-logo { + transition: transform 0.3s ease; +} + +#footer-logo:hover { + transform: scale(1.05); +} + +#social-link1 { + transition: transform 0.3s ease; +} + +#social-link1:hover { + transform: scale(1.1); +} + +#social-link2 { + transition: transform 0.3s ease; +} + +#social-link2:hover { + transform: scale(1.1); +} + +#social-link3 { + transition: transform 0.3s ease; +} + +#social-link3:hover { + transform: scale(1.1); +} + +#social-link4 { + transition: transform 0.3s ease; +} + +#social-link4:hover { + transform: scale(1.1); +} +#social-link5 { + transition: transform 0.3s ease; +} + +#social-link5:hover { + transform: scale(1.1); +} + +/*-----------------------------------*\ #CONTAINER QUERIES \*-----------------------------------*/ - - /** + +/** * container query for card */ - - .card-container { container-type: inline-size; } - - @container (min-width: 500px) { - - .course-card { flex-direction: row; } - - .course-card .card-banner { - width: 160px; - flex-shrink: 0; - } - - } - - - - - - /*-----------------------------------*\ + +.card-container { + container-type: inline-size; +} + +@container (min-width: 500px) { + .course-card { + flex-direction: row; + } + + .course-card .card-banner { + width: 160px; + flex-shrink: 0; + } +} + +/*-----------------------------------*\ #MEDIA QUERIES \*-----------------------------------*/ - - /** + +/** * responsive for large than 575px screen */ - - @media (min-width: 575px) { - - /** + +@media (min-width: 575px) { + /** * REUSED STYLE */ - - .container { - max-width: 640px; - width: 100%; - margin-inline: auto; - } - - .card { padding: 32px; } - - } - - - - - - /** + + .container { + max-width: 640px; + width: 100%; + margin-inline: auto; + } + + .card { + padding: 32px; + } +} + +/** * responsive for large than 768px screen */ - - @media (min-width: 768px) { - - /** + +@media (min-width: 768px) { + /** * CUSTOM PROPERTY */ - - :root { - - /** + + :root { + /** * typography */ - - --headline-lg: 6rem; - --headline-md: 3.8rem; - - /** + + --headline-lg: 6rem; + --headline-md: 3.8rem; + + /** * spacing */ - - --section-padding: 80px; - - } - - - - /** + + --section-padding: 80px; + } + + /** * REUSED STYLE */ - - .container { max-width: 768px; } - - .grid-list { grid-template-columns: 1fr 1fr; } - - - - /** + + .container { + max-width: 768px; + } + + .grid-list { + grid-template-columns: 1fr 1fr; + } + + /** * CTA */ - - .cta { padding-block: 78px; } - - } - - - - - - /** + + .cta { + padding-block: 78px; + } +} + +/** * responsive for large than 992px screen */ - - @media (min-width: 992px) { - - :root { - - /** + +@media (min-width: 992px) { + :root { + /** * typography */ - - --headline-lg: 7.7rem; - --headline-md: 4.4rem; - - /** + + --headline-lg: 7.7rem; + --headline-md: 4.4rem; + + /** * spacing */ - - --section-padding: 120px; - - } - - - - /** + + --section-padding: 120px; + } + + /** * REUSED STYLE */ - - .container { max-width: 1024px; } - - .btn { - padding: 10px 22px; - font-size: 1.8rem; - border-radius: 10px; - color: #fff; - } - - - - /** + + .container { + max-width: 1024px; + } + + .btn { + padding: 10px 22px; + font-size: 1.8rem; + border-radius: 10px; + color: #fff; + } + + /** * HEADER */ - - .nav-open-btn, - .overlay, - .navbar-top { display: none; } - - .navbar, - .navbar.active { - all: unset; - display: block; - } - - .navbar-list { - display: flex; - gap: 8px; - } - - .navbar-item:not(:last-child) { border-block-end: none; } - - .navbar-link { padding: 8px 16px; } - - .header .btn { - display: block; - box-shadow: none; - } - - - - /** + + .nav-open-btn, + .overlay, + .navbar-top { + display: none; + } + + .navbar, + .navbar.active { + all: unset; + display: block; + } + + .navbar-list { + display: flex; + gap: 8px; + } + + .navbar-item:not(:last-child) { + border-block-end: none; + } + + .navbar-link { + padding: 8px 16px; + } + + .header .btn { + display: block; + box-shadow: none; + } + + /** * CATEGORY */ - - .grid-list { grid-template-columns: repeat(3, 1fr); } - - - - /** + + .grid-list { + grid-template-columns: repeat(3, 1fr); + } + + /** * ABOUT */ - - .about .container { grid-template-columns: 1fr 1fr; } - - - - /** + + .about .container { + grid-template-columns: 1fr 1fr; + } + + /** * COURSE */ - - .course .grid-list { - grid-template-columns: 1fr 1fr; - margin-block: 40px 48px; - } - - /** + + .course .grid-list { + grid-template-columns: 1fr 1fr; + margin-block: 40px 48px; + } + + /** * FOOTER */ - - .footer-top .container { grid-template-columns: 1fr 0.5fr 0.5fr 0.8fr; } - - .footer-brand { padding-inline-end: 24px; } - } - - - - - - /** + + .footer-top .container { + grid-template-columns: 1fr 0.5fr 0.5fr 0.8fr; + } + + .footer-brand { + padding-inline-end: 24px; + } +} + +/** * responsive for large than 1200px screen */ - - @media (min-width: 1200px) { - - /** + +@media (min-width: 1200px) { + /** * REUSED STYE */ - - .container { max-width: 1170px; } - - - - /** + + .container { + max-width: 1170px; + } + + /** * HERO */ - - .hero-banner { - display: block; - max-width: max-content; - margin-inline-end: -14%; - } - - .hero .container { - display: grid; - grid-template-columns: 1fr 0.9fr; - gap: 48px; - } - - .hero .title-md { margin-block: 40px 60px; } - - - - /** + + .hero-banner { + display: block; + max-width: max-content; + margin-inline-end: -14%; + } + + .hero .container { + display: grid; + grid-template-columns: 1fr 0.9fr; + gap: 48px; + } + + .hero .title-md { + margin-block: 40px 60px; + } + + /** * ABOUT */ - - .about .container { grid-template-columns: 1fr 0.7fr; } - - - - /** + + .about .container { + grid-template-columns: 1fr 0.7fr; + } + + /** * CTA */ - - .cta { text-align: left; } - - .cta .container { - display: flex; - justify-content: space-between; - align-items: center; - } - - .cta .headline-md { max-width: 22ch; } - - .cta .btn { margin-inline: 0; } - .footer .container { gap: 48px; } - - } - - - - - body.dark-mode #theme-toggle { - background-color: var(--oxford-blue); - - } - - body.dark-mode #theme-icon { - color: var(--white); - } - - + + .cta { + text-align: left; + } + + .cta .headline-md { + width: fit-content; + } + #contact .container { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + #contact .container textarea::placeholder { + font-family: var(--ff-gilroy); + } + .cta .btn { + margin-inline: 0; + } + .footer .container { + gap: 1rem; + } +} + +body.dark-mode #theme-toggle { + background-color: var(--oxford-blue); +} + +body.dark-mode #theme-icon { + color: var(--white); +} + +#theme-toggle { + /* position: fixed; */ + + background-color: var(--light-gray); + border-radius: var(--radius-circle); + padding: 10px; + cursor: pointer; + transition: var(--transition); +} + +#theme-toggle:hover { + background-color: var(--roman-silver); +} + +#theme-icon { + font-size: 24px; + color: var(--oxford-blue); +} + +form { + max-width: 400px; +} +input, +textarea { + width: 100%; + padding: 10px; + margin: 5px 0; + border: 1px solid #ccc; + border-radius: 5px; + background-color: var(--light-black); + color: var(--white); +} +button { + margin: auto; + padding: 10px; + background-color: #007bff; + color: var(--black); + border: none; + border-radius: 5px; + cursor: pointer; +} +button:hover { + background-color: #0056b3; +} +@media (max-width: 992px) { + .footer-logo-text { + flex-direction: column; + width: fit-content; + align-items: center; + justify-content: center; + text-align: center; + } + + .footer-top .container { + flex-direction: column; + justify-content: center; + align-items: center; + gap: 30px; + } #theme-toggle { - /* position: fixed; */ - - background-color: var(--light-gray); - border-radius: var(--radius-circle); - padding: 10px; - cursor: pointer; - transition: var(--transition); - } - - #theme-toggle:hover { - background-color: var(--roman-silver); - } - - #theme-icon { - font-size: 24px; - color: var(--oxford-blue); - } - - - form { - max-width: 400px; - margin: auto; - } - input, - textarea { - width: 100%; - padding: 10px; - margin: 5px 0; - border: 1px solid #ccc; - border-radius: 5px; - background-color: var(--light-black); - color: var(--white); - } - button { - margin: auto; - padding: 10px; - background-color: #007bff; - color: var(--black); - border: none; - border-radius: 5px; - cursor: pointer; - } - button:hover { - background-color: #0056b3; - } - @media(max-width:992px){ - - .footer-logo-text{ - flex-direction: column; - width: fit-content; - align-items: center; - justify-content: center; - text-align: center; - } - - .footer-top .container{ - flex-direction: column; - justify-content: center; - align-items: center; - gap: 30px; - } - #theme-toggle{ - right:125px; - top:5px - - - } - - - - /* Can be used if wanting a more linear Instagram post feed but as a viewer I like the grid better + right: 125px; + top: 5px; + } + + /* Can be used if wanting a more linear Instagram post feed but as a viewer I like the grid better .footer-top .grid-list { grid-template-columns: repeat(6, 1fr); gap: 16px; } */ - - - .footer-list{ - display: flex; - align-items: center; - justify-content: center; - width: fit-content; - gap: 30px; - width:max-content - } - .footer-list-title{ - display: none; - } - - .social-list{ - padding-top: 20px; + + .footer-list { + display: flex; align-items: center; justify-content: center; - } - - ul.footer-list.instagram > li > p.footer-list-title { - display: block; - margin-bottom: 5px; + width: fit-content; + gap: 30px; + width: max-content; } - + .footer-list-title { + display: none; } - - /* Search Bar */ - /* From Uiverse.io by OnlyCodeChannel */ - .navRightSide{ - display: flex; - justify-content: center; + + .social-list { + padding-top: 20px; align-items: center; - gap: 10px; + justify-content: center; } - - .searchBox { - display: flex; - max-width: 250px; - height: 45px; - align-items: center; - justify-content: space-between; - gap: 8px; - background: var(--black); - border-radius: 50px; - position: relative; - } - - .searchButton { - color: white; - position: relative; - right: 8px; - width: 30px; - height: 30px; - border-radius: 50%; - background: var(--gradient-2, linear-gradient(90deg, var(--light-coral) 20%, var(--selective-yellow) 100%)); - border: 0; - display: inline-block; - transition: all 300ms cubic-bezier(.23, 1, 0.32, 1); - } - .searchButton svg{ - position: absolute; - top:5px; - right:3px; - } - /*hover effect*/ - .SearchBTN:hover { - color: #fff; - background-color: #1A1A1A; - box-shadow: rgba(0, 0, 0, 0.5) 0 10px 20px; - transform: translateY(-3px); + + ul.footer-list.instagram > li > p.footer-list-title { + display: block; + margin-bottom: 5px; } - /*button pressing effect*/ - .SearchBTN:active { - box-shadow: none; - transform: translateY(0); +} + +/* Search Bar */ +/* From Uiverse.io by OnlyCodeChannel */ +.navRightSide { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; +} + +.searchBox { + display: flex; + max-width: 250px; + height: 45px; + align-items: center; + justify-content: space-between; + gap: 8px; + background: var(--black); + border-radius: 50px; + position: relative; +} + +.searchButton { + color: white; + position: relative; + right: 8px; + width: 30px; + height: 30px; + border-radius: 50%; + background: var( + --gradient-2, + linear-gradient(90deg, var(--light-coral) 20%, var(--selective-yellow) 100%) + ); + border: 0; + display: inline-block; + transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1); +} +.searchButton svg { + position: absolute; + top: 5px; + right: 3px; +} +/*hover effect*/ +.SearchBTN:hover { + color: #fff; + background-color: #1a1a1a; + box-shadow: rgba(0, 0, 0, 0.5) 0 10px 20px; + transform: translateY(-3px); +} +/*button pressing effect*/ +.SearchBTN:active { + box-shadow: none; + transform: translateY(0); +} +.searchInput::placeholder { + color: var(--light-coral); +} +.searchInput { + border: none; + background: none; + outline: none; + color: var(--light-coral); + font-size: 15px; + padding: 8px; +} + +.svgxml { + position: absolute; + top: 0; + left: 0; +} + +@media (max-width: 768px) { + .footer-list li a.title-sm { + font-size: 1.3rem; } - .searchInput::placeholder{ - color: var(--light-coral) - } - .searchInput { - border: none; - background: none; - outline: none; - color: var(--light-coral); - font-size: 15px; - padding:8px; - } - - .svgxml - { - position:absolute; - top:0; - left:0; - } - - - - - @media(max-width:768px) { - - .footer-list li a.title-sm { - font-size: 1.3rem; - } - - .footer-list.instagram li p.headline-sm{ + + .footer-list.instagram li p.headline-sm { font-size: 1.7rem; - margin-top:10px + margin-top: 10px; } - - .footer-top .container{ + + .footer-top .container { gap: 20px; } - - .footer-logo-text p.title-sm{ + + .footer-logo-text p.title-sm { font-size: 1.3rem; } - #footer-logo{ + #footer-logo { width: 60px; height: 60px; } - } - - - @media (max-width: 575px){ - .footer-list{ - gap:10px +} + +@media (max-width: 575px) { + .footer-list { + gap: 10px; } .footer-list li a.title-sm { - font-size: 1.0rem; + font-size: 1rem; } - .footer-top .container{ + .footer-top .container { gap: 15px; } - .social-list{ + .social-list { padding-top: 0; } - .footer-bottom p{ - font-size: 1.0rem; + .footer-bottom p { + font-size: 1rem; } - } \ No newline at end of file +} +.header1 { + animation-name: pulse1; + animation-duration: 2s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} +.header2 { + animation-name: pulse2; + animation-duration: 1.8s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} +.header3 { + animation-name: pulse3; + animation-duration: 2s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} +.header4 { + animation-name: pulse4; + animation-duration: 1.8s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} +.header5 { + animation-name: pulse5; + animation-duration: 2s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} +.header6 { + animation-name: pulse6; + animation-duration: 1.8s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} + +@keyframes pulse1 { + 0% { + transform: translateY(-3.5px); + } + 50% { + transform: translateY(0px); + } + 100% { + transform: translateY(-3.5px); + } +} +@keyframes pulse2 { + 0% { + transform: translateY(-5px); + } + 50% { + transform: translateY(0px); + } + 100% { + transform: translateY(-5px); + } +} +@keyframes pulse3 { + 0% { + transform: translateY(-3.5px); + } + 50% { + transform: translateY(0px); + } + 100% { + transform: translateY(-3.5px); + } +} +@keyframes pulse4 { + 0% { + transform: translateY(-5px); + } + 50% { + transform: translateY(0px); + } + 100% { + transform: translateY(-5px); + } +} +@keyframes pulse5 { + 0% { + transform: translateY(-3.5px); + } + 50% { + transform: translateY(0px); + } + 100% { + transform: translateY(-3.5px); + } +} +@keyframes pulse6 { + 0% { + transform: translateY(-5px); + } + 50% { + transform: translateY(0px); + } + 100% { + transform: translateY(-5px); + } +} diff --git a/assets/css/pricing.css b/assets/css/pricing.css new file mode 100644 index 00000000..092b96e1 --- /dev/null +++ b/assets/css/pricing.css @@ -0,0 +1,83 @@ +*{ + padding:0px; + margin:0px; +} +body{ + background-color:#ffede7; +} +.container1{ + width:90%; + margin:auto; + + + + +} +.price{ + width:100%; + text-align:center; + margin-top:10px; +} +.banner{ + display:flex; + justify-content:center; + align-items:center; + width:100%; + height:60px; + + margin-top:30px; +} +.card-body{ + padding:0px; + text-align:center; +} +.price{ + font-size:45px; +} +.card-subtitle{ + font-size:18px; + +} +.card-text{ + + font-size:22px; + + margin-top:20px; + margin-bottom:20px; +} +.btn-success{ + margin-top:30px; + margin-bottom:20px; + padding:10px 15px; + font-weight:700; + font-size:18px; +} + +.banner{ + color:white; + font-size:26px; + font-weight:600; +} +.ribbon { + width: 100px; + height: 60px; + overflow: hidden; + position: absolute; + top: 30px; + right: 0px; +} + +.ribbon span { + position: absolute; + display: block; + width: 140px; + padding: 10px 0; + background-color: red; + color: white; + font-size: 16px; + font-weight: bold; + text-align: center; + transform: rotate(45deg); + top: 8px; + right: -30px; +} \ No newline at end of file diff --git a/assets/css/signin.css b/assets/css/signin.css index 93a495c6..5253c3dc 100644 --- a/assets/css/signin.css +++ b/assets/css/signin.css @@ -9,6 +9,73 @@ body { align-items: center; height: 100vh; } +.navbar { + position: absolute; + top:0; + left:0; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + background-color: rgba(255, 255,255,0.07); + /* backdrop-filter: blur(10px); */ + padding: 1rem; +} + +.navbar .logo { + font-size:2rem; + color: #fff; + font-weight: 700; + text-decoration: none; + font-family: sans-serif; +} + +.navbar ul { + list-style: none; + display: flex; +} + +.navbar ul li { + margin-left: 20px; + font-size: 1.3rem; + color:white; +} + +.navbar ul li a { + text-decoration: none; + color: #fff; + padding: 0.5rem 1rem; + transition: background-color 0.3s ease; +} + +.navbar ul li a:hover { + background-color: #FEAFBF; + color: white; + border-radius: 5px; +} +.nav-link { + text-decoration: none; + position: relative; + padding-bottom: 2px; + } + + .nav-link::after { + content: ''; + position: absolute; + width: 100%; + height: 2px; + bottom: 0; + left: 0; + background-color: rgb(255, 255, 255); + visibility: hidden; + transform: scaleX(0); + transition: all 0.3s ease-in-out; + } + + .nav-link:hover::after { + visibility: visible; + transform: scaleX(1); + } .container { width: 100%; @@ -60,6 +127,26 @@ p { border-radius: 4px; box-sizing: border-box; } +.password{ + border: 1px solid #ccc; + border-radius: 4px; + display: flex; + justify-content: space-between; + align-items: center; + padding-right: 12px; + +} + +.password input{ + width: 80%; + padding: 10px; + box-sizing: border-box; + border: none; +} +.password input:focus{ + outline: none; +} + .signin-btn { width: 100%; @@ -108,3 +195,20 @@ p { font-size: 14px; } } + +.strength-bar { + width: 100%; + height: 3px; + background-color: #ddd; + margin-top: 10px; + } + .strength-bar-inner { + height: 100%; + width: 0%; + background-color: red; + transition: width 0.3s ease; + } + .suggestion { + display: flex; + align-items: flex-start; + } \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css index eae492e6..672db37f 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -6,17 +6,15 @@ * copyright 2024 Priya Ghosal */ - - - - /*-----------------------------------*\ #CUSTOM PROPERTY \*-----------------------------------*/ +body, +html { + overflow: auto !important; +} :root { - - --selective-yellow: hsl(42, 100%, 56%); --roman-silver: hsl(240, 6%, 51%); --roman-silver_10: hsla(240, 6%, 51%, 0.1); @@ -25,12 +23,10 @@ --light-gray: hsl(0, 0%, 80%); --keppei: hsl(173, 60%, 47%); --white: hsl(0, 0%, 100%); - --snow:#FFFAFA; + --snow: #fffafa; --black: hsl(0, 0%, 0%); --black_10: hsla(0, 0%, 0%, 0.1); - --dark-oxford-blue: hsl(224, 53%, 20%); - - + --dark-oxford-blue: hsl(224, 53%, 20%); /** * typography @@ -44,7 +40,7 @@ --title-lg: 2.2rem; --title-md: 2rem; --title-sm: 1.8rem; - + --fw-500: 500; --fw-600: 600; --fw-700: 700; @@ -78,13 +74,8 @@ --transition: 0.25s ease; --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97); - } - - - - /*-----------------------------------*\ #RESET \*-----------------------------------*/ @@ -97,20 +88,26 @@ box-sizing: border-box; } -li { list-style: none; } +li { + list-style: none; +} a, img, span, button, -ion-icon { display: block; } +ion-icon { + display: block; +} a { text-decoration: none; color: inherit; } -img { height: auto; } +img { + height: auto; +} button { background: none; @@ -130,19 +127,63 @@ body { color: var(--roman-silver); font-size: 1.6rem; line-height: 1.5; - /* overflow: hidden; */ - overflow-y: auto; + overflow: hidden; + /*overflow-y: auto;*/ } -body.loaded { overflow: visible; } +body.loaded { + overflow-y: auto; + overflow-x: hidden; +} -body.nav-active { overflow: hidden; } +body.nav-active { + overflow: hidden; +} /*-----------------------------------*\ #REUSED STYLE \*-----------------------------------*/ +/* Styling for the navbar links */ +.navbar-link { + position: relative; + display: inline-block; + color: #545454; /* Default color for the regular navbar */ + text-decoration: none; + font-weight: 500; + padding-bottom: 5px; +} +body.nav-active .navbar-list .navbar-link { + color: #4c4b4b; /* Set a different color for hamburger items */ +} + -.container { padding-inline: 16px; } + +/* Underline effect */ +.navbar-link::after { + content: ""; + position: absolute; + width: 0; + height: 2px; + bottom: 0; + left: 0; + background-color: #ff69b4; /* Pink color for the underline */ + transition: width 0.3s ease-in-out; +} + +/* Hover effect to show the underline and change text color */ +.navbar-link:hover::after { + width: 100%; +} + +.navbar-link:hover { + color: #ff69b4; /* Change text color to pink on hover */ + transition: color 0.3s ease-in-out; /* Smooth transition for the text color */ +} + + +.container { + padding-inline: 16px; +} .headline-lg, .headline-md, @@ -162,21 +203,28 @@ body.nav-active { overflow: hidden; } line-height: 1.2; } -.headline-sm { font-size: var(--headline-sm); } +.headline-sm { + font-size: var(--headline-sm); +} .title-lg { font-size: var(--title-lg); line-height: 1.4; } -.title-md { font-size: var(--title-md); } +.title-md { + font-size: var(--title-md); +} .title-sm { font-size: var(--title-sm); font-weight: var(--fw-500); + /* color: #FF69B4; */ } -.section { padding-block: var(--section-padding); } +.section { + padding-block: var(--section-padding); +} .has-bg-image { background-repeat: no-repeat; @@ -197,11 +245,9 @@ body.nav-active { overflow: hidden; } } .btn { - background-color: #1A1A1A; + background-color: #1a1a1a; } - - :is(.btn-primary, .btn-secondary):is(:hover, :focus-visible) { box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--bg); } @@ -219,15 +265,17 @@ body.nav-active { overflow: hidden; } .section-subtitle { font-weight: var(--fw-600); - color: var(--keppei); + color: black; margin-block-end: 4px; } -.text-center { text-align: center; } - -.section-title { margin-block-end: 24px; } +.text-center { + text-align: center; +} -.headline-md .has-after { padding-block-end: 8px; } +.headline-md .has-after { + padding-block-end: 8px; +} .headline-md .has-after::after { background-image: url("../images/line-shape.svg"); @@ -252,9 +300,22 @@ body.nav-active { overflow: hidden; } padding: 24px; border-radius: var(--radius-8); transition: var(--transition); + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.1), + rgba(255, 255, 255, 0) + ); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.18); + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); + transition: all 0.5s; } -.card:is(:hover, :focus-within) { box-shadow: var(--shadow-1); } +.card:is(:hover, :focus-within) { + box-shadow: var(--shadow-1); +} .layer-link { position: absolute; @@ -264,7 +325,9 @@ body.nav-active { overflow: hidden; } height: 100%; } -.w-100 { width: 100%; } +.w-100 { + width: 100%; +} .img-cover { width: 100%; @@ -272,10 +335,6 @@ body.nav-active { overflow: hidden; } object-fit: cover; } - - - - /*-----------------------------------*\ #PRELOADER \*-----------------------------------*/ @@ -308,20 +367,22 @@ body.nav-active { overflow: hidden; } } @keyframes rotate360 { - 0% { transform: rotate(0); } - 100% { transform: rotate(1turn); } -} - - - - + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(1turn); + } +} /*-----------------------------------*\ #HEADER \*-----------------------------------*/ -.header .btn { display: none; } +.header .btn { + display: none; +} .header { position: absolute; @@ -337,11 +398,20 @@ body.nav-active { overflow: hidden; } position: fixed; box-shadow: var(--shadow-2); animation: headerActive 0.5s ease forwards; + + .searchBox { + background: hsl(0deg 89.85% 94.83%); + } } @keyframes headerActive { - 0% { transform: translateY(-100%); } - 100% { transform: translateY(0); } + 0% { + transform: translateY(-100%); + } + + 100% { + transform: translateY(0); + } } .header .container, @@ -351,8 +421,6 @@ body.nav-active { overflow: hidden; } align-items: center; } - - .navbar { position: fixed; top: 0; @@ -373,22 +441,29 @@ body.nav-active { overflow: hidden; } transform: translateX(320px); } -.navbar-top { margin-block-end: 34px; } +.navbar-top { + margin-block-end: 34px; +} -.nav-close-btn ion-icon { --ionicon-stroke-width: 35px; } +.nav-close-btn ion-icon { + --ionicon-stroke-width: 35px; +} -.nav-close-btn{ - margin:0px; +.nav-close-btn { + margin: 0px; } -.navbar-item:not(:last-child) { border-block-end: 1px solid var(--black_10); } +.navbar-item:not(:last-child) { + border-block-end: 1px solid var(--black_10); +} .navbar-link { padding-block: 8px; transition: var(--transition); + padding-left: 1rem; } -.navbar-link:is(:hover, :focus-visible) { +.navbar-link:is(:hover, :focus-visible) { color: var(--oxford-blue); } @@ -396,30 +471,33 @@ body.nav-active { overflow: hidden; } position: fixed; top: 0; left: 0; - width: 100%; + width: 50%; height: 100vh; - background-color: var(--black); + background-color: white; + opacity: 0; visibility: hidden; transition: var(--transition); + /* z-index: 999; */ } .overlay.active { - opacity: 0.6; + opacity: 1; visibility: visible; + backdrop-filter: blur(15); } - - - - /*-----------------------------------*\ #HERO \*-----------------------------------*/ -.hero-banner { display: none; } +.hero-banner { + display: none; +} -.hero { padding-block-start: calc(var(--pt, 96px) + var(--section-padding)); } +.hero { + padding-block-start: calc(var(--pt, 96px) + var(--section-padding)); +} .hero .title-md { font-weight: var(--fw-500); @@ -441,15 +519,195 @@ body.nav-active { overflow: hidden; } gap: 12px; } +.button-container { + display: flex; + justify-content: center; + /* Center horizontally */ + align-items: center; + /* Center vertically */ + margin: 0; + /* Remove default margin */ + padding: 0; + /* Remove default padding */ +} + +.btn-primary { + position: relative; + /* Positioning for the arrows */ + padding: 10px 50px; + /* Add padding to make space for the arrows */ + transition: color 0.3s ease; + /* Smooth transition for text color */ + font-size: 16px; + /* Adjust font size as needed */ +} + +.btn-primary::after { + content: " ⪢"; + /* Two arrows as content */ + position: absolute; + /* Position it absolutely */ + right: 5px; + /* Position on the right side */ + top: 50%; + /* Center vertically */ + transform: translateY(-55%); + /* Adjust vertical position */ + opacity: 0; + /* Start with the arrows hidden */ + transition: opacity 0.3s ease; + /* Smooth transition for opacity */ +} + +.btn-primary:hover { + color: #ffffff; + /* Change text color on hover (optional) */ +} + +.btn-primary:hover::after { + opacity: 1; + /* Show the arrows on hover */ +} + +/*-----------------------------------*\ + #Feedback +\*-----------------------------------*/ + +.feedback-Section { + display: flex; + flex-direction: column; + border: 1px solid black; + padding: 3rem; +} + +.feedback-button { + position: fixed; + left: 20px; + bottom: 20px; + background-color: hsl(357, 100%, 75%); + color: white; + padding: 15px; + border-radius: 5px; + cursor: pointer; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + z-index: 1000; +} + +.feedback-modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + justify-content: center; + align-items: center; + z-index: 1000; +} + +.modal-content { + background-color: white; + padding: 20px; + border-radius: 5px; + width: 300px; + text-align: center; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} + +.emojis { + font-size: 30px; + margin: 20px 0; + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.emoji { + cursor: pointer; + margin: 0 10px; + transition: transform 0.2s; +} + +.emoji:hover { + transform: scale(1.2); +} + +.emoji.selected { + border: 1px solid black; + /* Highlight selected emoji */ + border-radius: 5px; +} + +.buttons { + display: flex; + align-items: center; + justify-content: space-between; +} + +textarea, +input[type="email"] { + width: 100%; + padding: 10px; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 4px; +} + +button { + background-color: #4caf50; + color: white; + border: none; + padding: 10px; + border-radius: 4px; + cursor: pointer; +} +button:hover { + background-color: #45a049; +} +.feedbackPopUp { + position: fixed; + transform: translate(120%); + transition: all 1s ease-in-out; + right: 20px; + bottom: 100px; + background-color: hsl(357, 100%, 75%); + color: white; + padding: 15px; + border-radius: 5px; + cursor: pointer; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + z-index: 1000; +} +.PopUpDisplay { + transition: all 1.5s ease-in-out; + transform: translate(0); +} /*-----------------------------------*\ #CATEGORY \*-----------------------------------*/ -.category .grid-list { padding-block: 40px 52px; } +.category .grid-list { + padding-block: 40px 52px; +} .category-card { display: flex; @@ -458,15 +716,65 @@ body.nav-active { overflow: hidden; } border-inline-start: 4px solid transparent; } -.category-card:is(:hover, :focus-within) { border-color: var(--light-coral); } +.category-card:is(:hover, :focus-within) { + border-color: var(--light-coral); +} + +.category-card .title-sm { + margin-block-start: 4px; +} + +.category .btn { + margin-inline: auto; +} + +#category-card1 { + transition: transform 0.3s ease; +} + +#category-card1:hover { + transform: scale(1.025); +} + +#category-card2 { + transition: transform 0.3s ease; +} + +#category-card2:hover { + transform: scale(1.025); +} + +#category-card3 { + transition: transform 0.3s ease; +} + +#category-card3:hover { + transform: scale(1.025); +} -.category-card .title-sm { margin-block-start: 4px; } +#category-card4 { + transition: transform 0.3s ease; +} -.category .btn { margin-inline: auto; } +#category-card4:hover { + transform: scale(1.025); +} +#category-card5 { + transition: transform 0.3s ease; +} +#category-card5:hover { + transform: scale(1.025); +} +#category-card6 { + transition: transform 0.3s ease; +} +#category-card6:hover { + transform: scale(1.025); +} /*-----------------------------------*\ #ABOUT @@ -478,7 +786,9 @@ body.nav-active { overflow: hidden; } } .about .section-text, -.progress-list li:not(:last-child) { margin-block-end: 32px; } +.progress-list li:not(:last-child) { + margin-block-end: 32px; +} .progress-label-wrapper { display: flex; @@ -517,15 +827,29 @@ body.nav-active { overflow: hidden; } width: 95%; } +/*-----------------------------------*\ + #COURSE +\*-----------------------------------*/ +.course .grid-list { + padding-block: 20px 44px; +} +.course .grid-list { + padding-block: 20px 44px; +} +.heading1 { + height: 200px; +} -/*-----------------------------------*\ - #COURSE -\*-----------------------------------*/ +.heading2 { + height: 206px; +} -.course .grid-list { padding-block: 20px 44px; } +.image2 { + height: 200px; +} .course-card { border-block-end: 4px solid transparent; @@ -534,7 +858,9 @@ body.nav-active { overflow: hidden; } gap: 24px; } -.course-card:is(:hover, :focus-within) { border-color: var(--light-coral); } +.course-card:is(:hover, :focus-within) { + border-color: var(--light-coral); +} .course-card .card-banner { height: 160px; @@ -553,21 +879,30 @@ body.nav-active { overflow: hidden; } gap: 16px; } -.course-card .card-price { color: var(--light-coral); } +.course-card .card-price { + color: var(--light-coral); +} -.course-card .rating-wrapper { gap: 4px; } +.course-card .rating-wrapper { + gap: 4px; +} -.course-card .card-title { margin-block: 8px 16px; } +.course-card .card-title { + margin-block: 8px 16px; +} -.course-card .card-meta { justify-content: flex-start; } +.course-card .card-meta { + justify-content: flex-start; +} .course-card .card-meta .title-sm { display: flex; gap: 8px; } -.course .btn { margin-inline: auto; } - +.course .btn { + margin-inline: auto; +} /*-----------------------------------*\ #CTA @@ -579,15 +914,12 @@ body.nav-active { overflow: hidden; } text-align: center; } -.cta .headline-md { color: var(--white); } - -.cta .btn { margin-inline: auto; +.cta .headline-md { color: var(--white); - background-color: var(--light-coral); } -.cta .btn:is(:hover, :focus-within) { - box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--light-coral); - } +#contact-form textarea::placeholder { + font-family: var(--ff-gilroy); +} .livecounting { margin-top: 100px; @@ -639,45 +971,291 @@ body.nav-active { overflow: hidden; } gap: 20px; } } +.cta .btn { + margin-inline: auto; + color: var(--white); + background-color: var(--light-coral); +} -/*-----------------------------------*\ - #BLOG -\*-----------------------------------*/ +.cta .btn:is(:hover, :focus-within) { + box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--light-coral); +} -.blog .grid-list { padding-block: 20px 44px; } +.parent { + display: flex; + justify-content: center; + /* Center horizontally */ + align-items: center; + /* Center vertically */ + height: 40vh; + /* Set parent height to fill the viewport */ +} -.blog-card { - border-block-end: 4px solid transparent; +.scroll-container h2 { display: flex; - flex-direction: column; - gap: 24px; + justify-content: center; + align-items: center; + margin: 30px; + color: black; } -.blog-card:is(:hover, :focus-within) { border-color: var(--light-coral); } +.scroll-container { + width: 100%; + max-width: 1100px; + margin-bottom: 40px; +} -.blog-card .card-banner { - height: 160px; - background-color: var(--light-gray); +.scroll { + position: relative; + display: flex; overflow: hidden; - border-radius: var(--radius-4); + -webkit-mask-image: linear-gradient( + 90deg, + transparent, + #fff 20%, + #fff 80%, + transparent + ); +} + +.scroll span img { + max-width: 30px; + margin-right: 8px; + border-radius: 50%; + vertical-align: middle; + /* Aligns the image vertically with the text */ } -.blog-card p{ - text-align: justify; +.scroll div { + white-space: nowrap; + animation: scroll var(--time) linear infinite; + animation-delay: calc(var(--time) * -1); +} + +.scroll div:nth-child(2) { + animation: scroll2 var(--time) linear infinite; + animation-delay: calc(var(--time) / -2); +} + +@keyframes scroll { + 0% { + transform: translateX(100%); + } + + 100% { + transform: translateX(-100%); + } +} + +@keyframes scroll2 { + 0% { + transform: translateX(0); + } + + 100% { + transform: translateX(-200%); + } +} + +.scroll div span { + display: inline-flex; + margin: 10px; + letter-spacing: 0.2em; + background: #c0bdbd; + color: #fff; + min-height: 40px; + padding: 5px 10px; + border-radius: 5px; + transition: 0.5s; +} + +.scroll div span:hover { + background: #3fd2f9; + cursor: pointer; +} + +.imgBox div { + display: flex; + align-items: center; + justify-content: center; +} + +.imgBox img { + max-width: 100px; + scale: 0.8; +} + +@media (max-width: 768px) { + .footerNav ul { + flex-direction: column; + } + + .footerNav ul li { + width: 100%; + text-align: center; + margin: 10px; + } +} + +@keyframes slide { + from { + transform: translateX(0); + } + + to { + transform: translateX(-100%); + } +} + +.outer-logos { + padding: 0 100px; +} + +.logos { + overflow: hidden; + padding: 60px 0; + background: white; + white-space: nowrap; + position: relative; +} + +.logos h1 { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 80px; +} + +.logos:hover .logos-slide { + animation-play-state: paused; +} + +.logos:before, +.logos:after { + position: absolute; + top: 0; + width: 250px; + height: 100%; + content: ""; + z-index: 2; +} + +.logos:before { + left: 0; + background: linear-gradient(to left, rgba(255, 255, 255, 0), white); +} + +.logos:after { + right: 0; + background: linear-gradient(to right, rgba(255, 255, 255, 0), white); +} + +.logos-slide { + display: inline-block; + animation: 15s slide infinite linear; + width: max-content; +} + +.logos-slide img { + height: 50px; + margin: 0 20px; +} + +@media screen and (max-width: 768px) { + .outer-logos { + padding: 0 40px; + } + + .logos-slide { + display: column; + width: max-content; + } + + .logos h1 { + font-size: 35px; + margin-bottom: 50px; + } + + .logos-slide img { + height: 40px; + margin: 8px 15px; + } +} + +@media screen and (max-width: 431px) { + .outer-logos { + padding: 0 20px; + } + + .logos:before, + .logos:after { + width: 110px; + } + + .logos-slide { + display: column; + width: max-content; + } + + .logos { + padding: 40px 0; + } + + .logos h1 { + font-size: 22px; + margin-bottom: 30px; + } + + .logos-slide img { + height: 30px; + margin: 0 10px; + } +} + +/*-----------------------------------*\ + #BLOG +\*-----------------------------------*/ + +.blog .grid-list { + padding-block: 20px 44px; +} + +.blog-card { + border-block-end: 4px solid transparent; + display: flex; + flex-direction: column; + gap: 24px; +} + +.blog-card:is(:hover, :focus-within) { + border-color: var(--light-coral); +} + +.blog-card .card-banner { + height: 160px; + background-color: var(--light-gray); + overflow: hidden; + border-radius: var(--radius-4); +} + +.blog-card p { + text-align: justify; margin: 13px auto; } -.blog .grid-list{ +.blog .grid-list { padding-top: 45px; padding-bottom: 50px; } -.blog-card a{ +.blog-card a { color: var(--light-coral); font-size: 20px; } -.blog .btn { margin-inline: auto; } +.blog .btn { + margin-inline: auto; +} /*-----------------------------------*\ #FOOTER @@ -689,138 +1267,147 @@ body.nav-active { overflow: hidden; } justify-content: space-around; } -.footer-logo-text{ +.footer-logo-text { display: flex; width: 300px; flex-direction: column; - } -.footer-text { margin-block: 40px 32px; } +.footer-text { + margin-block: 40px 32px; +} .social-list { display: flex; gap: 16px; } -.footer-list-title { margin-block-end: 32px; } +.footer-list-title { + margin-block-end: 32px; +} -.footer-link { margin-block-start: 16px; } +.footer-link { + margin-block-start: 16px; +} .footer-top .grid-list { grid-template-columns: repeat(3, 1fr); gap: 16px; } -#footer-logo{ - width:100px; - height:100px; +#footer-logo { + width: 100px; + height: 100px; +} + +.footer-top .grid-list .img-cover { + width: 80px; + height: 80px; + border-radius: var(--radius-6); } -.footer-top .grid-list .img-cover { - width:80px; - height:80px; - border-radius: var(--radius-6); } .footer-bottom { padding-block: 32px; text-align: center; border-block-start: 1px solid var(--black_10); } -.footer-link:is(:hover, :focus-visible) { + +.footer-link:is(:hover, :focus-visible) { color: var(--oxford-blue); } -.copyright { font-weight: var(--fw-500); } - +.copyright { + font-weight: var(--fw-500); +} #instapost1 { - transition: transform 0.3s ease; + transition: transform 0.3s ease; } #instapost1:hover { - transform: scale(1.15); + transform: scale(1.15); } #instapost2 { - transition: transform 0.3s ease; + transition: transform 0.3s ease; } #instapost2:hover { - transform: scale(1.15); + transform: scale(1.15); } #instapost3 { - transition: transform 0.3s ease; + transition: transform 0.3s ease; } #instapost3:hover { - transform: scale(1.15); + transform: scale(1.15); } #instapost4 { - transition: transform 0.3s ease; + transition: transform 0.3s ease; } #instapost4:hover { - transform: scale(1.15); + transform: scale(1.15); } #instapost5 { - transition: transform 0.3s ease; + transition: transform 0.3s ease; } #instapost5:hover { - transform: scale(1.15); + transform: scale(1.15); } #instapost6 { - transition: transform 0.3s ease; + transition: transform 0.3s ease; } #instapost6:hover { - transform: scale(1.15); + transform: scale(1.15); } - #footer-logo { - transition: transform 0.3s ease; + transition: transform 0.3s ease; } #footer-logo:hover { - transform: scale(1.05); + transform: scale(1.05); } #social-link1 { - transition: transform 0.3s ease; + transition: transform 0.3s ease; } #social-link1:hover { - transform: scale(1.1); + transform: scale(1.1); } #social-link2 { - transition: transform 0.3s ease; + transition: transform 0.3s ease; } #social-link2:hover { - transform: scale(1.1); + transform: scale(1.1); } #social-link3 { - transition: transform 0.3s ease; + transition: transform 0.3s ease; } #social-link3:hover { - transform: scale(1.1); + transform: scale(1.1); } #social-link4 { - transition: transform 0.3s ease; + transition: transform 0.3s ease; } #social-link4:hover { - transform: scale(1.1); + transform: scale(1.1); } + #social-link5 { transition: transform 0.3s ease; } @@ -829,11 +1416,6 @@ body.nav-active { overflow: hidden; } transform: scale(1.1); } - - - - - /*-----------------------------------*\ #CONTAINER QUERIES \*-----------------------------------*/ @@ -842,23 +1424,21 @@ body.nav-active { overflow: hidden; } * container query for card */ -.card-container { container-type: inline-size; } +.card-container { + container-type: inline-size; +} @container (min-width: 500px) { - - .course-card { flex-direction: row; } + .course-card { + flex-direction: row; + } .course-card .card-banner { width: 160px; flex-shrink: 0; } - } - - - - /*-----------------------------------*\ #MEDIA QUERIES \*-----------------------------------*/ @@ -868,7 +1448,6 @@ body.nav-active { overflow: hidden; } */ @media (min-width: 575px) { - /** * REUSED STYLE */ @@ -879,26 +1458,21 @@ body.nav-active { overflow: hidden; } margin-inline: auto; } - .card { padding: 32px; } - + .card { + padding: 32px; + } } - - - - /** * responsive for large than 768px screen */ @media (min-width: 768px) { - /** * CUSTOM PROPERTY */ :root { - /** * typography */ @@ -911,41 +1485,35 @@ body.nav-active { overflow: hidden; } */ --section-padding: 80px; - } - - /** * REUSED STYLE */ - .container { max-width: 768px; } - - .grid-list { grid-template-columns: 1fr 1fr; } - + .container { + max-width: 768px; + } + .grid-list { + grid-template-columns: 1fr 1fr; + } /** * CTA */ - .cta { padding-block: 78px; } - + .cta { + padding-block: 78px; + } } - - - - /** * responsive for large than 992px screen */ @media (min-width: 992px) { - :root { - /** * typography */ @@ -958,16 +1526,15 @@ body.nav-active { overflow: hidden; } */ --section-padding: 120px; - } - - /** * REUSED STYLE */ - .container { max-width: 1024px; } + .container { + max-width: 1024px; + } .btn { padding: 10px 22px; @@ -976,15 +1543,15 @@ body.nav-active { overflow: hidden; } color: #fff; } - - /** * HEADER */ .nav-open-btn, .overlay, - .navbar-top { display: none; } + .navbar-top { + display: none; + } .navbar, .navbar.active { @@ -997,32 +1564,34 @@ body.nav-active { overflow: hidden; } gap: 8px; } - .navbar-item:not(:last-child) { border-block-end: none; } + .navbar-item:not(:last-child) { + border-block-end: none; + } - .navbar-link { padding: 8px 16px; } + .navbar-link { + padding: 8px 16px; + } .header .btn { display: block; box-shadow: none; } - - /** * CATEGORY */ - .grid-list { grid-template-columns: repeat(3, 1fr); } - - + .grid-list { + grid-template-columns: repeat(3, 1fr); + } /** * ABOUT */ - .about .container { grid-template-columns: 1fr 1fr; } - - + .about .container { + grid-template-columns: 1fr 1fr; + } /** * COURSE @@ -1037,28 +1606,27 @@ body.nav-active { overflow: hidden; } * FOOTER */ - .footer-top .container { grid-template-columns: 1fr 0.5fr 0.5fr 0.8fr; } + .footer-top .container { + grid-template-columns: 1fr 0.5fr 0.5fr 0.8fr; + } - .footer-brand { padding-inline-end: 24px; } + .footer-brand { + padding-inline-end: 24px; + } } - - - - /** * responsive for large than 1200px screen */ @media (min-width: 1200px) { - /** * REUSED STYE */ - .container { max-width: 1170px; } - - + .container { + max-width: 1170px; + } /** * HERO @@ -1076,61 +1644,91 @@ body.nav-active { overflow: hidden; } gap: 48px; } - .hero .title-md { margin-block: 40px 60px; } - - + .hero .title-md { + margin-block: 40px 60px; + } /** * ABOUT */ - .about .container { grid-template-columns: 1fr 0.7fr; } - - + .about .container { + grid-template-columns: 1fr 0.7fr; + } /** * CTA */ - .cta { text-align: left; } + .cta { + text-align: left; + } - .cta .container { - display: flex; - justify-content: space-between; - align-items: center; + .cta .headline-md { + max-width: 22ch; } - .cta .headline-md { max-width: 22ch; } + .cta .btn { + margin-inline: 0; + } - .cta .btn { margin-inline: 0; } - .footer .container { gap: 48px; } + .footer .container { + gap: 1rem; + } +} +/* General dark mode settings */ +body.dark-mode .navbar { + background-color: var(--keppei); + /* Background color for navbar in dark mode */ + color: var(--white); + /* Text color */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + /* Optional shadow for better visibility */ } + body.dark-mode { background-color: var(--oxford-blue); - } -body.dark-mode .btn { +/* Navbar list background in dark mode */ +body.dark-mode.navbar { + background-color: var(--oxford-blue); + color: var(--white); +} + +/* Button styles in dark mode */ +body.dark-mode .navbar a:hover { background-color: var(--keppei); + color: var(--white); +} + +/* Hover effect for navbar buttons */ +body.dark-mode .navbar a { + color: var(--white); +} + +/* Other styles */ +body.dark-mode .btn:hover { + background-color: var(--white); color: var(--oxford-blue); } body.dark-mode #theme-toggle { background-color: var(--oxford-blue); - } body.dark-mode #theme-icon { color: var(--white); } -body.dark-mode h1{ + +body.dark-mode h1 { color: aliceblue; } #theme-toggle { /* position: fixed; */ - + background-color: var(--light-gray); border-radius: var(--radius-circle); padding: 10px; @@ -1147,11 +1745,64 @@ body.dark-mode h1{ color: var(--oxford-blue); } +body.dark-mode.navbar { + background-color: var(--oxford-blue); + color: var(--white); +} + +body.dark-mode .navbar a:hover { + background-color: var(--keppei); + color: var(--white); +} + +/* Navbar links in dark mode */ +body.dark-mode .navbar a { + color: var(--white); +} + +/* Hover effect in dark mode */ +body.dark-mode .btn:hover { + background-color: var(--white); + color: var(--oxford-blue); +} + +/* Default Light Theme (No box) */ +.navbar { + background-color: var(--light-background); + /* Light background for the navbar */ + color: var(--dark-text); + /* Dark text color */ + padding: 0; + /* No padding for box-less design */ + box-shadow: none; + /* No shadow in light mode */ + border-radius: 0; + /* No rounding */ +} + +.navbar-list { + padding: 0; + /* No padding */ + gap: 15px; + /* Keep spacing between items */ +} + +/* .navbar-link { + color: var(--white); + /* Dark text for visibility */ +/* } */ */ + +.navbar-link:hover { + background-color: var(--light-background-hover); + /* Highlight on hover */ + color: var(--dark-text); + /* Keep the text dark */ +} form { max-width: 400px; - margin: auto; } + input, textarea { width: 100%; @@ -1169,69 +1820,66 @@ button { border-radius: 5px; cursor: pointer; } + button:hover { background-color: #0056b3; } -@media(max-width:992px){ - .footer-logo-text{ - flex-direction: column; - width: fit-content; - align-items: center; - justify-content: center; - text-align: center; +@media (max-width: 1037px) { + .footer-logo-text { + flex-direction: column; + width: fit-content; + align-items: center; + justify-content: center; + text-align: center; } - - .footer-top .container{ - flex-direction: column; - justify-content: center; - align-items: center; - gap: 30px; - } - #theme-toggle{ - right:125px; - top:5px - - } + .footer-top .container { + flex-direction: column; + justify-content: center; + align-items: center; + gap: 30px; + } - + #theme-toggle { + right: 125px; + top: 5px; + } - /* Can be used if wanting a more linear Instagram post feed but as a viewer I like the grid better + /* Can be used if wanting a more linear Instagram post feed but as a viewer I like the grid better .footer-top .grid-list { grid-template-columns: repeat(6, 1fr); gap: 16px; } */ + .footer-list { + display: flex; + align-items: center; + justify-content: center; + width: fit-content; + gap: 30px; + width: max-content; + } - .footer-list{ - display: flex; - align-items: center; - justify-content: center; - width: fit-content; - gap: 30px; - width:max-content - } - .footer-list-title{ - display: none; - } - - .social-list{ - padding-top: 20px; - align-items: center; - justify-content: center; - } + .footer-list-title { + display: none; + } - ul.footer-list.instagram > li > p.footer-list-title { - display: block; - margin-bottom: 5px; -} + .social-list { + padding-top: 20px; + align-items: center; + justify-content: center; + } + ul.footer-list.instagram > li > p.footer-list-title { + display: block; + margin-bottom: 5px; + } } /* Search Bar */ -/* From Uiverse.io by OnlyCodeChannel */ -.navRightSide{ +/* From Uiverse.io by OnlyCodeChannel */ +.navRightSide { display: flex; justify-content: center; align-items: center; @@ -1245,7 +1893,8 @@ button:hover { align-items: center; justify-content: space-between; gap: 8px; - background: var(--black); + + background: white; border-radius: 50px; position: relative; } @@ -1257,90 +1906,268 @@ button:hover { width: 30px; height: 30px; border-radius: 50%; - background: var(--gradient-2, linear-gradient(90deg, var(--light-coral) 20%, var(--selective-yellow) 100%)); + background: var( + --gradient-2, + linear-gradient(90deg, var(--light-coral) 20%, var(--selective-yellow) 100%) + ); border: 0; display: inline-block; - transition: all 300ms cubic-bezier(.23, 1, 0.32, 1); + transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1); +} + +input.searchInput { + margin-left: 5px; } -.searchButton svg{ + +.searchButton svg { position: absolute; - top:5px; - right:3px; + top: 5px; + right: 3px; } + /*hover effect*/ .SearchBTN:hover { color: #fff; - background-color: #1A1A1A; + background-color: #1a1a1a; box-shadow: rgba(0, 0, 0, 0.5) 0 10px 20px; transform: translateY(-3px); } + /*button pressing effect*/ .SearchBTN:active { box-shadow: none; transform: translateY(0); } -.searchInput::placeholder{ - color: var(--light-coral) + +.searchInput::placeholder { + color: var(--light-coral); } + .searchInput { border: none; background: none; outline: none; - color: var(--light-coral); + color: black; font-size: 15px; - padding:8px; + padding: 8px; } -.svgxml -{ - position:absolute; - top:0; - left:0; +.svgxml { + position: absolute; + top: 0; + left: 0; } +@media (max-width: 768px) { + .footer-list li a.title-sm { + font-size: 1.3rem; + } + + .footer-list.instagram li p.headline-sm { + font-size: 1.7rem; + margin-top: 10px; + } + + .footer-top .container { + gap: 20px; + } + .footer-logo-text p.title-sm { + font-size: 1.3rem; + } + #footer-logo { + width: 60px; + height: 60px; + } +} -@media(max-width:768px) { +@media (max-width: 575px) { + .footer-list { + gap: 10px; + } .footer-list li a.title-sm { - font-size: 1.3rem; + font-size: 1rem; + } + + .footer-top .container { + gap: 15px; + } + + .social-list { + padding-top: 0; + } + + .footer-bottom p { + font-size: 1rem; + } } -.footer-list.instagram li p.headline-sm{ - font-size: 1.7rem; - margin-top:10px +.headline { + animation-name: pulse; + animation-duration: 2s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; } -.footer-top .container{ - gap: 20px; +@keyframes pulse { + 0% { + transform: translateY(-3.5px); + } + + 50% { + transform: translateY(0px); + } + + 100% { + transform: translateY(-3.5px); + } +} + +body { + background-color: #ffede7; +} + +.header1 { + animation-name: pulse1; + animation-duration: 2s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; } -.footer-logo-text p.title-sm{ - font-size: 1.3rem; +.header2 { + animation-name: pulse2; + animation-duration: 1.8s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; } -#footer-logo{ - width: 60px; - height: 60px; + +.header3 { + animation-name: pulse3; + animation-duration: 2s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; } + +.header4 { + animation-name: pulse4; + animation-duration: 1.8s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; } +.header5 { + animation-name: pulse5; + animation-duration: 2s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} -@media (max-width: 575px){ -.footer-list{ - gap:10px +.header6 { + animation-name: pulse6; + animation-duration: 1.8s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; } -.footer-list li a.title-sm { - font-size: 1.0rem; + +@keyframes pulse1 { + 0% { + transform: translateY(-3.5px); + } + + 50% { + transform: translateY(0px); + } + + 100% { + transform: translateY(-3.5px); + } } -.footer-top .container{ - gap: 15px; + +@keyframes pulse2 { + 0% { + transform: translateY(-5px); + } + + 50% { + transform: translateY(0px); + } + + 100% { + transform: translateY(-5px); + } +} + +@keyframes pulse3 { + 0% { + transform: translateY(-3.5px); + } + + 50% { + transform: translateY(0px); + } + + 100% { + transform: translateY(-3.5px); + } } -.social-list{ - padding-top: 0; + +@keyframes pulse4 { + 0% { + transform: translateY(-5px); + } + + 50% { + transform: translateY(0px); + } + + 100% { + transform: translateY(-5px); + } +} + +@keyframes pulse5 { + 0% { + transform: translateY(-3.5px); + } + + 50% { + transform: translateY(0px); + } + + 100% { + transform: translateY(-3.5px); + } +} + +@keyframes pulse6 { + 0% { + transform: translateY(-5px); + } + + 50% { + transform: translateY(0px); + } + + 100% { + transform: translateY(-5px); + } } -.footer-bottom p{ - font-size: 1.0rem; + +.card-banner { + margin-bottom: 15px; + /* Space between image and quote */ } + +.grid-list { + margin-top: 30px; + /* Space between heading and cards */ + margin-bottom: 30px; + /* Space below cards */ } +.testimonial-content { + margin-bottom: 10px; + /* Space between quote and name (optional) */ +} diff --git a/assets/images/.DS_Store b/assets/images/.DS_Store new file mode 100644 index 00000000..f2746ab7 Binary files /dev/null and b/assets/images/.DS_Store differ diff --git a/assets/images/IBM_logo.jpg b/assets/images/IBM_logo.jpg new file mode 100644 index 00000000..d4fba196 Binary files /dev/null and b/assets/images/IBM_logo.jpg differ diff --git a/assets/images/X-logo.svg b/assets/images/X-logo.svg index a2d3c017..7c56b5b5 100644 --- a/assets/images/X-logo.svg +++ b/assets/images/X-logo.svg @@ -1,20 +1 @@ - - - - - - - - - + \ No newline at end of file diff --git a/assets/images/adobe.jpg b/assets/images/adobe.jpg new file mode 100644 index 00000000..64f2afe9 Binary files /dev/null and b/assets/images/adobe.jpg differ diff --git a/assets/images/amazon_logo.jpg b/assets/images/amazon_logo.jpg new file mode 100644 index 00000000..f638b8b4 Binary files /dev/null and b/assets/images/amazon_logo.jpg differ diff --git a/assets/images/finance/Statistics.jpg b/assets/images/finance/Statistics.jpg new file mode 100644 index 00000000..ff289025 Binary files /dev/null and b/assets/images/finance/Statistics.jpg differ diff --git a/assets/images/finance/finance.jpg b/assets/images/finance/finance.jpg new file mode 100644 index 00000000..20f5d89b Binary files /dev/null and b/assets/images/finance/finance.jpg differ diff --git a/assets/images/finance/instrument.jpg b/assets/images/finance/instrument.jpg new file mode 100644 index 00000000..7c89c886 Binary files /dev/null and b/assets/images/finance/instrument.jpg differ diff --git a/assets/images/finance/management.jpg b/assets/images/finance/management.jpg new file mode 100644 index 00000000..4cc9a0a1 Binary files /dev/null and b/assets/images/finance/management.jpg differ diff --git a/assets/images/finance/security.jpg b/assets/images/finance/security.jpg new file mode 100644 index 00000000..1bcf068f Binary files /dev/null and b/assets/images/finance/security.jpg differ diff --git a/assets/images/google b/assets/images/google new file mode 100644 index 00000000..cb96f198 Binary files /dev/null and b/assets/images/google differ diff --git a/assets/images/marketing/digtal.jpg b/assets/images/marketing/digtal.jpg new file mode 100644 index 00000000..ef6f2adf Binary files /dev/null and b/assets/images/marketing/digtal.jpg differ diff --git a/assets/images/marketing/email.jpg b/assets/images/marketing/email.jpg new file mode 100644 index 00000000..5f5bef52 Binary files /dev/null and b/assets/images/marketing/email.jpg differ diff --git a/assets/images/marketing/seo.jpg b/assets/images/marketing/seo.jpg new file mode 100644 index 00000000..ed5443b3 Binary files /dev/null and b/assets/images/marketing/seo.jpg differ diff --git a/assets/images/marketing/social.jpg b/assets/images/marketing/social.jpg new file mode 100644 index 00000000..feefe33d Binary files /dev/null and b/assets/images/marketing/social.jpg differ diff --git a/assets/images/marketing/web.jpg b/assets/images/marketing/web.jpg new file mode 100644 index 00000000..07fda3dd Binary files /dev/null and b/assets/images/marketing/web.jpg differ diff --git a/assets/images/meta_logo.jpg b/assets/images/meta_logo.jpg new file mode 100644 index 00000000..821034d8 Binary files /dev/null and b/assets/images/meta_logo.jpg differ diff --git a/assets/images/modern-physics/cosmology.jpg b/assets/images/modern-physics/cosmology.jpg new file mode 100644 index 00000000..9725fa0a Binary files /dev/null and b/assets/images/modern-physics/cosmology.jpg differ diff --git a/assets/images/modern-physics/modernphysics.jpg b/assets/images/modern-physics/modernphysics.jpg new file mode 100644 index 00000000..b8cb5988 Binary files /dev/null and b/assets/images/modern-physics/modernphysics.jpg differ diff --git a/assets/images/modern-physics/nuclear.jpg b/assets/images/modern-physics/nuclear.jpg new file mode 100644 index 00000000..3df1c365 Binary files /dev/null and b/assets/images/modern-physics/nuclear.jpg differ diff --git a/assets/images/modern-physics/quantum.jpg b/assets/images/modern-physics/quantum.jpg new file mode 100644 index 00000000..5f5969c7 Binary files /dev/null and b/assets/images/modern-physics/quantum.jpg differ diff --git a/assets/images/modern-physics/relativity.jpg b/assets/images/modern-physics/relativity.jpg new file mode 100644 index 00000000..e7d2fcee Binary files /dev/null and b/assets/images/modern-physics/relativity.jpg differ diff --git a/assets/images/music/Recording.jpg b/assets/images/music/Recording.jpg new file mode 100644 index 00000000..348dbac1 Binary files /dev/null and b/assets/images/music/Recording.jpg differ diff --git a/assets/images/music/composition.jpg b/assets/images/music/composition.jpg new file mode 100644 index 00000000..22997feb Binary files /dev/null and b/assets/images/music/composition.jpg differ diff --git a/assets/images/music/editing.jpg b/assets/images/music/editing.jpg new file mode 100644 index 00000000..32920421 Binary files /dev/null and b/assets/images/music/editing.jpg differ diff --git a/assets/images/music/music.jpg b/assets/images/music/music.jpg new file mode 100644 index 00000000..dae57603 Binary files /dev/null and b/assets/images/music/music.jpg differ diff --git a/assets/images/music/sound.jpg b/assets/images/music/sound.jpg new file mode 100644 index 00000000..71d427f4 Binary files /dev/null and b/assets/images/music/sound.jpg differ diff --git a/assets/images/reddit.jpg b/assets/images/reddit.jpg new file mode 100644 index 00000000..87f32b4a Binary files /dev/null and b/assets/images/reddit.jpg differ diff --git a/assets/images/salesforce_logo.jpg b/assets/images/salesforce_logo.jpg new file mode 100644 index 00000000..abc011a0 Binary files /dev/null and b/assets/images/salesforce_logo.jpg differ diff --git a/assets/images/target_logo.jpg b/assets/images/target_logo.jpg new file mode 100644 index 00000000..5db86bec Binary files /dev/null and b/assets/images/target_logo.jpg differ diff --git a/assets/images/testimonials/student1.jpg b/assets/images/testimonials/student1.jpg new file mode 100644 index 00000000..a4e19f87 Binary files /dev/null and b/assets/images/testimonials/student1.jpg differ diff --git a/assets/images/testimonials/student2.jpg b/assets/images/testimonials/student2.jpg new file mode 100644 index 00000000..e83e1190 Binary files /dev/null and b/assets/images/testimonials/student2.jpg differ diff --git a/assets/images/testimonials/student3.jpg b/assets/images/testimonials/student3.jpg new file mode 100644 index 00000000..3ce77ae1 Binary files /dev/null and b/assets/images/testimonials/student3.jpg differ diff --git a/assets/images/twitter.png b/assets/images/twitter.png new file mode 100644 index 00000000..432a3aa3 Binary files /dev/null and b/assets/images/twitter.png differ diff --git a/assets/images/youtube.jpg b/assets/images/youtube.jpg new file mode 100644 index 00000000..49fa67c3 Binary files /dev/null and b/assets/images/youtube.jpg differ diff --git a/assets/js/blog.js b/assets/js/blog.js new file mode 100644 index 00000000..3ba8547c --- /dev/null +++ b/assets/js/blog.js @@ -0,0 +1,39 @@ +const blogs = [ + { + title: "Blog Title 1", + description: "Short description of Blog 1.", + image: "../assets/images/blog1.jpg", // Path to your image + link: "/pages/blog1.html", // Link to the full blog post + }, + { + title: "Blog Title 2", + description: "Short description of Blog 2.", + image: "../assets/images/blog2.jpg", // Path to your image + link: "/pages/blog2.html", // Link to the full blog post + }, + // Add more blog entries as needed + ]; + + // Function to display blogs + function displayBlogs() { + const blogList = document.querySelector(".grid-list"); + blogs.forEach(blog => { + const blogCard = document.createElement("li"); + blogCard.classList.add("blog-card"); + + blogCard.innerHTML = ` + + ${blog.title} +

${blog.title}

+

${blog.description}

+ + `; + + blogList.appendChild(blogCard); + }); + } + + // Call the function to display blogs when the page loads + window.onload = displayBlogs; + + \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index 19defdb6..8ac10063 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -33,17 +33,26 @@ window.addEventListener("load", function () { * NAVBAR TOGGLER FOR MOBILE */ +// Select elements const navbar = document.querySelector("[data-navbar]"); const navTogglers = document.querySelectorAll("[data-nav-toggler]"); const overlay = document.querySelector("[data-overlay]"); -const toggleNavbar = function () { +// Function to toggle the 'active' class on navbar, overlay, and body +const toggleNavbar = () => { navbar.classList.toggle("active"); overlay.classList.toggle("active"); document.body.classList.toggle("nav-active"); } -addEventOnElements(navTogglers, "click", toggleNavbar); +// Attach click event to each nav-toggler element +navTogglers.forEach(toggler => toggler.addEventListener("click", toggleNavbar)); + + +document.querySelector("[data-nav-toggler]").addEventListener("click", function() { + document.body.classList.toggle("nav-active"); +}); + @@ -67,4 +76,78 @@ const headerActive = function () { document.getElementById('year').textContent = new Date().getFullYear(); -window.addEventListener("scroll", headerActive); \ No newline at end of file +window.addEventListener("scroll", headerActive); + + +// Feedback Section +let selectedEmotion = ''; + +document.getElementById('feedbackButton').onclick = function() { + document.getElementById('feedbackModal').style.display = 'flex'; +} + +document.getElementById('closeModal').onclick = function() { + document.getElementById('feedbackModal').style.display = 'none'; +} + +document.getElementById('nextToFeedback').onclick = function() { + const selectedEmoji = document.querySelector('.emoji.selected'); + if (!selectedEmoji) { + alert('Please select an emotion!'); + return; + } + selectedEmotion = selectedEmoji.dataset.value; + document.getElementById('step1').style.display = 'none'; + document.getElementById('step2').style.display = 'block'; +} + +document.querySelectorAll('.emoji').forEach(emoji => { + emoji.onclick = function() { + document.querySelectorAll('.emoji').forEach(e => e.classList.remove('selected')); + emoji.classList.add('selected'); + } +}); + +document.getElementById('nextToEmail').onclick = function() { + if (!document.getElementById('feedback').value) { + alert('Please provide your feedback!'); + return; + } + document.getElementById('step2').style.display = 'none'; + document.getElementById('step3').style.display = 'block'; +} + +document.getElementById('backToEmoji').onclick = function() { + document.getElementById('step2').style.display = 'none'; + document.getElementById('step1').style.display = 'block'; +} + +document.getElementById('backToFeedback').onclick = function() { + document.getElementById('step3').style.display = 'none'; + document.getElementById('step2').style.display = 'block'; +} + +window.onload = () => { + if (sessionStorage.getItem('showPopUp') === 'true') { + popUpDisplay(); + sessionStorage.removeItem('showPopUp'); + } +}; + +document.getElementById('feedbackForm').onsubmit = function(event) { + event.preventDefault(); + document.getElementById('feedbackForm').reset(); + document.getElementById('feedbackModal').style.display = 'none'; + + sessionStorage.setItem('showPopUp', 'true'); // Set a flag to show pop-up after reload + window.location.reload(); +}; + +const popUpDisplay = () => { + setTimeout(() => { + document.querySelector('.feedbackPopUp').style.transform = 'translate(0)'; + setTimeout(() => { + document.querySelector('.feedbackPopUp').style.transform = 'translate(120%)'; + }, 3000); + }, 1000); +}; \ No newline at end of file diff --git a/courses.png b/courses.png new file mode 100644 index 00000000..b5d3d3ef Binary files /dev/null and b/courses.png differ diff --git a/data-science.html b/data-science.html index 73746733..7db2fe0d 100644 --- a/data-science.html +++ b/data-science.html @@ -18,7 +18,7 @@

Explore Courses

- Data Science Courses +
Data Science Courses

@@ -44,10 +44,12 @@

Introduction to Data Science

  • -
    - +
    + + Data Analysis with Python course overview image -
    +

    Data Analysis with Python

    Duration: 6 weeks

    @@ -57,9 +59,9 @@

    Data Analysis with Python

  • -
    -
    - +
    + Data Visualization with Tableau course overview image
    @@ -72,10 +74,10 @@

    Data Visualization with Tableau

  • -
    +
    Machine Learning Basics course overview image -
    +

    Machine Learning Basics

    Duration: 8 weeks

    diff --git a/email.js b/email.js new file mode 100644 index 00000000..c0dda793 --- /dev/null +++ b/email.js @@ -0,0 +1,18 @@ +// Initialize EmailJS service with the user ID +(function () { + emailjs.init(CONFIG.USER_ID_KEY); + })(); + + // Function to handle the form submission and send email + document.getElementById('contact-form').addEventListener('submit', function (event) { + event.preventDefault(); // Prevent the default form submission + + // Send email via EmailJS + emailjs.sendForm(CONFIG.SERVICE_ID, CONFIG.TEMPLATE_ID_KEY, this) + .then(function () { + alert('Email sent successfully!'); // Success message + }, function (error) { + alert('Failed to send email. Error: ' + JSON.stringify(error)); // Error message + }); + }); + \ No newline at end of file diff --git a/finance.html b/finance.html new file mode 100644 index 00000000..b1087b2e --- /dev/null +++ b/finance.html @@ -0,0 +1,105 @@ + + + + + + Finances Courses | Learn Finances + + + + + + +
    +
    + +

    Explore Courses

    + +

    + Introduction to Finances Courses +

    + +

    + Understanding finances is key to managing your money effectively. From budgeting and saving to investing and planning for the future, financial literacy helps you make informed decisions. Explore courses on personal finance, wealth management, and financial planning to secure your financial well-being. +

    + +
      +
    • +
      +
      + Introduction to Finances course overview image +
      +
      +

      Introduction to Finances

      +

      Duration: 4 weeks

      +
      + +
      +
      • + +
    • +
      +
      + Financial securities image +
      +
      +

      Financial securities

      +

      Duration: 6 weeks

      +
      + +
      +
      • + +
    • +
      +
      + Learn Financial instruments overview image +
      +
      +

      Financial instruments

      +

      Duration: 5 weeks

      +
      + +
      +
      • + +
    • +
      +
      + Portfolio management course overview image +
      +
      +

      Portfolio management

      +

      Duration: 8 weeks

      +
      + +
      +
      • + +
    • +
      +
      + Statistics course overview image +
      +
      +

      Statistics

      +

      Duration: 10 weeks

      +
      + +
      +
      • + +
    + + Enroll in a Course + + +
    +
    + + \ No newline at end of file diff --git a/home.png b/home.png new file mode 100644 index 00000000..c37bf010 Binary files /dev/null and b/home.png differ diff --git a/index.html b/index.html index f64c1ff8..bb7c10f4 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,8 @@ - primary meta tags --> - + + SkillWise @@ -46,7 +47,7 @@ - + -
    - -
    + +
    SkillWise home -
    -
    - - -
    - + + +
    - Start Free Trial + +
    + Start Free Trial
    - -
    @@ -186,14 +206,14 @@

    Better Learning Future Starts With SkillWise

    -

    +

    It is long established fact that reader distracted by the readable content.

    Get Started Now - +
    @@ -206,6 +226,50 @@

    • + +
    Feedback
    +
    +
    + × +

    We Value Your Feedback

    +
    +
    +

    How do you feel?

    +
    + 😀 + 😐 + 😢 +
    + +
    + + + + +
    +
    +
    + + +
    + Thank you for your Feedback +
    @@ -213,20 +277,20 @@

    - #CATEGORY --> -
    +
    -

    Course Categories

    +

    + Course Categories

    - Browse Top Categories +
    Browse Top Categories

    • -
      +
      Data Science

    68 Courses

    - +
  • -
    +
    UI/UX Design
  • -
    +
    Modern Physics

    68 Courses

    - +
  • -
    +
    Music Production

    68 Courses

    - +
  • -
    +
    Digital Marketing

    68 Courses

    - +
  • -
    +
    Finances icon @@ -333,14 +397,18 @@

    Finances

    68 Courses

    - +
    • - View All Categories +
    + + View All Categories + +
    @@ -356,18 +424,15 @@

    Finances

    -
    +
    about banner
    -
    +
    -

    About SkillWise

    +

    About + SkillWise

    We Provide The Best Online Education @@ -375,7 +440,7 @@

    There are numerous versions of educational content available, but the majority have suffered alteration - in some form, by injected humour. + in some form, by injected humour.

    +
    + + View All Courses + +

    @@ -803,88 +881,388 @@

    + +
    +
    +

    Trusted by Organizations

    +
    +
    + google LogoGoogle + youtube LogoYoutube + twitter LogoTwitter + reddit LogoReddit + ibm LogoIBM + target LogoTarget + salesforce_logo LogoSalesforce + meta LogoMeta + amazon LogoAmazon + adobe LogoAdobe +
    +
    + google LogoGoogle + youtube LogoYoutube + twitter LogoTwitter + reddit LogoReddit + ibm LogoIBM + target LogoTarget + salesforce_logo LogoSalesforce + meta LogoMeta + amazon LogoAmazon + adobe LogoAdobe +
    +
    +
    +
    + google LogoGoogle + youtube LogoYoutube + twitter LogoTwitter + reddit LogoReddit + ibm LogoIBM + target LogoTarget + salesforce_logo LogoSalesforce + meta LogoMeta + amazon LogoAmazon + adobe LogoAdobe +
    +
    + google LogoGoogle + youtube LogoYoutube + twitter LogoTwitter + reddit LogoReddit + ibm LogoIBM + target LogoTarget + salesforce_logo LogoSalesforce + meta LogoMeta + amazon LogoAmazon + adobe LogoAdobe +
    +
    +
    +
    + + -
    +
    -
    +

    Featured Blogs

    - Learn with Articles +
    Learn with Articles

      -
    • -
      -
      - +
      +
      +
      + Basic Fundamentals of Interior & Graphics Design +
      +
      +

      + The Future of Data Science: Trends and Opportunities +

      +

      Explore the emerging trends in data science and how they are shaping industries + globally.

      + Read More ... +
      +
      +
      +
      • +
    • +
      +
      +
      + Basic Fundamentals of Interior & Graphics Design +
      +
      +

      + Marketing in the Digital Age: Strategies that Work +

      +

      Discover how digital marketing is evolving with new platforms and technologies. +

      + Read More ... +
      +
      +
      +
      • +
    • +
      +
      +
      + Basic Fundamentals of Interior & Graphics Design +
      +
      +

      + Creative Journey: A Guide to Graphic Design Success +

      +

      Learn how to navigate the world of graphic design, from basic principles to + advanced techniques.

      + Read More ... +
      +
      +
      +
      • +
    + +
    + + View All Blogs + +
    + +
    +
    + + + + + +
    + +
    + +

    Pricing Plans

    + +

    +
    Select a Plan for better Learning
    +

    + +
      +
    • +
      +
      + +
      +

      + Personal Plan +

      +
      Starting at $850.00 per month. +

      + Billed monthly or annually. + Cancel anytime. +

      + +
      +
        + +
      • -> Access to top courses
        • +
      • -> Certification prep
        • +
      • -> Goal-focused recommendations
        • +
      • -> AI-powered Suggestions
        • +
      • -> Courses available in 15 languages
        • +
      • -> Lifelong access to featured courses
        • +
      • -> Courses available in 15 languages
        • + +
      +
      + Subscribe Now +
      +
      +
      +
      • +
    • +
      +
      + +
      +

      + Team Plan +

      +
      Starting at $1,167.00 per month. +

      + Billed monthly or annually. + Cancel anytime. +

      + +
      +
        + +
      • -> Access to top courses
        • +
      • -> Certification prep
        • +
      • -> Goal-focused recommendations
        • +
      • -> AI-powered Suggestions
        • +
      • -> Analytics and adoption reports
        • +
      • -> Courses available in 15 languages
        • +
      • -> Lifelong access to featured courses
        • + +
      +
      + Subscribe Now +
      +
      +
      +
      • +
    • +
      +
      +
      +

      + Enterprise Plan +

      +
      Starting at $2,000.00 per month. +

      + Billed monthly or annually. + Cancel anytime. +

      + +
      +
        + +
      • -> Access to top courses
        • +
      • -> Certification prep
        • +
      • -> Customizable Goal-focused recommendations
        • +
      • -> AI-powered Suggestions and Customizable implementation services
        • +
      • -> Analytics and adoption reports
        • + +
      +
      + Subscribe Now +
      +
      +
      +
      • +
    + + +
    +
    + + + +
    + +
    +

    What People Say

    + +

    + Hear from Our Clients +

    + +
      +
    • +
      +
      + Person giving testimonial
      -

      - The Future of Data Science: Trends and Opportunities -

      -

      Explore the emerging trends in data science and how they are shaping industries globally.

      - Read More ... +

      "The service was exceptional and exceeded all my expectations!"

      +

      John Doe

      • -
    • -
      +
    • +
      - Basic Fundamentals of Interior & Graphics Design + Person giving testimonial
      -

      - Marketing in the Digital Age: Strategies that Work -

      -

      Discover how digital marketing is evolving with new platforms and technologies.

      - Read More ... +

      "Outstanding service with exceptional attention to detail and + professionalism!"

      +

      Jane Smith

      • -
    • -
      +
    • +
      - Basic Fundamentals of Interior & Graphics Design + Person giving testimonial
      -

      - Creative Journey: A Guide to Graphic Design Success -

      -

      Learn how to navigate the world of graphic design, from basic principles to advanced techniques.

      - Read More ... +

      "Amazing experience! I felt heard and valued as a customer. Will + definitely return!"

      +

      Emily Johnson

    - View All Blogs + See All Testimonials +
    + +
    + +
    +
    +

    Upcoming Workshops

    + +

    + Join Our Skill Development Events +

    + +
    + +
    +
    +

    Oct

    +

    20

    +
    +
    +

    Web Development Bootcamp

    +

    Join our intensive bootcamp to learn HTML, CSS, and JavaScript in just one week!

    +
    + View Event +
    + + +
    +
    +

    Nov

    +

    05

    +
    +
    +

    Data Science Workshop

    +

    Discover the world of data science with hands-on projects and expert guidance.

    +
    + View Event +
    + + +
    +
    +

    Dec

    +

    15

    +
    +
    +

    Creative Design Thinking

    +

    Learn innovative design principles and enhance your creative problem-solving skills.

    +
    + View Event +
    +
    + + View All Workshops
    + + + + - -