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=Amatic+SC"> <style> body, html {height: 100%} body,h1,h2,h3,h4,h5,h6 {font-family: "Amatic SC", sans- serif} .menu {display: none} .bgimg { lặp lại nền: không lặp lại; kích thước nền: bìa; hình nền: url("/w3images/pizza.jpg"); chiều cao tối thiểu: 90%; } </style> </head> <body> <!-- Thanh điều hướng (ngồi trên cùng) --> <div class="w3-top w3-hide-small"> <div class="w3-bar w3- xlarge w3-black w3-opacity w3-hover-opacity-off" id="myNavbar"> <a href="#" class="w3-bar-item w3-button">TRANG CHỦ</a> <a href= "#menu" class="w3-bar-item w3-button">THỰC ĐƠN</a> <a href="#about" class="w3-bar-item w3-button"> GIỚI THIỆU</a> <a href="#myMap" class="w3-bar-item w3-button">LIÊN HỆ</a> </div> </div> <!-- Tiêu đề có hình ảnh --> <header class="bgimg w3- display-container w3-grayscale-min" id="home"> <div class="w3-display-bottomleft w3-padding"> <span class="w3-tag w3-xlarge">Mở cửa từ 10 giờ sáng đến 12 giờ trưa</ span> </div> <div class="w3-display-middle w3-center"> <span class="w3-text-white w3-hide-small" style="font-size:100px">thin<br >CRUST PIZZA</span> <span class="w3-text-white w3-hide-large w3-hide-medium" style="font-size:60px"><b>thin<br>CRUST PIZZA</b ></span> <p><a href="#menu" class="w3-button w3-xxlarge w3-black">Cho tôi xem menu</a></p> </div> </header > <!-- Vùng chứa menu --> <div class="w3-container w3-black w3-padding-64 w3-xxlarge" id="menu"> <div class="w3-content"> <h1 class= "w3-center w3-jumbo" style="margin-bottom:64px">THỰC ĐƠN</h1> <div class="w3-row w3-center w3-border w3-border-dark-grey"> <a href ="javascript:void(0)" onclick="openMenu(event, 'Pizza');" id="myLink"> <div class="w3-col s4 tablink w3-padding-large w3-hover-red">Pizza</div> </a> <a href="javascript:void(0)" onclick ="openMenu(event, 'Pasta');"> <div class="w3-col s4 tablink w3-padding-large w3-hover-red">Salad</div> </a> <a href="javascript :void(0)" onclick="openMenu(event, 'Starter');"> <div class="w3-col s4 tablink w3-padding-large w3-hover-red">Người khởi xướng</div> </a > </div> <div id="Pizza" class="w3-container menu w3-padding-32 w3-white"> <h1><b>Margherita</b> <span class="w3-right w3- tag w3-dark-grey w3-round">$12,50</span></h1> <p class="w3-text-grey">Cà chua tươi, phô mai mozzarella tươi, húng quế tươi</p> <hr> <h1> <b>Formaggio</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$15,50</span></h1> <p class="w3-text-grey"> Bốn loại phô mai (mozzarella, parmesan, pecorino, jarlsberg)</p> <hr> <h1><b>Gà</b> <span class="w3-right w3-tag w3-dark-grey w3-round"> $17,00</span></h1> <p class="w3-text-grey">Cà chua tươi, phô mai mozzarella, thịt gà, hành tây</p> <hr> <h1><b>Dứa'o'clock</b > <span class="w3-right w3-tag w3-dark-grey w3-round">$16,50</span></h1> <p class="w3-text-grey">Cà chua tươi, phô mai mozzarella, dứa tươi , thịt xông khói, húng quế tươi</p> <hr> <h1><b>Thị trấn thịt</b> <span class="w3-tag w3-red w3-round">Nóng!</span><span class= "w3-right w3-tag w3-dark-grey w3-round">$20,00</span></h1> <p class="w3-text-grey">Cà chua tươi, phô mai mozzarella, pepporoni nóng, xúc xích nóng, thịt bò , gà</p> <hr> <h1><b>Parma</b> <span class="w3-tag w3-grey w3-round">Mới</span><span class="w3-right w3 -tag w3-dark-grey w3-round">$21,50</span></h1> <p class="w3-text-grey">Cà chua tươi, phô mai mozzarella, parma, thịt xông khói, rau arugula tươi</p> </ div> <div id="Pasta" class="w3-container menu w3-padding-32 w3-white"> <h1><b>Món Lasagna</b> <span class="w3-tag w3-grey w3- round">Phổ biến</span> <span class="w3-right w3-tag w3-dark-grey w3-round">$13,50</span></h1> <p class="w3-text-grey"> Sốt đặc biệt, mozzarella, parmesan, thịt bò xay</p> <hr> <h1><b>Ravioli</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$14,50< /span></h1> <p class="w3-text-grey">Ravioli nhân phô mai</p> <hr> <h1><b>Spaghetti Classica</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$11,00</span></h1> <p class="w3-text-grey">Cà chua tươi, hành tây, thịt bò xay</p> <hr> <h1 ><b>Mỳ hải sản</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$25,50</span></h1> <p class="w3-text-grey ">Cá hồi, tôm, tôm hùm, tỏi</p> </div> <div id="Starter" class="w3-container menu w3-padding-32 w3-white"> <h1><b>Món súp hôm nay< /b> <span class="w3-tag w3-grey w3-round">Theo mùa</span><span class="w3-right w3-tag w3-dark-grey w3-round">$5,50</span> </h1> <p class="w3-text-grey">Hỏi người phục vụ</p> <hr> <h1><b>Bruschetta</b> <span class="w3-right w3-tag w3- dark-grey w3-round">$8,50</span></h1> <p class="w3-text-grey">Bánh mì với pesto, cà chua, hành tây, tỏi</p> <hr> <h1><b >Bánh mì tỏi</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$9,50</span></h1> <p class="w3-text-grey">Nướng ciabatta, bơ tỏi, hành tây</p> <hr> <h1><b>Tomozzarella</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$10,50</span> </h1> <p class="w3-text-grey">Cà chua và mozzarella</p> </div><br> </div> </div> <!-- Giới thiệu về Container --> <div class ="w3-container w3-padding-64 w3-red w3-grayscale w3-xlarge" id="about"> <div class="w3-content"> <h1 class="w3-center w3-jumbo" style= "margin-bottom:64px">Giới thiệu</h1> <p>Nhà hàng Pizza được ông Italiano thành lập tại blabla trong 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 gắng sức ullamco labis nisi ut aliquip ex ea commodo consequat.</p> <p><strong>Đầu bếp?</strong> Bản thân ông Italiano<img src="/w3images/chef. jpg" style="width:150px" class="w3-circle w3-right" alt="Chef"></p> <p>Chúng tôi tự hào về nội thất của mình.</p> <img src="/w3images /onepage_restaurant.jpg" style="width:100%" class="w3-margin-top w3-margin-bottom" alt="Restaurant"> <h1><b>Giờ mở cửa</b></h1> < div class="w3-row"> <div class="w3-col s6"> <p>Thứ Hai & Thứ Ba ĐÓNG CỬA</p> <p>Thứ Tư 10:00 - 24:00</p> <p>Thứ Năm 10:00 - 24:00</p> </div> <div class="w3-col s6"> <p>Thứ Sáu 10:00 - 12:00</p> <p>Thứ Bảy 10:00 - 23:00</ p> <p>Chủ nhật đóng cửa</p> </div> </div> </div> </div> <!-- Hình ảnh vị trí/bản đồ --> <img src="/w3images/map.jpg " class="w3-image w3-greyscale" style="width:100%;" id="myMap"> <!-- Liên hệ --> <div class="w3-container w3-padding-64 w3-blue-grey w3-grayscale-min w3-xlarge"> <div class="w3-content "> <h1 class="w3-center w3-jumbo" style="margin-bottom:64px">Liên hệ</h1> <p>Tìm chúng tôi tại một địa chỉ nào đó hoặc gọi cho chúng tôi theo số 05050515-122330</p > <p><span class="w3-tag">Xin lưu ý!</span> Chúng tôi cung cấp dịch vụ ăn uống trọn gói cho mọi sự kiện, dù lớn hay nhỏ. Chúng tôi hiểu nhu cầu của bạn và chúng tôi sẽ phục vụ món ăn để đáp ứng các tiêu chí lớn nhất, cả về hình thức lẫn hương vị.</p> <p class="w3-xxlarge"><strong>Đặt bàn</strong>, hãy hỏi cho sự kiện đặc biệt hôm nay hoặc chỉ cần gửi tin nhắn cho chúng tôi:</p> <form action="/action_page.php" target="_blank"> <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Tên" bắt buộc name="Tên"></p> <p><input class="w3-input w3-padding-16 w3-border" type="number" placeholder="Làm thế nào nhiều người" bắt buộc name="People"></p> <p><input class="w3-input w3-padding-16 w3-border" type="datetime-local" placeholder="Ngày và giờ" tên bắt buộc ="date" value="2020-11-16T20:00"></p> <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Message \ Yêu cầu đặc biệt" bắt buộc name="Message"></p> <p><button class="w3-button w3-light-grey w3-block" type="submit">GỬI TIN NHẮN</button></p> </form> </div> </div> <!-- Footer --> <footer class="w3-center w3-black w3-padding-48 w3-xxlarge"> <p>Đượ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></ p> </footer> <script> // Chức năng menu theo thẻ openMenu(evt, menuName) { var i, x, tablinks; x = document.getElementsByClassName("menu"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++) { tablinks[i].className = tablinks[i].className.replace(" w3-red", ""); } document.getElementById(menuName).style.display = "chặn"; evt.currentTarget.firstElementChild.className += " w3-red"; } document.getElementById("myLink").click(); </script> </body> </html>