index.html

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
        rel="stylesheet">
</head>

<body>
    <header>
        <div class="header_content">
            <div class="header_menu container">
                <ul class="header_item">
                    <li class="header_menu_item">
                        <a href="#"><img class="logo menu_logo" src="img/corporate_logo.svg" alt="logo"></a>
                    </li>
                    <li class="header_menu_item">
                        <a href="#"><img class="logo" src="img/magnifier.svg" alt="search"></a>
                    </li>
                </ul>
                <ul class="header_item">
                    <li class="header_menu_item">
                        <button type="button" onclick="toggleMenu()" class="menu-button">
                            <img class="logo menu_logo_item" src="img/sandwich.svg" alt="menu">
                        </button>
                    </li>
                    <li class="header_menu_item">
                        <a href="registration.html"><img class="logo menu_logo item_none" src="img/my_profile.svg"
                                alt="profile"></a>
                    </li>
                    <li class="header_menu_item">
                        <a href="cart.html"><img class="logo item_none" src="img/basket.svg" alt="basket"></a>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <main>
        <div class="heading">
            <div class="heading_items container">
                <img class="heading_picture" src="img/men.png" alt="photo">
                <h1 class="heading_text">
                    <span class="the_brand">THE BRAND</span><br> OF&nbsp;LUXERIOUS <span class="fashion">FASHION</span>
                </h1>
            </div>
        </div>

        <div class="offers container">
            <div class="offers_parent">
                <a href="#" class="offers_item">
                    <img class="offers_image" src="img/for_women.png" alt="offers">
                    <div class="offers_text">
                        <div class="offer_text_container logo">
                            <div class="offers_title">30% OFF</div>
                            <div class="offers_subtitle">FOR WOMEN</div>
                        </div>
                    </div>
                </a>
                <a href="#" class="offers_item">
                    <img class="offers_image" src="img/for_men.png" alt="offers">
                    <div class="offers_text logo">
                        <div class="offer_text_container">
                            <div class="offers_title">HOT DEAL</div>
                            <div class="offers_subtitle">FOR MEN</div>
                        </div>
                    </div>
                </a>
                <a href="#" class="offers_item">
                    <img class="offers_image" src="img/for_kids.png" alt="offers">
                    <div class="offers_text logo">
                        <div class="offer_text_container">
                            <div class="offers_title">NEW ARRIVALS</div>
                            <div class="offers_subtitle">FOR KIDS</div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="offers_accesories">
                <a href="#" class="offers_item picture offers_picture">
                    <img class="offers_image item_offers" src="img/accesories.png" alt="offers">
                    <div class="offers_text">
                        <div class="offer_text_container logo">
                            <div class="offers_title">LUXIROUS &amp;&nbsp;TRENDY</div>
                            <div class="offers_subtitle">ACCESORIES</div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <div class="card_heading_text container">
            <div class="card_text">
                <h2 class="card_heading">Fetured Items</h2>
                <p class="card_paragraph">Shop for items based on what we featured in this week</p>
            </div>

        </div>

        <div class="card container">
            <div class="card_block">
                <a href="product.html" class="card_content indent_none">
                    <div class="image_container">
                        <img class="сard_product" src="img/1.png" alt="product">
                        <div class="add_to_cart_container">
                            <div class="add_to_cart_button">
                                <img src="img/basket.svg" alt="basket">
                                <span class="button_text">Add to Cart</span>
                            </div>
                        </div>
                    </div>
                    <div class="card_info">
                        <h2 class="card_item">ELLERY X&nbsp;M&rsquo;O CAPSULE</h2>
                        <p class="card_paragraph_content">
                            Known for her sculptural takes on&nbsp;traditional tailoring, Australian arbiter
                            of&nbsp;cool Kym Ellery teams up&nbsp;with Moda Operandi.
                        </p>
                        <p class="card_value">$52.00</p>
                    </div>
                </a>
                <a href="product.html" class="card_content indent_none indent_card">
                    <div class="image_container">
                        <img class="сard_product" src="img/2.png" alt="product">
                        <div class="add_to_cart_container">
                            <div class="add_to_cart_button">
                                <img src="img/basket.svg" alt="basket">
                                <span class="button_text">Add to Cart</span>
                            </div>
                        </div>
                    </div>
                    <div class="card_info">
                        <h2 class="card_item">ELLERY X&nbsp;M&rsquo;O CAPSULE</h2>
                        <p class="card_paragraph_content">
                            Known for her sculptural takes on&nbsp;traditional tailoring, Australian arbiter
                            of&nbsp;cool Kym Ellery teams up&nbsp;with Moda Operandi.
                        </p>
                        <p class="card_value">$52.00</p>
                    </div>
                </a>
                <a href="product.html" class="card_content">
                    <div class="image_container">
                        <img class="сard_product" src="img/3.png" alt="product">
                        <div class="add_to_cart_container">
                            <div class="add_to_cart_button">
                                <img src="img/basket.svg" alt="basket">
                                <span class="button_text">Add to Cart</span>
                            </div>
                        </div>
                    </div>
                    <div class="card_info">
                        <h2 class="card_item">ELLERY X&nbsp;M&rsquo;O CAPSULE</h2>
                        <p class="card_paragraph_content">
                            Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym
                            Ellery
                            teams up with Moda Operandi.Known for her sculptural takes on&nbsp;traditional tailoring,
                            Australian arbiter of&nbsp;cool Kym Ellery teams up&nbsp;with Moda Operandi.
                        </p>
                        <p class="card_value">$52.00</p>
                    </div>
                </a>
                <a href="product.html" class="card_content">
                    <div class="image_container">
                        <img class="сard_product" src="img/4.png" alt="product">
                        <div class="add_to_cart_container">
                            <div class="add_to_cart_button">
                                <img src="img/basket.svg" alt="basket">
                                <span class="button_text">Add to Cart</span>
                            </div>
                        </div>
                    </div>
                    <div class="card_info">
                        <h2 class="card_item">ELLERY X&nbsp;M&rsquo;O CAPSULE</h2>
                        <p class="card_paragraph_content">
                            Known for her sculptural takes on&nbsp;traditional tailoring, Australian arbiter
                            of&nbsp;cool Kym Ellery teams up&nbsp;with Moda Operandi.
                        </p>
                        <p class="card_value">$52.00</p>
                    </div>
                </a>
                <a href="product.html" class="card_content">
                    <div class="image_container">
                        <img class="сard_product" src="img/5.png" alt="product">
                        <div class="add_to_cart_container">
                            <div class="add_to_cart_button">
                                <img src="img/basket.svg" alt="basket">
                                <span class="button_text">Add to Cart</span>
                            </div>
                        </div>
                    </div>
                    <div class="card_info">
                        <h2 class="card_item">ELLERY X&nbsp;M&rsquo;O CAPSULE</h2>
                        <p class="card_paragraph_content">
                            Known for her sculptural takes on&nbsp;traditional tailoring, Australian arbiter
                            of&nbsp;cool Kym Ellery teams up&nbsp;with Moda Operandi.
                        </p>
                        <p class="card_value">$52.00</p>
                    </div>
                </a>
                <a href="product.html" class="card_content">
                    <div class="image_container">
                        <img class="сard_product" src="img/6.png" alt="product">
                        <div class="add_to_cart_container">
                            <div class="add_to_cart_button">
                                <img src="img/basket.svg" alt="basket">
                                <span class="button_text">Add to Cart</span>
                            </div>
                        </div>
                    </div>
                    <div class="card_info">
                        <h2 class="card_item">ELLERY X&nbsp;M&rsquo;O CAPSULE</h2>
                        <p class="card_paragraph_content">
                            Known for her sculptural takes on&nbsp;traditional tailoring, Australian arbiter
                            of&nbsp;cool Kym Ellery teams up&nbsp;with Moda Operandi.
                        </p>
                        <p class="card_value">$52.00</p>
                    </div>
                </a>
            </div>
        </div>

        <div class="push container">
            <a href="#" class="all_products">
                Browse All Product
            </a>
        </div>
    </main>

    <footer>
        <div class="footer_content">
            <div class="footer_block container">
                <div class="footer_info logo">
                    <a class="footer_link" href="#">
                        <img class="footer_info_content" src="img/delivery.svg" alt="photo">
                        <h2 class="footer_item">Free Delivery</h2>
                        <p class="footer_paragraph_content">
                            Worldwide delivery on&nbsp;all. Authorit tively morph next-generation innov tion with
                            extensive models.
                        </p>
                    </a>
                </div>
                <div class="footer_info_block logo">
                    <a class="footer_link" href="#">
                        <img class="footer_picture" src="img/discounts.svg" alt="photo">
                        <h2 class="footer_item">Sales &amp;&nbsp;discounts</h2>
                        <p class="footer_paragraph_content">
                            Worldwide delivery on&nbsp;all. Authorit tively morph next-generation innov tion with
                            extensive models.
                        </p>
                    </a>
                </div>
                <div class="footer_info logo">
                    <a class="footer_link" href="#">
                        <img class="footer_illustration" src="img/quality_assurance.svg" alt="photo">
                        <h2 class="footer_item">Quality assurance</h2>
                        <p class="footer_paragraph_content text_indent">
                            Worldwide delivery on&nbsp;all. Authorit tively morph next-generation innov tion with
                            extensive models.
                        </p>
                    </a>
                </div>
            </div>
        </div>

        <div class="footer_subscription">
            <div class="container footer_subscription_container">
                <div class="footer_contact">
                    <img class="footer_contact_person" src="img/contact_person.png" alt="photo">
                    <p class="footer_subscription_content">
                        “Vestibulum quis porttitor dui! Quisque<br> viverra nunc&nbsp;mi, <span
                            class="subscription">a&nbsp;pulvinar purus<br> condimentum</span>“
                    </p>
                </div>
                <form class="footer_entry_field" action="#">
                    <h2 class="footer_entry_subscribe">
                        <span class="subscribe">SUBSCRIBE </span><br>
                        FOR OUR NEWLETTER AND PROMOTION
                    </h2>
                    <div class="subscribe_item">
                        <div class="form_item">
                            <input class="form_input" required type="email" placeholder="Enter Your Email">
                            <button type="submit" class="form_submit">Subscribe</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="footer_right">
            <div class="footer_right_content container">
                <div class="footer_connection_cotent">
                    <p class="footer_connection_text">&copy;&nbsp;2021 Brand All Rights Reserved.</p>
                </div>
                <nav>
                    <div class="footer_connection_block">
                        <a href="#" class="footer_connection">
                            <svg width="9" height="15" viewBox="0 0 9 15" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M8.08836 8.28L8.50686 5.61602H5.89022V3.88729C5.89022 3.15847 6.25574 2.44806 7.42765 2.44806H8.61722V0.179975C8.61722 0.179975 7.53772 0 6.50561 0C4.35073 0 2.9422 1.27593 2.9422 3.5857V5.61602H0.546875V8.28H2.9422V14.72H5.89022V8.28H8.08836Z"
                                    fill="black" />
                            </svg>
                        </a>
                        <a href="#" class="footer_connection">
                            <svg width="16" height="15" viewBox="0 0 16 15" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M8.13897 3.68159C6.02383 3.68159 4.31774 5.38491 4.31774 7.49663C4.31774 9.60835 6.02383 11.3117 8.13897 11.3117C10.2541 11.3117 11.9602 9.60835 11.9602 7.49663C11.9602 5.38491 10.2541 3.68159 8.13897 3.68159ZM8.13897 9.9769C6.77211 9.9769 5.65467 8.8646 5.65467 7.49663C5.65467 6.12866 6.76878 5.01636 8.13897 5.01636C9.50915 5.01636 10.6233 6.12866 10.6233 7.49663C10.6233 8.8646 9.50583 9.9769 8.13897 9.9769ZM13.0078 3.52554C13.0078 4.02026 12.6087 4.41538 12.1165 4.41538C11.621 4.41538 11.2252 4.01694 11.2252 3.52554C11.2252 3.03413 11.6243 2.63569 12.1165 2.63569C12.6087 2.63569 13.0078 3.03413 13.0078 3.52554ZM15.5386 4.42866C15.4821 3.23667 15.2094 2.18081 14.3347 1.31089C13.4634 0.440967 12.4058 0.168701 11.2119 0.108936C9.9814 0.039209 6.29321 0.039209 5.0627 0.108936C3.8721 0.165381 2.81453 0.437646 1.93987 1.30757C1.06522 2.17749 0.795836 3.23335 0.735973 4.42534C0.666134 5.65386 0.666134 9.33608 0.735973 10.5646C0.79251 11.7566 1.06522 12.8124 1.93987 13.6824C2.81453 14.5523 3.86878 14.8246 5.0627 14.8843C6.29321 14.9541 9.9814 14.9541 11.2119 14.8843C12.4058 14.8279 13.4634 14.5556 14.3347 13.6824C15.2061 12.8124 15.4788 11.7566 15.5386 10.5646C15.6085 9.33608 15.6085 5.65718 15.5386 4.42866ZM13.949 11.8828C13.6895 12.5335 13.1874 13.0349 12.5322 13.2972C11.5511 13.6857 9.22314 13.596 8.13897 13.596C7.05479 13.596 4.72348 13.6824 3.74573 13.2972C3.09389 13.0382 2.59171 12.5369 2.32898 11.8828C1.93987 10.9033 2.02967 8.57905 2.02967 7.49663C2.02967 6.41421 1.9432 4.08667 2.32898 3.1105C2.58838 2.45972 3.09056 1.95835 3.74573 1.69604C4.7268 1.30757 7.05479 1.39722 8.13897 1.39722C9.22314 1.39722 11.5545 1.31089 12.5322 1.69604C13.184 1.95503 13.6862 2.4564 13.949 3.1105C14.3381 4.08999 14.2483 6.41421 14.2483 7.49663C14.2483 8.57905 14.3381 10.9066 13.949 11.8828Z"
                                    fill="black" />
                            </svg>

                        </a>
                        <a href="#" class="footer_connection">
                            <svg width="13" height="16" viewBox="0 0 13 16" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M6.74032 0.203125C3.55564 0.203125 0.408203 2.34063 0.408203 5.8C0.408203 8 1.63738 9.25 2.38233 9.25C2.68963 9.25 2.86655 8.3875 2.86655 8.14375C2.86655 7.85313 2.13091 7.23438 2.13091 6.025C2.13091 3.5125 4.03055 1.73125 6.4889 1.73125C8.60271 1.73125 10.1671 2.94062 10.1671 5.1625C10.1671 6.82187 9.50597 9.93437 7.36422 9.93437C6.59133 9.93437 5.93018 9.37187 5.93018 8.56563C5.93018 7.38438 6.74963 6.24062 6.74963 5.02187C6.74963 2.95312 3.835 3.32812 3.835 5.82812C3.835 6.35313 3.90018 6.93437 4.13298 7.4125C3.70463 9.26875 2.82931 12.0344 2.82931 13.9469C2.82931 14.5375 2.91311 15.1188 2.96899 15.7094C3.07452 15.8281 3.02175 15.8156 3.18316 15.7563C4.74757 13.6 4.69169 13.1781 5.3994 10.3562C5.78119 11.0875 6.76826 11.4812 7.55046 11.4812C10.8469 11.4812 12.3275 8.24688 12.3275 5.33125C12.3275 2.22813 9.66427 0.203125 6.74032 0.203125Z"
                                    fill="black" />
                            </svg>
                        </a>
                        <a href="#" class="footer_connection">
                            <svg width="17" height="14" viewBox="0 0 17 14" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M14.417 3.74052C14.427 3.88264 14.427 4.0248 14.427 4.16692C14.427 8.50192 11.1498 13.4969 5.15986 13.4969C3.31448 13.4969 1.60022 12.9588 0.158203 12.0248C0.420396 12.0552 0.67247 12.0654 0.944752 12.0654C2.46741 12.0654 3.8691 11.5476 4.98843 10.6644C3.5565 10.6339 2.3565 9.68977 1.94305 8.39027C2.14475 8.4207 2.34642 8.44102 2.5582 8.44102C2.85063 8.44102 3.14308 8.40039 3.41533 8.32936C1.92291 8.02477 0.803551 6.70498 0.803551 5.11108V5.07048C1.23715 5.31414 1.74139 5.46642 2.2758 5.4867C1.39849 4.89786 0.823727 3.8928 0.823727 2.75573C0.823727 2.14661 0.985041 1.58823 1.26741 1.10092C2.87077 3.09077 5.28086 4.39023 7.98334 4.53239C7.93293 4.28873 7.90266 4.03495 7.90266 3.78114C7.90266 1.97402 9.35477 0.501953 11.1598 0.501953C12.0976 0.501953 12.9446 0.897891 13.5396 1.53748C14.2757 1.39536 14.9816 1.12123 15.6068 0.745609C15.3648 1.50705 14.8505 2.14664 14.1749 2.5527C14.8304 2.48167 15.4657 2.29889 16.0505 2.04511C15.6069 2.69483 15.0522 3.27348 14.417 3.74052Z"
                                    fill="black" />
                            </svg>
                        </a>
                    </div>
                </nav>
            </div>
        </div>
    </footer>

    <div class="site_navigation" id="navigation_menu">
        <div class="menu-header">
            <button type="button" class="header_close_button" onclick="closeMenu()">
                <img class="header_img" src="img/x.svg" alt="photo">
            </button>
        </div>

        <h3 class="navigation_header">MENU</h3>

        <nav>
            <ul class="site_navigation_list">
                <li class="site_navigation_list_group">
                    <a class="group_link" href="catalog.html">MAN</a>
                    <ul>
                        <li class="link_menu"><a href="catalog.html">Accessories</a></li>
                        <li class="link_menu"><a href="catalog.html">Bags</a></li>
                        <li class="link_menu"><a href="catalog.html">Denim</a></li>
                        <li class="link_menu"><a href="catalog.html">T-Shirts</a></li>
                    </ul>
                </li>
                <li class="site_navigation_list_group">
                    <a class="group_link" href="catalog.html">WOMAN</a>
                    <ul>
                        <li class="link_menu"><a href="catalog.html">Accessories</a></li>
                        <li class="link_menu"><a href="catalog.html">Jackets &amp;&nbsp;Coats</a></li>
                        <li class="link_menu"><a href="catalog.html">Polos</a></li>
                        <li class="link_menu"><a href="catalog.html">T-Shirts</a></li>
                        <li class="link_menu"><a href="catalog.html">Shirts</a></li>
                    </ul>
                </li>
                <li class="site_navigation_list_group">
                    <a class="group_link" href="catalog.html">KIDS</a>
                    <ul>
                        <li class="link_menu"><a href="catalog.html">Accessories</a></li>
                        <li class="link_menu"><a href="catalog.html">Jackets &amp;&nbsp;Coats</a></li>
                        <li class="link_menu"><a href="catalog.html">Polos</a></li>
                        <li class="link_menu"><a href="catalog.html">T-Shirts</a></li>
                        <li class="link_menu"><a href="catalog.html">Shirts</a></li>
                        <li class="link_menu"><a href="catalog.html">Bags</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>

    <script>
        function toggleMenu() {
            var menu = document.getElementById("navigation_menu");
            menu.classList.toggle("shown");
        }

        function closeMenu() {
            var menu = document.getElementById("navigation_menu");
            menu.classList.remove("shown");
        }
    </script>

</body>

</html>