A. Giới thiệu
Trang Minimalin là một website có các chức năng hiển thị sản phẩm bán áo quần và mỹ phẩm
Với số lượng sản phẩm phong phú có thể thỏa mãn nhu cầu mua hàng của mọi người.
Cùng với đó là giao diện bắt mắt, không khó để sử dụng, mang lại sử trải nghiệm tốt cho khách hàng
ở mọi lứa tuổi.
B. Giao diện
- Trang chủ – home
Mô tả:
- Trang chủ hiện thị menu
- Các phím tắt hỗ trợ
- Các sản phẩm đề xuất
- Các sản phẩm mới nhất
- Và các danh mục khác
SourceCode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>Minimalin</title><link rel="icon" type="images/png" sizes="32pxx32px" href="//minimalin-demo.myshopify.com/cdn/shop/files/favicon-simple-2_32x32.png?v=1692807425">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- Begin header -->
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="logo">
<a href="index.html"> <img
src="https://minimalin-demo.myshopify.com/cdn/shop/files/logo-simple_150x.png?v=1692805162 "
width="125px"></a>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<nav>
<ul class="menu">
<li class="menu-item">
<a class="menu-link" href="index.html">Home</a>
</li>
<li class="menu-item">
<a class="menu-link" href="">Shop</a>
</li>
<li class="menu-item">
<a class="menu-link" href="categories.html">Categories</a>
</li>
<li class="menu-item">
<a class="menu-link" href="product.html">Product</a>
</li>
<li class="menu-item">
<a class="menu-link" href="new.html">Blog</a>
</li>
<li class="menu-item">
<a class="menu-link" href="contact.html">Pages</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-2">
<ul class="menu-right">
<li class="mn-item">
<a href="" class="mn-link">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</li>
<li class="mn-item">
<a href="login.html" class="mn-link">
<i class="fa-regular fa-user"></i>
</a>
</li>
<li class="mn-item">
<a href="" class="mn-link">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- End header -->
<!--Begin main-home-->
<section class="main-home">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="main-text">
<h1> Men Collection</h1>
<p> Elevate Your Basic with a Touch of Glam</p>
<button href="" class="main-btn"> Shop Now </button>
</div>
</div>
<div class="col-md-6">
<img class="img-slide"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/slide_-_600_x_600_3_600x.png?v=1690415520"
width="400" height="400" alt="">
</div>
</div>
</div>
</section>
<!--End main-home-->
<!--Begin hot-->
<section class="hot">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="q-wrap">
<h2 class="q-name">Suit & Formalware</h2>
<button class="btn-button"> Buy Now</button>
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/banner-570x360-2_570x.png?v=1694613943"
alt="" class="q-img">
</div>
</div>
<div class="col-md-6">
<div class="q-wrap">
<h2 class="q-name">Suit & Gowns</h2>
<button class="btn-button"> Buy Now</button>
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/Untitled_design_8_570x.png?v=1690732046"
alt="" class="q-img">
</div>
</div>
</div>
</div>
</section>
<!--End hot-->
<!--Begin hot-sale-->
<section class="hot-sale">
<div class="container">
<div class="row">
<h4 class="title">Best Selling</h4>
</div>
<div class="row">
<div class="col-md-3">
<div class="p-wrap">
<a href="view.html"> <img
src="https://minimalin-demo.myshopify.com/cdn/shop/files/shirt_1_1024x1024.png?v=1692372496"
alt="" class="p-img"> </a>
<a href="product.html">
<h6 class="p-name">W.Men Formal T-Shirt</h6>
</a>
<a href="product.html"><span class="price">491.000đ</span> </a>
</div>
</div>
<div class="col-md-3">
<div class="p-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/blueshoe_1_600x.png?v=1692116385"
alt="" class="p-img">
<h6 class="p-name">B.Pair of Blue Shoes</h6>
<span class="price">2.064.000đ</span>
</div>
</div>
<div class="col-md-3">
<div class="p-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/watch_600x.png?v=1692459788"
alt="" class="p-img">
<h6 class="p-name">F. Ultimate Smart Wath</h6>
<span class="price">1.419.000đ</span>
</div>
</div>
<div class="col-md-3">
<div class="p-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/jacket_8_600x.png?v=1692357458"
alt="" class="p-img">
<h6 class="p-name">S. Mokmol Jacket</h6>
<span class="price">852.000đ</span>
</div>
</div>
<div class="col-md-3">
<div class="p-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/sunglass_1_1024x1024.png?v=1692115588"
alt="" class="p-img">
<h6 class="p-name">A. Stylist Sunglass</h6>
<span class="price">2.838.000đ</span>
</div>
</div>
<div class="col-md-3">
<div class="p-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/jacket_1_600x.png?v=1692285993"
alt="" class="p-img">
<h6 class="p-name">M. Denim Clothing Jacket </h6>
<span class="price">2.838.000đ</span>
</div>
</div>
<div class="col-md-3">
<div class="p-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/ment-shirt_1_600x.png?v=1692120651"
alt="" class="p-img">
<h6 class="p-name">E. Casual Comforts T-shirt </h6>
<span class="price">1.007.000đ</span>
</div>
</div>
<div class="col-md-3">
<div class="p-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/hat_1_600x.png?v=1692120024"
alt="" class="p-img">
<h6 class="p-name">D. Fashionable Hat</h6>
<span class="price">852.000đ</span>
</div>
</div>
</div>
<div class="btn-view">
<button class="btn-size">View All</button>
</div>
</div>
</section>
<!--End hot-sale-->
<!--Begin best-offer-->
<section class="best-offer">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="best">
<h2>Best Offer - Up to 50%</h2>
<span>Explore our latest New Arrivals & unlock discounts of up to 50% off!</span>
<button class="put">Shop Now</button>
</div>
</div>
<div class="col-md-6">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/Countdown_banner_4_570x.png?v=1694617479"
alt="" width="400" height="400" class="p-img">
</div>
</div>
</div>
</section>
<div class="btn-views">
<h2 class="btn-sizes">Featured Collection</h2>
</div>
<!--End best-offer-->
<!--Begin featured-collection-->
<section class="featured-collection">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="u-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/watch_600x.png?v=1692459788"
alt="" class="p-img">
<h6 class="p-name">F. Ultimate Smart Watch</h6>
<span class="price">1.419.000₫</span>
</div>
</div>
<div class="col-md-3">
<div class="u-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/lipstick_1_600x.png?v=1696941869"
alt="" class="p-img">
<h6 class="p-name">Tb. Dark Lipstick</h6>
<span class="price">1.006.000₫</span>
</div>
</div>
<div class="col-md-3">
<div class="u-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/silver-earring_6_1024x1024.png?v=1693673686"
alt="" class="p-img">
<h6 class="p-name">Zc. Silver Small Earring</h6>
<span class="price">1.419.000₫</span>
</div>
</div>
<div class="col-md-3">
<div class="u-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/heighheel_1_1024x1024.png?v=1692201238"
alt="" class="p-img">
<h6 class="p-name">H. Women High Heel</h6>
<span class="price">1.006.000₫</span>
</div>
</div>
</div>
<div class="btn-view">
<button class="btn-size">View All</button>
</div>
</div>
</section>
<div class="btn-views">
<h2 class="btn-sizes">New Arrivals</h2>
</div>
<!--End featured-collection-->
<!--Begin new-arrivals-->
<section class="new-arrivals">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="i-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/men-large-tshirt_4_1024x1024.png?v=1693323021"
alt="" class="p-img">
<h6 class="p-name">Ra. Men Large Polo T Shirt</h6>
<p>852.000₫</p>
</div>
</div>
<div class="col-md-3">
<div class="i-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/women-short-tshirt_1_1024x1024.png?v=1693311946"
alt="" class="p-img">
<h6 class="p-name">Zk. Women Short T Shirt</h6>
<p>2.064.000₫</p>
</div>
</div>
<div class="col-md-3">
<div class="i-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/longt-shirt_1_1024x1024.png?v=1693310153"
alt="" class="p-img">
<h6 class="p-name">Ca. Long T Shirt for Summer</h6>
<p>2.837.000₫</p>
</div>
</div>
<div class="col-md-3">
<div class="i-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/earring_1_1024x1024.png?v=1693290154"
alt="" class="p-img">
<h6 class="p-name">Va. Long Earring</h6>
<p>490.000₫</p>
</div>
</div>
</div>
<div class="btn-view">
<button class="btn-size">View All</button>
</div>
</section>
<div class="btn-views">
<h2 class="btn-sizes">Latest Blog</h2>
</div>
<!--end new-arrivals-->
<!--begin lates-blog -->
<section class="lates-blog">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="o-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/articles/blog-1_1200x.jpg?v=1690981937"
alt="" class="p-img">
<i class="fa-regular fa-calendar-days"></i> <a>August 01, 2023</a>
<h6 class="re-name">The Art of Layering: Creating Stylish and Functional Outfits</h6>
<span>Read More</span>
</div>
</div>
<div class="col-md-4">
<div class="o-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/articles/blog-2_1200x.jpg?v=1690982050"
alt="" class="p-img">
<i class="fa-regular fa-calendar-days"></i> <a>August 01, 2023</a>
<h6 class="re-name">A Glimpse into Men's Fashion Trends: What's Hot and What's Not</h6>
<span>Read More</span>
</div>
</div>
<div class="col-md-4">
<div class="o-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/articles/blog-3_1200x.jpg?v=1690982279"
alt="" class="p-img">
<i class="fa-regular fa-calendar-days"></i> <a>August 01, 2023</a>
<h6 class="re-name">Fashion Dos and Don'ts Every Woman Should Know That</h6>
<span>Read More</span>
</div>
</div>
</div>
</div>
</section>
<!--Begin oder-->
<section class="oder">
<div class="container">
<div class="row">
<div class="col-md-3">
<li class="menu-item">
<a class="menu-link">
<i class="fa-solid fa-truck-fast"></i>
<h5 class="font-new">Free shipping</h5>
</a>
</li>
</div>
<div class="col-md-3">
<li class="menu-item">
<a class="menu-link">
<i class="fa-solid fa-sack-dollar"></i>
<h5>Money Back</h5>
</a>
</li>
</div>
<div class="col-md-3">
<li class="menu-item">
<a class="menu-link">
<i class="fa-regular fa-credit-card"></i>
<h5>Secure Checkout</h5>
</a>
</li>
</div>
<div class="col-md-3">
<li class="menu-item">
<a class="menu-link">
<i class="fa-solid fa-headphones"></i>
<h5>Olline Support</h5>
</a>
</li>
</div>
</div>
</div>
<div class="btn-views">
<h2 class="btn-sizes">Follow on Instagram</h2>
<i> @marino-themes </i>
</div>
</div>
</div>
</section>
<!--End oder-->
<!--Begin btn-background-->
<section class="btn-background">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="img-background">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/gallery-7_1024x.jpg?v=1691167616"
alt="" width="220px" height="170px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/gallery-5_1024x.jpg?v=1691167532"
alt="" width="220px" height="170px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/gallery-8_1024x.jpg?v=1691167636"
alt="" width="220px" height="170px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/gallery-1_1024x.jpg?v=1691167459"
alt="" width="220px" height="170px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/gallery-2_1024x.jpg?v=1691167477"
alt="" width="220px" height="170px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/gallery-3_800x.jpg?v=1691167495"
alt="" width="220px" height="170px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/gallery-4_800x.jpg?v=1691167513"
alt="" width="220px" height="170px">
</div>
</div>
</div>
</div>
</section>
<!--End btn-background-->
<!--begin about-->
<section class="about">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="about-us">
<h4> About Us.</h4>
<p>Minimal E-Commerce is a dynamic and innovative online retail platform that offers a wide
range of products to customers worldwide.</p>
</div>
<div class="icon-user">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-youtube"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-tiktok"></i>
<h5>Guaranteed safe checkout</h5>
</div>
<div class="card-img">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/amazon-92e856f82cae5a564cd0f70457f11af4d58fa037cf6e5ab7adf76f6fd3b9cafe.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/apple_pay-f6db0077dc7c325b436ecbdcf254239100b35b70b1663bc7523d7c424901fa09.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/bitcoin-e41278677541fc32b8d2e7fa41e61aaab2935151a6048a1d8d341162f5b93a0a.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/google_pay-c66a29c63facf2053bf69352982c958e9675cabea4f2f7ccec08d169d1856b31.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/paypal-49e4c1e03244b6d2de0d270ca0d22dd15da6e92cc7266e93eb43762df5aa355d.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/visa-319d545c6fd255c9aad5eeaad21fd6f7f7b4fdbdb1a35ce83b89cca12a187f00.svg"
alt="" width="45px" height="29px">
</div>
</div>
<div class="col-md-3">
<div class="quick">
<h5>Quick Link</h5>
<p>My Account </p>
<p>My Cart</p>
<p>Wishlist</p>
<p>Gift Card</p>
<p>Need Help?</p>
</div>
</div>
<div class="col-md-2">
<div class="Information">
<h5>Information</h5>
<p>About us</p>
<p>Contact</p>
<p>Blogs</p>
<p>Size Chart</p>
<p>FAQ</p>
</div>
</div>
<div class="col-md-3">
<div class="Polices">
<h5>Polices</h5>
<P>Privacy Policy</P>
<P>Refund Policy</P>
<P>Terms of Service</P>
<P>Shipping Policy</P>
<P>Contact Information</P>
</div>
</div>
<hr>
<div class="cre">
<p>"© 2024 "<strong>Châu Viết Quyết Thành</strong>". All rights reserved."</p>
</div>
</div>
</div>
</section>
<!--end about-->
</body>
</html>
Kết quả:
- Trang chi tiết sản phẩm – view
Mô tả:
- Trang hiển thị thông tin sản phẩm
SourceCode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>Minimalin</title>
<link rel="icon" type="images/png" sizes="32pxx32px"
href="//minimalin-demo.myshopify.com/cdn/shop/files/favicon-simple-2_32x32.png?v=1692807425">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!--begin headers-->
<div class="headers">
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="logo">
<a href="MOLLA.html"> <img
src="https://minimalin-demo.myshopify.com/cdn/shop/files/logo-simple_150x.png?v=1692805162 "
width="125px"></a>
</div>
</div>
<div class="col-md-9">
<nav>
<ul class="menu">
<li class="menu-item">
<a class="menu-link" href="index.html">Home</a>
</li>
<li class="menu-item">
<a class="menu-link" href="">Shop</a>
</li>
<li class="menu-item">
<a class="menu-link" href="categories.html">Categories</a>
</li>
<li class="menu-item">
<a class="menu-link" href="product.html">Product</a>
</li>
<li class="menu-item">
<a class="menu-link" href="new.html">Blog</a>
</li>
<li class="menu-item">
<a class="menu-link" href="contact.html">Trang</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-2">
<ul class="menu-right">
<li class="mn-item">
<a href="" class="mn-link">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</li>
<li class="mn-item">
<a href="login.html" class="mn-link">
<i class="fa-regular fa-user"></i>
</a>
</li>
<li class="mn-item">
<a href="" class="mn-link">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--end header-->
<!--begin u-img-->
<section class="u-img">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="u-img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/shirt_1_1024x1024.png?v=1692372496"
width="520" height="800" alt="">
</div>
<div class="col-md-6">
<div class="font-text">
<h4>W. Men Formal T-shirt</h4>
<del>543.000<sup>₫</sup></del><span class="u-span">491.000 <sup>₫</sup></span>
<hr color="gray">
<a>Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing.
Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium
libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam...
</a>
<hr color="gray">
<i class="fa-solid fa-eye"></i>
<hr color="gray">
<a class="a-u-text">SKU:</a><span class="span-u-text">1510</span><br>
<a class="a-u-text">Vendor:</a><span class="span-u-text">Vendor J</span><br>
<a class="a-u-text">Type:</a><span class="span-u-text">Type J</span>
<hr color="gray">
<a class="color-test">Color :</a><span></span>
<hr color="gray">
<button><i class="fa-solid fa-cart-shopping"></i>Add to cart</button><button
class="button-mark"><span>Buy it now</span></button><br>
<div class="item-mark">
<i class="fa-regular fa-heart"></i><span class="add-to">Add to wishlist</span>
<i class="fa-solid fa-code-compare"></i><span class="add-to">Compare</span>
<i class="fa-regular fa-envelope"></i><span class="add-to">Ask a Question</span>
<i class="fa-solid fa-chart-column"></i><span class="add-to">Size Chart</span>
</div>
<hr>
<div class="day">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/t/38/assets/fast-delivery.png?v=51082720674517669131701264194"
alt="" width="25px" height="25px">
<span class="car"> Estimated Delivery Date : <span> <a class="today">12 - 13 June, 2024.</a>
</div>
<div class="return">
<h6>Return rules summary</h6>
<li class="return-test">Returns accepted for 30 days</li>
<li class="return-test">Free return shipping</li>
<li class="return-test">No restocking fee</li>
<li class="return-test">No final sale items</li>
<hr>
</div>
</div>
</div>
</div>
</section>
<!--end u-img-->
<!--begin Guaranteed-->
<section class="Guaranteed">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="guaranteed-test">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/[email protected]?v=1692372496"
alt="" width="103px" height="103px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/[email protected]?v=1692372496"
alt="" width="103px" height="103px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/[email protected]?v=1692372496"
alt="" width="103px" height="103px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/[email protected]?v=1692372496"
alt="" width="103px" height="103px">
</div>
</div>
<div class="col-md-6">
<div class="guranteed-img">
<h5>Guaranteed safe checkout</h5>
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/amazon-92e856f82cae5a564cd0f70457f11af4d58fa037cf6e5ab7adf76f6fd3b9cafe.svg"
alt="" width="45px" height="29px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/apple_pay-f6db0077dc7c325b436ecbdcf254239100b35b70b1663bc7523d7c424901fa09.svg"
alt="" width="45px" height="29px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/bitcoin-e41278677541fc32b8d2e7fa41e61aaab2935151a6048a1d8d341162f5b93a0a.svg"
alt="" width="45px" height="29px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/google_pay-c66a29c63facf2053bf69352982c958e9675cabea4f2f7ccec08d169d1856b31.svg"
alt="" width="45px" height="29px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/paypal-49e4c1e03244b6d2de0d270ca0d22dd15da6e92cc7266e93eb43762df5aa355d.svg"
alt="" width="45px" height="29px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/visa-319d545c6fd255c9aad5eeaad21fd6f7f7b4fdbdb1a35ce83b89cca12a187f00.svg"
alt="" width="45px" height="29px">
<hr>
</div>
<div class="Guaranteed-share">
<span>Share: </span>
<span class="Guaranteed-blue"><i class="fab fa-facebook-f"></i><i class="share-test">Facebook
</i>
<i class="fa-brands fa-twitter"></i><i class="share-test">Twiter </i>
<i class="fa-brands fa-pinterest"></i><i class="share-test">Pinterest </i></span>
</div>
</div>
</div>
<div class="Guaranteed-views">
<h2 class="Guaranteed-size">Related Products</h2>
</div>
</div>
</section>
<!--end Guaranteed-->
<!--begin related product-->
<section class="related">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="related-img">
<img class="related-img-test"
src="https://cdn.shopify.com/s/files/1/1522/7938/files/jacket_2_600x.png?v=1692285992"
alt="" width="230px" height="230px">
<h6 class="related-font">M. Denim Clothing Jacket</h6>
<p class="related-coin">2.840.000 <sup>₫</sup></p>
</div>
</div>
<div class="col-md-3">
<div class="related-img">
<img class="related-img-test"
src="https://cdn.shopify.com/s/files/1/1522/7938/files/jacket_9_600x.png?v=1692357458"
alt="" width="230px" height="230px">
<h6 class="related-font">M. Denim Clothing Jacket</h6>
<p class="related-coin">2.840.000 <sup>₫</sup></p>
</div>
</div>
<div class="col-md-3">
<div class="related-img">
<img class="related-img-test"
src="https://cdn.shopify.com/s/files/1/1522/7938/files/ment-shirt_1_600x.png?v=1692120651"
alt="" width="230px" height="230px">
<h6 class="related-font">M. Denim Clothing Jacket</h6>
<p class="related-coin">2.840.000 <sup>₫</sup></p>
</div>
</div>
<div class="col-md-3">
<div class="related-img">
<img class="related-img-test"
src="https://cdn.shopify.com/s/files/1/1522/7938/files/poloshirt_2_600x.png?v=1692286490"
alt="" width="230px" height="230px">
<h6 class="related-font">M. Denim Clothing Jacket</h6>
<p class="related-coin">2.840.000 <sup>₫</sup></p>
</div>
</div>
</div>
<div class="Guaranteed-views">
<h2 class="Guaranteed-size">Recently Viewed</h2>
</div>
</div>
</section>
<!--end realted product-->
<!-- begin recently -->
<section class="recently-viewed">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="recently-img">
<img class="recently-img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/shirt_1_1024x1024.png?v=1692372496"
alt="" width="230px" height="230px">
<h6 class="recently-font">W. Men Formal T-shirt</h6>
<p class="recently-coin">491.000<sup>₫</sup></p>
</div>
</div>
<div class="col-md-3">
<div class="recently-img">
<img class="recently-img-test"
src="https://cdn.shopify.com/s/files/1/1522/7938/files/sunglass_1_large.png?v=1692115588"
alt="" width="230px" height="230px">
<h6 class="recently-font">A. Stylist Sunglass</h6>
<p class="recently-coin">2.840.000 <sup>₫</sup></p>
</div>
</div>
</div>
<div class="Guaranteed-views">
<h2 class="Guaranteed-size">FAQs</h2>
</div>
</div>
</section>
<!-- end recently -->
<!--begin buy-item-->
<section class="buy">
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="logo">
<a> <img src="https://minimalin-demo.myshopify.com/cdn/shop/files/shirt_1_thumb.png?v=1692372496"
width="50px" height="50px"></a>
</div>
</div>
<div class="col-md-3">
<div class="menu-test">
<h6 class="name">W. Men Formal T-shirt</h6>
</div>
</div>
<div class="col-md-3">
<div class="coin-item">
<button class="price-item"> white - 491.000 VND</button>
</div>
</div>
<div class="col-md-2">
<div class="custom">
<button class="custom-test">-</button>
<button class="custom-test">1</button>
<button class="custom-test">+</button>
</div>
</div>
<div class="col-md-2">
<div class="cart">
<a href="buy.html"><button class="cart-test">Add to cart</button></a>
</div>
</div>
</div>
</div>
</section>
<!-- end buy-item-->
<!--begin about-->
<section class="about">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="about-us">
<h4> About Us.</h4>
<p>Minimal E-Commerce is a dynamic and innovative online retail platform that offers a wide
range of products to customers worldwide.</p>
</div>
<div class="icon-user">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-youtube"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-tiktok"></i>
<h5>Guaranteed safe checkout</h5>
</div>
<div class="card-img">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/amazon-92e856f82cae5a564cd0f70457f11af4d58fa037cf6e5ab7adf76f6fd3b9cafe.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/apple_pay-f6db0077dc7c325b436ecbdcf254239100b35b70b1663bc7523d7c424901fa09.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/bitcoin-e41278677541fc32b8d2e7fa41e61aaab2935151a6048a1d8d341162f5b93a0a.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/google_pay-c66a29c63facf2053bf69352982c958e9675cabea4f2f7ccec08d169d1856b31.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/paypal-49e4c1e03244b6d2de0d270ca0d22dd15da6e92cc7266e93eb43762df5aa355d.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/visa-319d545c6fd255c9aad5eeaad21fd6f7f7b4fdbdb1a35ce83b89cca12a187f00.svg"
alt="" width="45px" height="29px">
</div>
</div>
<div class="col-md-3">
<div class="quick">
<h5>Quick Link</h5>
<p>My Account </p>
<p>My Cart</p>
<p>Wishlist</p>
<p>Gift Card</p>
<p>Need Help?</p>
</div>
</div>
<div class="col-md-2">
<div class="Information">
<h5>Information</h5>
<p>About us</p>
<p>Contact</p>
<p>Blogs</p>
<p>Size Chart</p>
<p>FAQ</p>
</div>
</div>
<div class="col-md-3">
<div class="Polices">
<h5>Polices</h5>
<P>Privacy Policy</P>
<P>Refund Policy</P>
<P>Terms of Service</P>
<P>Shipping Policy</P>
<P>Contact Information</P>
</div>
</div>
<hr>
<div class="cre">
<p>"© 2024 "<strong>Châu Viết Quyết Thành</strong>". All rights reserved."</p>
</div>
</div>
</div>
</section>
<!--end about-->
</body>
</html>
Kết quả:
- Trang tìm kiếm – buy
Mô tả:
- Mua sản phẩm
- Số lượng sản phẩm
SourceCode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>Minimalin</title>
<link rel="icon" type="images/png" sizes="32pxx32px"
href="//minimalin-demo.myshopify.com/cdn/shop/files/favicon-simple-2_32x32.png?v=1692807425">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!--begin header-->
<div class="headers">
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="logo">
<a href="index.html"> <img
src="https://minimalin-demo.myshopify.com/cdn/shop/files/logo-simple_150x.png?v=1692805162 "
width="125px"></a>
</div>
</div>
<div class="col-md-9">
<nav>
<ul class="menu">
<li class="menu-item">
<a class="menu-link" href="index.html">Home</a>
</li>
<li class="menu-item">
<a class="menu-link" href="">Shop</a>
</li>
<li class="menu-item">
<a class="menu-link" href="categories.html">Categories</a>
</li>
<li class="menu-item">
<a class="menu-link" href="product.html">Product</a>
</li>
<li class="menu-item">
<a class="menu-link" href="new.html">Blog</a>
</li>
<li class="menu-item">
<a class="menu-link" href="contact.html">Trang</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-2">
<ul class="menu-right">
<li class="mn-item">
<a href="" class="mn-link">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</li>
<li class="mn-item">
<a href="login.html" class="mn-link">
<i class="fa-regular fa-user"></i>
</a>
</li>
<li class="mn-item">
<a href="" class="mn-link">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--end header-->
<!--begin your-shopping-->
<section class="your-shopping">
<div class="container">
<div class="row">
<div class="nickname">
<h1 class="nickname-test">Your Shopping Cart</h1>
</div>
</div>
</div>
</section>
<!-- end your-shopping-->
<!--begin shirt-->
<section class="shirt">
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="shirt-img">
<div class="shirt-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/shirt_1_compact.png?v=1692372496"
alt="" class="p-img" width="150px" height="200px">
</div>
</div>
</div>
<div class="col-md-2">
<p class="Men-Formal">W . Men Formal T-shirt</p>
<P class="white">White</P>
</div>
<div class="col-md-2">
<P class="coin-master">491.000 <sup>₫</sup></P>
</div>
<div class="col-md-2">
<button class="soluong">-</button>
<button class="soluong">1</button>
<button class="soluong">+</button>
</div>
<div class="col-md-2">
<P class="coin-master">491.000 <sup>₫</sup></P>
</div>
</div>
</div>
</div>
</section>
<!--end shirt-->
<!--begin continue-->
<section class="continue">
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="continue-button">
<button class="button-test">
Continue Shopping
</button>
</div>
</div>
<div class="col-md-2">
<div class="continue-button">
<button class="button-test">
Clear Cart
</button>
</div>
</div>
</div>
</div>
</section>
<!--end continue-->
<!--begin special-->
<section class="specical">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="specical-border">
<h4>Special instructions for seller</h4>
<textarea name="note" class id="chat"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="reset-name">
<h4>Cart Totals</h4>
</div>
<table class="table">
<tbody>
<tr class="cart-subtotal">
<th>Subtotal</th>
<td>
<span class="amount">
<span id="price-money">491.000₫</span>
</span>
</td>
</tr>
<tr class="order-total">
<th>Total</th>
<td>
<strong>
<span class="amount">
<span id="price-money">491.000₫</span>
</span>
</strong>
</td>
</tr>
</tbody>
</table>
<div class="proceed-checkout">
<button class="proceed">Proceed to Checkout</button>
</div>
</div>
</div>
<div class="Guaranteed-views">
<h2 class="Guaranteed-size">Featured Product</h2>
<p class="Guaranteed-size">There are many variations of passages.</p>
</div>
</div>
</section>
<!--end specical-->
<!-- begin Minimalin-gift-->
<section class="minimalin-gift">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="p-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/CosmeticProduct800x800_2a7357cf-b45a-4fec-b87d-afe505860453_600x.png?v=1697893153"
alt="" class="p-img">
<h6 class="p-name">Minimalin gift card</h6>
<span class="price">258.260₫</span>
</div>
</div>
<div class="col-md-3">
<div class="p-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/hand-ring_1_600x.png?v=1692208184"
alt="" class="p-img">
<h6 class="p-name">J. Women Hand Ring</h6>
<span class="price">491.000₫</span>
</div>
</div>
<div class="col-md-3">
<div class="p-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/shirt_2_600x.png?v=1692372496"
alt="" class="p-img">
<h6 class="p-name">W. Men Formal T-shirt</h6>
<span class="price">491.000₫</span>
</div>
</div>
<div class="col-md-3">
<div class="p-wrap">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/earring_2_600x.png?v=1693290155"
alt="" class="p-img">
<h6 class="p-name">Va. Long Earring</h6>
<span class="price">491.000₫</span>
</div>
</div>
</div>
<div class="btn-view">
<button class="btn-size">View All</button>
</div>
</div>
</section>
<!-- end Minimalin-gift-->
<!--begin about-->
<section class="about">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="about-us">
<h4> About Us.</h4>
<p>Minimal E-Commerce is a dynamic and innovative online retail platform that offers a wide
range of products to customers worldwide.</p>
</div>
<div class="icon-user">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-youtube"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-tiktok"></i>
<h5>Guaranteed safe checkout</h5>
</div>
<div class="card-img">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/amazon-92e856f82cae5a564cd0f70457f11af4d58fa037cf6e5ab7adf76f6fd3b9cafe.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/apple_pay-f6db0077dc7c325b436ecbdcf254239100b35b70b1663bc7523d7c424901fa09.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/bitcoin-e41278677541fc32b8d2e7fa41e61aaab2935151a6048a1d8d341162f5b93a0a.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/google_pay-c66a29c63facf2053bf69352982c958e9675cabea4f2f7ccec08d169d1856b31.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/paypal-49e4c1e03244b6d2de0d270ca0d22dd15da6e92cc7266e93eb43762df5aa355d.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/visa-319d545c6fd255c9aad5eeaad21fd6f7f7b4fdbdb1a35ce83b89cca12a187f00.svg"
alt="" width="45px" height="29px">
</div>
</div>
<div class="col-md-3">
<div class="quick">
<h5>Quick Link</h5>
<p>My Account </p>
<p>My Cart</p>
<p>Wishlist</p>
<p>Gift Card</p>
<p>Need Help?</p>
</div>
</div>
<div class="col-md-2">
<div class="Information">
<h5>Information</h5>
<p>About us</p>
<p>Contact</p>
<p>Blogs</p>
<p>Size Chart</p>
<p>FAQ</p>
</div>
</div>
<div class="col-md-3">
<div class="Polices">
<h5>Polices</h5>
<P>Privacy Policy</P>
<P>Refund Policy</P>
<P>Terms of Service</P>
<P>Shipping Policy</P>
<P>Contact Information</P>
</div>
</div>
<hr>
<div class="cre">
<p>"© 2024 "<strong>Châu Viết Quyết Thành</strong>". All rights reserved."</p>
</div>
</div>
</div>
</section>
<!--end about-->
</body>
</html>
Kết quả:
- Trang các món phụ kiện và đồ tắm– captegories
Mô tả:
- Phụ kiện Đồng hộ
- Xà Phòng Nước Hoa
SourceCode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>Summer Styles - Minimalin</title>
<link rel="icon" type="images/png" sizes="32pxx32px"
href="//minimalin-demo.myshopify.com/cdn/shop/files/favicon-simple-2_32x32.png?v=1692807425">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- Begin header -->
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="logo">
<a href="index.html"> <img
src="https://minimalin-demo.myshopify.com/cdn/shop/files/logo-simple_150x.png?v=1692805162 "
width="125px"></a>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<nav>
<ul class="menu">
<li class="menu-item">
<a class="menu-link" href="index.html">Home</a>
</li>
<li class="menu-item">
<a class="menu-link" href="">Shop</a>
</li>
<div class="product-blue">
<li class="menu-item">
<a class="menu-link" href="categories.html">
<p>Categories</p>
</a>
</li>
</div>
<li class="menu-item">
<a class="menu-link" href="product.html">Product</a>
</li>
<li class="menu-item">
<a class="menu-link" href="new.html">Blog</a>
</li>
<li class="menu-item">
<a class="menu-link" href="contact.html">Pages</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-2">
<ul class="menu-right">
<li class="mn-item">
<a href="" class="mn-link">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</li>
<li class="mn-item">
<a href="login.html" class="mn-link">
<i class="fa-regular fa-user"></i>
</a>
</li>
<li class="mn-item">
<a href="" class="mn-link">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</li>
</ul>
</div>
</div>
<!-- End header -->
<!--begin summer-->
<section class="summer">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="summer-styles">
<h4 class="summer-font">Summer Styles</h4>
<span class="home-font">Home</span>
<span class="arrow-font"> > </span>
<span class="styles-font">Summer Styles</span>
<p class="summer-p">Welcome to our collection, where excitement meets discovery. We're committed
to keeping you at the forefront of fashion, technology, and lifestyle trends.</p>
</div>
<div class="summer-img">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/collections/collection-banner_15_600x.png?v=1692617739"
alt="" width="255px" height="255px">
</div>
</div>
</div>
</div>
</section>
<!-- end summer-->
<!-- begin footwear-->
<section class="footwear">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="footwear-title">
<h5 class="footwear-font">Categories</h5>
</div>
<div class="body-item">
<span class="footwear-body">Accessories </span> <span class="footwear-body-two">(22)</span>
</div>
<div class="body-item">
<span class="footwear-body"> Baby </span> <span class="footwear-body-two">(10)</span>
</div>
<div class="body-item">
<span class="footwear-body"> Baby (T Shirt) </span> <span class="footwear-body-two">(3)</span>
</div>
<div class="body-item">
<span class="footwear-body">Best Selling</span> <span class="footwear-body-two">(68)</span>
</div>
<div class="body-item">
<span class="footwear-body"> Best-Selling (Jewelry) </span> <span
class="footwear-body-two">(7)</span>
</div>
<div class="body-item">
<span class="footwear-body">Bracelets </span> <span class="footwear-body-two">(1)</span>
</div>
<div class="body-item">
<span class="footwear-body">Brooches and Pins </span> <span class="footwear-body-two">(2)</span>
</div>
<div class="body-item">
<span class="footwear-body"> Cap </span> <span class="footwear-body-two">(2)</span>
</div>
<div class="body-item">
<hr class="body-hr">
</div>
<div class="availa-title">
<h5 class="availa-font">Availability</h5>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span><span class="button-font">In stock</span>
<span class="button-color">(28)</span>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span><span class="button-font">Out of
stock</span>
<span class="button-color">(2)</span>
</div>
<div class="body-item">
<hr class="body-hr">
</div>
<div class="color-title">
<h5 class="color-font">Color</h5>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">black</span>
<span class="button-color">(7)</span>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">blue</span>
<span class="button-color">(7)</span>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">gold</span>
<span class="button-color">(7)</span>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">gray</span>
<span class="button-color">(7)</span>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">green</span>
<span class="button-color">(7)</span>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">magenta</span>
<span class="button-color">(7)</span>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">maroon</span>
<span class="button-color">(7)</span>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">navy</span>
<span class="button-color">(8)</span>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">orange</span>
<span class="button-color">(3)</span>
</div>
<div class="body-item">
<hr class="body-hr">
</div>
<div class="Size">
<h5 class="Size-font">Size</h5>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">s</span>
<span class="button-color">(9)</span>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">m</span>
<span class="button-color">(13)</span>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">l</span>
<span class="button-color">(13)</span>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">xl</span>
<span class="button-color">(13)</span>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">xll</span>
<span class="button-color">(6)</span>
</div>
<div class="body-item">
<hr class="body-hr">
</div>
<div class="Material">
<h5 class="Material-font">Material</h5>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">fiber</span>
<span class="button-color">(3)</span>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">leather</span>
<span class="button-color">(3)</span>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">metal</span>
<span class="button-color">(3)</span>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">resin</span>
<span class="button-color">(3)</span>
</div>
<div class="craft-button">
<span class="button-availa"><button></button></span>
<span class="button-font">slag</span>
<span class="button-color">(3)</span>
</div>
<div class="body-item">
<hr class="body-hr">
</div>
<div class="Material">
<h5 class="Material-font">Product Type</h5>
</div>
<div class="body-items">
<hr class="body-hrs">
</div>
<div class="Material">
<h5 class="Material-font">Brand</h5>
</div>
<div class="body-items">
<hr class="body-hrs">
</div>
</div>
<div class="col-md-3">
<div class="window">
<span class="window-font"> <i class="fas fa-th-large"></i></span>
<span class="window-font-two"> <i class="fas fa-list"></i></span>
</div>
<div class="window-img">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/soap_1_600x.png?v=1696933374"
alt="" width="240px" height="240px">
<h6>Wb. Flower Flavor Liquid Soap</h6>
<p>491.000 <sup>₫ </sup></p>
</div>
<div class="window-img">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/watch-classic_1_1024x1024.png?v=1695357695"
alt="" width="240px" height="240px">
<h6>Yb. Classic Smartwatch</h6>
<p>1.809.000 <sup>₫ </sup></p>
</div>
<div class="window-img">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/gold-watch_1_600x.png?v=1693670121"
alt="" width="240px" height="240px">
<h6>Na. Women Diamond Watch
</h6>
<p>2.067.000 <sup>₫ </sup></p>
</div>
<div class="window-img">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/hoop-earring_2_600x.png?v=1693589955"
alt="" width="240px" height="240px">
<h6>Pa. Hoop Earring</h6>
<p>1.008.000 <sup>₫ </sup></p>
</div>
<div class="window-img">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/earring_2_600x.png?v=1693290155"
alt="" width="240px" height="240px">
<h6>Va. Long Earring</h6>
<p>491.000 <sup>₫ </sup></p>
</div>
</div>
<div class="col-md-3">
<div class="best-button">
<span class="button-selling">Best Selling</span>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="best-img">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/cosme_1_1024x1024.png?v=1696928491"
alt="" width="240px" height="240px">
<h6>Da. Cosme Disc Topcap Cosmetic</h6>
<p>1.008.000<sup>₫ </sup></p>
</div>
<div class="best-image-two">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/watch-r3_2_600x.png?v=1694493460"
alt="" width="240px" height="240px">
<h6>Ka. Smart Watch R3</h6>
<p> 2.067.000<sup>₫ </sup></p>
</div>
<div class="best-image-three">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/silver-earring_1_1024x1024.png?v=1699282282"
alt="" width="240px" height="240px">
<h6>Zb. Silver Earring</h6>
<p>1.008.000 <sup>₫ </sup></p>
</div>
<div class="best-image-four">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/silver-rign_2_600x.png?v=1693308116"
alt="" width="240px" height="240px">
<h6>Ta. Silver Ring with Diamond</h6>
<p> 2.558.000<sup>₫ </sup></p>
</div>
<div class="best-image-four">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/necklaces_1_600x.png?v=1693413819"
alt="" width="240px" height="240px">
<h6>Wa. Garland with Locket</h6>
<p>2.041.000<sup>₫ </sup></p>
</div>
</div>
<div class="col-md-3">
<div class="showing">
<h5>Showing 1 - 15 of 30 result</h5>
</div>
<div class="showing-img">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/skin-care_1_1024x1024.png?v=1696927055"
alt="" width="240px" height="240px">
<h6>Ia. Glossy cosmetic skin care
</h6>
<p>2.558.000<sup>₫ </sup></p>
</div>
<div class="showing-img-two">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/apple-watch-ultra_2_600x.png?v=1694491468"
alt="" width="240px" height="240px">
<h6>La. Apple Watch Ultra</h6>
<p>2.842.000<sup>₫ </sup></p>
</div>
<div class="showing-img-two">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/silver-dimond-ring_1_1024x1024.png?v=1693662056"
alt="" width="240px" height="240px">
<h6>Oa. Silver Ring with Diamond
</h6>
<p>2.842.000<sup>₫ </sup></p>
</div>
<div class="showing-img-two">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/necklaces-locket_2_600x.png?v=1693292574"
alt="" width="240px" height="240px">
<h6>Ua. Necklace Locket
</h6>
<p>1.008.000<sup>₫ </sup></p>
</div>
<div class="showing-img-two">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/files/dimond-ring_2_600x.png?v=1693283010"
alt="" width="240px" height="240px">
<h6>Ba. Dimond Ring
</h6>
<p>853.000<sup>₫ </sup></p>
</div>
</div>
</div>
<div class="gg">
<hr class="show-hr">
</div>
<div class="industry-button">
<span class="industry-button-two"><button> <i class="fa-solid fa-angles-left"></i> </button></span>
<span class="industry-button-three"><button>1</button></span>
<span class="industry-button-two"><button>2</button></span>
<span class="industry-button-two"><button><i class="fa-solid fa-angles-right"></i></button></span>
</div>
</div>
</section>
<!-- end footwear-->
<!--Begin final-->
<section class="final-btn">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="img-final">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/metal-earring_1_600x.png?v=1693671671"
alt="" width="140px" height="140px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/collections/collection-banner-_33_600x.png?v=1697903174"
alt="" width="140px" height="140px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/collections/collection-banner_12_600x.png?v=1692615909"
alt="" width="140px" height="140px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/collections/collection-banner_20_600x.png?v=1692620463"
alt="" width="140px" height="140px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/hoop-earring_1_600x.png?v=1693589955"
alt="" width="140px" height="140px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/watch_600x.png?v=1692459788"
alt="" width="140px" height="140px">
<img class="img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/e1_1_600x.png?v=1708276142"
alt="" width="140px" height="140px">
</div>
</div>
</div>
</div>
<div class="note-new"></div>
</div>
</div>
</section>
<!-- end final-->
<!--begin about-->
<section class="about">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="about-us">
<h4> About Us.</h4>
<p>Minimal E-Commerce is a dynamic and innovative online retail platform that offers a wide
range of products to customers worldwide.</p>
</div>
<div class="icon-user">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-youtube"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-tiktok"></i>
<h5>Guaranteed safe checkout</h5>
</div>
<div class="card-img">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/amazon-92e856f82cae5a564cd0f70457f11af4d58fa037cf6e5ab7adf76f6fd3b9cafe.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/apple_pay-f6db0077dc7c325b436ecbdcf254239100b35b70b1663bc7523d7c424901fa09.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/bitcoin-e41278677541fc32b8d2e7fa41e61aaab2935151a6048a1d8d341162f5b93a0a.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/google_pay-c66a29c63facf2053bf69352982c958e9675cabea4f2f7ccec08d169d1856b31.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/paypal-49e4c1e03244b6d2de0d270ca0d22dd15da6e92cc7266e93eb43762df5aa355d.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/visa-319d545c6fd255c9aad5eeaad21fd6f7f7b4fdbdb1a35ce83b89cca12a187f00.svg"
alt="" width="45px" height="29px">
</div>
</div>
<div class="col-md-3">
<div class="quick">
<h5>Quick Link</h5>
<p>My Account </p>
<p>My Cart</p>
<p>Wishlist</p>
<p>Gift Card</p>
<p>Need Help?</p>
</div>
</div>
<div class="col-md-2">
<div class="Information">
<h5>Information</h5>
<p>About us</p>
<p>Contact</p>
<p>Blogs</p>
<p>Size Chart</p>
<p>FAQ</p>
</div>
</div>
<div class="col-md-3">
<div class="Polices">
<h5>Polices</h5>
<P>Privacy Policy</P>
<P>Refund Policy</P>
<P>Terms of Service</P>
<P>Shipping Policy</P>
<P>Contact Information</P>
</div>
</div>
<hr>
<div class="cre">
<p>"© 2024 "<strong>Châu Viết Quyết Thành</strong>". All rights reserved."</p>
</div>
</div>
</div>
</section>
<!--end about-->
</body>
</html>
Kết quả:
- Trang sản phẩm – product
Mô tả:
- Trang chi tiết sản phẩm dùng để hiển thị thông tin chi tiết của sản phẩm đó.
- Có thể hiển thị giá sản phẩm.
- Size của sản phẩm.
- Chất liệu và màu của sản phẩm.
SourceCode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title> Minimalin gift card</title>
<link rel="icon" type="images/png" sizes="32pxx32px"
href="//minimalin-demo.myshopify.com/cdn/shop/files/favicon-simple-2_32x32.png?v=1692807425">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!--begin headers-->
<div class="headers">
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="logo">
<a href="index.html"> <img
src="https://minimalin-demo.myshopify.com/cdn/shop/files/logo-simple_150x.png?v=1692805162 "
width="125px"></a>
</div>
</div>
<div class="col-md-9">
<nav>
<ul class="menu">
<li class="menu-item">
<a class="menu-link" href="index.html">Home</a>
</li>
<li class="menu-item">
<a class="menu-link" href="">Shop</a>
</li>
<li class="menu-item">
<a class="menu-link" href="categories.html">Categories</a>
</li>
<div class="product-blue">
<li class="menu-item">
<a class="menu-link" href="product.html"><p>Product</p></a>
</li>
</div>
<li class="menu-item">
<a class="menu-link" href="new.html">Blog</a>
</li>
<li class="menu-item">
<a class="menu-link" href="contact.html">Trang</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-2">
<ul class="menu-right">
<li class="mn-item">
<a href="" class="mn-link">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</li>
<li class="mn-item">
<a href="login.html" class="mn-link">
<i class="fa-regular fa-user"></i>
</a>
</li>
<li class="mn-item">
<a href="" class="mn-link">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--end header-->
<!--begin f-img-->
<section class="f-img">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="u-img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/CosmeticProduct800x800_2a7357cf-b45a-4fec-b87d-afe505860453_1024x1024.png?v=1697893153"
width="520" height="860" alt="">
</div>
<div class="col-md-6">
<div class="font-gift">
<h2>Minimalin gift card</h2>
<h3 class="u-h4">258.364 <sup>₫</sup></h3>
<hr color="gray">
<p class="font-p">Gift card for your special person.
</p>
<hr color="gray">
<span><i class="fa-solid fa-eye"></i></span> <span class="font-people"> 20 people are viewing
this right now.</span>
<hr color="gray">
<a class="vendor-text">Vendor:</a><span class="span-vendor"> Minimalin</span><br>
<hr color="gray">
<div class="vandor-color">
<span><a class="color-vandor">Denominations :</a></span>
<span class="color-vandor-two"><button>$10.00</button></span>
<span class="color-vandor-three"><button>$25.00</button></span>
<span class="color-vandor-three"><button>$50.00</button></span>
<span class="color-vandor-three"><button>$100.00</button></span>
</div>
<hr color="gray">
<div class="want">
<span class="want-button"><button></button></span> <a class="want-font"> I want to send this
as a gift</a>
</div>
<div class="want-buy">
<span class="large"><button>-</button></span>
<span class="large"><button>1</button></span>
<span class="large"><button>+</button></span>
<span class="button-want"><button><i class="fa-solid fa-cart-shopping"></i>Add to
cart</button></span>
<span class="button-want-two"><button>Buy it now</button></span><br>
</div>
<div class="item-mark">
<i class="fa-regular fa-heart"></i><span class="add-to">Add to wishlist</span>
<i class="fa-solid fa-code-compare"></i><span class="add-to">Compare</span>
<i class="fa-regular fa-envelope"></i><span class="add-to">Ask a Question</span>
<i class="fa-solid fa-chart-column"></i><span class="add-to">Size Chart</span>
</div>
<hr>
<div class="day">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/t/38/assets/fast-delivery.png?v=51082720674517669131701264194"
alt="" width="25px" height="25px">
<span class="car"> Estimated Delivery Date : <span> <a class="today">12 - 13 June, 2024.</a>
</div>
<div class="return">
<h6>Return rules summary</h6>
<li class="return-test">Returns accepted for 30 days</li>
<li class="return-test">Free return shipping</li>
<li class="return-test">No restocking fee</li>
<li class="return-test">No final sale items</li>
<hr>
</div>
</div>
<div class="guranteed-img">
<h5>Guaranteed safe checkout</h5>
<img class="img-vandor"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/amazon-92e856f82cae5a564cd0f70457f11af4d58fa037cf6e5ab7adf76f6fd3b9cafe.svg"
alt="" width="45px" height="29px">
<img class="img-vandor"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/apple_pay-f6db0077dc7c325b436ecbdcf254239100b35b70b1663bc7523d7c424901fa09.svg"
alt="" width="45px" height="29px">
<img class="img-vandor"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/bitcoin-e41278677541fc32b8d2e7fa41e61aaab2935151a6048a1d8d341162f5b93a0a.svg"
alt="" width="45px" height="29px">
<img class="img-vandor"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/google_pay-c66a29c63facf2053bf69352982c958e9675cabea4f2f7ccec08d169d1856b31.svg"
alt="" width="45px" height="29px">
<img class="img-vandor"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/paypal-49e4c1e03244b6d2de0d270ca0d22dd15da6e92cc7266e93eb43762df5aa355d.svg"
alt="" width="45px" height="29px">
<img class="img-vandor"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/visa-319d545c6fd255c9aad5eeaad21fd6f7f7b4fdbdb1a35ce83b89cca12a187f00.svg"
alt="" width="45px" height="29px">
<br>
<hr>
</div>
<div class="Guaranteed-share">
<span>Share: </span>
<span class="Guaranteed-blue"><i class="fab fa-facebook-f"></i><i class="share-test">Facebook
</i>
<i class="fa-brands fa-twitter"></i><i class="share-test">Twiter </i>
<i class="fa-brands fa-pinterest"></i><i class="share-test">Pinterest </i></span>
</div>
</div>
</div>
<div class="Guaranteed-views">
<h2 class="Guaranteed-size">Related Products</h2>
</div>
</div>
</section>
<!--end f-img-->
<!--begin related product-->
<section class="related">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="related-img">
<img class="related-img-test"
src="https://cdn.shopify.com/s/files/1/1522/7938/files/shirt_2_600x.png?v=1692372496" alt=""
width="230px" height="230px">
<h6 class="related-font">W. Men Formal T-shirtcket</h6>
<p class="related-coin">491.000 <sup>₫</sup></p>
</div>
</div>
<div class="col-md-3">
<div class="related-img">
<img class="related-img-test"
src="https://minimalin-demo.myshopify.com/cdn/shop/files/e1_1_1024x1024.png?v=1708276142"
alt="" width="230px" height="230px">
<h6 class="related-font">Bb. Smart headphone </h6>
<p class="related-coin">1.008.000 <sup>₫</sup></p>
</div>
</div>
<div class="col-md-3">
<div class="related-img">
<img class="related-img-test"
src="https://cdn.shopify.com/s/files/1/1522/7938/files/watch_1_600x.png?v=1692459788" alt=""
width="230px" height="230px">
<h6 class="related-font">F. Ultimate Smart Watch</h6>
<p class="related-coin">1.422.000 <sup>₫</sup></p>
</div>
</div>
<div class="col-md-3">
<div class="related-img">
<img class="related-img-test"
src="https://cdn.shopify.com/s/files/1/1522/7938/files/e1_66_600x.png?v=1709218314" alt=""
width="230px" height="230px">
<h6 class="related-font">Nb. CH99 3D Video Game Controller</h6>
<p class="related-coin">491.000 <sup>₫</sup></p>
</div>
</div>
</div>
<div class="Guaranteed-views">
<h2 class="Guaranteed-size">Recently Viewed</h2>
</div>
</div>
</section>
<!--end related product-->
<!-- begin recently -->
<section class="recently-viewed">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="recently-img">
<img class="recently-img-test"
src="https://cdn.shopify.com/s/files/1/1522/7938/files/e1_65_large.png?v=1709214397" alt=""
width="230px" height="230px">
<h6 class="recently-font">Nb. CH99 3D Video Game Controller</h6>
<p class="recently-coin">491.000<sup>₫</sup></p>
</div>
</div>
<div class="col-md-3">
<div class="recently-img">
<img class="recently-img-test"
src="https://cdn.shopify.com/s/files/1/1522/7938/files/CosmeticProduct800x800_2a7357cf-b45a-4fec-b87d-afe505860453_large.png?v=1697893153"
alt="" width="230px" height="230px">
<h6 class="recently-font">Minimalin gift card</h6>
<p class="recently-coin"> 258.358<sup>₫</sup></p>
</div>
</div>
<div class="col-md-3">
<div class="recently-img">
<img class="recently-img-test"
src="https://cdn.shopify.com/s/files/1/1522/7938/files/watch_large.png?v=1692459788" alt=""
width="230px" height="230px">
<h6 class="recently-font">F. Ultimate Smart Watch</h6>
<p class="recently-coin"> 1.421.000 <sup>₫</sup></p>
</div>
</div>
<div class="col-md-3">
<div class="recently-img">
<img class="recently-img-test"
src="https://cdn.shopify.com/s/files/1/1522/7938/files/metal-earring_1_large.png?v=1693671671"
alt="" width="230px" height="230px">
<h6 class="recently-font">Ma. Metal Earring with Topaz</h6>
<p class="recently-coin"> 2.842.000 <sup>₫</sup></p>
</div>
</div>
</div>
<div class="Guaranteed-views">
<h2 class="Guaranteed-size">FAQs</h2>
</div>
</div>
</section>
<!-- end recently -->
<!-- begin should-->
<section class="should">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="should-faqs">
<div class="should-home">
<span class="should-font"><a>How to buy a product?</a></span>
<span class="should-button"><button><i class="fa-solid fa-minus"></i></button></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut
labore et dolore magna aliqua. Scelerisque eleifend donec pretium vulputate sapien nec
sagittis. Proin libero nunc consequat interdum. Condimentum lacinia quis vel eros donec
ac.
Mauris sit amet massa vitae tortor. Quisque id diam vel quam elementum pulvinar. Gravida
in
fermentum et sollicitudin ac orci phasellus. Facilisis gravida neque convallis a cras
semper. Non arcu risus quis varius quam quisque id.</p>
</div>
</div>
<div class="make-faqs">
<div class="make-home">
<span class="make-font"><a>How can i make refund from your website?</a></span>
<span class="make-button"><button><i class="fa-solid fa-plus"></i></button></span>
</div>
</div>
<div class="make-faqs">
<div class="make-home">
<span class="make-font"><a>I am a new user. How should I start?</a></span>
<span class="make-button-two"><button><i class="fa-solid fa-plus"></i></button></span>
</div>
</div>
<div class="make-faqs">
<div class="make-home">
<span class="make-font"><a>Are my details secured?</a></span>
<span class="make-button-three"><button><i class="fa-solid fa-plus"></i></button></span>
</div>
</div>
<div class="make-faqs">
<div class="make-home">
<span class="make-font"><a>How do I make payment by my credit card?</a></span>
<span class="make-button-four"><button><i class="fa-solid fa-plus"></i></button></span>
</div>
</div>
</div>
</div>
<div class="note-new"></div>
</div>
</section>
<!-- end should-->
<!--begin buy-item-->
<section class="buy">
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="logo">
<a> <img src="https://minimalin-demo.myshopify.com/cdn/shop/files/shirt_1_thumb.png?v=1692372496"
width="50px" height="50px"></a>
</div>
</div>
<div class="col-md-3">
<div class="menu-test">
<h6 class="name">Minimalin gift card</h6>
</div>
</div>
<div class="col-md-3">
<div class="coin-item">
<button class="price-item"> $10.00 - 258.371 VND</button>
</div>
</div>
<div class="col-md-2">
<div class="custom">
<button class="custom-test">-</button>
<button class="custom-test">1</button>
<button class="custom-test">+</button>
</div>
</div>
<div class="col-md-2">
<div class="cart">
<a href="buy.html"><button class="cart-test">Add to cart</button></a>
</div>
</div>
</div>
</div>
</section>
<!-- end buy-item-->
<!--begin about-->
<section class="about">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="about-us">
<h4> About Us.</h4>
<p>Minimal E-Commerce is a dynamic and innovative online retail platform that offers a wide
range of products to customers worldwide.</p>
</div>
<div class="icon-user">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-youtube"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-tiktok"></i>
<h5>Guaranteed safe checkout</h5>
</div>
<div class="card-img">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/amazon-92e856f82cae5a564cd0f70457f11af4d58fa037cf6e5ab7adf76f6fd3b9cafe.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/apple_pay-f6db0077dc7c325b436ecbdcf254239100b35b70b1663bc7523d7c424901fa09.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/bitcoin-e41278677541fc32b8d2e7fa41e61aaab2935151a6048a1d8d341162f5b93a0a.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/google_pay-c66a29c63facf2053bf69352982c958e9675cabea4f2f7ccec08d169d1856b31.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/paypal-49e4c1e03244b6d2de0d270ca0d22dd15da6e92cc7266e93eb43762df5aa355d.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/visa-319d545c6fd255c9aad5eeaad21fd6f7f7b4fdbdb1a35ce83b89cca12a187f00.svg"
alt="" width="45px" height="29px">
</div>
</div>
<div class="col-md-3">
<div class="quick">
<h5>Quick Link</h5>
<p>My Account </p>
<p>My Cart</p>
<p>Wishlist</p>
<p>Gift Card</p>
<p>Need Help?</p>
</div>
</div>
<div class="col-md-2">
<div class="Information">
<h5>Information</h5>
<p>About us</p>
<p>Contact</p>
<p>Blogs</p>
<p>Size Chart</p>
<p>FAQ</p>
</div>
</div>
<div class="col-md-3">
<div class="Polices">
<h5>Polices</h5>
<P>Privacy Policy</P>
<P>Refund Policy</P>
<P>Terms of Service</P>
<P>Shipping Policy</P>
<P>Contact Information</P>
</div>
</div>
<hr>
<div class="cre">
<p>"© 2024 "<strong>Châu Viết Quyết Thành</strong>". All rights reserved."</p>
</div>
</div>
</div>
</section>
<!--end about-->
</body>
</html>
Kết quả:
- Trang báo về các sản phẩm– blog
Mô tả:
- Trang hiện thị về các bài báo sản phẩm
SourceCode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>News - Minimalin</title>
<link rel="icon" type="images/png" sizes="32pxx32px"
href="//minimalin-demo.myshopify.com/cdn/shop/files/favicon-simple-2_32x32.png?v=1692807425">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!--begin header-->
<div class="headers">
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="logo">
<a href="index.html"> <img
src="https://minimalin-demo.myshopify.com/cdn/shop/files/logo-simple_150x.png?v=1692805162 "
width="125px"></a>
</div>
</div>
<div class="col-md-9">
<nav>
<ul class="menu">
<li class="menu-item">
<a class="menu-link" href="index.html">Home</a>
</li>
<li class="menu-item">
<a class="menu-link" href="">Shop</a>
</li>
<li class="menu-item">
<a class="menu-link" href="categories.html">Categories</a>
</li>
<li class="menu-item">
<a class="menu-link" href="product.html">Product</a>
</li>
<div class="product-blue">
<li class="menu-item">
<a class="menu-link" href="new.html"><p>Blog</p></a>
</li>
</div>
<li class="menu-item">
<a class="menu-link" href="contact.html">Trang</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-2">
<ul class="menu-right">
<li class="mn-item">
<a href="" class="mn-link">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</li>
<li class="mn-item">
<a href="login.html" class="mn-link">
<i class="fa-regular fa-user"></i>
</a>
</li>
<li class="mn-item">
<a href="" class="mn-link">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--end header-->
<!--begin news-->
<section class="news">
<div class="container">
<div class="row">
<div class="news-name">
<h3 class="news-font">News</h3>
<div class="news-home">
<span class="news-colors">Home > </span>
<span class="news-color">News</span>
</div>
</div>
</div>
</div>
</section>
<!-- end news-->
<!--begin search-->
<section class="search">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="search-font">
<h5>Search</h5>
</div>
<div class="store-name">
<input type="name" name="customer[name]" id="CustomerName" class="input-full"
placeholder=" Sreach our store" autocorrect="off" autocapitalize="off" autofocus>
<button type="submit">
<i class="fas fa-search">
</i>
</button>
</div>
<br>
<hr>
<br>
<div class="recent">
<h5>Recent Post</h5><br>
</div>
<div class="layering">
<img class="layering-img"
src="https://minimalin-demo.myshopify.com/cdn/shop/articles/blog-1_100x.jpg?v=1690981937"
alt="" width="90" height="47">
<h6 class="layering-font">The Art of Layering: C..</h6>
<div class="layering-canlendar">
<i class="fa-solid fa-calendar-days"></i>
</div>
<div class="layering-font-two">
<p>Aug 01, 2023</p>
</div>
<hr class="layering-hr">
<div class="glimpse">
<img class="glimpse-img"
src="https://minimalin-demo.myshopify.com/cdn/shop/articles/blog-2_100x.jpg?v=1690982050"
alt="" width="90" height="47">
<h6 class="glimpse-font">A Glimpse into Men's..</h6>
<div class="glimpse-canlendar">
<i class="fa-solid fa-calendar-days"></i>
</div>
<div class="glimpse-font-two">
<p>Aug 01, 2023</p>
</div>
<hr class="layering-hr">
<div class="glimpse">
<img class="glimpse-img"
src="https://minimalin-demo.myshopify.com/cdn/shop/articles/blog-3_1200x.jpg?v=1690982279"
alt="" width="90" height="47">
<h6 class="glimpse-font">Fashion Dos and Don'..</h6>
<div class="glimpse-canlendar">
<i class="fa-solid fa-calendar-days"></i>
</div>
<div class="glimpse-font-two">
<p>Aug 01, 2023</p>
</div>
<hr class="layering-hr">
<div class="tags-new">
<h5>Tags</h5>
<span class="access"><button>Accessories</button></span> <button
class="access-two">Dress</button>
<span class="men"><button>Fashion</button></span> <button
class="men-two">Men</button>
<span class="springs"><button>Spring</button></span><button
class="springs-two">Winter</button>
<button class="wormen-two">Wormen</button>
</div>
<hr class="layering-hr-two">
<div class="nerver">
<h5>Never Miss News</h5>
</div>
<div class="MXH">
<span class="facebooks"><button><i
class="fa-brands fa-facebook-f"></i></button></span>
<span class="twiters"><button><i class="fa-brands fa-twitter"></i></button></span>
<span class="twiters"><button><i class="fa-brands fa-youtube"></i></button></span>
<span class="twiters"><button><i class="fa-brands fa-instagram"></i></button></span>
<span class="twiters"><button><i class="fa-brands fa-tiktok"></i></button></span>
</div>
<hr class="layering-hr-three">
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="funcitonal">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/articles/blog-1_1200x.jpg?v=1690981937"
alt="" width="370px" height="240px">
<span class="augus"><i class="fa-solid fa-calendar-days"></i></span>
<span class="augus-two">August 01, 2023</span>
<span class="comment"><i class="fa-solid fa-comment"></i></span>
<span class="comment-two">2 comments</span>
<div class="funcitonal-two">
<h6 class="funcitonal-font">The Art of Layering: Creating Stylish and Functional Outfits
</h6>
</div>
<div class="readmore">
<p>Read More</p>
</div>
<div class="funcitonal-three">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/articles/blog-3_1200x.jpg?v=1690982279"
alt="" width="370px" height="240px">
<span class="augus"><i class="fa-solid fa-calendar-days"></i></span>
<span class="augus-two">August 01, 2023</span>
<span class="comment"><i class="fa-solid fa-comment"></i></span>
<span class="comment-two">2 comments</span>
<div class="funcitonal-two">
<h6 class="funcitonal-font">The Art of Layering: Creating Stylish and Functional Outfits
</h6>
</div>
<div class="readmore">
<p>Read More</p>
</div>
<div class="funcitonal-four">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/articles/blog-5_1200x.jpg?v=1690983790"
alt="" width="370px" height="240px">
<span class="augus"><i class="fa-solid fa-calendar-days"></i></span>
<span class="augus-two">August 01, 2023</span>
<span class="comment"><i class="fa-solid fa-comment"></i></span>
<span class="comment-two">2 comments</span>
<div class="funcitonal-two">
<h6 class="funcitonal-font">The Art of Layering: Creating Stylish and Functional
Outfits</h6>
</div>
<div class="readmore">
<p>Read More</p>
</div>
</div>
<div class="funcitonal-four">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/articles/blog-7_1200x.jpg?v=1690983828"
alt="" width="370px" height="240px">
<span class="augus"><i class="fa-solid fa-calendar-days"></i></span>
<span class="augus-two">August 01, 2023</span>
<span class="comment"><i class="fa-solid fa-comment"></i></span>
<span class="comment-two">2 comments</span>
<div class="funcitonal-two">
<h6 class="funcitonal-font">The Art of Layering: Creating Stylish and Functional
Outfits</h6>
</div>
<div class="readmore">
<p>Read More</p>
</div>
<hr class="trends-hr">
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="trends">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/articles/blog-2_1200x.jpg?v=1690982050"
alt="" width="370px" height="240px">
<span class="augus"><i class="fa-solid fa-calendar-days"></i></span>
<span class="augus-two">August 01, 2023</span>
<span class="comment"><i class="fa-solid fa-comment"></i></span>
<span class="comment-two">2 comments</span>
<div class="trends-two">
<h6 class="trends-font">The Art of Layering: Creating Stylish and Functional Outfits
</h6>
</div>
<div class="readmore">
<p>Read More</p>
</div>
<div class="trends-three">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/articles/blog-4_1200x.jpg?v=1690983773"
alt="" width="370px" height="240px">
<span class="augus"><i class="fa-solid fa-calendar-days"></i></span>
<span class="augus-two">August 01, 2023</span>
<span class="comment"><i class="fa-solid fa-comment"></i></span>
<span class="comment-two">2 comments</span>
<div class="trends-two">
<h6 class="trends-font">The Art of Layering: Creating Stylish and Functional Outfits
</h6>
</div>
<div class="readmore">
<p>Read More</p>
</div>
<div class="trends-four">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/articles/blog-6_1200x.jpg?v=1690983806"
alt="" width="370px" height="240px">
<span class="augus"><i class="fa-solid fa-calendar-days"></i></span>
<span class="augus-two">August 01, 2023</span>
<span class="comment"><i class="fa-solid fa-comment"></i></span>
<span class="comment-two">2 comments</span>
<div class="trends-two">
<h6 class="trends-font">The Art of Layering: Creating Stylish and Functional Outfits
</h6>
</div>
<div class="readmore">
<p>Read More</p>
</div>
<div class="trends-four">
<img src="https://minimalin-demo.myshopify.com/cdn/shop/articles/blog-8_1200x.jpg?v=1690983857"
alt="" width="370px" height="240px">
<span class="augus"><i class="fa-solid fa-calendar-days"></i></span>
<span class="augus-two">August 01, 2023</span>
<span class="comment"><i class="fa-solid fa-comment"></i></span>
<span class="comment-two">2 comments</span>
<div class="trends-two">
<h6 class="trends-font">The Art of Layering: Creating Stylish and Functional
Outfits
</h6>
</div>
<div class="readmore">
<p>Read More</p>
</div>
<hr class="trends-hr-two">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="industry-button">
<span class="industry-button-two"><button> <i class="fa-solid fa-angles-left"></i> </button></span>
<span class="industry-button-three"><button>1</button></span>
<span class="industry-button-two"><button>2</button></span>
<span class="industry-button-two"><button><i class="fa-solid fa-angles-right"></i></button></span>
</div>
</div>
</section>
<!--end sreach-->
<!-- begin newsletter-->
<section class="newsletter">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="newsletter-two">
<h5>Newsletter</h5>
<p>Learn about our most recent news, updates, and deals by subscribing.</p>
</div>
<div class="subscribe">
<input type="name" name="customer[name]" id="CustomerName" class="input-full"
placeholder=" [email protected]" autocorrect="off" autocapitalize="off" autofocus>
<button type="subscribe-button">
<h5 class="subscribe-button-two">
Subscribe
</h5>
</button>
</div>
</div>
</div>
<div class="note-new"></div>
</div>
</section>
<!-- end newsletter-->
<!--begin about-->
<section class="about">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="about-us">
<h4> About Us.</h4>
<p>Minimal E-Commerce is a dynamic and innovative online retail platform that offers a wide
range of products to customers worldwide.</p>
</div>
<div class="icon-user">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-youtube"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-tiktok"></i>
<h5>Guaranteed safe checkout</h5>
</div>
<div class="card-img">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/amazon-92e856f82cae5a564cd0f70457f11af4d58fa037cf6e5ab7adf76f6fd3b9cafe.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/apple_pay-f6db0077dc7c325b436ecbdcf254239100b35b70b1663bc7523d7c424901fa09.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/bitcoin-e41278677541fc32b8d2e7fa41e61aaab2935151a6048a1d8d341162f5b93a0a.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/google_pay-c66a29c63facf2053bf69352982c958e9675cabea4f2f7ccec08d169d1856b31.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/paypal-49e4c1e03244b6d2de0d270ca0d22dd15da6e92cc7266e93eb43762df5aa355d.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/visa-319d545c6fd255c9aad5eeaad21fd6f7f7b4fdbdb1a35ce83b89cca12a187f00.svg"
alt="" width="45px" height="29px">
</div>
</div>
<div class="col-md-3">
<div class="quick">
<h5>Quick Link</h5>
<p>My Account </p>
<p>My Cart</p>
<p>Wishlist</p>
<p>Gift Card</p>
<p>Need Help?</p>
</div>
</div>
<div class="col-md-2">
<div class="Information">
<h5>Information</h5>
<p>About us</p>
<p>Contact</p>
<p>Blogs</p>
<p>Size Chart</p>
<p>FAQ</p>
</div>
</div>
<div class="col-md-3">
<div class="Polices">
<h5>Polices</h5>
<P>Privacy Policy</P>
<P>Refund Policy</P>
<P>Terms of Service</P>
<P>Shipping Policy</P>
<P>Contact Information</P>
</div>
</div>
<hr>
<div class="cre">
<p>"© 2024 "<strong>Châu Viết Quyết Thành</strong>". All rights reserved."</p>
</div>
</div>
</div>
</section>
<!--end about-->
</body>
</html>
Kết quả:
- Trang đăng nhập – login
Mô tả:
- Trang cho phép ta đăng nhập tài khoản
SourceCode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>Account - Minimalin</title>
<link rel="icon" type="images/png" sizes="32pxx32px"
href="//minimalin-demo.myshopify.com/cdn/shop/files/favicon-simple-2_32x32.png?v=1692807425">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!--begin header-->
<div class="headers">
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="logo">
<a href="index.html"> <img
src="https://minimalin-demo.myshopify.com/cdn/shop/files/logo-simple_150x.png?v=1692805162 "
width="125px"></a>
</div>
</div>
<div class="col-md-9">
<nav>
<ul class="menu">
<li class="menu-item">
<a class="menu-link" href="index.html">Home</a>
</li>
<li class="menu-item">
<a class="menu-link" href="">Shop</a>
</li>
<li class="menu-item">
<a class="menu-link" href="categories.html">Categories</a>
</li>
<li class="menu-item">
<a class="menu-link" href="product.html">Product</a>
</li>
<li class="menu-item">
<a class="menu-link" href="new.html">Blog</a>
</li>
<li class="menu-item">
<a class="menu-link" href="contact.html">Trang</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-2">
<ul class="menu-right">
<li class="mn-item">
<a href="" class="mn-link">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</li>
<li class="mn-item">
<a href="login.html" class="mn-link">
<i class="fa-regular fa-user"></i>
</a>
</li>
<li class="mn-item">
<a href="" class="mn-link">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--end header-->
<!--begin login-account -->
<section class="login-account">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="login-new">
<h5 class="login-font">Login</h5>
<p class="login-font-two">please login using account detail bellow.</p>
</div>
<div class="login-email">
<input type="email" name="customer[email]" id="CustomerEmail" class="input-full"
placeholder=" Email" autocorrect="off" autocapitalize="off" autofocus>
</div>
<div class="login-password">
<input type="password" name="customer[password]" id="CustomerPassword" class="input-maximum"
placeholder=" Password" autocorrect="off" autocapitalize="off" autofocus>
</div>
<div class="login-sign">
<span><button class="button-sign-in">Sign In</button></span>
<span class="sign-forgot">Forgot your password?</span>
</div>
<div class="create">
<p>Create account</p>
</div>
</div>
</div>
<div class="note-new"></div>
</section>
<!--end login-account -->
<!--begin about-->
<section class="about">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="about-us">
<h4> About Us.</h4>
<p>Minimal E-Commerce is a dynamic and innovative online retail platform that offers a wide
range of products to customers worldwide.</p>
</div>
<div class="icon-user">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-youtube"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-tiktok"></i>
<h5>Guaranteed safe checkout</h5>
</div>
<div class="card-img">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/amazon-92e856f82cae5a564cd0f70457f11af4d58fa037cf6e5ab7adf76f6fd3b9cafe.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/apple_pay-f6db0077dc7c325b436ecbdcf254239100b35b70b1663bc7523d7c424901fa09.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/bitcoin-e41278677541fc32b8d2e7fa41e61aaab2935151a6048a1d8d341162f5b93a0a.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/google_pay-c66a29c63facf2053bf69352982c958e9675cabea4f2f7ccec08d169d1856b31.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/paypal-49e4c1e03244b6d2de0d270ca0d22dd15da6e92cc7266e93eb43762df5aa355d.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/visa-319d545c6fd255c9aad5eeaad21fd6f7f7b4fdbdb1a35ce83b89cca12a187f00.svg"
alt="" width="45px" height="29px">
</div>
</div>
<div class="col-md-3">
<div class="quick">
<h5>Quick Link</h5>
<p>My Account </p>
<p>My Cart</p>
<p>Wishlist</p>
<p>Gift Card</p>
<p>Need Help?</p>
</div>
</div>
<div class="col-md-2">
<div class="Information">
<h5>Information</h5>
<p>About us</p>
<p>Contact</p>
<p>Blogs</p>
<p>Size Chart</p>
<p>FAQ</p>
</div>
</div>
<div class="col-md-3">
<div class="Polices">
<h5>Polices</h5>
<P>Privacy Policy</P>
<P>Refund Policy</P>
<P>Terms of Service</P>
<P>Shipping Policy</P>
<P>Contact Information</P>
</div>
</div>
<hr>
<div class="cre">
<p>"© 2024 "<strong>Châu Viết Quyết Thành</strong>". All rights reserved."</p>
</div>
</div>
</div>
</section>
<!--end about-->
</body>
</html>
Kết quả:
- Trang liên hệ – contact
Mô tả:
- Trang hiện thị các thông tin chúng ta có thể liên hệ
- giúp ta giải đáp thắc mắc
SourceCode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>Contact - Minimalin</title>
<link rel="icon" type="images/png" sizes="32pxx32px"
href="//minimalin-demo.myshopify.com/cdn/shop/files/favicon-simple-2_32x32.png?v=1692807425">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- Begin header -->
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="logo">
<a href="index.html"> <img
src="https://minimalin-demo.myshopify.com/cdn/shop/files/logo-simple_150x.png?v=1692805162 "
width="125px"></a>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<nav>
<ul class="menu">
<li class="menu-item">
<a class="menu-link" href="index.html">Home</a>
</li>
<li class="menu-item">
<a class="menu-link" href="">Shop</a>
</li>
<li class="menu-item">
<a class="menu-link" href="categories.html">Categories</a>
</li>
<li class="menu-item">
<a class="menu-link" href="product.html">Product</a>
</li>
<li class="menu-item">
<a class="menu-link" href="new.html">Blog</a>
</li>
<div class="product-blue">
<li class="menu-item">
<a class="menu-link" href="contact.html"><p>Trang</p></a>
</li>
</div>
</ul>
</nav>
</div>
<div class="col-md-2">
<ul class="menu-right">
<li class="mn-item">
<a href="" class="mn-link">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</li>
<li class="mn-item">
<a href="login.html" class="mn-link">
<i class="fa-regular fa-user"></i>
</a>
</li>
<li class="mn-item">
<a href="" class="mn-link">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- End header -->
<!--begin contact-->
<section class="contact">
<div class="container">
<div class="row">
<div class="contact-name">
<h3 class="name-font">Contact</h3>
<div class="contact-home">
<span>Home > </span>
<span class="contact-color">Contact</span>
</div>
</div>
</div>
</div>
</section>
<!-- end contact-->
<!--begin office-->
<section class="office">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="office-email">
<h5 class="office-h5">Email Address</h5>
<p class="office-gmail">[email protected]</p>
<p class="office-gmail-two">[email protected]</p>
</div>
</div>
<div class="col-md-4">
<div class="office-email">
<h5 class="office-h5">Phone Number</h5>
<p class="office-gmail">+0123-456789</p>
<p class="office-gmail-two">+9879-654321</p>
</div>
</div>
<div class="col-md-4">
<div class="office-email">
<h5 class="office-h5">Office Address</h5>
<p class="office-gmail">Your Street Address, City Name, State,</p>
<p class="office-gmail-two">ZIP Code, Country.</p>
</div>
</div>
</div>
</div>
</section>
<!--end office-->
<!--begin message-->
<section class="massage">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="massage-font">
<h5>Send Message</h5>
</div>
<div class="massage-name">
<input type="name" name="customer[name]" id="CustomerName" class="input-fulls"
placeholder=" Enter your name" autocorrect="off" autocapitalize="off" autofocus>
</div>
<div class="massage-phone">
<input type="phome" name="customer[phone]" id="Customerphone" class="input-full"
placeholder=" Enter phone number" autocorrect="off" autocapitalize="off" autofocus>
</div>
</div>
<div class="col-md-6">
<div class="massage-address">
<input type="name" name="customer[name]" id="CustomerName" class="input-max"
placeholder=" Enter email address" autocorrect="off" autocapitalize="off" autofocus>
</div>
<div class="massage-subject">
<input type="name" name="customer[name]" id="CustomerName" class="input-maxim"
placeholder=" Enter subject" autocorrect="off" autocapitalize="off" autofocus>
</div>
</div>
<div class="massage-two">
<input type="name" name="customer[name]" id="CustomerName" class="input-maximums"
placeholder=" Enter message" autocorrect="off" autocapitalize="off" autofocus>
</div>
<div class="submit">
<button class="submit-button">Submit</button>
</div>
</div>
<div class="note-new"></div>
</div>
</section>
<!--end message-->
<!--begin about-->
<section class="about">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="about-us">
<h4> About Us.</h4>
<p>Minimal E-Commerce is a dynamic and innovative online retail platform that offers a wide
range of products to customers worldwide.</p>
</div>
<div class="icon-user">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-youtube"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-tiktok"></i>
<h5>Guaranteed safe checkout</h5>
</div>
<div class="card-img">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/amazon-92e856f82cae5a564cd0f70457f11af4d58fa037cf6e5ab7adf76f6fd3b9cafe.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/apple_pay-f6db0077dc7c325b436ecbdcf254239100b35b70b1663bc7523d7c424901fa09.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/bitcoin-e41278677541fc32b8d2e7fa41e61aaab2935151a6048a1d8d341162f5b93a0a.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/google_pay-c66a29c63facf2053bf69352982c958e9675cabea4f2f7ccec08d169d1856b31.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/paypal-49e4c1e03244b6d2de0d270ca0d22dd15da6e92cc7266e93eb43762df5aa355d.svg"
alt="" width="45px" height="29px">
<img class="img-card"
src="https://minimalin-demo.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/visa-319d545c6fd255c9aad5eeaad21fd6f7f7b4fdbdb1a35ce83b89cca12a187f00.svg"
alt="" width="45px" height="29px">
</div>
</div>
<div class="col-md-3">
<div class="quick">
<h5>Quick Link</h5>
<p>My Account </p>
<p>My Cart</p>
<p>Wishlist</p>
<p>Gift Card</p>
<p>Need Help?</p>
</div>
</div>
<div class="col-md-2">
<div class="Information">
<h5>Information</h5>
<p>About us</p>
<p>Contact</p>
<p>Blogs</p>
<p>Size Chart</p>
<p>FAQ</p>
</div>
</div>
<div class="col-md-3">
<div class="Polices">
<h5>Polices</h5>
<P>Privacy Policy</P>
<P>Refund Policy</P>
<P>Terms of Service</P>
<P>Shipping Policy</P>
<P>Contact Information</P>
</div>
</div>
<hr>
<div class="cre">
<p>"© 2024 "<strong>Châu Viết Quyết Thành</strong>". All rights reserved."</p>
</div>
</div>
</div>
</section>
<!--end about-->
</body>
</html>
Kết quả:
Toàn bộ sourcecode project:
body {
font-family: "Poppins", sans-serif;
}
a {
text-decoration: none !important;
color: black !important;
}
.header {
padding: 15px 0px;
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgb(250, 250, 250);
padding: 1rem 7%;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000;
box-shadow: var(--box-shadow);
}
.product-blue p {
color: rgb(103, 169, 255);
font-weight: 600;
}
.menu {
display: flex;
list-style: none;
justify-content: center;
}
.menu p:hover {
color: red;
}
.menu a:hover {
color: red !important;
}
.menu-right i:hover {
transform: scale(1.1);
color: red;
}
.row h4 {
margin-top: 50px;
font-size: 30px;
}
.menu-item {
margin: 0px 25px;
}
.menu-right {
display: flex;
list-style: none;
justify-content: end;
}
.mn-item {
margin: 0px 8px;
}
/* product */
.hot .row {
margin-top: 50px;
}
.hot .q-name:hover {
color: rgb(118, 118, 224);
}
.p-wrap {
text-align: center;
margin-top: 30px;
}
.hot-sale .p-img {
border-radius: 10px;
}
.hot-sale .p-name:hover {
color: blue;
}
.p-img {
width: 100%;
}
.img-slide {
width: 100%;
}
.q-warp {
text-align: center;
margin-top: 15px;
}
.hot .q-img {
border-radius: 10px;
}
.hot .col-md-6 {
border-radius: 10px;
}
.btn-button:hover {
background-color: rgb(83, 130, 218);
}
.btn-button {
font-weight: 500;
width: 120px;
height: 40px;
border-radius: 5px;
position: absolute;
margin-top: 160px;
margin-left: 30px;
}
.q-name {
position: absolute;
margin-top: 100px;
margin-left: 30px;
}
.q-warp img {
position: relative;
}
.q-img {
width: 100%;
}
.section {
padding: 5% 10%;
}
.main-text {
margin-top: 100px;
display: grid;
grid-template-columns: repeat(1, 1fr);
align-items: center;
}
.main-home {
margin-top: 75px;
border-radius: 5%;
margin-left: 80px;
background: rgb(244, 244, 244);
width: 90%;
}
.btn-view {
margin-top: 40px;
text-align: center;
}
.btn-view .btn-size {
width: 120px;
height: 40px;
background-color: rgb(69, 122, 220);
border-radius: 5px;
transition: 0.3s;
color: white;
font-weight: 700;
}
.btn-size:hover {
background-color: white;
color: black;
}
.main-btn {
width: 125px;
height: 40px;
border-radius: 5px;
background-color: rgb(69, 122, 220);
transition: 0.3s;
color: white;
font-weight: 700;
}
.main-btn:hover {
background-color: white;
color: black;
}
/* begin best-offer */
.best {
margin-top: 150px;
display: grid;
grid-template-columns: repeat(1, 1fr);
align-items: center;
}
.best-offer {
margin-top: 75px;
margin-left: 80px;
background: rgb(244, 244, 244);
width: 90%;
}
.best .put {
margin-top: 20px;
width: 160px;
height: 40px;
margin-left: 150px;
}
.best h2 {
margin-left: 50px;
font-size: 40px;
}
.put {
background-color: rgb(69, 122, 220);
color: white;
font-weight: 700;
border-radius: 5px;
}
.put:hover {
background-color: white;
color: black;
}
.btn-viewer {
text-align: center;
margin-top: 100px;
}
.btn-views {
text-align: center;
margin-top: 50px;
}
/* end best-offer */
/* begin featured-collection */
.featured-collection {
margin-top: 50px;
}
.featured-collection .p-img {
border-radius: 10px;
}
/* end featured-collection */
.new-arrivals {
margin-top: 50px;
}
.featured-collection .p-name:hover {
color: blue;
}
.col-md-3 h6 {
text-align: center;
margin-top: 15px;
}
.new-arrivals p {
text-align: center;
}
.new-arrivals .p-name:hover {
color: blue;
}
.col-md-3 .p-img {
border-radius: 10px;
}
.u-wrap .price {
padding-left: 110px;
}
/* begin lates blog */
.lates-blog {
margin-top: 50px;
}
.o-wrap i {
margin-top: 20px;
}
.o-wrap .re-name {
margin-top: 20px;
}
.col-md-4 span {
color: blue;
font-weight: 600;
margin-top: 30px;
}
.col-md-4 .p-img {
border-radius: 10px;
}
.o-wrap .p-img:hover {
transform: scale(1.1);
}
/* end lates blog */
/* begin oder */
.col-md-3 .menu-item {
margin-top: 70px;
font-size: 40px;
list-style-type: none;
}
.menu-link h5 {
display: inline-flex;
}
.btn-viewer h6 {
text-align: center;
margin-bottom: 60px;
}
/* End oder */
/* begin btn-ground */
.img-background {
display: flex;
}
.img-background img {
border-radius: 10px;
margin: 0 10px;
}
.btn-background {
margin-top: 50px;
}
/* end btn-ground */
/* begin u-img */
.u-img {
margin-top: 100px;
}
.u-img-test {
border-radius: 10px;
}
.font-text .u-span {
color: rgb(69, 122, 220);
font-size: 30px;
margin: 0 10px;
}
.font-text h4 {
font-weight: 700;
font-size: 20px;
}
.font-text del {
color: gray;
font-size: medium
}
.span-u-text {
margin: 0 50px;
font-size: smaller;
color: rgb(88, 82, 82);
}
.a-u-text {
font-size: 14px;
font-weight: 600;
}
.color-test {
font-size: 14px;
font-weight: 500;
}
.font-text button {
border-radius: 5px;
background-color: rgb(69, 122, 220);
color: white;
width: 140px;
height: 50px;
border-color: white;
font-weight: 600;
}
.font-text .button-mark {
background-color: black;
margin: 0 20px;
}
.font-text button:hover {
background-color: white;
color: black;
border-color: black;
}
.font-text .button-mark:hover {
background-color: rgb(69, 122, 220);
border-color: rgb(69, 122, 220);
}
.item-mark {
margin-top: 15px;
font-size: 14px;
}
.item-mark .add-to {
margin: 0 10px;
font-weight: 600;
}
.car {
margin: 0 10px;
}
.day a {
font-weight: 600;
}
.return h6 {
margin-top: 15px;
font-size: 14px;
}
.return .return-test {
color: #303030;
}
/* end u-img */
/* begin guaranteed */
.guaranteed-test .img-test {
border-radius: 5px;
margin: 0 10px;
}
.share-test {
margin: 0 5px;
font-size: 14px;
font-weight: 500;
}
.Guaranteed-share i {
margin: 0 5px;
}
.Guaranteed-share .Guaranteed-blue:hover {
color: blue;
}
.Guaranteed-views {
margin-top: 60px
}
.Guaranteed-size {
text-align: center;
}
.headers {
padding: 15px 0px;
top: 0;
left: 0;
right: 0;
background: rgb(250, 250, 250);
padding: 1rem 7%;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000;
box-shadow: var(--box-shadow);
}
/* end guaranteed */
/* begin related */
.related-img .related-img-test {
border-radius: 10px;
margin-top: 50px;
}
.related-img .related-font {
margin-right: 35px;
}
.related-img .related-font:hover {
color: blue;
}
.related-img .related-coin {
color: blue;
font-weight: 500;
text-align: center;
margin-right: 40px;
}
/* end related */
/* begin recently */
.recently-img-test {
border-radius: 10px;
margin-top: 50px;
}
.recently-img .recently-coin {
color: blue;
font-weight: 500;
text-align: center;
margin-right: 40px;
}
.recently-img .recently-font {
margin-right: 35px;
}
.recently-img .recently-font:hover {
color: blue;
}
/* end recently */
/* begin buy */
.buy {
padding: 10px 0px;
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgb(250, 250, 250);
padding: 0.3rem 18%;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000;
box-shadow: var(--box-shadow);
margin-top: 585px;
}
.col-md-3 .coin-item {
margin-top: 13px;
}
.col-md-3 .price-item {
border-color: rgb(247, 238, 238);
border-width: 0ch;
border-radius: 5px;
color: #303030;
}
.col-md-3 .name {
margin-top: 15px;
}
.col-md-2 .custom {
margin-top: 13px;
}
.col-md-2 .custom-test {
border-color: rgb(247, 238, 238);
border-width: 0ch;
border-radius: 5px;
color: #303030;
}
.col-md-2 .cart {
margin-top: 11px;
margin-right: 40px;
}
.col-md-2 .cart-test {
background-color: rgb(69, 122, 220);
border-radius: 5px;
border-color: rgb(69, 122, 220);
color: white;
font-weight: 600;
height: 35px;
width: 100px;
}
.col-md-2 .cart-test:hover {
background-color: white;
border-color: black;
color: black;
}
/* end buy */
/*begin your-shopping */
.row .nickname {
margin-top: 30px;
text-align: center;
}
.your-shopping {
background-color: rgb(218, 213, 213);
height: 120px;
}
.col-md-2 .p-img {
border-radius: 20px;
height: 120px;
margin-top: 3px;
}
.shirt {
margin-top: 70px;
}
.col-md-2 .Men-Formal {
margin-top: 35px;
font-weight: 600;
text-align: center;
font-size: 15px;
}
.col-md-2 .white {
text-align: center;
}
.col-md-2 .coin-master {
text-align: center;
margin-top: 55px;
font-weight: 600;
}
.col-md-2 .soluong {
text-align: center;
margin-top: 50px;
border-radius: 5px;
border-color: white;
}
.shirt .row {
border: 1px solid rgb(204, 200, 200);
}
/* end your-shopping */
/* begin about */
.about-us {
margin-top: 50px;
}
.about-us h4 {
font-size: 20px;
}
.about-us p {
margin-top: 20px;
}
.icon-user i {
margin: 20px 15px 20px 10px;
}
.icon-user h5 {
margin-top: 20px;
}
.card-img {
margin-top: 20px;
}
.quick {
margin-top: 50px;
margin-left: 100px;
}
.quick p {
margin-top: 20px;
font-size: 14px;
}
.Information {
margin-top: 50px;
margin-left: 40px;
}
.Information p {
margin-top: 20px;
font-size: 14px;
}
.Polices {
margin-top: 50px;
margin-left: 70px;
}
.Polices p {
margin-top: 20px;
font-size: 14px;
}
.Polices p:hover {
color: rgb(116, 193, 219);
}
.about {
background-color: #dad2d2;
margin-top: 30px;
height: 490x;
}
.about hr {
margin-top: 40px;
}
.cre {
text-align: center;
}
/* end about us */
/* begin continue */
.continue {
margin-top: 40px;
}
.continue-button .button-test {
background-color: rgb(100, 166, 253);
border-radius: 5px;
border-color: rgb(100, 166, 253);
font-weight: 600;
color: white;
height: 50px;
width: 170px;
}
.continue-button .button-test:hover {
background-color: black;
border-color: black;
}
/* end continue */
/* begin special */
.specical-border h4 {
font-size: 24px;
}
textarea {
border-radius: 10px;
border-color: rgb(204, 196, 196);
}
.specical-border textarea {
width: 500px;
height: 150px;
margin-top: 20px;
}
.specical-borders h4 {
font-size: 24px;
}
.col-md-6 .subtotal {
border: 1px solid gray;
}
.cart-tests {
margin-top: 30px;
text-align: center;
}
.reset-name h4 {
font-size: 24px;
}
.proceed {
border-radius: 5px;
background-color: rgb(100, 166, 253);
border-color: rgb(100, 166, 253);
color: white;
font-weight: 500;
}
.proceed-checkout {
margin-top: 30px;
text-align: center;
}
.proceed-checkout .proceed {
width: 500px;
height: 50px;
}
.proceed-checkout .proceed:hover {
background-color: black;
border-color: black;
}
/* begin login-account */
.login-account .row {
border: 1px solid rgb(236, 234, 234);
border-radius: 10px;
width: 500px;
height: 350px;
background-color: rgb(236, 234, 234);
}
.login-account {
margin-top: 70px;
margin-left: 380px;
}
.login-new .login-font {
margin-left: 200px;
margin-top: 20px;
}
.login-new h5 {
font-size: 25px;
}
.login-new p {
margin-left: 90px;
}
.login-email {
margin-top: 20px;
}
.login-email .input-full {
border-radius: 5px;
border-color: rgb(204, 202, 202);
border-style: hidden;
width: 450px;
height: 50px;
margin-left: 10px;
}
.login-password {
margin-top: 20px;
}
.login-password .input-maximum {
border-radius: 5px;
border-color: rgb(204, 202, 202);
border-style: hidden;
width: 450px;
height: 50px;
margin-left: 10px;
}
.login-sign {
margin-top: 20px;
}
.login-sign .button-sign-in {
background-color: rgb(81, 128, 230);
border-color: rgb(81, 128, 230);
border-style: none;
border-radius: 5px;
width: 120px;
height: 50px;
margin-left: 10px;
color: white;
font-weight: 600;
}
.login-sign .sign-forgot {
margin-left: 160px;
font-weight: 400;
}
.login-sign .sign-forgot:hover {
color: rgb(87, 161, 247);
transition: 0.3s;
}
.create p {
margin-top: 15px;
margin-left: 13px;
}
.create p:hover {
color: rgb(87, 161, 247);
transition: 0.3s;
}
/* end login-account*/
/* begin contact */
.contact {
margin-top: 70px;
background-color: rgb(247, 242, 242);
height: 120px;
}
.contact .name-font {
margin-top: 30px;
text-align: center;
}
.contact-home {
margin-left: 500px;
}
.contact-color {
color: rgb(106, 166, 255);
font-weight: 500;
}
/* end contact */
/* begin office */
.row .office-email {
border: 1px solid rgb(230, 224, 224);
border-radius: 10px;
margin-top: 90px;
width: 350px;
height: 200px;
}
.office-email .office-h5 {
margin-top: 55px;
text-align: center;
}
.office-email .office-gmail {
margin-top: 20px;
text-align: center;
}
.office-email .office-gmail-two {
text-align: center;
}
/* end office */
/* begin massage */
.massage .row {
border: 1px solid rgb(218, 215, 215);
margin-top: 90px;
border-radius: 10px;
background-color: rgb(230, 224, 224);
height: 530px;
}
.massage .massage-font {
margin-top: 40px;
margin-left: 40px;
}
.massage-font h5 {
font-weight: 700;
font-size: 25px;
}
.massage-name .input-fulls {
border-radius: 5px;
border-style: none;
margin-top: 20px;
margin-left: 40px;
height: 60px;
width: 490px;
}
.massage-phone .input-full {
border-radius: 5px;
border-style: none;
margin-top: 20px;
margin-left: 40px;
height: 60px;
width: 490px;
}
.massage .massage-address {
margin-top: 98px;
}
.massage .input-max {
border-radius: 5px;
border-style: none;
height: 60px;
width: 490px;
}
.massage .input-maxim {
margin-top: 20px;
border-radius: 5px;
border-style: none;
height: 60px;
width: 490px;
}
.massage-two .input-maximums {
margin-left: 40px;
border-radius: 5px;
border-style: none;
height: 120px;
width: 1020px;
}
.massage .submit {
margin-left: 40px;
}
.submit .submit-button {
background-color: rgb(102, 147, 243);
border-color: rgb(102, 147, 243);
border-style: none;
color: white;
font-weight: 500;
border-radius: 5px;
height: 40px;
width: 100px;
}
.submit .submit-button:hover {
background-color: white;
color: black;
border-color: black;
border-style: groove;
transition: 0.3s;
}
.note-new {
margin-top: 80px;
}
/* end message */
/* begin news */
.news h3 {
font-size: 32px;
}
.news {
background-color: rgb(226, 220, 220);
height: 130px;
}
.news-colors {
font-weight: 500;
}
.news-name .news-font {
margin-top: 30px;
text-align: center;
}
.news-name .news-color {
color: rgb(124, 165, 255);
font-weight: 500;
}
.news-name .news-home {
margin-left: 505px;
}
/* end news */
/* begin search */
.search {
margin-top: 70px;
}
.search .store-name {
margin-top: 40px;
}
.store-name button {
position: absolute;
left: 335px;
color: white;
border: 1px solid;
background-color: blue;
border-color: blue;
height: 50px;
width: 50px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.store-name .input-full {
border-radius: 5px;
height: 50px;
border-color: rgb(214, 212, 212);
width: 230px;
}
.layering-img {
border-radius: 5px;
}
.layering .layering-font {
position: relative;
bottom: 66px;
left: 50px;
}
.layering .layering-font:hover {
color: rgb(112, 157, 255);
}
.layering .layering-canlendar {
position: relative;
bottom: 66px;
left: 100px;
}
.layering .layering-font-two {
position: relative;
bottom: 90px;
left: 120px;
color: rgb(112, 157, 255);
}
.layering .layering-hr {
position: relative;
bottom: 83px;
}
.glimpse-img {
border-radius: 5px;
}
.glimpse .glimpse-font {
position: relative;
bottom: 66px;
left: 50px;
}
.glimpse .glimpse-font:hover {
color: rgb(112, 157, 255);
}
.glimpse .glimpse-canlendar {
position: relative;
bottom: 66px;
left: 100px;
}
.glimpse .glimpse-font-two {
position: relative;
bottom: 90px;
left: 120px;
color: rgb(112, 157, 255);
}
.layering .glimpse {
position: relative;
bottom: 75px;
}
.Fashions-img {
border-radius: 5px;
}
.Fashions .Fashions-font {
position: relative;
bottom: 66px;
left: 50px;
}
.Fashions .Fashions-font:hover {
color: rgb(112, 157, 255);
}
.Fashions .Fashions-canlendar {
position: relative;
bottom: 66px;
left: 100px;
}
.Fashions .Fashions-font-two {
position: relative;
bottom: 90px;
left: 120px;
color: rgb(112, 157, 255);
}
.glimpse .Fashions {
position: relative;
bottom: 75px;
}
.glimpse .tags-new {
position: relative;
bottom: 70px;
}
.tags-new button {
margin-top: 30px;
border-radius: 5px;
border-style: none;
background-color: rgb(233, 225, 225);
width: 100px;
font-weight: 500;
height: 40px;
}
.tags-new button:hover {
background-color: rgb(112, 150, 253);
color: white;
font-weight: 700;
}
.glimpse .access-two {
position: relative;
width: 80px;
left: 10px;
}
.glimpse .men {
position: relative;
bottom: 20px;
}
.glimpse .men-two {
position: relative;
bottom: 20px;
width: 70px;
left: 10px;
}
.glimpse .springs {
position: relative;
bottom: 40px;
}
.glimpse .springs-two {
position: relative;
bottom: 40px;
left: 10px;
width: 70px;
}
.glimpse .wormen-two {
position: relative;
bottom: 60px;
width: 110px;
}
.layering .layering-hr-two {
position: relative;
bottom: 110px;
}
.layering .nerver {
position: relative;
bottom: 90px;
}
.layering .MXH {
position: relative;
bottom: 50px;
}
.MXH button {
border-radius: 5px;
background-color: rgb(206, 203, 203);
border-style: none;
width: 40px;
height: 40px;
}
.MXH button:hover {
background-color: rgb(109, 160, 255);
color: white;
}
.col-md-4 .funcitonal {
margin-left: 20px;
}
.funcitonal img {
border-radius: 10px;
}
.funcitonal .augus {
color: black;
}
.augus i {
margin-top: 10px;
}
.funcitonal .augus-two {
color: black;
font-weight: 400;
margin-left: 10px;
}
.funcitonal .comment {
margin-left: 25px;
color: black;
}
.funcitonal .comment-two {
color: black;
}
.funcitonal .comment-two:hover {
color: #77bdff;
}
.funcitonal .funcitonal-two {
margin-top: 20px;
}
.funcitonal .funcitonal-font:hover {
color: rgb(122, 195, 255);
}
.funcitonal .readmore {
margin-top: 20px;
}
.readmore p {
color: rgb(70, 103, 248);
font-weight: 500;
}
.funcitonal .funcitonal-three {
margin-top: 60px;
}
.funcitonal .funcitonal-four {
margin-top: 50px;
}
.col-md-4 .trends {
margin-left: 50px;
}
.trends img {
border-radius: 10px;
}
.trends .augus {
color: black;
}
.augus i {
margin-top: 10px;
}
.trends .augus-two {
color: black;
font-weight: 400;
margin-left: 10px;
}
.trends .comment {
margin-left: 25px;
color: black;
}
.trends .comment-two {
color: black;
}
.trends .comment-two:hover {
color: #77bdff;
}
.trends .trends-two {
margin-top: 20px;
}
.trends .trends-font:hover {
color: rgb(122, 195, 255);
}
.trends .readmore {
margin-top: 20px;
}
.readmore p {
color: rgb(70, 103, 248);
font-weight: 500;
}
.col-md-4 .trends-three {
margin-top: 60px;
}
.trends .trends-four {
margin-top: 50px;
}
.col-md-4 .trends-hr-two {
width: 370px;
margin-top: 50px;
}
.col-md-4 .trends-hr {
width: 410px;
margin-top: 50px;
}
.container .industry-button {
margin-top: 50px;
margin-left: 600px;
}
.industry-button button {
border-radius: 5px;
height: 50px;
width: 50px;
}
.industry-button-three button {
background-color: rgb(78, 160, 253);
border-color: rgb(78, 160, 253);
}
.industry-button-two button:hover {
background-color: rgb(78, 160, 253);
border-color: rgb(78, 160, 253);
}
/* end search */
/* begin newsletter */
.newsletter {
margin-top: 100px;
}
.newsletter .row {
background-color: rgb(212, 208, 208);
border-radius: 10px;
height: 320px;
}
.newsletter .newsletter-two {
margin-top: 50px;
}
.newsletter-two h5 {
font-size: 30px;
text-align: center;
}
.newsletter-two p {
font-size: 20px;
text-align: center;
}
.col-md-12 .subscribe {
margin-top: 40px;
}
.subscribe .input-full {
border-radius: 5px;
height: 60px;
width: 590px;
margin-left: 200px;
}
.subscribe button {
position: relative;
right: 10px;
top: 2px;
width: 140px;
height: 61px;
background-color: rgb(46, 136, 209);
border-color: rgb(46, 136, 209);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
color: white;
font-weight: 500px;
font-size: 20px;
}
.subscribe .subscribe-button-two {
margin-top: 10px;
}
.subscribe button:hover {
background-color: white;
border-color: black;
color: black;
font-size: 20px;
}
/* end newsletter */
/* begin f-img */
.f-img {
margin-top: 50px;
}
.font-gift h3 {
margin-top: 10px;
}
.font-gift .font-p {
font-size: 18px;
color: rgb(75, 71, 71);
}
.font-gift .font-people {
margin-left: 10px;
font-size: 18px;
}
.font-gift .vendor-text {
color: black;
font-size: 16px;
font-weight: bold;
}
.font-gift .span-vendor {
margin-left: 70px;
font-size: 15px;
color: rgb(83, 82, 82);
}
.font-gift .color-vandor {
font-size: 16px;
font-weight: bold;
}
.vandor-color .color-vandor-two {
margin-left: 10px;
}
.vandor-color .color-vandor-three {
margin-left: 10px;
}
.vandor-color button {
border-radius: 5px;
border-style: none;
background-color: rgb(212, 208, 208);
}
.color-vandor-two button {
background-color: rgb(94, 137, 255);
color: white;
font-weight: 600;
}
.color-vandor-three button:hover {
background-color: rgb(94, 137, 255);
color: white;
font-weight: 600;
}
.want button {
height: 20px;
width: 20px;
}
.want .want-font {
margin-left: 10px;
font-size: 18px;
}
.font-gift .want-buy {
margin-top: 20px;
}
.want-buy button {
border-radius: 5px;
border-style: none;
}
.large button {
height: 60px;
width: 40px;
border-style: solid;
border-color: rgb(212, 211, 211);
}
.button-want button {
margin-left: 5px;
height: 60px;
width: 200px;
background-color: rgb(65, 143, 231);
color: white;
font-weight: 600;
}
.button-want button:hover {
background-color: white;
color: black;
border-color: black;
border-style: solid;
}
.button-want-two button {
height: 60px;
width: 200px;
color: white;
font-weight: 400;
background-color: black;
}
.button-want-two button:hover {
background-color: rgb(65, 143, 231);
color: white;
font-weight: 400;
}
.guranteed-img .img-vandor {
margin-top: 20px;
}
.guranteed-img hr {
margin-top: 20px;
}
/* end f-img */
/* begin should */
.should {
margin-top: 60px;
}
.should .should-faqs {
border: 1px solid rgb(201, 200, 200);
border-radius: 10px;
}
.should-faqs a {
margin-left: 20px;
font-weight: bold;
font-size: 18px;
}
.should-faqs .should-home {
margin-top: 20px;
}
.should-faqs button {
border-radius: 5px;
height: 40px;
width: 40px;
background-color: rgb(196, 195, 195);
color: rgb(82, 151, 255);
border-style: none;
}
.should .make-faqs {
border: 1px solid rgb(201, 200, 200);
border-radius: 10px;
height: 65px;
}
.make-faqs .make-home {
margin-top: 13px;
}
.make-faqs a {
margin-left: 20px;
font-weight: bold;
font-size: 18px;
}
.make-faqs button {
border-radius: 5px;
height: 40px;
width: 40px;
background-color: rgb(196, 195, 195);
border-style: none;
}
.should-faqs .should-button {
margin-left: 840px;
}
.should-faqs p {
font-size: 16px;
margin-top: 20px;
margin-left: 20px;
}
.make-faqs .make-button {
margin-left: 670px;
}
.make-faqs .make-button-two {
margin-left: 730px;
}
.make-faqs .make-button-three {
margin-left: 835px;
}
.make-faqs .make-button-four {
margin-left: 665px;
}
/* end should */
/* begin summer */
.summer {
margin-top: 120px;
}
.summer .row {
border: 1px solid rgb(206, 205, 205);
background-color: rgb(206, 205, 205);
border-radius: 10px;
height: 310px;
}
.summer .summer-styles {
margin-left: 20px;
}
.summer-styles span {
margin-top: 20px;
}
.summer-styles .summer-font {
margin-top: 80px;
}
.summer-styles .home-font {
font-size: 16px;
font-weight: bold;
}
.summer-styles .home-font:hover {
color: rgb(82, 155, 252);
font-weight: 600;
}
.summer-styles .arrow-font {
margin-left: 10px;
}
.summer-styles .styles-font {
color: rgb(82, 155, 252);
font-size: 16px;
font-weight: 600;
margin-left: 10px;
}
.summer-styles .summer-p {
margin-top: 20px;
font-size: 18px;
}
.col-md-9 .summer-img {
position: relative;
bottom: 210px;
left: 840px;
}
.summer-img img {
border-radius: 7px;
}
/* end summer */
/* begin footwear */
.footwear .footwear-title {
margin-top: 50px;
}
.footwear-title .footwear-font {
font-weight: bold;
}
.footwear .body-item {
margin-top: 20px;
}
.body-item .footwear-body-two {
color: rgb(204, 202, 202);
}
.body-item .body-hr {
margin-top: 40px;
}
.availa-title .availa-font {
margin-top: 30px;
font-weight: bold;
}
.footwear .craft-button {
margin-top: 20px;
}
.craft-button button {
height: 20px;
width: 20px;
border-color: rgb(252, 248, 248);
background-color: white;
border-style: groove;
}
.craft-button .button-font {
margin-left: 10px;
}
.craft-button .button-color {
color: rgb(204, 202, 202);
}
.footwear .color-title {
margin-top: 30px;
}
.color-title .color-font {
font-weight: bold;
}
.footwear .Size {
margin-top: 30px;
}
.Size .Size-font {
font-weight: bold;
}
.body-items .body-hrs {
margin-top: 20px;
}
.footwear .window {
margin-top: 50px;
}
.window span {
font-size: 30px;
}
.window .window-font-two{
margin-left: 10px;
}
.window .window-font-two:hover{
color: blue;
}
.footwear .window-img {
margin-top: 40px;
}
/* */
.window-img img {
border-radius: 10px;
}
.window-img h6 {
font-weight: 600;
font-size: 16px;
margin-right: 15px;
}
.window-img h6:hover{
color: rgb(88, 117, 250);
font-weight: 600;
}
.window-img p{
margin-left: 80px;
}
/* */
.footwear .best-button{
margin-top: 50px;
border: 1px groove rgb(219, 218, 218);
border-radius: 5px;
width: 170px;
height: 40px;
}
.best-button .button-selling{
position: relative;
top: 7px;
left: 10px;
}
.best-button .fa-solid{
position: relative;
top: 7px;
left: 60px;
}
.best-img img {
border-radius: 10px;
}
.best-img h6 {
font-weight: 600;
font-size: 16px;
margin-right: 30px;
}
.best-img h6:hover{
color: rgb(88, 117, 250);
font-weight: 600;
}
.best-img p{
margin-left: 80px;
}
.footwear .best-img{
margin-top: 45px;
}
.footwear .best-image{
margin-top: 40px;
}
.best-image img{
border-radius: 5px;
}
.best-image h6{
margin-right: 40px;
}
.best-image h6:hover{
color: rgb(88, 117, 250);
font-weight: 600;
}
.best-image p{
margin-left: 80px;
}
.footwear .best-image-two{
margin-top: 24px;
}
.best-image-two img{
border-radius: 5px;
}
.best-image-two p{
margin-left: 80px;
}
.best-image-two h6{
margin-right: 30px;
}
.best-image-two h6:hover{
color: rgb(88, 117, 250);
}
/* */
.footwear .best-image-three{
margin-top: 37px;
}
.best-image-three img{
border-radius: 5px;
}
.best-image-three p{
margin-left: 80px;
}
.best-image-three h6{
margin-right: 30px;
}
.best-image-three h6:hover{
color: rgb(88, 117, 250);
}
/* */
.footwear .best-image-four{
margin-top: 40px;
}
.best-image-four img{
border-radius: 5px;
}
.best-image-four p{
margin-left: 80px;
}
.best-image-four h6{
margin-right: 30px;
}
.best-image-four h6:hover{
color: rgb(88, 117, 250);
}
/* */
.footwear .showing{
margin-top: 55px;
}
.showing h5{
margin-left: 46px;
font-size: 18px;
color: rgb(97, 96, 96);
}
.footwear .showing-img{
margin-top: 60px;
}
.showing-img img{
border-radius: 5px;
}
.showing-img p{
margin-left: 80px;
}
.showing-img h6{
margin-right: 30px;
}
.showing-img h6:hover{
color: rgb(88, 117, 250);
}
/* */
.footwear .showing-img-two{
margin-top: 40px;
}
.showing-img-two img{
border-radius: 5px;
}
.showing-img-two p{
margin-left: 80px;
}
.showing-img-two h6{
margin-right: 30px;
}
.showing-img-two h6:hover{
color: rgb(88, 117, 250);
}
/* */
.footwear .gg{
margin-top: 50px;
}
.gg hr{
margin-left: 20px;
}
.footwear .gg{
position: relative;
left: 260px;
bottom: 68px;
}
.gg hr{
width: 810px;
}
.footwear .industry-button{
position: relative;
bottom: 50px;
}
/* end footwear */
/* begin final */
.final-btn .img-final{
margin-top: 40px;
}
.img-final img{
border-radius: 5px;
margin: 0 5px;
}
.final-btn .img-test{
position: relative;
left: 30px;
}
/* end final */
Github: https://github.com/ChauVietQuyetThanh/Minimalin
Github Page: https://chauvietquyetthanh.github.io/Minimalin/
Author: Châu Viết Quyết Thành