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} .mySlides {display: none} </style> </ head> <body class="w3-content w3-border-left w3-border-right"> <!-- Thanh bên/menu --> <nav class="w3-sidebar w3-light-grey w3-collapse w3- top" style="z-index:3;width:260px" 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-transparent w3-display-topright"></i> <h3>Cho thuê</h3> <h3>từ $99</h3> <h6>mỗi đêm</h6> <hr> <form action="/action_page.php" target="_blank"> <p><label><i class="fa fa-calendar-check-o"></i> Kiểm tra Trong</label></p> <input class="w3-input w3-border" type="text" placeholder="DD MM YYYY" name="CheckIn" bắt buộc> <p><label><i class= "fa fa-calendar-o"></i> Kiểm tra</label></p> <input class="w3-input w3-border" type="text" placeholder="DD MM YYYY" name=" CheckOut" bắt buộc> <p><label><i class="fa fa-male"></i> Người lớn</label></p> <input class="w3-input w3-border" type="number " value="1" name="Adults" min="1" max="6"> <p><label><i class="fa fa-child"></i> Trẻ em</label></ p> <input class="w3-input w3-border" type="number" value="0" name="Kids" min="0" max="6"> <p><button class="w3- nút w3-block w3-green w3-left-align" type="submit"><i class="fa fa-search w3-margin-right"></i> Tính khả dụng của tìm kiếm</button></p> < /form> </div> <div class="w3-bar-block"> <a href="#apartment" class="w3-bar-item w3-button w3-padding-16"><i class=" fa fa-building"></i> Căn hộ</a> <a href="javascript:void(0)" class="w3-bar-item w3-button w3-padding-16" onclick="document.getElementById ('đăng ký').style.display='block'"><i class="fa fa-rss"></i> Đăng ký</a> <a href="#contact" class="w3-bar- item w3-button w3-padding-16"><i class="fa fa-envelope"></i> Liên hệ</a> </div> </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"> <span class="w3-bar-item">Cho thuê</span> <a href="javascript:void (0)" class="w3-right w3-bar-item w3-button" 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="close side menu" id="myOverlay"></div> <!-- !NỘI DUNG TRANG! --> <div class="w3-main w3-white" style="margin-left:260px"> <!-- Đẩy nội dung xuống trên màn hình nhỏ --> <div class="w3-hide-large" style ="margin-top:80px"></div> <!-- Tiêu đề trình chiếu --> <div class="w3-container" id="apartment"> <h2 class="w3-text-green"> Căn hộ</h2> <div class="w3-display-container mySlides"> <img src="/w3images/livingroom.jpg" style="width:100%;margin-bottom:-6px"> <div class= "w3-display-bottomleft w3-container w3-black"> <p>Phòng khách</p> </div> </div> <div class="w3-display-container mySlides"> <img src="/ w3images/diningroom.jpg" style="width:100%;margin-bottom:-6px"> <div class="w3-display-bottomleft w3-container w3-black"> <p>Phòng ăn</p> < /div> </div> <div class="w3-display-container mySlides"> <img src="/w3images/phòng ngủ.jpg" style="width:100%;margin-bottom:-6px"> <div class="w3-display-bottomleft w3-container w3-black"> <p>Phòng ngủ</p> </div> </div> <div class="w3-display-container mySlides"> <img src=" /w3images/livingroom2.jpg" style="width:100%;margin-bottom:-6px"> <div class="w3-display-bottomleft w3-container w3-black"> <p>Phòng khách II</p > </div> </div> </div> <div class="w3-row-padding w3-section"> <div class="w3-col s3"> <img class="demo w3-opacity w3- hover-opacity-off" src="/w3images/livingroom.jpg" style="width:100%;cursor:pointer" onclick="currentDiv(1)" title="Phòng khách"> </div> <div class ="w3-col s3"> <img class="demo w3-opacity w3-hover-opacity-off" src="/w3images/diningroom.jpg" style="width:100%;cursor:pointer" onclick=" currentDiv(2)" title="Phòng ăn"> </div> <div class="w3-col s3"> <img class="demo w3-opacity w3-hover-opacity-off" src="/w3images/ bed.jpg" style="width:100%;cursor:pointer" onclick="currentDiv(3)" title="Bedroom"> </div> <div class="w3-col s3"> <img class=" demo w3-opacity w3-hover-opacity-off" src="/w3images/livingroom2.jpg" style="width:100%;cursor:pointer" onclick="currentDiv(4)" title="Phòng khách thứ hai"> </div> </div> <div class="w3-container"> <h4><strong>Không gian</strong></h4> <div class="w3-row w3-large"> <div class ="w3-col s6"> <p><i class="fa fa-fw fa-male"></i> Số người tối đa: 4</p> <p><i class="fa fa-fw fa -bath"></i> Phòng tắm: 2</p> <p><i class="fa fa-fw fa-bed"></i> Phòng ngủ: 1</p> </div> <div class ="w3-col s6"> <p><i class="fa fa-fw fa-clock-o"></i> Nhận phòng: Sau 3 giờ chiều</p> <p><i class="fa fa -fw fa-clock-o"></i> Trả phòng: 12 giờ trưa</p> </div> </div> <hr> <h4><strong>Tiện nghi</strong></h4> <div đẳng cấp ="w3-row w3-large"> <div class="w3-col s6"> <p><i class="fa fa-fw fa-shower"></i> Tắm</p> <p> <i class="fa fa-fw fa-wifi"></i> WiFi</p> <p><i class="fa fa-fw fa-tv"></i> TV</p> < /div> <div class="w3-col s6"> <p><i class="fa fa-fw fa-cutlery"></i> Nhà bếp</p> <p><i class="fa fa -fw fa-thermometer"></i> Hệ thống sưởi</p> <p><i class="fa fa-fw fa-wheelchair"></i> Có thể sử dụng được</p> </div> </div> <hr> <h4><strong>Thông tin bổ sung</strong></h4> <p>Căn hộ của chúng tôi thực sự sạch sẽ và chúng tôi muốn giữ nó như vậy. Thưởng thức lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exermination ullamco labis nisi ut aliquip ex ea commodo consequat.</p> <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> <hr> <h4><strong>Quy tắc</strong>< /h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exeritation ullamco labis nisi ut aliquip ex ea commodo consequat.</p> <p>Đăng ký để nhận thông tin cập nhật về những ngày có sẵn và ưu đãi đặc biệt.</p> <p><button class="w3 -button w3-green w3-third" onclick="document.getElementById('subscribe').style.display='block'">Đăng ký</button></p> </div> <hr> <!-- Liên hệ --> <div class="w3-container" id="contact"> <h2>Liên hệ</h2> <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> <p>Bạn có câu hỏi? Hãy tiếp tục, hỏi họ:</p> <form action="/action_page.php" target="_blank"> <p><input class="w3-input w3-border" type="text" placeholder="Name " tên bắt buộc="Tên"></p> <p><input class="w3-input w3-border" type="text" placeholder="Email" tên bắt buộc="Email"></p> <p ><input class="w3-input w3-border" type="text" placeholder="Message" bắt buộc name="Message"></p> <button type="submit" class="w3-button w3-green w3-third">Gửi tin nhắn</button> </form> </div> <footer class="w3-container w3-padding-16" style="margin-top:32px">Được cung cấp bởi <a href= "https://www.example.com.vn/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></ footer> <!-- Nội dung trang cuối --> </div> <!-- Đăng ký phương thức --> <div id="subscribe" class="w3-modal"> <div class="w3-modal-content w3-animate-zoom w3-padding-large"> <div class="w3-container w3-white w3-center"> <i onclick="document.getElementById('subscribe').style.display='none'" class="fa fa-remove w3-button w3-xlarge w3-right w3-transparent"></i> <h2 class="w3-wide">ĐĂNG KÝ</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ào những ngày có sẵn 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-green w3-margin-bottom" onclick="document.getElementById('subscribe').style.display='none'">Đăng ký</button> </div > </div> </div> <script> // Tập lệnh mở và đóng thanh bên khi sử dụng máy tính bảng và điện thoại chức năng 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"; } // Trình chiếu hình ảnh căn hộ var slideIndex = 1; showDivs(slideIndex); hàm plusDivs(n) { showDivs(slideIndex += n); } hàm currentDiv(n) { showDivs(slideIndex = n); } hàm showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "không có"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" w3-opacity-off", ""); } x[slideIndex-1].style.display = "chặn"; dots[slideIndex-1].className += " w3-opacity-off"; } </script> </body> </html>