Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <title>Mẫu W3.CSS</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, first- scale=1"> <link rel="stylesheet" href="https://www.example.com.vn/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts. googleapis.com/css?family=Roboto"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat"> <link rel="stylesheet" href="https: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .w3-sidebar a {font-family: "Roboto", sans- serif} body,h1,h2,h3,h4,h5,h6,.w3-wide {font-family: "Montserrat", sans-serif;} </style> </head> <body class="w3-content " style="max-width:1200px"> <!-- Thanh bên/menu --> <nav class="w3-sidebar w3-bar-block w3-white w3-collapse w3-top" style="z-index :3;width:250px" id="mySidebar"> <div class="w3-container w3-display-container w3-padding-16"> <i onclick="w3_close()" class="fa fa-remove w3 -hide-large w3-button w3-display-topright"></i> <h3 class="w3-wide"><b>LOGO</b></h3> </div> <div class="w3 -padding-64 w3-large w3-text-grey" style="font-weight:bold"> <a href="#" class="w3-bar-item w3-button">Áo sơ mi</a> <a href="#" class="w3-bar-item w3-button">Váy</a> <a onclick="myAccFunc()" href="javascript:void(0)" class="w3-button w3- khối w3-white w3-left-align" id="myBtn"> Quần jean <i class="fa fa-caret-down"></i> </a> <div id="demoAcc" class="w3- bar-block w3-hide w3-padding-large w3-medium"> <a href="#" class="w3-bar-item w3-button w3-light-grey"><i class="fa fa-caret -right w3-margin-right"></i>Gầy</a> <a href="#" class="w3-bar-item w3-button">Thư giãn</a> <a href="#" class="w3-bar-item w3-button">Bootcut</a> <a href="#" class="w3-bar-item w3-button">Thẳng</a> </div> <a href ="#" class="w3-bar-item w3-button">Áo khoác</a> <a href="#" class="w3-bar-item w3-button">Quần áo tập thể dục</a> <a href ="#" class="w3-bar-item w3-button">Áo blazer</a> <a href="#" class="w3-bar-item w3-button">Giày</a> </div > <a href="#footer" class="w3-bar-item w3-button w3-padding">Liên hệ</a> <a href="javascript:void(0)" class="w3-bar-item w3-button w3-padding" onclick="document.getElementById('newsletter').style.display='block'">Bản tin</a> <a href="#footer" class="w3-bar-item w3 -button w3-padding">Đăng ký</a> </nav> <!-- Menu trên cùng trên màn hình nhỏ --> <header class="w3-bar w3-top w3-hide-large w3-black w3-xlarge "> <div class="w3-bar-item w3-padding-24 w3-wide">LOGO</div> <a href="javascript:void(0)" class="w3-bar-item w3-button w3-padding-24 w3-right" onclick="w3_open()"><i class="fa fa-bars"></i></a> </header> <!-- Hiệu ứng lớp phủ khi mở thanh bên trên màn hình nhỏ --> <div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="đóng menu bên" id="myOverlay"></div> <!-- !NỘI DUNG TRANG! --> <div class="w3-main" style="margin-left:250px"> <!-- Đẩy nội dung xuống trên màn hình nhỏ --> <div class="w3-hide-large" style="margin -top:83px"></div> <!-- Tiêu đề trên cùng --> <header class="w3-container w3-xlarge"> <p class="w3-left">Quần jeans</p> <p class ="w3-right"> <i class="fa fa-shopping-cart w3-margin-right"></i> <i class="fa fa-search"></i> </p> </ header> <!-- Tiêu đề hình ảnh --> <div class="w3-display-container w3-container"> <img src="/w3images/jeans.jpg" alt="Jeans" style="width:100% "> <div class="w3-display-topleft w3-text-white" style="padding:24px 48px"> <h1 class="w3-jumbo w3-hide-small">Hàng mới về</h1> <h1 class="w3-hide-large w3-hide-medium">Hàng mới về</h1> <h1 class="w3-hide-small">BỘ SƯU TẬP 2016</h1> <p><a href="#jeans" class="w3-button w3-black w3-padding-large w3-large">Mua sắm ngay</a></p> </div> </div> <div class="w3-container w3-text-grey " id="jeans"> <p>8 mục</p> </div> <!-- Lưới sản phẩm --> <div class="w3-row w3-grayscale"> <div class="w3-col l3 s6"> <div class="w3-container"> <img src="/w3images/jeans1.jpg" style="width:100%"> <p>Quần jeans rách<br><b>$24,99</ b></p> </div> <div class="w3-container"> <img src="/w3images/jeans2.jpg" style="width:100%"> <p>Quần jean rách Mega<br> <b>$19,99</b></p> </div> </div> <div class="w3-col l3 s6"> <div class="w3-container"> <div class="w3-display -container"> <img src="/w3images/jeans2.jpg" style="width:100%"> <span class="w3-tag w3-display-topleft">Mới</span> <div class=" w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Mua ngay <i class="fa fa-shopping-cart"></i></button> </ div> </div> <p>Quần jean rách Mega<br><b>$19,99</b></p> </div> <div class="w3-container"> <img src="/w3images/jeans3 .jpg" style="width:100%"> <p>Quần jean skinny đã giặt<br><b>$20,50</b></p> </div> </div> <div class="w3-col l3 s6"> <div class="w3-container"> <img src="/w3images/jeans3.jpg" style="width:100%"> <p>Quần jean skinny đã giặt<br><b>$20,50</b ></p> </div> <div class="w3-container"> <div class="w3-display-container"> <img src="/w3images/jeans4.jpg" style="width:100% "> <span class="w3-tag w3-display-topleft">Bán</span> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black ">Mua ngay <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Quần jean skinny cổ điển<br><b class="w3-text -red">$14,99</b></p> </div> </div> <div class="w3-col l3 s6"> <div class="w3-container"> <img src="/w3images /jeans4.jpg" style="width:100%"> <p>Quần jean skinny cổ điển<br><b>$14,99</b></p> </div> <div class="w3-container"> < img src="/w3images/jeans1.jpg" style="width:100%"> <p>Quần jean skinny rách<br><b>$24,99</b></p> </div> </div> < /div> <!-- Phần đăng ký --> <div class="w3-container w3-black w3-padding-32"> <h1>Đăng ký</h1> <p>Để nhận ưu đãi đặc biệt và đãi ngộ VIP:< /p> <p><input class="w3-input w3-border" type="text" placeholder="Nhập e-mail" style="width:100%"></p> <button type="button " class="w3-button w3-red w3-margin-bottom">Đăng ký</button> </div> <!-- Footer --> <footer class="w3-padding-64 w3-light-grey w3 -small w3-center" id="footer"> <div class="w3-row-padding"> <div class="w3-col s4"> <h4>Liên hệ</h4> <p>Bạn có câu hỏi? Hãy tiếp tục.</p> <form action="/action_page.php" target="_blank"> <p><input class="w3-input w3-border" type="text" placeholder="Name" name= "Tên" bắt buộc></p> <p><input class="w3-input w3-border" type="text" placeholder="Email" name="Email" bắt buộc></p> <p><input class="w3-input w3-border" type="text" placeholder="Chủ đề" name="Chủ đề" bắt buộc></p> <p><input class="w3-input w3-border" type="text " placeholder="Message" name="Message" bắt buộc></p> <button type="submit" class="w3-button w3-block w3-black">Gửi</button> </form> </div > <div class="w3-col s4"> <h4>Giới thiệu</h4> <p><a href="#">Giới thiệu về chúng tôi</a></p> <p><a href="# ">Chúng tôi đang tuyển dụng</a></p> <p><a href="#">Hỗ trợ</a></p> <p><a href="#">Tìm cửa hàng</a ></p> <p><a href="#">Lô hàng</a></p> <p><a href="#">Thanh toán</a></p> <p><a href="#">Thẻ quà tặng</a></p> <p><a href="#">Trả lại</a></p> <p><a href="#">Trợ giúp</ a></p> </div> <div class="w3-col s4 w3-justify"> <h4>Lưu trữ</h4> <p><i class="fa fa-fw fa-map-marker" ></i> Tên công ty</p> <p><i class="fa fa-fw fa-phone"></i> 0044123123</p> <p><i class="fa fa-fw fa -envelope"></i> ex@mail.com</p> <h4>Chúng tôi chấp nhận</h4> <p><i class="fa fa-fw fa-cc-amex"></i> Amex </p> <p><i class="fa fa-fw fa-credit-card"></i> Thẻ tín dụng</p> <br> <i class="fa fa-facebook-official w3-hover -opacity w3-large"></i> <i class="fa fa-instagram w3-hover-opacity w3-large"></i> <i class="fa fa-snapchat w3-hover-opacity w3- lớn"></i> <i class="fa fa-pinterest-p w3-hover-opacity w3-large"></i> <i class="fa fa-twitter w3-hover-opacity w3-large" ></i> <i class="fa fa-linkedin w3-hover-opacity w3-large"></i> </div> </div> </footer> <div class="w3-black w3- center w3-padding-24">Được cung cấp bởi <a href="https://www.example.com.vn/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover- opacity">w3.css</a></div> <!-- Nội dung trang cuối --> </div> <!-- Bản tin Phương thức --> <div id="newsletter" class="w3-modal "> <div class="w3-modal-content w3-animate-zoom" style="padding:32px"> <div class="w3-container w3-white w3-center"> <i onclick="document.getElementById ('bản tin').style.display='none'" class="fa fa-remove w3-right w3-button w3-transparent w3-xxlarge"></i> <h2 class="w3-wide">BẢN TIN </h2> <p>Tham gia danh sách gửi thư của chúng tôi để nhận thông tin cập nhật về hàng mới và ưu đãi đặc biệt.</p> <p><input class="w3-input w3-border" type="text" placeholder="Enter e -mail"></p> <button type="button" class="w3-button w3-padding-large w3-red w3-margin-bottom" onclick="document.getElementById('newsletter').style.display ='none'">Đăng ký</button> </div> </div> </div> <script> // Hàm Accordion myAccFunc() { var x = document.getElementById("demoAcc"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } // Nhấp vào liên kết "Quần jean" khi tải trang để mở đàn accordion cho mục đích demo document.getElementById("myBtn").click(); // Mở và đóng chức năng thanh bên w3_open() { document.getElementById("mySidebar").style.display = "block"; document.getElementById("myOverlay").style.display = "block"; } hàm w3_close() { document.getElementById("mySidebar").style.display = "none"; document.getElementById("myOverlay").style.display = "none"; } </script> </body> </html>