introduction.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giới thiệu về chúng tôi</title>

    <!-- Link css font -->
    <link rel="stylesheet" href="./assets/font/Arima Madurai font/style.css">
    <link rel="stylesheet" href="./assets/font/themify-icons/themify-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!--Link css style -->
    <link rel="stylesheet" href="./assets/css/grid.css">
    <link rel="stylesheet" href="./assets/css/style.css">
    <link rel="stylesheet" href="./assets/css/responsive.css">

    
</head>

<body>
    <header>
        <div class="header-container ">
            
                <div class="col grid wide">
                    <div class="row">
                        <div class="col c-12 m-12 l-12 header-logo">
                            <a href="./index.html" class="">
                                <img src="./assets/img/logo.png" alt="" class="header-logo-image" />
                            </a>
                        </div>
                    </div>
                </div>
                

            <div class="group-1 grid wide ">
                <div class="row">
                    <div class="header-search col l-10 c-6 m-8">

                        <label class="search-label btn" for="search">
                            <i class="ti-search"></i>
                        </label>
                        <input type="text" name="search" id="search" class="c-0 m-6 l-6 search-input">


                    </div>

                    <div class="header-guest col l-2 c-6 m-4 ">
                        <a href="#" class="guest-cart btn">
                            <i class="ti-shopping-cart"></i>
                        </a>

                        <a href="./login.html" class="guest-user btn">
                            <i class="fa-regular fa-user"></i>
                        </a>
                    </div>

                </div>
            </div>


            <nav>
                <div class=" header-container">
                    <!--*Begin nav Mobile  -->
                    <div>
                        <div class="menuToggle">
                            <label for="nav-mobile-input"><i class="ti-menu menuBtn"></i>
                            </label>
                            <a href="./index.html" class="nav-mobile-link">Trang chủ</a>


                            <p class="menuToggle-text">
                            </p>
                        </div>
                        <input type="checkbox" hidden name="" class="nav-input" id="nav-mobile-input">
                        <label for="nav-mobile-input" class="nav-overlay"></label>
                        <div class="header-container-mobile">

                            <ul class="nav-mobile">
                                <label for="nav-mobile-input"><i class="ti-close nav-mobile-close"></i></label>

                                <li class="nav-mobile-item ">
                                    <a href="./index.html" class="nav-mobile-link">Trang chủ</a>
                                </li>
                                <li class="nav-mobile-item  ">
                                    <a href="./introduction.html" class="nav-mobile-link">Giới thiệu</a>
                                </li>
                                <li class="nav-mobile-item ">
                                    <div class="dropdown-overlay">
                                        <a  class="nav-mobile-link dropdown-heading ">Sản phẩm</a>
                                        <i class="ti-angle-down dropdown-icon"></i>
                                    </div>

                                    <ul class="subnav-mobile active">
                                        <li class="subnav-mobile-item ">
                                            <div class="dropdown-overlay">
                                                <p  class="subnav-mobile-link dropdown-heading ">Bộ sưu tập</p>
                                                <i class="ti-angle-down dropdown-icon"></i>

                                            </div>
                                            <ul class="subnav-mobile-dropdown">
                                                <li class="subnav-mobile-dropdown-item">
                                                    <a href="./product-male.html"
                                                        class="subnav-mobile-dropdown-item">Nam</a>
                                                </li>
                                                <li class="subnav-mobile-dropdown-item">
                                                    <a href="./product-female.html"
                                                        class="subnav-mobile-dropdown-item">Nữ</a>
                                                </li>
                                                <li class="subnav-dropdown-item">
                                                    <a href="./product-couple.html" class="subnav-dropdown-link">Cặp đôi</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="subnav-mobile-item   ">
                                            <div class="dropdown-overlay">
                                                <p  class="subnav-mobile-link dropdown-heading ">Thương hiệu</p>
                                                <i class="ti-angle-down dropdown-icon "></i>
                                            </div>
                                            <ul class="subnav-mobile-dropdown">
                                                <li class="subnav-mobile-dropdown-item">
                                                    <a class="subnav-mobile-dropdown-item">Casio</a>
                                                </li>
                                                <li class="subnav-mobile-dropdown-item">
                                                    <a href="#" class="subnav-mobile-dropdown-item">Citizen</a>
                                                </li>
                                                <li class="subnav-mobile-dropdown-item">
                                                    <a href="#" class="subnav-mobile-dropdown-item">Doxa</a>
                                                </li>
                                                <li class="subnav-mobile-dropdown-item">
                                                    <a href="#" class="subnav-mobile-dropdown-item">Tissot</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="subnav-mobile-item  ">
                                            <div class="dropdown-overlay">
                                                <a href="#" class="subnav-mobile-link dropdown-heading">Các dòng đặc
                                                    biệt</a>
                                                <i class="ti-angle-down dropdown-icon"></i>

                                            </div>
                                            <ul class="subnav-mobile-dropdown">
                                                <li class="subnav-mobile-dropdown-item">
                                                    <a href="#" class="subnav-mobile-dropdown-item">Đồng hồ điện tử</a>
                                                </li>
                                                <li class="subnav-mobile-dropdown-item">
                                                    <a href="#" class="subnav-mobile-dropdown-item">Đồng hồ đính kim
                                                        cương</a>
                                                </li>
                                                <li class="subnav-mobile-dropdown-item">
                                                    <a href="#" class="subnav-mobile-dropdown-item">Đồng hồ Thuỵ Sĩ</a>
                                                </li>

                                            </ul>
                                        </li>
                                    </ul>

                                </li>
                                <li class="nav-mobile-item ">
                                    <a href="#" class="nav-mobile-link">Ưu đãi</a>
                                </li>
                                </li>
                                <li class="nav-mobile-item ">
                                    <div class="dropdown-overlay">
                                        <p  class="nav-mobile-link dropdown-heading">CSKH</p>
                                        <i class="ti-angle-down dropdown-icon"></i>

                                    </div>
                                    <ul class="subnav-mobile-dropdown  ">
                                        <li class="subnav-mobile-dropdown-item">
                                            <a href="./contact.html" class="subnav-mobile-dropdown-item">Bảo hành</a>
                                        </li>
                                        <li class="subnav-mobile-dropdown-item">
                                            <a href="./contact.html" class="subnav-mobile-dropdown-item ">Liên hệ</a>
                                        </li>

                                    </ul>
                                </li>
                            </ul>
                        </div>
                    <!--* End nav Mobile -->
                    
                    <!--* Begin nav PC -->
                        <ul class="nav ">
                            <li class="nav-item col m-2-4 l-2-4 ">
                                <a href="./index.html" class="nav-link">Trang chủ</a>
                            </li>
                            <li class="nav-item col m-2-4 l-2-4   ">
                                <a href="./introduction.html" class="nav-link">Giới thiệu</a>
                            </li>
                            <li class="nav-item col m-2-4 l-2-4  ">
                                <a href="#" class="nav-link">Sản phẩm</a>
                                <ul class="subnav">
                                    <li class="subnav-item col l-4 m-4">
                                        <a href="#" class="subnav-link ">Bộ sưu tập</a>
                                        <ul class="subnav-dropdown">
                                            <li class="subnav-dropdown-item">
                                                <a href="./product-male.html" class="subnav-dropdown-link">Nam</a>
                                            </li>
                                            <li class="subnav-dropdown-item">
                                                <a href="./product-female.html" class="subnav-dropdown-link">Nữ</a>
                                            </li>
                                            <li class="subnav-dropdown-item">
                                                <a href="#" class="subnav-dropdown-link">Cặp đôi</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="subnav-item col l-4 m-4">
                                        <a href="#" class="subnav-link ">Thương hiệu</a>
                                        <ul class="subnav-dropdown">
                                            <li class="subnav-dropdown-item">
                                                <a class="subnav-dropdown-link">Casio</a>
                                            </li>
                                            <li class="subnav-dropdown-item">
                                                <a href="#" class="subnav-dropdown-link">Citizen</a>
                                            </li>
                                            <li class="subnav-dropdown-item">
                                                <a href="#" class="subnav-dropdown-link">Doxa</a>
                                            </li>
                                            <li class="subnav-dropdown-item">
                                                <a href="#" class="subnav-dropdown-link">Tissot</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="subnav-item col l-4 m-4">
                                        <a href="#" class="subnav-link ">Các dòng đặc biệt</a>
                                        <ul class="subnav-dropdown">
                                            <li class="subnav-dropdown-item">
                                                <a href="#" class="subnav-dropdown-link">Đồng hồ điện tử</a>
                                            </li>
                                            <li class="subnav-dropdown-item">
                                                <a href="#" class="subnav-dropdown-link">Đồng hồ đính kim cương</a>
                                            </li>
                                            <li class="subnav-dropdown-item">
                                                <a href="#" class="subnav-dropdown-link">Đồng hồ Thuỵ Sĩ</a>
                                            </li>

                                        </ul>
                                    </li>
                                </ul>

                            </li>
                            <li class="nav-item col m-2-4 l-2-4  ">
                                <a href="./voucher.html" class="nav-link">Ưu đãi</a>
                            </li>
                            </li>
                            <li class="nav-item col m-2-4 l-2-4  ">
                                <a href="#" class="nav-link">CSKH</a>
                                <ul class="subnav grid row ">
                                    <li class="subnav-item col l-6 m-6">
                                        <a href="./contact.html" class="subnav-link ">Bảo hành</a>
                                    </li>
                                    <li class="subnav-item col l-6 m-6">
                                        <a href="./contact.html" class="subnav-link ">Liên hệ</a>
                                    </li>

                                </ul>
                            </li>
                        </ul>
                    </div>

                </div>


            </nav>
        </div>
    </header>

    <main>
        <div class="introduction-container">
            <div class="grid wide">
                <div class="row">
                    <div class="introduction-item">
                        <div class="col l-12 ">
                            <div class="introduction-row1">
                                <div class="col l-6 m-12 c-12 ">
                                    <div class="introduction-img">
                                        <img src="./assets/img/introduction/khai_truong_showroom_donghochinhhang_vincom_ba_trieu_89343b6f07e147abbb098ecffa437051.webp"
                                            alt="">

                                    </div>
                                </div>

                                <div class="col l-6 m-12 c-12 left-line">
                                    <div class="introduction-about">
                                        <h3 class="introduction-heading">Tháng 8 năm 1999</h3>
                                        <p class="introduction-text">
                                            <span class="introduction-highlight">Khai trương cửa hàng: </span>Nếu cửa
                                            hàng
                                            được mở trong giai đoạn này, một
                                            sự kiện lễ khai trương sẽ là bước quan trọng để giới thiệu cửa hàng với cộng
                                            đồng.
                                        </p>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="introduction-item">
                        <div class="col l-12 ">
                            <div class="introduction-row2">
                                <div class=" col l-6 m-12 c-12">
                                    <div class="introduction-about">
                                        <h3 class="introduction-heading">2000-2010</h3>
                                        <p class="introduction-text">
                                            <span class="introduction-highlight">Ra mắt thương hiệu mới: </span>Tổ chức
                                            sự kiện ra mắt các thương hiệu đồng hồ mới và độc đáo để tăng cường sự hấp
                                            dẫn của
                                            cửa hàng đối với khách hàng.
                                        </p>
                                    </div>
                                </div>

                                <div class=" col l-6 m-12 c-12 left-line">
                                    <div class="introduction-img">
                                        <img src="./assets/img/introduction/Zegarek-Doxa-Blue-Planet-Limited-D198RBU.webp"
                                            alt="">

                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="introduction-item">
                        <div class="col l-12 ">
                            <div class="introduction-row1">
                                <div class=" col m-12 l-6 c-12">
                                    <div class="introduction-img">
                                        <img src="./assets/img/introduction/trienlam.webp" alt="">

                                    </div>
                                </div>
                                <div class="col m-12 l-6 c-12 left-line">
                                    <div class="introduction-about">
                                        <h3 class="introduction-heading">2011-2020</h3>
                                        <p class="introduction-text">
                                            <span class="introduction-highlight">Chương trình khuyến mãi 10 năm :
                                            </span> Tổ
                                            chức các sự kiện và chương trình khuyến mãi để kỷ niệm 10 năm hoạt động của
                                            cửa
                                            hàng, bao gồm các ưu đãi đặc biệt và quà tặng cho khách hàng.
                                        </p>
                                        <p class="introduction-text">
                                            <span class="introduction-highlight">Triển lãm đồng hồ quốc tế : </span>
                                            Tham
                                            gia vào triển lãm đồng hồ quốc tế để cung cấp cơ hội tiếp cận với các thương
                                            hiệu và xu hướng quốc tế.
                                        </p>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="introduction-item">
                        <div class="col l-12 ">
                            <div class="introduction-row2">
                                <div class="col m-12 l-6 c-12 right-line">
                                    <div class="introduction-about">
                                        <h3 class="introduction-heading">2011-2020</h3>
                                        <p class="introduction-text">
                                            <span class="introduction-highlight">Chương trình khuyến mãi 10 năm :
                                            </span> Tổ
                                            chức các sự kiện và chương trình khuyến mãi để kỷ niệm 10 năm hoạt động của
                                            cửa
                                            hàng, bao gồm các ưu đãi đặc biệt và quà tặng cho khách hàng.
                                        </p>
                                        <p class="introduction-text">
                                            <span class="introduction-highlight">Triển lãm đồng hồ quốc tế : </span>
                                            Tham
                                            gia vào triển lãm đồng hồ quốc tế để cung cấp cơ hội tiếp cận với các thương
                                            hiệu và xu hướng quốc tế.
                                        </p>

                                    </div>
                                </div>

                                <div class="col m-12 l-6 c-12">
                                    <div class="introduction-img">
                                        <img src="./assets/img/introduction/dong_ho_thuy_si.jpg" alt="">
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </main>

    <footer>
        <div class="footer-container grid wide">
            <p class="shop-name">AUGUST</p>

            <div class="footer-store">
                <div class="grid wide">
                    <div class="row">
                        <div class="col c-12 m-12 l-4 store-chain">
                            <h3 class="footer-heading">Hệ thống cửa hàng</h3>
                            <ul class="list-store">
                                <li class="store-item">TP.Hồ Chí Minh</li>
                                <li class="store-item">Hà Nội</li>
                                <li class="store-item">Biên hoà - Bình Dương</li>
                                <li class="store-item">Đà Nẵng</li>
                            </ul>
                        </div>
                        <div class="col c-12 m-12 l-4 store-info">
                            <h3 class="footer-heading">Thông tin</h3>

                            <ul class="list-info">
                                <li class="info-item">Thông tin liên hệ</li>
                                <li class="info-item">Thanh toán - trả góp</li>
                                <li class="info-item">Liên hệ đối tác doanh nghiệp</li>
                                <li class="info-item">Vận chuyển &#38; Giao nhận</li>
                            </ul>
                        </div>
                        <div class="col c-12 m-12 l-4 store-about ">
                            <h3 class="footer-heading">Về chúng tôi</h3>

                            <ul class="list-about">
                                <li class="about-item">Thông tin liên hệ : abc&#64;gmail.com</li>
                                <li class="about-item">Hotline: 00000000</li>
                                <li class="about-item">
                                    <i class="fa-brands fa-facebook"></i>
                                    <i class="fa-brands fa-instagram"></i>
                                    <i class="fa-brands fa-tiktok"></i>
                                    <i class="fa-brands fa-youtube"></i>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="footer-group2">
                <div class="grid wide">
                    <div class="row">
                        <div class="col l-3 c-12 store-policy">
                            <h3 class="footer-heading">Chính sách</h3>

                            <ul class="list-policy">
                                <li class="policy-item">Chính sách đổi trả</li>
                                <li class="policy-item">Chính sách bảo hành</li>
                            </ul>
                        </div>

                        <div class="col l-9 c-12 store-time">
                            <p class="time-about">Thời gian hoạt động 7:00 - 20:00</p>
                            <p class="time-about">Xin cảm ơn và rất hân hạnh được phục vụ</p>
                        </div>
                    </div>
                </div>
            </div>


        </div>
        <p id="copyright"> &copy; August 2023. All rights reserved</p>
    </footer>
</body>
<script src="./assets/js/dropdown.js"></script>

</html>