first.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RTU B.Tech 1st Year Engineering Notes</title>
    <meta name="description" content="RTU B.Tech 1st Year Engineering Notes - Complete study materials, notes, books and videos for first year engineering students">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="first.css">
</head>
<body>
    <!-- Navbar -->
    <div class="navbar-wrapper">
        <nav class="navbar">
            <div class="logo-section">
                <img src="https://mgx-backend-cdn.metadl.com/generate/images/915589/2026-01-17/27a19598-7130-45fb-b6bc-dba8af9491c4.png" alt="Logo" class="logo">
                <span class="logo-text">Official Shyam notes hub</span>
            </div>
            <button class="mobile-menu-toggle" onclick="toggleMobileMenu()">☰</button>
            <ul class="nav-menu" id="navMenu">
                <li><a href="#home">🏠 Home</a></li>
                <li><a href="#about">ℹ️ About</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" onclick="toggleDropdown(event, 'yearDropdown')">
                        📚 Year ▼
                    </a>
                    <div class="dropdown-menu" id="yearDropdown">
                        <a href="#1st-year">1st Year</a>
                        <a href="#2nd-year">2nd Year</a>
                        <a href="#3rd-year">3rd Year</a>
                        <a href="#4th-year">4th Year</a>
                    </div>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" onclick="toggleDropdown(event, 'papersDropdown')">
                        📄 RTU Papers ▼
                    </a>
                    <div class="dropdown-menu" id="papersDropdown">
                        <a href="#previous-papers">Previous Papers</a>
                        <a href="#sample-papers">Sample Papers</a>
                    </div>
                </li>
                <li><a href="#contact">📞 Contact Us</a></li>
            </ul>
        </nav>
    </div>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <div class="hero-content">
            <h1>RTU B. Tech 1st Year Engineering NOTES</h1>
            <h2>First Year</h2>
            <p>Notes, Books and Videos and Important Sites</p>
        </div>
    </section>

    <!-- Subjects Section -->
    <section class="subjects-section">
        <div class="subjects-grid">
            <div class="subject-card">
                <img src="https://mgx-backend-cdn.metadl.com/generate/images/915589/2026-01-17/6dd7a7f9-6498-4ed5-8d56-f35ea8c68abb.png" alt="Engineering Mathematics 1" class="subject-image">
                <div class="subject-content">
                    <h3 class="subject-title">Engineering Mathematics 1</h3>
                    <a href="#" class="start-btn">Start Now →</a>
                </div>
            </div>

            <div class="subject-card">
                <img src="https://mgx-backend-cdn.metadl.com/generate/images/915589/2026-01-17/974e149d-828d-41d7-8989-157d82d63107.png" alt="Engineering Mathematics 2" class="subject-image">
                <div class="subject-content">
                    <h3 class="subject-title">Engineering Mathematics 2</h3>
                    <a href="#" class="start-btn">Start Now →</a>
                </div>
            </div>

            <div class="subject-card">
                <img src="https://mgx-backend-cdn.metadl.com/generate/images/915589/2026-01-17/2cca8b2c-4f0e-4fb6-848a-2d36ce90f181.png" alt="Engineering Physics" class="subject-image">
                <div class="subject-content">
                    <h3 class="subject-title">Engineering Physics</h3>
                    <a href="#" class="start-btn">Start Now →</a>
                </div>
            </div>

            <div class="subject-card">
                <img src="https://mgx-backend-cdn.metadl.com/generate/images/915589/2026-01-17/83127d6a-578d-4525-acef-75ecd12cd5da.png" alt="Engineering Chemistry" class="subject-image">
                <div class="subject-content">
                    <h3 class="subject-title">Engineering Chemistry</h3>
                    <a href="#" class="start-btn">Start Now →</a>
                </div>
            </div>

            <div class="subject-card">
                <img src="https://mgx-backend-cdn.metadl.com/generate/images/915589/2026-01-17/3b92660b-cd91-4334-91d4-bdb932547583.png" alt="Human Values" class="subject-image">
                <div class="subject-content">
                    <h3 class="subject-title">Human Values</h3>
                    <a href="#" class="start-btn">Start Now →</a>
                </div>
            </div>

            <div class="subject-card">
                <img src="https://mgx-backend-cdn.metadl.com/generate/images/915589/2026-01-17/b9c78b26-9c44-459c-8157-544d4e00263b.png" alt="Communication Skills" class="subject-image">
                <div class="subject-content">
                    <h3 class="subject-title">Communication Skills</h3>
                    <a href="#" class="start-btn">Start Now →</a>
                </div>
            </div>

            <div class="subject-card">
                <img src="https://mgx-backend-cdn.metadl.com/generate/images/915589/2026-01-17/5812abfb-ac55-4c2e-bad9-c19840dba964.png" alt="Programming for Problem Solving" class="subject-image">
                <div class="subject-content">
                    <h3 class="subject-title">Programming for Problem Solving</h3>
                    <a href="#" class="start-btn">Start Now →</a>
                </div>
            </div>

            <div class="subject-card">
                <img src="https://mgx-backend-cdn.metadl.com/generate/images/915589/2026-01-17/3533af1d-c512-4e05-83ab-81adb59b8e9e.png" alt="Basic Mechanical Engineering" class="subject-image">
                <div class="subject-content">
                    <h3 class="subject-title">Basic Mechanical Engineering</h3>
                    <a href="#" class="start-btn">Start Now →</a>
                </div>
            </div>

            <div class="subject-card">
                <img src="https://mgx-backend-cdn.metadl.com/generate/images/915589/2026-01-17/cb41127a-e4e5-4f33-b92a-2a8bf384d549.png" alt="Basic Civil Engineering" class="subject-image">
                <div class="subject-content">
                    <h3 class="subject-title">Basic Civil Engineering</h3>
                    <a href="#" class="start-btn">Start Now →</a>
                </div>
            </div>

            <div class="subject-card">
                <img src="https://mgx-backend-cdn.metadl.com/generate/images/915589/2026-01-17/e136e487-9d54-4ede-b10d-8968b04ea465.png" alt="Basic Electrical Engineering" class="subject-image">
                <div class="subject-content">
                    <h3 class="subject-title">Basic Electrical Engineering</h3>
                    <a href="#" class="start-btn">Start Now →</a>
                </div>
            </div>

            <div class="subject-card">
                <img src="https://mgx-backend-cdn.metadl.com/generate/images/915589/2026-01-17/711783a7-09ee-471a-b9ca-fa62f1dbcd4d.png" alt="CAEG" class="subject-image">
                <div class="subject-content">
                    <h3 class="subject-title">CAEG</h3>
                    <a href="#" class="start-btn">Start Now →</a>
                </div>
            </div>

            <div class="subject-card">
                <img src="https://mgx-backend-cdn.metadl.com/generate/images/915589/2026-01-17/88157915-e605-4840-8e16-528878a3c31c.png" alt="CAMD" class="subject-image">
                <div class="subject-content">
                    <h3 class="subject-title">CAMD</h3>
                    <a href="#" class="start-btn">Start Now →</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Important Links -->
    <section class="links-section">
        <h2>Important Links</h2>
        <p>To add more cards, hover on a card and click 'Add Items'</p>
        <div class="links-grid">
            <a href="#" class="link-item">
                <img src="/images/photo1768659953.jpg" alt="RTU" class="link-logo">
                <span class="link-name">RTU</span>
            </a>
            <a href="#" class="link-item">
                <img src="https://via.placeholder.com/100x100/3B82F6/FFFFFF?text=AG" alt="Aakruti Gyan" class="link-logo">
                <span class="link-name">Aakruti Gyan</span>
            </a>
            <a href="#" class="link-item">
                <img src="/images/photo1768659953.jpg" alt="Rtu Samaaj" class="link-logo">
                <span class="link-name">Rtu Samaaj</span>
            </a>
            <a href="#" class="link-item">
                <img src="https://via.placeholder.com/100x100/0EA5E9/FFFFFF?text=SW" alt="Swayam" class="link-logo">
                <span class="link-name">Swayam</span>
            </a>
            <a href="#" class="link-item">
                <img src="https://via.placeholder.com/100x100/EF4444/FFFFFF?text=NP" alt="Nptel" class="link-logo">
                <span class="link-name">Nptel</span>
            </a>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer" id="about">
        <div class="footer-content">
            <div class="footer-section">
                <img src="https://mgx-backend-cdn.metadl.com/generate/images/915589/2026-01-17/27a19598-7130-45fb-b6bc-dba8af9491c4.png" alt="Logo" class="footer-logo">
            </div>

            <div class="footer-section">
                <h3>About</h3>
                <p>Thank you for visiting website.<br>
                Connect with me over socials.<br>
                Keep Rising 🚀</p>
                <p>Connect with me over chat on LinkedIn.</p>
                
                <div class="social-icons">
                    <a href="https://linkedin.com" target="_blank" class="social-icon">in</a>
                    <a href="https://instagram.com" target="_blank" class="social-icon">📷</a>
                    <a href="/cdn-cgi/l/email-protection#c8aba7a6bca9abbc88adb0a9a5b8a4ade6aba7a5" class="social-icon">✉️</a>
                    <a href="https://github.com" target="_blank" class="social-icon">💻</a>
                </div>
                
                <p style="font-size: 0.875rem;">Follow Us</p>
            </div>

            <div class="footer-section">
                <h3>Quick Links</h3>
                <ul class="quick-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#1st-year">1st Year</a></li>
                    <li><a href="#2nd-year">2nd Year</a></li>
                    <li><a href="#3rd-year">3rd Year</a></li>
                    <li><a href="#4th-year">4th Year</a></li>
                    <li><a href="#contact" id="contact">Contact Us</a></li>
                </ul>
            </div>
        </div>

        <div class="footer-bottom">
            <p>©Copyright 2024 Shyam Sundar Sharma — All Rights Reserved</p>
            <p>Designed and Developed by Shyam Sundar Sharma</p>
        </div>
    </footer>

    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
        function toggleDropdown(event, dropdownId) {
            event.preventDefault();
            const dropdown = document.getElementById(dropdownId).parentElement;
            
            // Close all other dropdowns
            document.querySelectorAll('.dropdown').forEach(d => {
                if (d !== dropdown) {
                    d.classList.remove('active');
                }
            });
            
            dropdown.classList.toggle('active');
        }

        function toggleMobileMenu() {
            const navMenu = document.getElementById('navMenu');
            navMenu.classList.toggle('active');
        }

        // Close dropdowns when clicking outside
        document.addEventListener('click', function(event) {
            if (!event.target.closest('.dropdown')) {
                document.querySelectorAll('.dropdown').forEach(d => {
                    d.classList.remove('active');
                });
            }
        });

        // Close mobile menu when clicking on a link
        document.querySelectorAll('.nav-menu a').forEach(link => {
            link.addEventListener('click', function() {
                if (window.innerWidth <= 768) {
                    document.getElementById('navMenu').classList.remove('active');
                }
            });
        });
    </script>
</body>
</html>