From 42533622479f4ea2f0e0cc750e75b078c5c730b7 Mon Sep 17 00:00:00 2001 From: Vikas Kushwaha Date: Sat, 14 Dec 2024 12:54:28 +0530 Subject: Repo purpose changed --- divine/README.md | 3 + divine/index.html | 178 ++++++++++++++++++++ divine/logo.jpeg | Bin 0 -> 27170 bytes divine/script.js | 43 +++++ divine/styles.css | 481 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 705 insertions(+) create mode 100644 divine/README.md create mode 100644 divine/index.html create mode 100644 divine/logo.jpeg create mode 100644 divine/script.js create mode 100644 divine/styles.css (limited to 'divine') diff --git a/divine/README.md b/divine/README.md new file mode 100644 index 0000000..9de7829 --- /dev/null +++ b/divine/README.md @@ -0,0 +1,3 @@ +This website is for Divine classes. + +Build by Deepak Yadav. diff --git a/divine/index.html b/divine/index.html new file mode 100644 index 0000000..3002b68 --- /dev/null +++ b/divine/index.html @@ -0,0 +1,178 @@ + + + + + + Divine Classes + + + + + + +

Divine Classes

Scholar's Hub Since 2005

+ +

+ + + +

Welcome to Divine Classes

Your one-stop solution for quality education.

+ Explore Services +

+ +

Our Features

Academic Discipline

Maintaining a structured and effective learning environment.

Individual Doubt Clearance

Personalized attention to clear all your academic doubts.

Weekly Test Series

Regular assessments to track and improve performance.

Regular Revision Session

Consistent revision sessions to reinforce concepts and improve retention.

Modern Infrastructure

State-of-the-art facilities and a comfortable learning environment.

+ + +

Our Courses

English Speaking Course

Enhance your communication skills for all age groups.

+ +

Private Tuition

Get personalized coaching from experienced educators.

+ +

V-X Curriculum

Specialized coaching for students in classes V-X for all subjects.

+ +

ICSE

In-depth coaching for ICSE students to excel in their exams.

+ +

CBSE

Tailored coaching for CBSE students to achieve academic success.

+ +

SSC

Comprehensive coaching for SSC students to prepare for board exams.

+ +

What Our Students Say

"Divine Classes helped me achieve my academic goals. The tutors are amazing!"

- A Happy Student

"The study materials are very comprehensive and easy to understand."

- Another Student

+ +

Frequently Asked Questions

+ + +

What courses do you offer?

We offer a variety of courses, including science, mathematics, language learning, and preparation for competitive exams.

+ + +

Do you provide study materials?

Yes, we provide comprehensive study materials, including notes, practice questions, and sample papers.

+ + +

Are the classes available online?

Yes, we offer both online and offline classes to suit the convenience of our students.

+ + +

How can I contact the faculty?

You can contact faculty members directly through email or via contact number.

+ + +

Contact Us

Linu Mathews
C.E.O

Anoop Singh
Professor

Vinayak Kadam
Administration

+ + +

Address: + + Shop No. A 02, Meera Avenue, Beside Agarwal Exotica, Yashwant Smart City, Near Vasai IGS School, Vasai (E) + +

Email: + linu@divineclasses.in +

Phone: + 88884 44476 | + 88884 44418 | + 86059 20081 | + 92267 55438 +

+ + + + +

+ ↑ +

