diff --git a/frontend/LandingPage.html b/frontend/LandingPage.html new file mode 100644 index 0000000..5b7f47d --- /dev/null +++ b/frontend/LandingPage.html @@ -0,0 +1,229 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <title>Advanced Landing Page</title> + + <!-- Google Fonts --> + <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet"> + + <style> + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + font-family: 'Poppins', sans-serif; + scroll-behavior: smooth; + } + + /* Navbar */ + header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 10%; + background-color: #222; + position: fixed; + width: 100%; + top: 0; + z-index: 999; + color: #fff; + } + + header .logo { + font-size: 28px; + font-weight: 700; + color: #FFD700; + } + + header ul { + list-style-type: none; + display: flex; + } + + header ul li { + margin-left: 20px; + } + + header ul li a { + color: #fff; + text-decoration: none; + font-weight: 500; + } + + header ul li a:hover { + color: #FFD700; + } + + /* Hero Section */ + .hero { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-image: url('https://source.unsplash.com/1920x1080/?technology'); + background-size: cover; + background-position: center; + position: relative; + color: white; + text-align: center; + } + + .hero-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.6); + } + + .hero-content { + z-index: 1; + } + + .hero-content h1 { + font-size: 60px; + margin-bottom: 20px; + } + + .hero-content p { + font-size: 18px; + margin-bottom: 30px; + } + + .btn { + padding: 10px 30px; + font-size: 16px; + color: white; + background-color: #FFD700; + border: none; + border-radius: 50px; + cursor: pointer; + transition: all 0.3s ease; + } + + .btn:hover { + background-color: #FFA500; + } + + /* About Section */ + .about { + padding: 100px 10%; + background-color: #f4f4f4; + text-align: center; + } + + .about h2 { + font-size: 36px; + color: #333; + margin-bottom: 20px; + } + + .about p { + font-size: 18px; + color: #666; + line-height: 1.8; + } + + /* Contact Section */ + .contact { + padding: 100px 10%; + background-color: #222; + color: #fff; + text-align: center; + } + + .contact h2 { + font-size: 36px; + color: #FFD700; + margin-bottom: 20px; + } + + .contact p { + font-size: 18px; + margin-bottom: 30px; + } + + /* Footer */ + footer { + padding: 30px 10%; + background-color: #111; + color: #fff; + text-align: center; + } + + footer p { + font-size: 14px; + color: #666; + } + + /* Media Queries */ + @media (max-width: 768px) { + .hero-content h1 { + font-size: 40px; + } + + .hero-content p { + font-size: 16px; + } + } + </style> +</head> +<body> + <!-- Navbar --> + <header> + <div class="logo">TechSavvy</div> + <ul> + <li><a href="#hero">Home</a></li> + <li><a href="#about">About</a></li> + <li><a href="#contact">Contact</a></li> + </ul> + </header> + + <!-- Hero Section --> + <section class="hero" id="hero"> + <div class="hero-overlay"></div> + <div class="hero-content"> + <h1>Welcome to TechSavvy</h1> + <p>Empowering Technology, One Step at a Time</p> + <a href="#about"><button class="btn">Learn More</button></a> + </div> + </section> + + <!-- About Section --> + <section class="about" id="about"> + <h2>About Us</h2> + <p>At TechSavvy, we are dedicated to helping individuals and businesses harness the power of technology. We provide innovative solutions, insightful blogs, and expert advice to make technology accessible and useful to everyone.</p> + </section> + + <!-- Contact Section --> + <section class="contact" id="contact"> + <h2>Get in Touch</h2> + <p>If you have any questions or need further assistance, feel free to reach out. We’re here to help you!</p> + <button class="btn">Contact Us</button> + </section> + + <!-- Footer --> + <footer> + <p>© 2024 TechSavvy. All Rights Reserved.</p> + </footer> + + <!-- Smooth Scrolling --> + <script> + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); + }); + </script> +</body> +</html>