index.html
unknown
plain_text
a year ago
15 kB
1
Indexable
<!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>