+ + + diff --git a/divine/logo.jpeg b/divine/logo.jpeg new file mode 100644 index 0000000..711a4cb Binary files /dev/null and b/divine/logo.jpeg differ diff --git a/divine/script.js b/divine/script.js new file mode 100644 index 0000000..ec6a283 --- /dev/null +++ b/divine/script.js @@ -0,0 +1,43 @@ +// JavaScript to trigger scroll-based animations +window.addEventListener("scroll", function () { + const elements = document.querySelectorAll(".hero-section, .features, .courses, .testimonials, .contact-section"); + elements.forEach(function (element) { + if (element.getBoundingClientRect().top < window.innerHeight) { + element.classList.add("visible"); + } + }); +}); + +document.addEventListener("DOMContentLoaded", function() { + const faqItems = document.querySelectorAll(".faq-item"); + + faqItems.forEach(item => { + item.querySelector(".faq-question").addEventListener("click", () => { + item.classList.toggle("active"); + }); + }); +}); + + +// Get the button +const scrollToTopButton = document.getElementById("scroll-to-top"); + +// When the user scrolls down 100px from the top of the document, show the button +window.onscroll = function() { + if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) { + scrollToTopButton.style.display = "block"; + } else { + scrollToTopButton.style.display = "none"; + } +}; + +// When the user clicks on the button, scroll to the top of the document +scrollToTopButton.addEventListener("click", function() { + window.scrollTo({ + top: 0, + behavior: "smooth" // Smooth scroll effect + }); +}); + + + diff --git a/divine/styles.css b/divine/styles.css new file mode 100644 index 0000000..7ca4ce5 --- /dev/null +++ b/divine/styles.css @@ -0,0 +1,481 @@ +/* Global Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Arial, sans-serif; +} + +/* Smooth scrolling animation */ +html { + scroll-behavior: smooth; +} + +/* Header Styles */ +header { + background: linear-gradient(90deg, #007BFF, #FF6F00); + color: white; + padding: 20px 10%; + display: flex; + flex-direction: column; /* Stack logo and navigation vertically */ + align-items: flex-start; /* Align to the left */ + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +/* Logo Styles */ +header .logo { + display: flex; + align-items: center; /* Align the logo image and text horizontally */ + justify-content: flex-start; /* Align the logo to the left */ + width: 100%; + margin-bottom: 10px; /* Space between the logo and navigation */ +} + +header .logo-img { + width: 80px; /* Adjust the size of the logo */ + height: auto; + margin-right: 15px; /* Space between logo image and text */ +} + +header .logo h1 { + font-size: 2rem; + font-weight: bold; +} + +header .logo p { + font-size: 0.9rem; +} + +/* Navigation Styles */ +header .nav { + display: flex; + justify-content: right; /* Center align the navigation links */ + width: 100%; /* Ensure full width for navigation */ + margin-top: 10px; /* Space above navigation */ + flex-wrap: wrap; /* Allow items to wrap on small screens */ + gap: 15px; /* Space between links */ +} + +header .nav a { + text-decoration: none; + color: white; + font-weight: bold; + transition: color 0.3s; +} + +header .nav a:hover { + color: #ffe08a; +} + +/* Responsive Design: Stack logo on top and nav below */ +@media (max-width: 768px) { + header { + padding: 20px 5%; + text-align: center; /* Center align everything on small screens */ + } + + header .logo { + justify-content: center; /* Center the logo on small screens */ + margin-bottom: 20px; /* More space between the logo and nav */ + } + + header .logo h1 { + font-size: 1.8rem; /* Slightly smaller font size for logo text */ + } + + header .logo p { + font-size: 0.8rem; /* Slightly smaller font size for logo description */ + } + + header .nav { + justify-content: center; /* Center the navigation */ + width: 100%; + } + + header .nav a { + font-size: 1.1rem; /* Slightly bigger nav links */ + } +} + + + +/* Hero Section */ +.hero-section { + text-align: center; + padding: 100px 20px; + background: #007BFF; + color: white; + clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); +} + +.hero-section h2 { + font-size: 3rem; + margin-bottom: 20px; +} + +.hero-section p { + font-size: 1.2rem; + margin-bottom: 30px; +} + +.cta-button { + background-color: #FF6F00; + color: white; + padding: 10px 20px; + font-size: 1rem; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; + text-decoration: none; +} + +.cta-button:hover { + background-color: #cc5800; +} + +/* Features Section */ +.features { + background-color: #f4f4f4; + padding: 60px 10%; + text-align: center; +} + +.features h2 { + color: #007BFF; + margin-bottom: 30px; +} + +.features-list { + display: flex; + justify-content: space-between; + gap: 20px; + flex-wrap: wrap; +} + +.feature-item { + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + flex: 1; + min-width: 250px; + transition: transform 0.3s; +} + +.feature-item:hover { + transform: translateY(-10px); +} + +/* Courses Section */ +.courses { + background-color: white; + padding: 60px 10%; +} + +.courses h2 { + color: #FF6F00; + margin-bottom: 30px; + text-align: center; +} + +.course-list { + display: flex; + justify-content: space-between; + gap: 20px; + flex-wrap: wrap; +} + +.course-item { + background: #f4f4f4; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + flex: 1; + min-width: 250px; + transition: transform 0.3s; +} + +.course-item a { + display: inline-block; + margin-top: 10px; + color: #007BFF; + text-decoration: none; + font-weight: bold; +} + +.course-item:hover { + transform: translateY(-10px); +} + +/* Testimonials Section */ +.testimonials { + background-color: #007BFF; + color: white; + text-align: center; + padding: 60px 20px; +} + +.testimonials h2 { + margin-bottom: 30px; +} + +.testimonial { + background: white; + color: #333; + margin: 20px auto; + padding: 20px; + border-radius: 10px; + max-width: 600px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +/* FAQ Section Styles */ +.faq { + background-color: #f4f4f4; + padding: 60px 10%; + text-align: center; +} + +.faq h2 { + color: #FF6F00; + margin-bottom: 30px; + font-size: 2rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; +} + +.faq-item { + background-color: white; + margin-bottom: 20px; + padding: 15px; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.faq-item:hover { + transform: translateY(-5px); + box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); +} + +.faq-question { + font-size: 1.2rem; + font-weight: 600; + color: #007BFF; + cursor: pointer; + transition: color 0.3s ease; +} + +.faq-answer { + font-size: 1rem; + color: #555; + margin-top: 10px; + display: none; + line-height: 1.6; +} + +/* Hover effect on question */ +.faq-question:hover { + color: #FF6F00; +} + +/* On clicking the question (toggle the answer) */ +.faq-item.active .faq-answer { + display: block; +} + +/* Mobile responsiveness */ +@media (max-width: 768px) { + .faq { + padding: 40px 5%; + } + + .faq h2 { + font-size: 1.8rem; + } + + .faq-item { + padding: 12px; + } + + .faq-question { + font-size: 1rem; + } + + .faq-answer { + font-size: 0.9rem; + } +} + + +/* Contact Section Styles */ +.contact-section { + background-color: white; + padding: 60px 10%; + text-align: center; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + border-radius: 10px; + transition: box-shadow 0.3s ease-in-out; +} + +.contact-section:hover { + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); +} + +.contact-section h2 { + color: #007BFF; + margin-bottom: 20px; + font-size: 2rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; +} + +.contact-section a { + color: #FF6F00; + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease-in-out; +} + +.contact-section a:hover { + color: #cc5800; + text-decoration: underline; +} + +.contact-section p { + font-size: 1.1rem; + margin-bottom: 15px; + line-height: 1.6; + color: #555; +} + +.contact-section strong { + font-weight: bold; + color: #007BFF; +} + +/* Responsive Styles for Contact Section */ +@media (max-width: 768px) { + .contact-section { + padding: 40px 5%; + } + + .contact-section h2 { + font-size: 1.8rem; + } + + .contact-section p { + font-size: 1rem; + } +} + + + +/* Footer Section */ +footer { + background-color: #007BFF; + color: white; + text-align: center; + padding: 20px 0; +} + +/* Responsive Design for Smaller Screens */ +@media (max-width: 768px) { + header { + flex-direction: column; + text-align: center; + } + + .features-list, .course-list { + flex-direction: column; + } + + .cta-button { + padding: 12px 30px; + font-size: 1.2rem; + } + + .contact-form input, + .contact-form textarea { + width: 90%; + } +} + +/* Scroll to Top Button */ +.scroll-to-top { + position: fixed; + bottom: 20px; + right: 20px; + background-color: #007BFF; + color: white; + border: none; + padding: 10px; + border-radius: 50%; + font-size: 24px; + cursor: pointer; + display: none; /* Initially hidden */ + transition: all 0.3s ease; +} + +.scroll-to-top:hover { + background-color: #FF6F00; +} + + +/* Scroll to Top Button */ +.scroll-to-top { + position: fixed; + bottom: 20px; + right: 20px; + background-color: #007BFF; + color: white; + border: none; + padding: 10px; + border-radius: 50%; + font-size: 24px; + cursor: pointer; + display: none; /* Initially hidden */ + transition: all 0.3s ease; + animation: slideIn 0.5s ease-in-out; +} + +.scroll-to-top:hover { + background-color: #FF6F00; +} + +/* Scroll Button Animation */ +@keyframes slideIn { + 0% { + transform: translateX(50px); /* Start from the right */ + } + 100% { + transform: translateX(0); /* End at the original position */ + } +} + +/* For Left to Right Animation */ +.scroll-to-top-left { + animation: slideInLeft 0.5s ease-in-out; +} + +@keyframes slideInLeft { + 0% { + transform: translateX(-50px); /* Start from the left */ + } + 100% { + transform: translateX(0); /* End at the original position */ + } +} + + + + + + + + + + -- cgit v1.2.3