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 lang="vi"> <head> <title>Mẫu W3.CSS</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device -width,initial-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=Lato"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/ font-awesome.min.css"> <style> body {font-family: "Lato", sans-serif} .mySlides {display: none} </style> </head> <body> <!-- Thanh điều hướng - -> <div class="w3-top"> <div class="w3-bar w3-black w3-card"> <a class="w3-bar-item w3-button w3-padding-large w3-hide- trung bình w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="Chuyển đổi menu điều hướng"><i class="fa fa-bars"></i> </a> <a href="#" class="w3-bar-item w3-button w3-padding-large">TRANG CHỦ</a> <a href="#band" class="w3-bar-item w3-button w3-padding-large w3-hide-small">BAN NHẠC</a> <a href="#tour" class="w3-bar-item w3-button w3-padding-large w3-hide-small" >TOUR</a> <a href="#contact" class="w3-bar-item w3-button w3-padding-large w3-hide-small">LIÊN HỆ</a> <div class="w3-dropdown -hover w3-hide-small"> <button class="w3-padding-large w3-button" title="More">THÊM <i class="fa fa-caret-down"></i></button > <div class="w3-dropdown-content w3-bar-block w3-card-4"> <a href="#" class="w3-bar-item w3-button">Hàng hóa</a> <a href="#" class="w3-bar-item w3-button">Tiện ích bổ sung</a> <a href="#" class="w3-bar-item w3-button">Phương tiện</a> </ div> </div> <a href="javascript:void(0)" class="w3-padding-large w3-hover-red w3-hide-small w3-right"><i class="fa fa-search "></i></a> </div> </div> <!-- Thanh điều hướng trên màn hình nhỏ (bỏ thuộc tính onclick nếu bạn muốn thanh điều hướng luôn hiển thị trên đầu nội dung khi nhấp vào liên kết) --> <div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px"> <a href="#band" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">BAN</a> <a href="#tour" class="w3-bar -item w3-button w3-padding-large" onclick="myFunction()">TOUR</a> <a href="#contact" class="w3-bar-item w3-button w3-padding-large" onclick ="myFunction()">LIÊN HỆ</a> <a href="#" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">Hàng hóa</a> < /div> <!-- Nội dung trang --> <div class="w3-content" style="max-width:2000px;margin-top:46px"> <!-- Hình ảnh trình chiếu tự động --> <div class ="mySlides w3-display-container w3-center"> <img src="/w3images/la.jpg" style="width:100%"> <div class="w3-display-bottommiddle w3-container w3-text -white w3-padding-32 w3-hide-small"> <h3>Los Angeles</h3> <p><b>Chúng tôi đã có khoảng thời gian vui chơi tuyệt vời nhất ở Bãi biển Venice!</b></p> </div > </div> <div class="mySlides w3-display-container w3-center"> <img src="/w3images/ny.jpg" style="width:100%"> <div class="w3-display -bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small"> <h3>New York</h3> <p><b>Bầu không khí ở New York thật là lorem ipsum.</b> </p> </div> </div> <div class="mySlides w3-display-container w3-center"> <img src="/w3images/chicago.jpg" style="width:100%"> < div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small"> <h3>Chicago</h3> <p><b>Cảm ơn bạn, Chicago - Một đêm chúng tôi sẽ không quên.</b></p> </div> </div> <!-- Phần ban nhạc --> <div class="w3-container w3-content w3-center w3-padding- 64" style="max-width:800px" id="band"> <h2 class="w3-wide">BAN NHẠC</h2> <p class="w3-opacity"><i>Chúng tôi yêu âm nhạc< /i></p> <p class="w3-justify">Chúng tôi đã tạo một trang web về ban nhạc hư cấu. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với một mục tiêu tối thiểu là có thể làm được, điều này sẽ không xảy ra khi bạn phải làm việc quá sức để có được một giải pháp sau mỗi giao dịch. Bạn aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ngoại trừ sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Ut enim ad minm veniam, quis nostrud gắng sức ullamco labis nisi ut aliquip ex ea commodo consequat.</p> <div class="w3-row w3-padding-32"> <div class="w3-third"> <p >Tên</p> <img src="/w3images/bandmember.jpg" class="w3-round w3-margin-bottom" alt="Tên ngẫu nhiên" style="width:60%"> </div> < div class="w3-third"> <p>Tên</p> <img src="/w3images/bandmember.jpg" class="w3-round w3-margin-bottom" alt="Tên ngẫu nhiên" style=" width:60%"> </div> <div class="w3-third"> <p>Tên</p> <img src="/w3images/bandmember.jpg" class="w3-round" alt=" Tên ngẫu nhiên" style="width:60%"> </div> </div> </div> <!-- Phần tham quan --> <div class="w3-black" id="tour"> < div class="w3-container w3-content w3-padding-64" style="max-width:800px"> <h2 class="w3-wide w3-center">NGÀY DU LỊCH</h2> <p class=" w3-opacity w3-center"><i>Hãy nhớ đặt vé nhé!</i></p><br> <ul class="w3-ul w3-border w3-white w3-text-grey"> < li class="w3-padding">Tháng 9 <span class="w3-tag w3-red w3-margin-left">Hết vé</span></li> <li class="w3-padding">Tháng 10 < span class="w3-tag w3-red w3-margin-left">Hết hàng</span></li> <li class="w3-padding">Tháng 11 <span class="w3-badge w3-right w3 -margin-right">3</span></li> </ul> <div class="w3-row-padding w3-padding-32" style="margin:0 -16px"> <div class=" w3-third w3-margin-bottom"> <img src="/w3images/newyork.jpg" alt="New York" style="width:100%" class="w3-hover-opacity"> <div class= "w3-container w3-white"> <p><b>New York</b></p> <p class="w3-opacity">Thứ Sáu ngày 27 tháng 11 năm 2016</p> <p>Praesent tincidunt sed Tellus ut rutrum sed vitae justo.</p> <button class="w3-button w3-black w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">Mua vé </button> </div> </div> <div class="w3-third w3-margin-bottom"> <img src="/w3images/paris.jpg" alt="Paris" style="width:100 %" class="w3-hover-opacity"> <div class="w3-container w3-white"> <p><b>Paris</b></p> <p class="w3-opacity"> Thứ bảy, 28 tháng 11 năm 2016</p> <p>Praesent tincidunt sed Tellus ut rutrum sed vitae justo.</p> <button class="w3-button w3-black w3-margin-bottom" onclick="document.getElementById(' ticketModal').style.display='block'">Mua vé</button> </div> </div> <div class="w3-third w3-margin-bottom"> <img src="/w3images/ sanfran.jpg" alt="San Francisco" style="width:100%" class="w3-hover-opacity"> <div class="w3-container w3-white"> <p><b>San Francisco< /b></p> <p class="w3-opacity">Chủ nhật ngày 29 tháng 11 năm 2016</p> <p>Praesent tincidunt sed Tellus ut rutrum sed vitae justo.</p> <button class="w3-button w3-black w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">Mua vé</button> </div> </div> </div> </ div> </div> <!-- Phương thức vé --> <div id="ticketModal" class="w3-modal"> <div class="w3-modal-content w3-animate-top w3-card-4 "> <header class="w3-container w3-teal w3-center w3-padding-32"> <span onclick="document.getElementById('ticketModal').style.display='none'" class="w3- nút w3-teal w3-xlarge w3-display-topright">×</span> <h2 class="w3-wide"><i class="fa fa-vali w3-margin-right"></i>Vé </h2> </header> <div class="w3-container"> <p><label><i class="fa fa-shopping-cart"></i> Vé, $15 mỗi người</label> </p> <input class="w3-input w3-border" type="text" placeholder="Bao nhiêu?"> <p><label><i class="fa fa-user"></i> Gửi tới</label></p> <input class="w3-input w3-border" type="text" placeholder="Enter email"> <button class="w3-button w3-block w3-teal w3- đệm-16 w3-section w3-right">TRẢ TIỀN <i class="fa fa-check"></i></button> <button class="w3-button w3-red w3-section" onclick="document .getElementById('ticketModal').style.display='none'">Đóng <i class="fa fa-remove"></i></button> <p class="w3-right">Cần <a href="#" class="w3-text-blue">giúp đỡ?</a></p> </div> </div> </div> <!-- Phần Liên hệ --> <div class ="w3-container w3-content w3-padding-64" style="max-width:800px" id="contact"> <h2 class="w3-wide w3-center">LIÊN HỆ</h2> <p class ="w3-opacity w3-center"><i>Quạt? Hãy để lại một ghi chú!</i></p> <div class="w3-row w3-padding-32"> <div class="w3-col m6 w3-large w3-margin-bottom"> <i class= "fa fa-map-marker" style="width:30px"></i> Chicago, Hoa Kỳ<br> <i class="fa fa-phone" style="width:30px"></i> Điện thoại: +00 151515<br> <i class="fa fa-envelope" style="width:30px"> </i> Email: mail@mail.com<br> </div> <div class="w3-col m6"> <form action="/action_page.php" target="_blank"> <div class="w3-row-padding" style="margin:0 -16px 8px -16px"> <div class="w3- Half"> <input class="w3-input w3-border" type="text" placeholder="Name" bắt buộc name="Name"> </div> <div class="w3-half"> <input class= "w3-input w3-border" type="text" placeholder="Email" bắt buộc name="Email"> </div> </div> <input class="w3-input w3-border" type="text" placeholder="Message" bắt buộc name="Message"> <button class="w3-button w3-black w3-section w3-right" type="submit">GỬI</button> </form> </div> < /div> </div> <!-- Nội dung trang cuối --> </div> <!-- Hình ảnh vị trí/bản đồ --> <img src="/w3images/map.jpg" class="w3- hình ảnh w3-greyscale-min" style="width:100%"> <!-- Footer --> <footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3- xlarge"> <i class="fa fa-facebook-official w3-hover-opacity"></i> <i class="fa fa-instagram w3-hover-opacity"></i> <i class=" fa fa-snapchat w3-hover-opacity"></i> <i class="fa fa-pinterest-p w3-hover-opacity"></i> <i class="fa fa-twitter w3-hover- opacity"></i> <i class="fa fa-linkedin w3-hover-opacity"></i> <p class="w3-medium">Được cung cấp bởi <a href="https://www. example.com.vn/w3css/default.asp" target="_blank">w3.css</a></p> </footer> <script> // Trình chiếu tự động - thay đổi hình ảnh cứ sau 4 giây var myIndex = 0; băng chuyền(); hàm băng chuyền() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "chặn"; setTimeout(băng chuyền, 4000); } // Được sử dụng để chuyển đổi menu trên màn hình nhỏ khi nhấp vào nút menu function myFunction() { var x = document.getElementById("navDemo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } // Khi người dùng nhấp vào bất kỳ đâu bên ngoài phương thức, hãy đóng nó var modal = document.getElementById('ticketModal'); window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> </body> </html>