<!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>Home Page</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <script src="https://unpkg.com/feather-icons"></script>
    <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=Poppins&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
    <style>
        .bg-color {
            background-color: #1b1c1e;
        }

        .comp-color {
            background-color: #212226;
        }

        .nav-radius {
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }

        .header-banner1 {
            height: 650px;
            padding-right: 50px;
            padding-left: 50px;
            padding-bottom: 10px;
            padding-top: 10px;
        }

        .header-banner2 {
            height: 650px;
            padding-right: 50px;
            padding-left: 50px;
            padding-bottom: 10px;
            padding-top: 10px;
        }

        .header-banner3 {
            height: 650px;
            padding-right: 50px;
            padding-left: 50px;
            padding-bottom: 10px;
            padding-top: 10px;
        }

        .New-arrival {
            font-size: 24pt;
            text-align: center;
            color: white;
            margin-top: 1%
        }

        .form-control {
            width: 100%;
            display: block;
            height: 40px;
            border: 1px solid blue;
            padding: .4px 1px;
            outline: none;
        }

        .btn {
            height: 40px;
            padding: 0px 25px;
            text-align: center;
        }

        .btn-block {
            display: block;
            width: 100%;
        }

        .btn-main {
            background: #212226 ;
            color: white;
            border: 1px solid ;
        }

        .hero-search {
            margin-left: 70px;
            margin-right: 70px;
            padding: 14px 0px;
            background: #1b1c1e;
            color: white;
        }

        .search-grid {  
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-column-gap: 20px;
        }

        .arrival-section {
            padding-left: 0px
        }

        .section-header {
            text-align: center;
        }

        .section-header h2{
            font-size: 23px;
        }

        .section-header span {
            border-bottom: 3px solid orangered;
            padding-bottom: .6px;
        }
        
        .slide-wrapper {
            margin-top: 5px;
        }

        .slider-container {
           margin-top: 50px;
        }

        .slide {
            border: 1px solid #1b1c1e ;
            margin: 0px 15px;
        }

        .slide-img {
            height: 200px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
        }

        .slide-info {
            padding: 1rem;
            text-align: left;
        }

        .slide-btn {
            margin-left: 15%;
        }

        .slide-info h3 {
            margin-left: 45px;
            font-size: 12pt;
            color: white;
            margin-bottom: .6px;
        }

        .price {
            margin-bottom: 12px;
        }
        
        .price span {
            margin-left: 15%;
            font-weight: 700px;
            color: orangered;
            border: none !important;
        }
    </style>
</head>

