Notification Settings Panel - Copy this Html, Bootstrap Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Detail</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <link rel="stylesheet" href="styler/navigation.css"> <link rel="stylesheet" href="styler/global.css"> <link rel="stylesheet" href="styler/detailShoes.css"> </head> <body> <header> <nav></nav> <div class="under-navigation"> <div class="container content-detail mt-5"> <div class="row"> <div class="col-12 col-md-5 d-flex justify-content-center align-items-center img-detail "> <img src="assets/shoeMens/1.png" alt="Image" class="img-fluid"> </div> <div class="col-12 col-md-5 d-flex justify-content-center align-items-center position-relative"> <div class="info mt-5 ms-3"> <div class="text-xl-start mb-3"> <h1 class="fw-bold">Giày cổ cao Fashionista</h1> </div> <div class="text-xl-start d-inline-flex align-items-center mb-3"> <i class="fa-solid fa-star me-1"></i> <i class="fa-solid fa-star me-1"></i> <i class="fa-solid fa-star me-1"></i> <i class="fa-solid fa-star me-1"></i> <i class="fa-solid fa-star me-1"></i> <a>(5.0)</a> </div> <div class="text-xl-start mb-5 "> <h3 class="fw-bold">599.000đ</h3> </div> <div class="text-xl-start mb-3"> <h3 class="fw-bold">Màu sắc</h3> </div> <div class="row mb-5"> <div class="col-auto"> <div class="bg-warning mx-auto rounded-pill me-2 color-box p-3 "></div> </div> <div class="col-auto"> <div class="bg-dark mx-auto rounded-pill me-2 color-box p-3"></div> </div> <div class="col-auto"> <div class="bg-primary mx-auto rounded-pill color-box p-3"></div> </div> </div> <div class="text-xl-start mb-3"> <h3 class="fw-bold"> Kích cỡ</h3> </div> <div class="row mb-3"> <div class="col-auto"> <button class="mx-auto d-flex justify-content-center align-items-center rounded-pill me-2 color-box" > <a class="fw-bold">Size 39</a> </button> </div> <div class="col-auto"> <button class=" mx-auto d-flex justify-content-center align-items-center rounded-pill me-2 color-box"> <a class="fw-bold">Size 40</a> </button> </div> <div class="col-auto"> <button class="mx-auto d-flex justify-content-center align-items-center rounded-pill color-box"> <a class="fw-bold">Size 41</a> </button> </div> <div class="col-auto"> <button class="mx-auto d-flex justify-content-center align-items-center rounded-pill me-2 color-box" > <a class="fw-bold" >Size 42</a> </button> </div> </div> <div class="row mb-5"> <!-- Nút tăng giảm số lượng --> <div class="col-auto"> <button class="mx-auto d-flex justify-content-between align-items-center rounded-pill me-2 color-box" style="width: 100px;"> <i class="fas fa-minus"></i> <span class="fw-bold">1</span> <i class="fas fa-plus"></i> </button> </div> <!-- Nút đặt hàng --> <div class="col-auto"> <button class="mx-auto d-flex justify-content-center align-items-center rounded-pill order-button color-box" style="width: 250px;"> <i class="fa-solid fa-cart-shopping mx-2"></i> <span class="fw-bold">Thêm vào giỏ hàng</span> </button> </div> </div> <div class="row mb-5"> <div class="col-6 mb-2 d-flex align-items-center"> <i class="fa-solid fa-rotate me-2 icon-bordered"></i> <a>60 ngày đổi trả vì bất kỳ lý do gì</a> </div> <div class="col-6 mb-2 d-flex align-items-center"> <i class="fa-solid fa-medal me-2 icon-bordered"></i> <a>Cam kết đúng chất liệu, màu sắc</a> </div> <div class="col-6 mb-2 d-flex align-items-center mt-3"> <i class="fa-solid fa-phone me-2 icon-bordered"></i> <a >Hotline 113 hỗ trợ từ 8h30 - 22h mỗi ngày </a> </div> <div class="col-6 mb-2 d-flex align-items-center mt-3"> <i class="fa-solid fa-street-view me-2 icon-bordered"></i> <a>Đến tận nơi nhận hàng trả, hoàn tiền trong 24h</a> </div> </div> <div class="outstanding-features"> <hr class="line"> <h4 class="fw-bold"> Đặc điểm nổi bật. </h4> <p>+ Chất vải da chắc chắn.</p> <p>+ Fashionsta cho giới trẻ.</p> <p>+ Màu sắc đa dạng.</p> <p>+ Nhẹ và thoáng khí, thoải mái khi <mang class=""></mang></p> <p>+ Độ bền và khả năng chịu lực cao.</p> </div> </div> </div> </div> </div> </div> </header> <footer> </footer> </body> <script src="component/navigation.js"></script> <script src="component/footer.js"></script> </html>