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=Poppins"> <style> body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif} nội dung {font-size:16px ;} .w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer} .w3-half img:hover{opacity:1} </style> </head> < body> <!-- Thanh bên/menu --> <nav class="w3-sidebar w3-red w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:300px;font -trọng lượng:đậm;" id="mySidebar"><br> <a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft" style="width: 100%;font-size:22px">Đóng Menu</a> <div class="w3-container"> <h3 class="w3-padding-64"><b>Công ty<br>Tên</b> </h3> </div> <div class="w3-bar-block"> <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white ">Trang chủ</a> <a href="#showcase" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Trưng bày</a> <a href=" #services" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Dịch vụ</a> <a href="#designers" onclick="w3_close()" class= "w3-bar-item w3-button w3-hover-white">Nhà thiết kế</a> <a href="#packages" onclick="w3_close()" class="w3-bar-item w3-button w3-hover -white">Gói</a> <a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Liên hệ</a> </div > </nav> <!-- Menu trên cùng trên màn hình nhỏ --> <header class="w3-container w3-top w3-hide-large w3-red w3-xlarge w3-padding"> <a href="javascript :void(0)" class="w3-button w3-red w3-margin-right" onclick="w3_open()">☰</a> <span>Tên công ty</span> </header> <!- - Hiệu ứng lớp phủ khi mở sidebar 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" style="margin-left:340px;margin-right:40px"> <!-- Tiêu đề --> <div class="w3-container" style="margin- top:80px" id="showcase"> <h1 class="w3-jumbo"><b>Thiết kế nội thất</b></h1> <h1 class="w3-xxxlarge w3-text-red"><b >Trưng bày.</b></h1> <hr style="width:50px;border:5px Solid red" class="w3-round"> </div> <!-- Lưới ảnh (modal) --> <div class="w3-row-padding"> <div class="w3-half"> <img src="/w3images/kitchenconcrete.jpg" style="width:100%" onclick="onClick(this)" alt="Bê tông gặp gạch"> <img src="/w3images/livingroom.jpg" style="width:100%" onclick="onClick(this)" alt="Thiết kế scandinavian nhẹ nhàng, trắng và chặt chẽ"> <img src="/w3images/diningroom.jpg" style="width:100%" onclick="onClick(this)" alt="Bức tường trắng với những chiếc ghế thiết kế"> </div> <div class="w3-half"> <img src="/w3images/atrium.jpg" style="width:100%" onclick="onClick(this)" alt="Windows cho tâm nhĩ"> <img src="/w3images/phòng ngủ.jpg" style ="width:100%" onclick="onClick(this)" alt="Phòng ngủ và văn phòng trong một không gian"> <img src="/w3images/livingroom2.jpg" style="width:100%" onclick="onClick (this)" alt="Scandinavian Design"> </div> </div> <!-- Modal cho hình ảnh kích thước đầy đủ khi nhấp chuột--> <div id="modal01" class="w3-modal w3-black" style="padding-top:0" onclick="this.style.display='none'"> <span class="w3-button w3-black w3-xxlarge w3-display-topright">×</span> < div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64"> <img id="img01" class="w3-image"> <p id="caption"> </p> </div> </div> <!-- Dịch vụ --> <div class="w3-container" id="services" style="margin-top:75px"> <h1 class="w3 -xxxlarge w3-text-red"><b>Dịch vụ.</b></h1> <hr style="width:50px;border:5px Solid red" class="w3-round"> <p>Chúng tôi là một dịch vụ thiết kế nội thất tập trung vào những gì tốt nhất cho ngôi nhà của bạn và những gì tốt nhất cho bạn!</p> <p>Một số nội dung về dịch vụ của chúng tôi - những gì chúng tôi làm và những gì chúng tôi cung cấp. Chúng tôi là lorem ipsum 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. 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. </p> </div> <!-- Nhà thiết kế --> <div class="w3-container" id="designers" style="margin-top:75px"> <h1 class="w3-xxxlarge w3- text-red"><b>Nhà thiết kế.</b></h1> <hr style="width:50px;border:5px Solid red" class="w3-round"> <p>Đội ngũ xuất sắc nhất thế giới .</p> <p>Chúng tôi là lorem ipsum 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 quis nostrud ullamco labis nisi ut aliquip ex ea commodo consequat. </p> <p><b>Các nhà thiết kế của chúng tôi được lựa chọn cẩn thận</b>:</p> </div> <!-- Nhóm --> <div class="w3-row-padding w3-grayscale "> <div class="w3-col m4 w3-margin-bottom"> <div class="w3-light-grey"> <img src="/w3images/team2.jpg" alt="John" style=" width:100%"> <div class="w3-container"> <h3>John Doe</h3> <p class="w3-opacity">CEO & Người sáng lập</p> <p>Phasellus eget enim eu lectus faucibus tiền đình. Suspendisse sodales pellentesque elementum.</p> </div> </div> </div> <div class="w3-col m4 w3-margin-bottom"> <div class="w3-light-grey"> < img src="/w3images/team1.jpg" alt="Jane" style="width:100%"> <div class="w3-container"> <h3>Jane Doe</h3> <p class="w3 -opacity">Nhà thiết kế</p> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> </div> </div> </div> <div class="w3-col m4 w3-margin-bottom"> <div class="w3-light-grey"> < img src="/w3images/team3.jpg" alt="Mike" style="width:100%"> <div class="w3-container"> <h3>Mike Ross</h3> <p class="w3 -opacity">Kiến trúc sư</p> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> </div> </div> </div> </div> <!-- Gói / Bảng giá --> <div class="w3-container" id="packages" style="margin-top:75px"> <h1 class="w3-xxxlarge w3-text-red"><b>Gói.</b></h1> <hr style="width:50px;border:5px màu đỏ đậm" class="w3-round"> <p>Một số nhắn tin về giá của chúng tôi. Lorem ipsum 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 có thể làm điều đó</p> </div> <div class="w3-row-padding"> <div class="w3-half w3-margin-bottom"> <ul class="w3-ul w3-light- grey w3-center"> <li class="w3-dark-grey w3-xlarge w3-padding-32">Cơ bản</li> <li class="w3-padding-16">Quy hoạch sàn</li> <li class="w3-padding-16">Hỗ trợ 10 giờ</li> <li class="w3-padding-16">Chụp ảnh</li> <li class="w3-padding-16">Giảm giá 20% đồ nội thất </li> <li class="w3-padding-16">Ưu đãi tốt</li> <li class="w3-padding-16"> <h2>$ 199</h2> <span class="w3- opacity">mỗi phòng</span> </li> <li class="w3-light-grey w3-padding-24"> <button class="w3-button w3-white w3-padding-large w3-hover- black">Đăng ký</button> </li> </ul> </div> <div class="w3-half"> <ul class="w3-ul w3-light-grey w3-center"> < li class="w3-red w3-xlarge w3-padding-32">Pro</li> <li class="w3-padding-16">Quy hoạch sàn</li> <li class="w3-padding-16" >Hỗ trợ 50 giờ</li> <li class="w3-padding-16">Chụp ảnh</li> <li class="w3-padding-16">Giảm giá 50% đồ nội thất</li> <li class=" w3-padding-16">Ưu đãi TUYỆT VỜI</li> <li class="w3-padding-16"> <h2>$ 249</h2> <span class="w3-opacity">mỗi phòng</span> </li> <li class="w3-light-grey w3-padding-24"> <button class="w3-button w3-red w3-padding-large w3-hover-black">Đăng ký</button> </li> </ul> </div> </div> <!-- Liên hệ --> <div class="w3-container" id="contact" style="margin-top:75px"> <h1 class="w3-xxxlarge w3-text-red"><b>Liên hệ.</b></h1> <hr style="width:50px;border:5px màu đỏ đặc" class="w3-round"> < p>Bạn có muốn chúng tôi tạo kiểu cho ngôi nhà của bạn không? Điền vào biểu mẫu và điền thông tin chi tiết cho tôi :) Chúng tôi thích gặp gỡ những người mới!</p> <form action="/action_page.php" target="_blank"> <div class="w3-section"> < nhãn>Tên</label> <input class="w3-input w3-border" type="text" name="Name" bắt buộc> </div> <div class="w3-section"> <label>Email< /label> <input class="w3-input w3-border" type="text" name="Email" bắt buộc> </div> <div class="w3-section"> <label>Tin nhắn</label> < input class="w3-input w3-border" type="text" name="Message" bắt buộc> </div> <button type="submit" class="w3-button w3-block w3-padding-large w3- red w3-margin-bottom">Gửi tin nhắn</button> </form> </div> <!-- Nội dung trang cuối --> </div> <!-- Vùng chứa W3.CSS --> <div class ="w3-light-grey w3-container w3-padding-32" style="margin-top:75px;padding-right:58px"><p class="w3-right">Được cung cấp bởi <a href="https ://www.example.com.vn/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-opacity">w3.css</a></p></ div> <script> // Tập lệnh để mở và đóng thanh bên 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"; } // Chức năng Thư viện hình ảnh phương thức onClick(element) { document.getElementById("img01").src = element.src; document.getElementById("modal01").style.display = "chặn"; var captionText = document.getElementById("chú thích"); chú thíchText.innerHTML = element.alt; } </script> </body> </html>