<body class="bg-color">
    <nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
        <a class="navbar-brand" href="#">Home Page</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
            aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/product-list.html" aria-disabled="true">Products</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about-us.html">About Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="faq.html">FAQ</a>
                </li>
            </ul>
            <span class="navbar-nav my-2 my-lg-0 text-white">
                <a href="login.html"><button type="button"
                        class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
                <i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i>
            </span>
        </div>
    </nav>

    <header>
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active header-banner1">
                    <img src="https://images.unsplash.com/photo-1607083206869-4c7672e72a8a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8c2FsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                        class="d-block w-100" alt="First Slide">
                </div>
                <div class="carousel-item  header-banner2">
                    <img src="https://images.unsplash.com/photo-1577538928305-3807c3993047?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHNhbGV8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                        class="d-block w-100" alt="Second Slide">
                </div>
                <div class="carousel-item  header-banner3">
                    <img src="https://fila.co.id/assets/images/157_rgbflexwhitesliderbanner.jpg" class="d-block w-100"
                        alt="Third Slide">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </header>
        
        <div class="hero-search">
            <div class="wrapper">
                <div class="search-grid">
                    <div>
                        <select name=""class="form-control" id="">
                            <option value="">Category</option>
                        </select>
                    </div>
                    <div>
                        <select name="" class="form-control" id="">
                            <option value="">Select</option>
                        </select>
                    </div>
                    <div>
                        <select name="" class="form-control" id="">
                            <option value="">Select</option>
                        </select>
                    </div>
                        <button class="btn btn-main btn-block">Search</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <main>
        <div class="arrival-section">
            <div class="wrapper">
                <div class="section-header">
                    <h2 style="color: white;"><span class="text-main">New</span> Arrivals</h2>
                    <div class="slider-wrapper">
                        <div class="slider-container" style="color: white;">
                            <div class="slide">
                                <div class="slide-img" style="background-image: url(assets/sepatu.png);">
                                    <div class="slide-badge"></div>
                                 </div>
                                 <div class="slide-info">
                                    <h3>Sneakers Nike</h3>
                                    <div class="price">
                                        <span>$100</span>
                                    </div>
                                    <div class="slide-btn">
                                        <button class="btn btn-main"><a href="#" data-feather="shopping-cart"></a> Add to Cart</button>
                                    </div>
                                 </div>
                            </div>
                            <div class="slide">
                                <div class="slide-img" style="background-image: url(assets/sepatu.png);">
                                    <div class="slide-badge"></div>
                                 </div>
                                 <div class="slide-info">
                                    <h3>Sneakers Nike</h3>
                                    <div class="price">
                                        <span>$100</span>
                                    </div>
                                    <div class="slide-btn">
                                        <button class="btn btn-main"><a href="#" data-feather="shopping-cart"></a> Add to Cart</button>
                                    </div>
                                 </div>
                            </div>
                            <div class="slide">
                                <div class="slide-img" style="background-image: url(assets/sepatu.png);">
                                    <div class="slide-badge"></div>
                                 </div>
                                 <div class="slide-info">
                                    <h3>Sneakers Nike</h3>
                                    <div class="price">
                                        <span>$100</span>
                                    </div>
                                    <div class="slide-btn">
                                        <button class="btn btn-main"><a href="#" data-feather="shopping-cart"></a> Add to Cart</button>
                                    </div>
                                 </div>
                            </div>
                            <div class="slide">
                                <div class="slide-img" style="background-image: url(assets/sepatu.png);">
                                    <div class="slide-badge"></div>
                                 </div>
                                 <div class="slide-info">
                                    <h3>Sneakers Nike</h3>
                                    <div class="price">
                                        <span>$100</span>
                                    </div>
                                    <div class="slide-btn">
                                        <button class="btn btn-main"><a href="#" data-feather="shopping-cart"></a> Add to Cart</button>
                                    </div>
                                 </div>
                            </div>
                            <div class="slide">
                                <div class="slide-img" style="background-image: url(assets/sepatu.png);">
                                    <div class="slide-badge"></div>
                                 </div>
                                 <div class="slide-info">
                                    <h3>Sneakers Nike</h3>
                                    <div class="price">
                                        <span>$100</span>
                                    </div>
                                    <div class="slide-btn">
                                        <button class="btn btn-main"><a href="#" data-feather="shopping-cart"></a> Add to Cart</button>
                                    </div>
                                 </div>
                            </div>
                            <div class="slide">
                                <div class="slide-img" style="background-image: url(assets/sepatu.png);">
                                    <div class="slide-badge"></div>
                                 </div>
                                 <div class="slide-info">
                                    <h3>Sneakers Nike</h3>
                                    <div class="price">
                                        <span>$100</span>
                                    </div>
                                    <div class="slide-btn">
                                        <button class="btn btn-main"><a href="#" data-feather="`shopping-cart"></a> Add to Cart</button>
                                    </div>
                                 </div>
                            </div>
                            <div class="slide">
                                <div class="slide-img" style="background-image: url(assets/sepatu.png);">
                                    <div class="slide-badge"></div>
                                 </div>
                                 <div class="slide-info">
                                    <h3>Sneakers Nike</h3>
                                    <div class="price">
                                        <span>$100</span>
                                    </div>
                                    <div class="slide-btn">
                                        <button class="btn btn-main"><a href="#" data-feather="shopping-cart"></a> Add to Cart</button>
                                    </div>
                                 </div>
                            </div>
                            <div class="slide">
                                <div class="slide-img" style="background-image: url(assets/sepatu.png);">
                                    <div class="slide-badge"></div>
                                 </div>
                                 <div class="slide-info">
                                    <h3>Sneakers Nike</h3>
                                    <div class="price">
                                        <span>$100</span>
                                    </div>
                                    <div class="slide-btn">
                                        <button class="btn btn-main"><a href="#" data-feather="shopping-cart"></a> Add to Cart</button>
                                    </div>
                                 </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
         integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script>
        feather.replace()
    </script>
       <script>
        $('.slider-container').slick({
            infinite: true,
            slidesToShow: 4,
            slidesToScroll: 4,
            autoplay: true,
        });
    </script>

</body>

</html>