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=Inconsolata"> <style> nội dung, html { chiều cao: 100%; họ phông chữ: "Inconsolata", sans-serif; } .bgimg { vị trí nền: giữa; kích thước nền: bìa; hình nền: url("/w3images/coffeehouse.jpg"); chiều cao tối thiểu: 75%; } .menu { hiển thị: không có; } </style> </head> <body> <!-- Liên kết (ngồi trên cùng) --> <div class="w3-top"> <div class="w3-row w3-padding w3-black" > <div class="w3-col s3"> <a href="#" class="w3-button w3-block w3-black">TRANG CHỦ</a> </div> <div class="w3-col s3"> <a href="#about" class="w3-button w3-block w3-black"> GIỚI THIỆU</a> </div> <div class="w3-col s3"> <a href=" #menu" class="w3-button w3-block w3-black">MENU</a> </div> <div class="w3-col s3"> <a href="#where" class="w3- nút w3-block w3-black">Ở ĐÂU</a> </div> </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-center w3-padding-large w3-hide-small"> <span class="w3-tag">Mở cửa từ 6 giờ sáng đến 5 giờ chiều< /span> </div> <div class="w3-display-middle w3-center"> <span class="w3-text-white" style="font-size:90px">the<br>Quán cà phê</ span> </div> <div class="w3-display-bottomright w3-center w3-padding-large"> <span class="w3-text-white">15 đường Adr, 5015</span> </div > </header> <!-- Thêm màu nền và văn bản lớn vào toàn bộ trang --> <div class="w3-sand w3-grayscale w3-large"> <!-- Giới thiệu về Container --> <div class="w3-container" id="about"> <div class="w3-content" style="max-width:700px"> <h5 class="w3-center w3-padding-64"><span lớp ="w3-tag w3-wide"> GIỚI THIỆU VỀ CAFE</span></h5> <p>Quán cà phê được ông Smith thành lập tại blabla tại lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lao động và dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercite ullamco labis nisi ut aliquip ex ea commodo consequat.</p> <p>Ngoài thực đơn quầy bar pha cà phê và cà phê espresso đầy đủ, chúng tôi còn phục vụ bữa sáng và bánh mì ăn trưa mới làm theo yêu cầu, cũng như tuyển chọn các món ăn kèm, salad và các món ngon khác.</p> <div class="w3-panel w3-leftbar w3-light-grey"> <p><i>"Sử dụng các sản phẩm từ thiên nhiên cho đúng mục đích của nó đáng - nhưng không bao giờ là quá sớm cũng không quá muộn." Tươi mới là món ngọt mới.</i></p> <p>Đầu bếp, chuyên gia cà phê và chủ sở hữu: Liam Brown</p> </div> <img src="/w3images/coffeeshop.jpg" style="width: 100%;max-width:1000px" class="w3-margin-top"> <p><strong>Giờ mở cửa:</strong> hàng ngày từ 6 giờ sáng đến 5 giờ chiều.</p> <p><strong>Địa chỉ: </strong> 15 Adr street, 5015, NY</p> </div> </div> <!-- Menu Container --> <div class="w3-container" id="menu"> <div class ="w3-content" style="max-width:700px"> <h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide">THỰC ĐƠN</span> </h5> <div class="w3-row w3-center w3-card w3-padding"> <a href="javascript:void(0)" onclick="openMenu(event, 'Ăn');" id="myLink"> <div class="w3-col s6 tablink">Ăn</div> </a> <a href="javascript:void(0)" onclick="openMenu(event, 'Drinks') ;"> <div class="w3-col s6 tablink">Uống</div> </a> </div> <div id="Ăn" class="w3-container menu w3-padding-48 w3-card "> <h5>Rổ bánh mì</h5> <p class="w3-text-grey">Các loại bánh mì trái cây tươi nướng và bánh nướng xốp 5,50</p><br> <h5>Granola hạnh nhân mật ong với trái cây</h5 > <p class="w3-text-grey">Ngũ cốc tự nhiên gồm yến mạch nướng mật ong, nho khô, hạnh nhân và chà là 7,00</p><br> <h5>Bánh quế Bỉ</h5> <p class="w3-text -grey">Bột hương vani với bột mạch nha 7,50</p><br> <h5>Trứng bác</h5> <p class="w3-text-grey">Trứng bác, ớt đỏ nướng và tỏi, với xanh hành tây 7,50</p><br> <h5>Bánh kếp việt quất</h5> <p class="w3-text-grey">Với xi-rô, bơ và nhiều quả mọng 8,50</p> </div> <div id ="Drinks" class="w3-container menu w3-padding-48 w3-card"> <h5>Cà phê</h5> <p class="w3-text-grey">Cà phê thường 2,50</p><br > <h5>Sô cô la</h5> <p class="w3-text-grey">Sô cô la espresso với sữa 4,50</p><br> <h5>Corretto</h5> <p class="w3-text- grey">Whiskey và cà phê 5,00</p><br> <h5>Trà đá</h5> <p class="w3-text-grey">Trà nóng, trừ loại không nóng 3,00</p><br> < h5>Soda</h5> <p class="w3-text-grey">Coke, Sprite, Fanta, v.v. 2,50</p> </div> <img src="/w3images/coffeehouse2.jpg" style= "width:100%;max-width:1000px;margin-top:32px;"> </div> </div> <!-- Liên hệ/Vùng chứa vùng --> <div class="w3-container" id= "where" style="padding-bottom:32px;"> <div class="w3-content" style="max-width:700px"> <h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide">TÌM CHÚNG TÔI Ở ĐÂU</span></h5> <p>Tìm chúng tôi tại một số địa chỉ ở một nơi nào đó.</p> <img src="/w3images/map.jpg " class="w3-image" style="width:100%"> <p><span class="w3-tag">FYI!</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ụ các món ăn để đáp ứng các tiêu chí lớn nhất, cả về hình thức lẫn mùi vị.</p> <p><strong>Đặt bàn</strong>, yêu cầu món đặc biệt của ngày hôm nay hoặc chỉ cần gửi cho chúng tôi một tin nhắn:</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 tên="Tên"></p> <p><input class="w3-input w3-padding-16 w3-border" type="number" placeholder="Có bao nhiêu người" bắt buộc tên=" 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="Thông báo \ Yêu cầu đặc biệt" bắt buộc name=" Message"></p> <p><button class="w3-button w3-black" type="submit">GỬI TIN NHẮN</button></p> </form> </div> </div> <!-- Nội dung trang cuối --> </div> <!-- Footer --> <footer class="w3-center w3-light-grey w3-padding-48 w3-large"> <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-dark-grey", ""); } document.getElementById(menuName).style.display = "chặn"; evt.currentTarget.firstElementChild.className += " w3-dark-grey"; } document.getElementById("myLink").click(); </script> </body> </html>