Spaces:
Running
Running
"Design a premium, clean, and trustworthy website for an Indian export brand called Nature Ready.
59a0aa3
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nature Ready - Premium Indian Exports</title> | |
| <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&family=Playfair+Display:wght@700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --olive: #4A5D3E; | |
| --gold: #C9A24A; | |
| --beige: #EDE7DD; | |
| --offwhite: #FAF9F7; | |
| --raisin: #6E4B3A; | |
| --charcoal: #2E2E2E; | |
| --gray: #8C8C8C; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| color: var(--charcoal); | |
| background-color: var(--offwhite); | |
| margin: 0; | |
| padding: 0; | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Header Styles */ | |
| header { | |
| background-color: transparent; | |
| position: fixed; | |
| width: 100%; | |
| z-index: 100; | |
| transition: background-color 0.3s ease; | |
| } | |
| header.scrolled { | |
| background-color: var(--beige); | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| background: linear-gradient(135deg, var(--beige) 0%, var(--offwhite) 100%); | |
| padding: 180px 0 120px; | |
| text-align: center; | |
| } | |
| .hero h1 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 48px; | |
| color: var(--olive); | |
| margin-bottom: 24px; | |
| } | |
| /* Buttons */ | |
| .btn { | |
| padding: 12px 24px; | |
| border-radius: 4px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| font-size: 16px; | |
| letter-spacing: 1px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| display: inline-block; | |
| text-decoration: none; | |
| } | |
| .btn-primary { | |
| background-color: var(--olive); | |
| color: white; | |
| border: 2px solid var(--olive); | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--gold); | |
| border-color: var(--gold); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header id="header"> | |
| <div class="container"> | |
| <nav> | |
| <a href="#" class="logo">Nature Ready</a> | |
| <div class="nav-links"> | |
| <a href="#">Products</a> | |
| <a href="#">About</a> | |
| <a href="#">Sustainability</a> | |
| <a href="#">Contact</a> | |
| <a href="#" class="btn btn-primary">Request Inquiry</a> | |
| </div> | |
| </nav> | |
| </div> | |
| </header> | |
| <section class="hero"> | |
| <div class="container"> | |
| <h1>Authentic Indian Products, Naturally Crafted</h1> | |
| <p>Premium exports that celebrate India's rich heritage and sustainable practices</p> | |
| <a href="#" class="btn btn-primary">Explore Our Products</a> | |
| </div> | |
| </section> | |
| <script> | |
| // Header scroll effect | |
| window.addEventListener('scroll', function() { | |
| const header = document.getElementById('header'); | |
| if (window.scrollY > 50) { | |
| header.classList.add('scrolled'); | |
| } else { | |
| header.classList.remove('scrolled'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |