<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axio Mart</title>
    <!-- Link Css -->
    <link rel="stylesheet" href="style/market.css">
    <!-- Link Icon -->
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
    <!-- link swiper js -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
    <!-- Favico -->
     <link rel="apple-touch-icon" sizes="180x180" href="favico/favicon_io/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="512x512" href="favico/favicon_io/favicon-512x512.png">
    <link rel="icon" type="image/png" sizes="192x192" href="favico/favicon_io/favicon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favico/favicon_io/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favico/favicon_io/favicon-16x16.png">
    <link rel="icon" href="favico/favicon_io/favicon.ico">
    <link rel="manifest" href="favico/favicon_io/site.webmanifest">
</head>

<body>
    <!-- Navbar -->
    <nav>
        <div><a href="#" class="logo">Axio Mart</a></div>
        <div class="box-menu" id="menu-icon">
            <ul class="navbar">
                <li><a href="#">Home</a></li>
                <li><a href="#">Popular</a></li>
                <li><a href="#">Promo</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Pesan</a></li>
            </ul>
        </div>
    </nav>

    <section class="home" id="home">
        <div class="hero">
            <div class="home-text">
                <h2>Axio Mart</h2>
                <h3>Get the best variety of snack here</h3>
                <p>the tasty snack of your choice</p>
                <a href="" class="btn">View Menu</a>
            </div>
            <div class="hero-img">
                <img src="images/jajan-paralax.png" class="parallax" data-speed="2" alt="">
            </div>
        </div>
    </section>

    <section class="menu" id="menu">
        <div class="heading-menu">
            <h2>Best <span>Menu</span> Of The Week !</h2>
        </div>

        <div class="container">
            <div class="products-container">
                <div class="product" data-name="p-1">
                    <img src="images/chitato.png" alt="">
                    <h3>Chitato</h3>
                </div>

                <div class="product" data-name="p-2">
                    <img src="images/pop-mie.png" alt="" height="50">
                    <h3>Pop Mie Gledek</h3>
                </div>

                <div class="product" data-name="p-3">
                    <img src="images/nextar.png" alt="">
                    <h3>Nextar Nanas</h3>
                </div>
            </div>

        </div>

    </section>

    <div class="products-preview">

        <div class="preview" data-target="p-1">
            <i class='bx bx-x'></i>
            <img src="images/chitato.png" alt="">
            <h3>Chitato</h3>
            <p>Rp.5000,00-</p>
        </div>

        <div class="preview" data-target="p-2">
            <i class='bx bx-x'></i>
            <img src="images/pop-mie.png" alt="">
            <h3>Pop Mie Gledek</h3>
            <p>Rp.6000,00-</p>
        </div>

        <div class="preview" data-target="p-3">
            <i class='bx bx-x'></i>
            <img src="images/nextar.png" alt="">
            <h3>Nextar Nanas</h3>
            <p>Rp.2000,00-</p>
        </div>
    </div>




    <!-- Footer -->
    <section class="footer" id="footer">
        <div class="contact-box">
            <h3><span>Food Test</span></h3>
            <span>Connect With Us</span>
            <div class="social">
                <a href="#"><i class='bx bxl-facebook' ></i></a>
                <a href="#"><i class='bx bxl-twitter' ></i></a>
                <a href="#"><i class='bx bxl-instagram' ></i></a>
            </div>
        </div>
        
        <div class="contact-box menu">
            <h3>Menu Links</h3>
            <li><a href="#">Home</a></li>
                <li><a href="#">Popular</a></li>
                <li><a href="#">Promo</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Pesan</a></li>
        </div>
        
        <div class="contact-box address">
            <h3>Contact</h3>
            <i class='bx bxs-phone' ><span>+62 888 999 888 </span></i>
            <i class='bx bxs-map'><span>SMK Taruna Bhakti</span></i>
            <i class='bx bx-envelope' ><span>adoramart@gmail.com</span></i>
        </div>

    </section>


    <!-- Link Javascript -->
    <script src="script/app.js" defer></script>
    <script src="script/slider.js"></script>
</body>
</html>