Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <!--=============== FAVICON ===============--> | |
| <link rel="shortcut icon" href="static/web2/assets/img/favicon.png" type="image/x-icon"> | |
| <!--=============== REMIXICONS ===============--> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.css"> | |
| <!--=============== SWIPER CSS ===============--> | |
| <link rel="stylesheet" href="static/web2/assets/css/swiper-bundle.min.css"> | |
| <!--=============== CSS ===============--> | |
| <link rel="stylesheet" href="static/web2/assets/css/styles.css"> | |
| <title>BTL Basic web design</title> | |
| </head> | |
| <body> | |
| <!--==================== HEADER ====================--> | |
| <header class="header" id="header"> | |
| <nav class="nav container"> | |
| <a href="#" class="nav__logo"> | |
| <img src="static/web2/assets/img/icon-main.svg" alt="image" id="icon-main"> Neural AI* Research | |
| </a> | |
| <div class="nav__menu"> | |
| <ul class="nav__list"> | |
| <li class="nav__item"> | |
| <a href="#home" class="nav__link active-link"> | |
| <i class="ri-home-line"></i> | |
| <span>Home</span> | |
| </a> | |
| </li> | |
| <li class="nav__item"> | |
| <a href="#featured" class="nav__link"> | |
| <i class="ri-sparkling-line"></i> | |
| <span>Outstanding product</span> | |
| </a> | |
| </li> | |
| <li class="nav__item"> | |
| <a href="#discount" class="nav__link"> | |
| <i class="ri-price-tag-3-line"></i> | |
| <span> Discount </span> | |
| </a> | |
| </li> | |
| <li class="nav__item"> | |
| <a href="#testimonial" class="nav__link"> | |
| <i class="ri-message-3-line"></i> | |
| <span>Evaluate</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="nav__actions"> | |
| <!-- Search button --> | |
| <i class="ri-search-line search-button" id="search-button"></i> | |
| <i class="ri-shopping-bag-line bag-button" id="bag-button"></i> | |
| <!-- Login button --> | |
| <i class="ri-user-line login-button" id="login-button"></i> | |
| <!-- Theme button --> | |
| <i class="ri-moon-line change-theme" id="theme-button"></i> | |
| </div> | |
| </nav> | |
| </header> | |
| <!--==================== SEARCH ====================--> | |
| <div class="search" id="search-content"> | |
| <form action="" class="search__form"> | |
| <i class="ri-search-line search__icon"></i> | |
| <input type="search" placeholder="What are you looking for?" class="search__input"> | |
| </form> | |
| <i class="ri-close-line search__close" id="search-close"></i> | |
| </div> | |
| <!--=============== SHOPPING BAG ===============--> | |
| <div class="bag grid" id="bag-content"> | |
| <form action="" class="bag__form grid"> | |
| <h3 class="bag__title">Your cart</h3> | |
| <div class="bag__group grid"> | |
| <div id="cartItemsContainer"> | |
| </div> | |
| <div id="totalAmountContainer"> | |
| </div> | |
| <button type="button" class="bag__button button" id="clearCart">Reset cart</button> | |
| <div> | |
| <h3>Recipient information</h3> | |
| <h4>Beneficiary bank: MBBank</h4> | |
| <h4>Beneficiary: NGUYEN TIEN DAT</h4> | |
| <h4>Beneficiary account: 1555 201314 2004</h4> | |
| <h4>Content: customer_product_buyDate</h4> | |
| </div> | |
| <div> | |
| <img src="static/web2/assets/img/QR.jpg" alt="QR"> | |
| </div> | |
| <button type="submit" class="bag__button button" id="checkOut">Check Out</button> | |
| </div> | |
| </form> | |
| <i class="ri-close-line bag__close" id="bag-close"></i> | |
| </div> | |
| <!--==================== LOGIN ====================--> | |
| <div class="login grid" id="login-content"> | |
| <form class="login__form grid" id="loginForm"> | |
| <h3 class="login__title">Login</h3> | |
| <div class="login__group grid"> | |
| <div> | |
| <label for="login-email" class="login__label">Email</label> | |
| <input type="email" placeholder="Please enter email..." id="login-email" class="login__input" required> | |
| </div> | |
| <div> | |
| <label for="login-pass" class="login__label">Password</label> | |
| <input type="password" placeholder="Please enter a password..." id="login-pass" class="login__input" required> | |
| </div> | |
| </div> | |
| <div> | |
| <span class="login__signup"> | |
| You don't have an account yet? <a href="#">Register now</a> | |
| </span> | |
| <a href="#" class="login__forgot"> | |
| You forgot your password? | |
| </a> | |
| <button type="submit" class="login__button button">Log In</button> | |
| </div> | |
| </form> | |
| <i class="ri-close-line login__close" id="login-close"></i> | |
| <div id="loginMessage"></div> | |
| </div> | |
| <!--==================== MAIN ====================--> | |
| <main class="main"> | |
| <!--==================== HOME ====================--> | |
| <section class="home section" id="home"> | |
| <div class="home__container container grid"> | |
| <div class="home__data"> | |
| <h1 class="home__title"> | |
| Choose the best product for you | |
| </h1> | |
| <p class="home__description"> | |
| Find our best AI medical products, discover products in all the latest designs, take advantage of 50% off and more. | |
| </p> | |
| <a href="#" class="button">Discover more</a> | |
| </div> | |
| <div class="home__images"> | |
| <div class="home__swiper swiper"> | |
| <div class="swiper-wrapper"> | |
| <article class="home__article swiper-slide"> | |
| <img src="static/web2/assets/img/lung1.png" alt="image" class="home__img"> | |
| </article> | |
| <article class="home__article swiper-slide"> | |
| <img src="static/web2/assets/img/lung2.jpg" alt="image" class="home__img"> | |
| </article> | |
| <article class="home__article swiper-slide"> | |
| <img src="static/web2/assets/img/lung1.png" alt="image" class="home__img"> | |
| </article> | |
| <article class="home__article swiper-slide"> | |
| <img src="static/web2/assets/img/lung1.png" alt="image" class="home__img"> | |
| </article> | |
| <article class="home__article swiper-slide"> | |
| <img src="static/web2/assets/img/lung1.png" alt="image" class="home__img"> | |
| </article> | |
| <article class="home__article swiper-slide"> | |
| <img src="static/web2/assets/img/lung1.png" alt="image" class="home__img"> | |
| </article> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!--==================== SERVICES ====================--> | |
| <section class="services section"> | |
| <div class="services__container container grid"> | |
| <article class="services__card"> | |
| <i class="ri-truck-line"></i> | |
| <h3 class="services__title">Free usermanual</h3> | |
| <p class="services__description">For all product</p> | |
| </article> | |
| <article class="services__card"> | |
| <i class="ri-lock-2-line"></i> | |
| <h3 class="services__title">Secure payment</h3> | |
| <p class="services__description">100% Secure payment</p> | |
| </article> | |
| <article class="services__card"> | |
| <i class="ri-customer-service-2-line"></i> | |
| <h3 class="services__title">Supports 24/7</h3> | |
| <p class="services__description">Anytime</p> | |
| </article> | |
| </div> | |
| </section> | |
| <!--==================== FEATURED ====================--> | |
| <section class="featured section" id="featured"> | |
| <h2 class="section__title"> | |
| Best selling products | |
| </h2> | |
| <div class="featured__container container"> | |
| <div class="featured__swiper swiper"> | |
| <div class="swiper-wrapper"> | |
| <article class="featured__card swiper-slide"> | |
| <img src="static/web2/assets/img/ai2.jpg" alt="image" class="featured__img"> | |
| <h2 class="featured__title">Lung Cancer Detection</h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="4350000">4.350.000 ₫</span> | |
| <span class="featured__price">4.470.000 ₫</span> | |
| </div> | |
| <button class="button" id="add-to-cart">Add to cart</button> | |
| <div class="featured__actions"> | |
| <button><i class="ri-heart-3-line"></i></button> | |
| <button><i class="ri-eye-line" onclick="openDetailPage()"></i></button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img src="static/web2/assets/img/ai2.jpg" alt="image" class="featured__img"> | |
| <h2 class="featured__title">Lung Cancer Recognition</h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="4140000">4.140.000 ₫</span> | |
| <span class="featured__price">4.968.000 ₫</span> | |
| </div> | |
| <button class="button" id="add-to-cart">Add to cart</button> | |
| <div class="featured__actions"> | |
| <button><i class="ri-heart-3-line"></i></button> | |
| <button><i class="ri-eye-line" onclick="openDetailPage()"></i></button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img src="static/web2/assets/img/ai2.jpg" alt="image" class="featured__img"> | |
| <h2 class="featured__title">Brain Tumor Detection</h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="4140000">4.140.000 ₫</span> | |
| <span class="featured__price">4.968.000 ₫</span> | |
| </div> | |
| <button class="button" id="add-to-cart">Add to cart</button> | |
| <div class="featured__actions"> | |
| <button><i class="ri-heart-3-line"></i></button> | |
| <button><i class="ri-eye-line" onclick="openDetailPage()"></i></button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img src="static/web2/assets/img/ai2.jpg" alt="image" class="featured__img"> | |
| <h2 class="featured__title">Brain Tumor Detection v2</h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="3979000">3.979.000 ₫</span> | |
| <span class="featured__price">4.968.000 ₫</span> | |
| </div> | |
| <button class="button" id="add-to-cart">Add to cart</button> | |
| <div class="featured__actions"> | |
| <button><i class="ri-heart-3-line"></i></button> | |
| <button><i class="ri-eye-line" onclick="openDetailPage()"></i></button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img src="static/web2/assets/img/ai2.jpg" alt="image" class="featured__img"> | |
| <h2 class="featured__title">Lung Cancer Detection v2</h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="3979000">3.979.000 ₫</span> | |
| <span class="featured__price">3.979.000 ₫</span> | |
| </div> | |
| <button class="button" id="add-to-cart">Add to cart</button> | |
| <div class="featured__actions"> | |
| <button><i class="ri-heart-3-line"></i></button> | |
| <button><i class="ri-eye-line" onclick="openDetailPage()"></i></button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img src="static/web2/assets/img/ai2.jpg" alt="image" class="featured__img"> | |
| <h2 class="featured__title">Lung Cancer Recognition v2</h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="3720000">3.720.000 ₫</span> | |
| <span class="featured__price">4.464.000 ₫</span> | |
| </div> | |
| <button class="button" id="add-to-cart">Add to cart</button> | |
| <div class="featured__actions"> | |
| <button><i class="ri-heart-3-line"></i></button> | |
| <button><i class="ri-eye-line" onclick="openDetailPage()"></i></button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img src="static/web2/assets/img/ai2.jpg" alt="image" class="featured__img"> | |
| <h2 class="featured__title">Brain Tumor Detection v2</h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="3240000">3.240.000 ₫</span> | |
| <span class="featured__price">3.350.000 ₫</span> | |
| </div> | |
| <button class="button" id="add-to-cart">Add to cart</button> | |
| <div class="featured__actions"> | |
| <button><i class="ri-heart-3-line"></i></button> | |
| <button><i class="ri-eye-line" onclick="openDetailPage()"></i></button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img src="static/web2/assets/img/ai2.jpg" alt="image" class="featured__img"> | |
| <h2 class="featured__title">Brain Tumor Detection v3</h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="3220000">3.220.000 ₫</span> | |
| <span class="featured__price">3.350.000 ₫</span> | |
| </div> | |
| <button class="button" id="add-to-cart">Add to cart</button> | |
| <div class="featured__actions"> | |
| <button><i class="ri-heart-3-line"></i></button> | |
| <button><i class="ri-eye-line" onclick="openDetailPage()"></i></button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img src="static/web2/assets/img/ai2.jpg" alt="image" class="featured__img"> | |
| <h2 class="featured__title">Brain Tumor Detection v4</h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="4329000">4.329.000 ₫</span> | |
| <span class="featured__price">4.350.000 ₫</span> | |
| </div> | |
| <button class="button" id="add-to-cart">Add to cart</button> | |
| <div class="featured__actions"> | |
| <button><i class="ri-heart-3-line"></i></button> | |
| <button><i class="ri-eye-line" onclick="openDetailPage()"></i></button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img src="static/web2/assets/img/ai2.jpg" alt="image" class="featured__img"> | |
| <h2 class="featured__title">Lung Cancer Detection v3</h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="3420000">3.420.000 ₫</span> | |
| <span class="featured__price">3.560.000 ₫</span> | |
| </div> | |
| <button class="button" id="add-to-cart">Add to cart</button> | |
| <div class="featured__actions"> | |
| <button><i class="ri-search-line"></i></button> | |
| <button><i class="ri-heart-3-line"></i></button> | |
| <button><i class="ri-eye-line" onclick="openDetailPage()"></i></button> | |
| </div> | |
| </article> | |
| </div> | |
| <div class="swiper-button-prev"> | |
| <i class="ri-arrow-left-s-line"></i> | |
| </div> | |
| <div class="swiper-button-next"> | |
| <i class="ri-arrow-right-s-line"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!--==================== DISCOUNT ====================--> | |
| <section class="discount section" id="discount"> | |
| <div class="discount__container container grid"> | |
| <div class="discount__data"> | |
| <h2 class="discount__title section__title"> | |
| Discount to 50% | |
| </h2> | |
| <p class="discount__description"> | |
| Take advantage of the discount days we have for you, buy products from your favorite brands, the more you buy, the more discounts we have for you. | |
| </p> | |
| <a href="#" class="button">Buy Now</a> | |
| </div> | |
| <div class="discount__images"> | |
| <img src="static/web2/assets/img/ai5.jpg" alt="" class="discount__img-1"> | |
| <img src="static/web2/assets/img/ai3.jpg" alt="" class="discount__img-2"> | |
| </div> | |
| </div> | |
| </section> | |
| <!--==================== JOIN ====================--> | |
| <section class="join section"> | |
| <div class="join__container"> | |
| <img src="static/web2/assets/img/AI-banners.jpg" alt="image" class="join__bg"> | |
| <div class="join__data container grid"> | |
| <h2 class="join__title section__title"> | |
| Sign up to receive <br> | |
| latest news | |
| </h2> | |
| <form action="" class="join__form"> | |
| <input type="email" placeholder="Input your email..." class="join__input"> | |
| <button type="submit" class="join__button button">Register</button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!--==================== TESTIMONIAL ====================--> | |
| <section class="testimonial section" id="testimonial"> | |
| <h2 class="section__title"> | |
| Feedback from our customers | |
| </h2> | |
| <div class="testimonial__container container"> | |
| <div class="testimonial__swiper swiper"> | |
| <div class="swiper-wrapper"> | |
| <article class="testimonial__card swiper-slide"> | |
| <img src="static/web2/assets/img/vinAi.png" alt="img" class="testimonial__img"> | |
| <h2 class="testimonial__title">VinAI Research</h2> | |
| <p class="testimonial__description"> | |
| The product is too good. In the future, there will be stronger cooperation with the lab | |
| </p> | |
| <div class="testimonial__stars"> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-half-fill"></i> | |
| </div> | |
| </article> | |
| <article class="testimonial__card swiper-slide"> | |
| <img src="static/web2/assets/img/huawei.png" alt="img" class="testimonial__img"> | |
| <h2 class="testimonial__title">Huawei</h2> | |
| <p class="testimonial__description"> | |
| The product is too good. In the future, there will be stronger cooperation with the lab | |
| </p> | |
| <div class="testimonial__stars"> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-half-fill"></i> | |
| </div> | |
| </article> | |
| <article class="testimonial__card swiper-slide"> | |
| <img src="static/web2/assets/img/peking.png" alt="img" class="testimonial__img"> | |
| <h2 class="testimonial__title">Peking University</h2> | |
| <p class="testimonial__description"> | |
| The product is too good. In the future, there will be stronger cooperation with the lab | |
| </p> | |
| <div class="testimonial__stars"> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-half-fill"></i> | |
| </div> | |
| </article> | |
| <article class="testimonial__card swiper-slide"> | |
| <img src="static/web2/assets/img/tsinghua.png" alt="img" class="testimonial__img"> | |
| <h2 class="testimonial__title">Tsinghua University</h2> | |
| <p class="testimonial__description"> | |
| The product is too good. In the future, there will be stronger cooperation with the lab | |
| </p> | |
| <div class="testimonial__stars"> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-half-fill"></i> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!--==================== FOOTER ====================--> | |
| <footer class="footer"> | |
| <div class="footer__container container grid"> | |
| <div> | |
| <a href="../index.html" class="nav__logo"> | |
| <img src="static/web2/assets/img/icon-main.svg" alt="image" id="icon-main"> Neural AI* Research | |
| </a> | |
| <p class="footer__description"> | |
| Find and discover our products, <br> | |
| the best products for you,<br> the best products for your health. | |
| </p> | |
| </div> | |
| <div class="footer__data grid"> | |
| <div> | |
| <h3 class="footer__title">Ours</h3> | |
| <ul class="footer__links"> | |
| <li> | |
| <a href="#" class="footer__link">Details</a> | |
| </li> | |
| <li> | |
| <a href="#" class="footer__link">FAQs</a> | |
| </li> | |
| <li> | |
| <a href="#" class="footer__link">Privacy policy</a> | |
| </li> | |
| <li> | |
| <a href="#" class="footer__link">Terms of service</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="footer__title">Enterprise</h3> | |
| <ul class="footer__links"> | |
| <li> | |
| <a href="#" class="footer__link">News</a> | |
| </li> | |
| <li> | |
| <a href="#" class="footer__link">Labratory</a> | |
| </li> | |
| <li> | |
| <a href="#" class="footer__link">Ours</a> | |
| </li> | |
| <li> | |
| <a href="#" class="footer__link">Support center</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="footer__title">Contact</h3> | |
| <ul class="footer__links"> | |
| <li> | |
| <address class="footer__info"> | |
| Tsinghua Universiy <br> | |
| 30 Shuangqing Rd, Haidian District,<br> Beijing, China | |
| </address> | |
| </li> | |
| <li> | |
| <address class="footer__info"> | |
| nguyendatdtqn@thu.edu.cn<br> | |
| +86-3457-460-68 | |
| </address> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="footer__title">Find us</h3> | |
| <div class="footer__social"> | |
| <a href="https://www.facebook.com/charrise.elaina/?locale=vi_VN" target="_blank" class="footer__social-link"> | |
| <i class="ri-facebook-circle-line"></i> | |
| </a> | |
| <a href="https://www.facebook.com/charrise.elaina/?locale=vi_VN" target="_blank" class="footer__social-link"> | |
| <i class="ri-instagram-line"></i> | |
| </a> | |
| <a href="https://www.facebook.com/charrise.elaina/?locale=vi_VN" target="_blank" class="footer__social-link"> | |
| <i class="ri-twitter-x-line"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <span class="footer__copy"> | |
| © All Rights Reserved By @ng.tdt204 | |
| </span> | |
| </footer> | |
| <!--========== SCROLL UP ==========--> | |
| <a href="#" class="scrollup" id="scroll-up"> | |
| <i class="ri-arrow-up-line"></i> | |
| </a> | |
| <!--=============== SCROLLREVEAL ===============--> | |
| <script src="static/web2/assets/js/scrollreveal.min.js"></script> | |
| <!--=============== SWIPER JS ===============--> | |
| <script src="static/web2/assets/js/swiper-bundle.min.js"></script> | |
| <!--=============== MAIN JS ===============--> | |
| <script src="static/web2/assets/js/main.js"></script> | |
| </body> | |
| </html> |