index.html

mail@pastecode.io avatar
unknown
plain_text
a year ago
15 kB
1
Indexable
Never
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web2_HTML_CSS</title>
    <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=Montserrat:wght@300;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>

<body>
    <nav class="navbar-wrapper">
        <div class="container-lg navbar-wrapper">
            <div class="row d-flex align-items-center" style="height: 91px;">
                <div class=" col navbar-logo-wrapper">
                    <img class="navbar-logo" src="./img/logo_white2.png" alt="logo-mindx" />
                </div>
                <div class="col text-white">Trang Chủ</div>
                <div class="col text-white">Về chúng tôi</div>
                <div class="col text-white">Khóa học</div>
                <div class="col text-white">Liên hệ</div>
                <div class="col text-white">
                    <button type="button" class="btn-c-blue-200">
                        <span class="m-2">Login</span>
                        <i class="ml-10 fa-solid fa-arrow-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>
    <div class="section-1">
        <div class="container-lg">
            <div class="row d-flex align-items-center justify-content-center" style="height: 682px">
                <div class="col-6 d-flex flex-column justify-content-around" style="height: 100px;">
                    <p class="fs-5">Đào tạo trực tuyến cùng MindX</p>
                    <p class="fw-bolder" style="font-size: 58px;">Cơ hội đào tạo tốt nhất</p>
                    <p class="fs-4">Hãy đăng nhập để tham gia khóa học của chúng tôi</p>
                    <div class="d-flex">
                        <button class="btn-c-blue-200" style="margin-right: 8px;">Tham gia đào tạo</button>
                        <button class="btn-c-blue-200 btn-c-outline">Tìm hiểu thêm</button>
                    </div>
                </div>
                <div class="col-6 section-1__left">
                    <div class="section-1__img">
                        <img src="./img/model-1.png" alt="Model with tablet" />
                    </div>
                    <div
                        class="section-1__rectangle d-flex align-items-center justify-content-center section-1__left__banner">
                        <span class="text-1">199+</span>
                        <span class="text-2">Học viên đã hoàn thành khóa học</span>
                    </div>
                    <div class="section-1__left__animated-bg_1"></div>
                    <div class="section-1__left__animated-bg_2"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="section-2">
        <div class="section-2__container container-sm">
            <div class="section-2__container__header d-flex justify-content-between align-items-center">
                <span class="section-2__container__header-label">Một số khóa học mẫu của chúng tôi</span>
                <button class="btn-c-blue-200 btn-c-outline btn-course">
                    Xem các khóa học
                </button>
            </div>
            <div class="d-flex section-2__container__list">
                <div class="section-2__card-item">
                    <div class="section-2__card-item__img">
                        <img src="./img/list-img-1.png" alt="img 1" />
                    </div>
                    <p class="section-2__card-item__name">Lập trình Python</p>
                    <p class="section-2__card-item__content">Lorem</p>
                    <div class="d-flex gap-2 justify-content-between section-2__card-item__indicator">
                        <div class="section-2__card-item__indicator-left">
                            <img src="./img/user-icon.png" width="20" height="20" />
                            <span>1,45,690</span>
                        </div>
                        <div class="section-2__card-item__indicator-right">
                            <img src="./img/icon-clock.png" width="20" height="20" />
                            <span>4 tiết</span>
                        </div>
                    </div>
                    <button class="btn-c-blue-200 btn-c-outline btn-c-outline-hover"
                        style="color: var(--bs-blue-200)">Xem khóa
                        học</button>
                </div>
                <div class="section-2__card-item">
                    <div class="section-2__card-item__img">
                        <img src="./img/list-img-2.png" alt="img 2" />
                    </div>
                    <p class="section-2__card-item__name">Khoa học máy tính 101</p>
                    <p class="section-2__card-item__content"></p>
                    <div class="d-flex gap-2 justify-content-between section-2__card-item__indicator">
                        <div class="section-2__card-item__indicator-left">
                            <img src="./img/user-icon.png" width="20" height="20" />
                            <span>1,45,690</span>
                        </div>
                        <div class="section-2__card-item__indicator-right">
                            <img src="./img/icon-clock.png" width="20" height="20" />
                            <span>4 months</span>
                        </div>
                    </div>
                    <button class="btn-c-blue-200 btn-c-outline btn-c-outline-hover"
                        style="color: var(--bs-blue-200)">Xem khóa
                        học</button>
                </div>
                <div class="section-2__card-item">
                    <div class="section-2__card-item__img">
                        <img src="./img/list-img-1.png" alt="img 1" />
                    </div>
                    <p class="section-2__card-item__name">Lập trình Python: Ứng dụng thực tế</p>
                    <p class="section-2__card-item__content">Lorem</p>
                    <div class="d-flex gap-2 justify-content-between section-2__card-item__indicator">
                        <div class="section-2__card-item__indicator-left">
                            <img src="./img/user-icon.png" width="20" height="20" />
                            <span>1,45,690</span>
                        </div>
                        <div class="section-2__card-item__indicator-right">
                            <img src="./img/icon-clock.png" width="20" height="20" />
                            <span>4 months</span>
                        </div>
                    </div>
                    <button class="btn-c-blue-200 btn-c-outline btn-c-outline-hover"
                        style="color: var(--bs-blue-200)">Xem khóa
                        học</button>
                </div>
            </div>
        </div>
    </div>
    <div class="section-3 container-lg">
        <div class="row ">
            <div class="col-6 section-3-left">
                <h4 class="section-3-left__title">Các khóa học Online của chúng tôi hoạt động ra sao ?</h4>
                <div class="row">
                    <div class="mt-5 col-6 section-3-left__item__title">
                        <div class="section-3-left__item__img">
                            <img src="./img/icon-presentation.svg" alt="presentation icon" />
                        </div>
                        <p>Học trực tuyến</p>
                        <label>Học mọi lúc, mọi nơi, tại bất kỳ tời điểm nào phù hợp với bạn. Đảm bảo được kiến thức dù
                            bất cứ nơi
                            đâu</label>
                    </div>
                    <div class="mt-5 col-6 section-3-left__item__title">
                        <div class="section-3-left__item__img">
                            <img src="./img/icon-presentation.svg" alt="presentation icon" />
                        </div>
                        <p>Học trực tuyến</p>
                        <label>Học mọi lúc, mọi nơi, tại bất kỳ tời điểm nào phù hợp với bạn. Đảm bảo được kiến thức dù
                            bất cứ nơi
                            đâu</label>
                    </div>
                    <div class="mt-5 col-6 section-3-left__item__title">
                        <div class="section-3-left__item__img">
                            <img src="./img/icon-presentation.svg" alt="presentation icon" />
                        </div>
                        <p>Học trực tuyến</p>
                        <label>Học mọi lúc, mọi nơi, tại bất kỳ tời điểm nào phù hợp với bạn. Đảm bảo được kiến thức dù
                            bất cứ nơi
                            đâu</label>
                    </div>
                    <div class="mt-5 col-6 section-3-left__item__title">
                        <div class="section-3-left__item__img">
                            <img src="./img/icon-presentation.svg" alt="presentation icon" />
                        </div>
                        <p>Học trực tuyến</p>
                        <label>Học mọi lúc, mọi nơi, tại bất kỳ tời điểm nào phù hợp với bạn. Đảm bảo được kiến thức dù
                            bất cứ nơi
                            đâu</label>
                    </div>
                </div>
            </div>
            <div class="col-1"></div>
            <div class="col-5 section-3-right">
                <div class="section-3-right__bg">
                    <div class="section-3-right-largest">
                        <img src="./img/section-3-gallery-1.png" alt="largest img" />
                    </div>
                    <div class="d-flex section-3-right__gallery">
                        <div class="col-3 section-3-right__gallery-item">
                            <img src="./img/section-3-gallery-2.png" alt="img 2" />
                        </div>
                        <div class="col-3 section-3-right__gallery-item">
                            <img src="./img/section-3-gallery-3.png" alt="img 3" />
                        </div>
                        <div class="col-3 section-3-right__gallery-item">
                            <img src="./img/section-3-gallery-4.png" alt="img 4" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="footer">
        <div class="container">
            <div class="row footer-section">
                <div class="col-sm-12 col-md-2">
                    <img class="footer_logo" src="./img/logo-mindx.png" alt="">
                    <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
                        nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ut wisi enim ad minim</p>
                    <ul class="ul_footer">
                        <li><img src="./img/facebook-icon.png" alt=""></li>
                        <li><img src="./img/Path 691.png" alt=""></li>
                        <li><img src="./img/Path 693.png" alt=""></li>
                    </ul>
                </div>

                <div class="col-xs-6 col-md-auto">
                    <h6>Products</h6>
                    <ul class="footer-links">
                        <li><a href="">Connections</a></li>
                        <li><a href=""> Protocols</a></li>
                        <li><a href="">Personas</a></li>
                        <li><a href="">Integrations</a></li>
                        <li><a href="">Catalog</a></li>
                        <li><a href="">Pricing</a></li>
                        <li><a href="">Security</a></li>
                        <li><a href="">GDPR</a></li>
                    </ul>
                </div>
                <div class="col-xs-6 col-md-auto">
                    <h6>For Developers</h6>
                    <ul class="footer-links">
                        <li><a href="">Docs</a></li>
                        <li><a href=""> API</a></li>
                        <li><a href="">Open Source</a></li>
                        <li><a href="">Integrations</a></li>
                        <li><a href="">Engineering Team</a></li>
                    </ul>
                </div>
                <div class="col-xs-6 col-md-auto">
                    <h6>Company</h6>
                    <ul class="footer-links">
                        <li><a href="">Careers</a></li>
                        <li><a href=""> Blog</a></li>
                        <li><a href="">Press</a></li>

                    </ul>
                </div>
                <div class="col-xs-6 col-md-auto">
                    <h6>Support</h6>
                    <ul class="footer-links">
                        <li><a href="">Help Center</a></li>
                        <li><a href=""> Contact Us</a></li>
                        <li><a href="">Security</a></li>
                        <li><a href="">Bulletins</a></li>
                        <li><a href="">Documentation</a></li>
                        <li><a href="">Partner</a></li>
                        <li><a href="">Portal</a></li>

                    </ul>
                </div>
                <div class="col-xs-6 col-md-auto">
                    <h6>Newsletter</h6>
                    <div class="input-container">
                        <input type="text" placeholder="Email"><i class="fa-regular fa-paper-plane"
                            style="color:rgba(114, 46, 209, 1);"></i>
                    </div>

                </div>
            </div>
            <hr>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
</body>

</html>