<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShopðŸ›’</title>
    <link rel="stylesheet" href="./css/home.css">
    <link rel="icon" href="./assets/Microservelogo.svg" type="img/svg+xml">
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <img src="./assets/LenokHyperMat.png" type="img/svg+xml" class="brand-logo" alt="Brand Logo">
            </div>
            <ul class="nav-links">
                <li><a href="#">Home</a></li>
                <li><a href="/Shop">Shop</a></li>    
                <li><a href="/vendor">Vendors</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <div class="login">
                <a href="#">Login</a>
            </div>
        </nav>
    </header>

    <main>
        <section class="hero">
            <h1>Welcome to Flammy Microserve</h1>
            <p class="slogan">Together We save</p>
            <a href="/signin" class="btn">Register</a>
        </section>

        <section class="features">
            <div class="feature">
                <img src="./assets/toteBag.png" alt="Feature 1">
                <h2>Luxurious Rooms</h2>
                <p>Experience comfort and style in our well-appointed rooms.</p>
            </div>
   
        </section>
    </main>

    <footer>
        <div class="footer-logo">
            <img class="social-icon" src="./assets/tokio-hotel.svg" alt="Brand Logo">
        </div>
        <div class="footer-social">
            <a href="#" class="social-icon"><img src="./assets/facebook.svg" alt="Facebook"></a>
            <a href="#" class="social-icon"><img src="./assets/twitter.svg" alt="Twitter"></a>
            <a href="#" class="social-icon"><img src="./assets/instagram.svg" alt="instgram logo"> </img></a>
        </div>
    </footer>
</body>
</html>
