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=Raleway"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min .css"> <style> body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", Arial, Helvetica, sans-serif} </style> </head> <body class=" w3-light-grey"> <!-- Thanh điều hướng --> <div class="w3-bar w3-white w3-large"> <a href="#" class="w3-bar-item w3-button w3-red w3-mobile"><i class="fa fa-bed w3-margin-right"></i>Logo</a> <a href="#rooms" class="w3-bar-item w3 -button w3-mobile">Phòng</a> <a href="#about" class="w3-bar-item w3-button w3-mobile">Giới thiệu về</a> <a href="#contact" lớp ="w3-bar-item w3-button w3-mobile">Liên hệ</a> <a href="#contact" class="w3-bar-item w3-button w3-right w3-light-grey w3-mobile ">Đặt ngay</a> </div> <!-- Header --> <header class="w3-display-container w3-content" style="max-width:1500px;"> <img class=" w3-image" src="/w3images/hotel.jpg" alt="Khách sạn" style="min-width:1000px" width="1500" Height="800"> <div class="w3-display-left w3-padding w3-col l6 m8"> <div class="w3-container w3-red"> <h2><i class="fa fa-bed w3-margin-right"></i>Tên khách sạn</ h2> </div> <div class="w3-container w3-white w3-padding-16"> <form action="/action_page.php" target="_blank"> <div class="w3-row-padding " style="margin:0 -16px;"> <div class="w3-half w3-margin-bottom"> <label><i class="fa fa-calendar-o"></i> Đăng ký< /label> <input class="w3-input w3-border" type="text" placeholder="DD MM YYYY" name="CheckIn" bắt buộc> </div> <div class="w3-half"> <label ><i class="fa fa-calendar-o"></i> Kiểm tra</label> <input class="w3-input w3-border" type="text" placeholder="DD MM YYYY" name= Yêu cầu "Kiểm tra"> </div> </div> <div class="w3-row-padding" style="margin:8px -16px;"> <div class="w3-half w3-margin-bottom"> <label><i class="fa fa-male"></i> Người lớn</label> <input class="w3-input w3-border" type="number" value="1" name="Adults" min="1" max="6"> </div> <div class="w3-half"> <label><i class="fa fa-child"></i> Trẻ em</label> <input class="w3-input w3-border" type="number" value="0" name="Kids" min="0" max="6"> </div> </div> <button class="w3 -button w3-dark-grey" type="submit"><i class="fa fa-search w3-margin-right"></i> Tính khả dụng của tìm kiếm</button> </form> </div> </ div> </header> <!-- Nội dung trang --> <div class="w3-content" style="max-width:1532px;"> <div class="w3-container w3-margin-top" id ="rooms"> <h3>Phòng</h3> <p>Hãy thoải mái như ở nhà là khẩu hiệu của chúng tôi. Chúng tôi cung cấp những chiếc giường tốt nhất trong ngành. Ngủ ngon và nghỉ ngơi tốt nhé.</p> </div> <div class="w3-row-padding"> <div class="w3-col m3"> <label><i class="fa fa-calendar- o"></i> Đăng ký</label> <input class="w3-input w3-border" type="text" placeholder="DD MM YYYY"> </div> <div class="w3-col m3"> <label><i class="fa fa-calendar-o"></i> Kiểm tra</label> <input class="w3-input w3-border" type="text" placeholder="DD MM YYYY"> </div> <div class="w3-col m2"> <label><i class="fa fa-male"></i> Người lớn</label> <input class="w3-input w3-border" type="number" placeholder="1"> </div> <div class="w3-col m2"> <label><i class="fa fa-child"></i> Trẻ em< /label> <input class="w3-input w3-border" type="number" placeholder="0"> </div> <div class="w3-col m2"> <label><i class="fa fa-search"></i> Tìm kiếm</label> <button class="w3-button w3-block w3-black">Tìm kiếm</button> </div> </div> <div class="w3- row-padding w3-padding-16"> <div class="w3-third w3-margin-bottom"> <img src="/w3images/room_single.jpg" alt="Na Uy" style="width:100%" > <div class="w3-container w3-white"> <h3>Phòng đơn</h3> <h6 class="w3-opacity">Từ $99</h6> <p>Giường đơn</p> <p >15m<sup>2</sup></p> <p class="w3-large"><i class="fa fa-bath"></i> <i class="fa fa-phone"> </i> <i class="fa fa-wifi"></i></p> <button class="w3-button w3-block w3-black w3-margin-bottom">Chọn phòng</button> </div> </div> <div class="w3-third w3-margin-bottom"> <img src="/w3images/room_double.jpg" alt="Na Uy" style="width:100%"> < div class="w3-container w3-white"> <h3>Phòng đôi</h3> <h6 class="w3-opacity">Từ $149</h6> <p>Giường cỡ Queen</p> <p >25m<sup>2</sup></p> <p class="w3-large"><i class="fa fa-bath"></i> <i class="fa fa-phone"> </i> <i class="fa fa-wifi"></i> <i class="fa fa-tv"></i></p> <button class="w3-button w3-block w3 -black w3-margin-bottom">Chọn phòng</button> </div> </div> <div class="w3-third w3-margin-bottom"> <img src="/w3images/room_deluxe.jpg" alt="Na Uy" style="width:100%"> <div class="w3-container w3-white"> <h3>Phòng Deluxe</h3> <h6 class="w3-opacity">Từ $199</h3> h6> <p>Giường cỡ King</p> <p>40m<sup>2</sup></p> <p class="w3-large"><i class="fa fa-bath"> </i> <i class="fa fa-phone"></i> <i class="fa fa-wifi"></i> <i class="fa fa-tv"></i> < i class="fa fa-glass"></i> <i class="fa fa-cutlery"></i></p> <button class="w3-button w3-block w3-black w3-margin -bottom">Chọn phòng</button> </div> </div> </div> <div class="w3-row-padding" id="about"> <div class="w3-col l4 12" > <h3>Giới thiệu</h3> <h6>Khách sạn của chúng tôi là khách sạn độc nhất vô nhị. Nó thực sự tuyệt vời. 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 minim veniam.</h6> <p>Chúng tôi chấp nhận: <i class="fa fa-credit-card w3-large"></i> <i class="fa fa-cc-mastercard w3-large "></i> <i class="fa fa-cc-amex w3-large"></i> <i class="fa fa-cc-cc-visa w3-large"></i><i class="fa fa-cc-paypal w3-large"></i></p> </div> <div class="w3-col l8 12"> <!-- Hình ảnh vị trí/bản đồ --> <img src="/w3images/map.jpg" class="w3-image w3-greyscale" style="width:100%;"> </div> </div> <div class="w3-row-padding w3-large w3-center" style="margin:32px 0"> <div class="w3-third"><i class="fa fa-map-marker w3-text-red"></i> 423 Một số adr, Chicago, Hoa Kỳ</div> <div class="w3-third"><i class="fa fa-phone w3-text-red"></i> Điện thoại: +00 151515</div> <div class="w3-third"><i class="fa fa-envelope w3-text-red"></i> Email: mail@mail.com</div> </div> <div class="w3- panel w3-red w3-leftbar w3-padding-32"> <h6><i class="fa fa-info w3-deep-orange w3-padding w3-margin-right"></i> Theo yêu cầu, chúng tôi có thể cung cấp playstation, babycall, chăm sóc trẻ em, thiết bị cho chó, v.v.</h6> </div> <div class="w3-container"> <h3>Khách sạn của chúng tôi</h3> <h6>Bạn có thể tìm thấy khách sạn của chúng tôi ở bất cứ đâu tại thế giới:</h6> </div> <div class="w3-row-padding w3-padding-16 w3-text-white w3-large"> <div class="w3-half w3-margin-bottom" > <div class="w3-display-container"> <img src="/w3images/cinqueterre.jpg" alt="Cinque Terre" style="width:100%"> <span class="w3-display-bottomleft w3-padding">Cinque Terre</span> </div> </div> <div class="w3-half"> <div class="w3-row-padding" style="margin:0 -16px"> <div class="w3-half w3-margin-bottom"> <div class="w3-display-container"> <img src="/w3images/newyork2.jpg" alt="New York" style="width: 100%"> <span class="w3-display-bottomleft w3-padding">New York</span> </div> </div> <div class="w3-half w3-margin-bottom"> <div class="w3-display-container"> <img src="/w3images/sanfran.jpg" alt="San Francisco" style="width:100%"> <span class="w3-display-bottomleft w3-padding ">San Francisco</span> </div> </div> </div> <div class="w3-row-padding" style="margin:0 -16px"> <div class="w3-half w3 -margin-bottom"> <div class="w3-display-container"> <img src="/w3images/pisa.jpg" alt="Pisa" style="width:100%"> <span class="w3 -display-bottomleft w3-padding">Pisa</span> </div> </div> <div class="w3-half w3-margin-bottom"> <div class="w3-display-container"> < img src="/w3images/paris.jpg" alt="Paris" style="width:100%"> <span class="w3-display-bottomleft w3-padding">Paris</span> </div> < /div> </div> </div> </div> <div class="w3-container w3-padding-32 w3-black w3-opacity w3-card w3-hover-opacity-off" style="margin: 32px 0;"> <h2>Trước tiên, hãy nhận những ưu đãi tốt nhất!</h2> <p>Tham gia bản tin của chúng tôi.</p> <label>E-mail</label> <input class="w3-input w3-border " type="text" placeholder="Địa chỉ email của bạn"> <button type="button" class="w3-button w3-red w3-margin-top">Đăng ký</button> </div> <div class= "w3-container" id="contact"> <h2>Liên hệ</h2> <p>Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại hỏi họ.</p> <i class="fa fa-map-marker w3-text-red" style="width:30px"></i> Chicago, Hoa Kỳ<br> <i class="fa fa-phone w3-text-red" style="width:30px"></i > Điện thoại: +00 151515<br> <i class="fa fa-envelope w3-text-red" style="width:30px"> </i> Email: mail@mail.com<br> <form action= "/action_page.php" target="_blank"> <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Name" bắt buộc name="Name">< /p> <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Email" bắt buộc name="Email"></p> <p><input class ="w3-input w3-padding-16 w3-border" type="text" placeholder="Message" bắt buộc name="Message"></p> <p><button class="w3-button w3-black w3 -padding-large" type="submit">GỬI TIN NHẮN</button></p> </form> </div> <!-- Nội dung trang cuối --> </div> <!-- Footer -- > <footer class="w3-padding-32 w3-black w3-center w3-margin-top"> <h5>Tìm chúng tôi trên</h5> <div class="w3-xlarge w3-padding-16"> < 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> </div> <p>Được cung cấp bởi <a href="https://www.example.com.vn/w3css/default .asp" target="_blank" class="w3-hover-text-green">w3.css</a></p> </footer> <!-- Thêm Google Maps --> <script> chức năng myMap () { myCenter=new google.maps.LatLng(41.878114, -87.629798); var mapOptions= { center:myCenter, zoom:12, con lăn: sai, có thể kéo: sai, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions); var marker = new google.maps.Marker({ location: myCenter, }); marker.setMap(map); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script> <!-- Để sử dụng mã này trên trang web của bạn , nhận khóa API miễn phí từ Google. Đọc thêm tại: https://www.example.com.vn/graphics/google_maps_basic.asp --> </body> </html>