index.html

<!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>Ivory Luxe</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
    <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=Herr+Von+Muellerhoff&display=swap" rel="stylesheet">  
    <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=Sour+Gummy:ital,wght@0,100..900;1,100..900&family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
    <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=Cormorant+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <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=Texturina:ital,opsz,wght@0,12..72,100..900;1,12..72,100..900&display=swap" rel="stylesheet">
    <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=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header class="header">
        <nav class="navbar">
            <div class="logo">
                <h1 style="font-family: 'Herr Von Muellerhoff', sans-serif;">Ivory Luxe</h1>
            </div>
            <ul class="nav-links" style="font-family:Cormorant SC ;">
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="testimonials.html">Testimonials</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>


    <section class="slider">
        <div class="slider-container">
            <div class="slider-images" >
                <div class="slide"><img src="images/i5.png" alt="Event 1"></div>
                <div class="slide"><img src="images/i6.png" alt="Event 2"></div>
                <div class="slide"><img src="images/image.png" alt="Event 4"></div>
                <div class="slide"><img src="images/i3.png" alt="Event 6"></div>
                <div class="slide"><img src="images/i7.png" alt="Event 7"></div>
            </div>
            <div class="slider-text">
                <h2 style="text-align: center;font-family: 'Herr Von Muellerhoff';font-size: 55px;">Event Planner</h2>
                <p style="font-family: Cormorant SC;text-align: center;">Your Ultimate Event Experience</p>
                <div class="hero">
                    <h2 style="font-family: Cormorant SC;text-align: center;">Make Every Event Unforgettable</h2>
                    <div class="cta-container">
                        <button class="cta-btn" onclick="window.location.href='services.html'" style="font-family:Cormorant SC ;">Plan Your Event</button>
                        <button class="cta-btn" onclick="window.location.href='contact.html'" style="font-family:Cormorant SC ;">Get Started</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="services" class="services">
    <h2 style="color: black; font-family: Tangerine; font-size: 80px;">Our Services</h2>
    

    <a href="services.html" class="service-card-link">
        <div class="service-card" style="font-family: Cormorant SC; font-size: 100px;">
            <h3>Event Consultation</h3>
            <p style="font-size: 120px;">Get expert advice and consultation for your event.</p>
            <img src="images/i13.png" alt="Event Consultation">
        </div>
    </a>


    <a href="services.html" class="service-card-link">
        <div class="service-card" style="font-family: Cormorant SC; font-size: 100px;">
            <h3>Venue Selection</h3>
            <p style="font-size: 120px;">We help you choose the perfect venue for your event.</p>
            <img src="images/i14.png" alt="Venue Selection">
        </div>
    </a>


    <a href="services.html" class="service-card-link">
        <div class="service-card" style="font-family: Cormorant SC; font-size: 100px;">
            <h3>Event Theme & Decor</h3>
            <p style="font-size: 120px;">Create unforgettable themes and decor for your event.</p>
            <img src="images/i16.png" alt="Event Theme & Decor">
        </div>
    </a>


    <a href="services.html" class="service-card-link">
        <div class="service-card" style="font-family: Cormorant SC; font-size: 100px;">
            <h3>Catering</h3>
            <p style="font-size: 120px;">Delicious food to make your event even more memorable</p>
            <img src="images/i15.png" alt="Catering">
        </div>
    </a>
</section>

    
<section id="portfolio" class="portfolio">
    <h2 style="color: black; font-family: Tangerine; font-size: 80px;">Our Portfolio</h2>
    <div class="portfolio-gallery" style="font-family: Cormorant SC;">
        

        <div class="portfolio-item">
            <img src="images/i10.png" alt="Wedding Event">
            <div class="hover-text">
                <a href="portfolio.html" style="text-decoration: none; color: inherit;">Wedding Event</a>
            </div>
        </div>
        

        <div class="portfolio-item">
            <img src="images/corp.png" alt="Corporate Event">
            <div class="hover-text">
                <a href="portfolio.html" style="text-decoration: none; color: inherit;">Corporate Event</a>
            </div>
        </div>
        

        <div class="portfolio-item">
            <img src="images/partyyy.png" alt="Party Event">
            <div class="hover-text">
                <a href="portfolio.html" style="text-decoration: none; color: inherit;">Party Event</a>
            </div>
        </div>
        
    </div>
</section>


    <section id="testimonials" class="testimonials">
        <h2 style="color: black; font-family: Tangerine; font-size: 80px;">What Our Clients Say</h2>
        

        <a href="testimonials.html" style="text-decoration: none; color: inherit;">
            <div class="testimonial">
                <img src="images/pexels-hardeep-17758677.jpg" alt="Client 1">
                <p style="font-family: Tangerine; font-size: 40px; color: rgb(0, 0, 0);">"This event was the best we've ever had!"</p>
                <span style="font-family: Cormorant SC; color: rgb(0, 0, 0);">~Agastya</span>
            </div>
        </a>
        

        <a href="testimonials.html" style="text-decoration: none; color: inherit;">
            <div class="testimonial">
                <img src="images/pexels-ogproductionz-17243573.jpg" alt="Client 2">
                <p style="font-family: Tangerine; font-size: 40px; color: rgb(0, 0, 0);">"The team was exceptional, and everything went perfectly!"</p>
                <span style="font-family: Cormorant SC; color: rgb(0, 0, 0);">~Swift</span>
            </div>
        </a>
        
    </section>

    
    <section id="contact" class="contact" style="width: 100%; height: 82.8vh;">
        <h2 style="font-family: 'Herr Von Muellerhoff', sans-serif; font-size: 50px;">Contact Us</h2>
        <form id="contact-form" action="https://formsubmit.co/birajitsaikia@gmail.com" method="POST">
            <input type="text" name="name" placeholder="Your Name" style="font-family: Cormorant SC;" required>
            <input type="email" name="email" placeholder="Your Email" style="font-family: Cormorant SC;" required>
            <textarea name="message" placeholder="Message" style="font-family: Cormorant SC;" required></textarea>
            <button type="submit" style="font-family: Cormorant SC;">Submit</button>
        </form>
    </section>


    <footer>
        <p style="font-family: Vollkorn;">&copy; 2024 Ivory Luxe | All Rights Reserved</p>
    </footer>
    

    <script src="script.js"></script>
</body>
</html>