index.html
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>