4 files changed, 702 insertions, 0 deletions
diff --git a/divineclasses.jpeg b/divineclasses.jpeg
new file mode 100644
index 0000000..711a4cb
--- /dev/null
+++ b/divineclasses.jpeg
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3dfa67e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Divine Classes</title>
+    <link rel="stylesheet" href="styles.css">
+
+    <script defer src="script.js"></script>
+</head>
+<body>
+
+    <header>
+        <div class="logo">
+            <img src="logo.jpeg" alt="Divine Classes Logo" class="logo-img">
+            <div>
+                <h1>Divine Classes</h1>
+                <p>Scholar's Hub Since 2005</p>
+            </div>
+        </div>
+        <nav class="nav">
+            <a href="#services">Services</a>
+            <a href="#courses">Courses</a>
+            <a href="#testimonials">Testimonials</a>
+            <a href="#faq">FAQ</a>
+            <a href="#contact">Contact</a>
+        </nav>
+    </header>
+    
+    
+
+    <section class="hero-section">
+        <h2>Welcome to Divine Classes</h2>
+        <p>Your one-stop solution for quality education.</p>
+        <a href="#services" class="cta-button">Explore Services</a>
+    </section>
+
+    <section class="features" id="services"> 
+        <h2>Our Features</h2>
+        <div class="features-list">
+            <div class="feature-item">
+                <h3>Academic Discipline</h3>
+                <p>Maintaining a structured and effective learning environment.</p>
+            </div>
+            <div class="feature-item">
+                <h3>Individual Doubt Clearance</h3>
+                <p>Personalized attention to clear all your academic doubts.</p>
+            </div>
+            <div class="feature-item">
+                <h3>Weekly Test Series</h3>
+                <p>Regular assessments to track and improve performance.</p>
+            </div>
+            <div class="feature-item">
+                <h3>Regular Revision Session</h3>
+                <p>Consistent revision sessions to reinforce concepts and improve retention.</p>
+            </div>
+            <div class="feature-item">
+                <h3>Modern Infrastructure</h3>
+                <p>State-of-the-art facilities and a comfortable learning environment.</p>
+            </div>
+        </div>
+    </section>
+    
+
+    <section class="courses" id="courses">
+        <h2>Our Courses</h2>
+        <div class="course-list">
+            <div class="course-item">
+                <h3>English Speaking Course</h3>
+                <p>Enhance your communication skills for all age groups.</p>
+  
+            </div>
+            
+            <div class="course-item">
+                <h3>Private Tuition</h3>
+                <p>Get personalized coaching from experienced educators.</p>
+    
+            </div>
+            <div class="course-item">
+                <h3>V-X Curriculum</h3>
+                <p>Specialized coaching for students in classes V-X for all subjects.</p>
+     
+            </div>
+            <div class="course-item">
+                <h3>ICSE</h3>
+                <p>In-depth coaching for ICSE students to excel in their exams.</p>
+      
+            </div>
+            <div class="course-item">
+                <h3>CBSE</h3>
+                <p>Tailored coaching for CBSE students to achieve academic success.</p>
+
+            </div>
+            <div class="course-item">
+                <h3>SSC</h3>
+                <p>Comprehensive coaching for SSC students to prepare for board exams.</p>
+
+            </div>
+        </div>
+    </section>
+    
+    <section class="testimonials" id="testimonials">
+        <h2>What Our Students Say</h2>
+        <div class="testimonial">
+            <p>"Divine Classes helped me achieve my academic goals. The tutors are amazing!"</p>
+            <h4>- A Happy Student</h4>
+        </div>
+        <div class="testimonial">
+            <p>"The study materials are very comprehensive and easy to understand."</p>
+            <h4>- Another Student</h4>
+        </div>
+    </section>
+
+    <section class="faq" id="faq">
+        <h2>Frequently Asked Questions</h2>
+        
+        <!-- FAQ Item 1 -->
+        <div class="faq-item">
+            <h3 class="faq-question">What courses do you offer?</h3>
+            <p class="faq-answer">We offer a variety of courses, including science, mathematics, language learning, and preparation for competitive exams.</p>
+        </div>
+    
+        <!-- FAQ Item 3 -->
+        <div class="faq-item">
+            <h3 class="faq-question">Do you provide study materials?</h3>
+            <p class="faq-answer">Yes, we provide comprehensive study materials, including notes, practice questions, and sample papers.</p>
+        </div>
+    
+        <!-- FAQ Item 4 -->
+        <div class="faq-item">
+            <h3 class="faq-question">Are the classes available online?</h3>
+            <p class="faq-answer">Yes, we offer both online and offline classes to suit the convenience of our students.</p>
+        </div>
+    
+        <!-- FAQ Item 5 -->
+        <div class="faq-item">
+            <h3 class="faq-question">How can I contact the faculty?</h3>
+            <p class="faq-answer">You can contact faculty members directly through email or via contact number.</p>
+        </div>
+    </section>
+    
+
+    <section class="contact-section" id="contact">
+        <h2>Contact Us</h2>
+        <div style="display: flex; justify-content: center; gap: 20px;">
+            <p><strong>Linu Mathews</strong><br>C.E.O</p>
+            <p><strong>Anoop Singh</strong><br>Professor</p>
+            <p><strong>Vinayak Kadam</strong><br>Administration</p>
+        </div>
+        
+        
+        <p><strong>Address:</strong> 
+            <a href="https://www.google.com/maps?q=Shop+No.+A+02,+Meera+Avenue,+Beside+Agarwal+Exotica,+Yashwant+Smart+City,+Near+Vasai+IGS+School,+Vasai+(E)" target="_blank" class="address-link">
+                Shop No. A 02, Meera Avenue, Beside Agarwal Exotica, Yashwant Smart City, Near Vasai IGS School, Vasai (E)
+            </a>
+        </p>
+        <p><strong>Email:</strong> 
+            <a href="mailto:linu@divineclasses.in" class="email-link">linu@divineclasses.in</a>
+        </p>
+        <p><strong>Phone:</strong> 
+            <a href="tel:+918888444476" class="phone-link">88884 44476</a> | 
+            <a href="tel:+918888444418" class="phone-link">88884 44418</a> | 
+            <a href="tel:+918605920081" class="phone-link">86059 20081</a> | 
+            <a href="tel:+919226755438" class="phone-link">92267 55438</a>
+        </p>
+    </section>
+    
+
+    <footer>
+        <p>&copy; 2024 Divine Classes. All rights reserved.</p>
+    </footer>
+<!-- Scroll to Top Button -->
+<div id="scroll-to-top" class="scroll-to-top">
+    &#8593; <!-- Up arrow symbol -->
+</div>
+
+</body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ec6a283
--- /dev/null
+++ b/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/styles.css b/styles.css
new file mode 100644
index 0000000..7ca4ce5
--- /dev/null
+++ b/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 */
+    }
+}
+
+
+
+
+
+
+
+
+
+