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"> <style> body,h1,h2{font-family: "Raleway", sans-serif} body, html {height: 100%} p {line-height: 2} . bgimg, .bgimg2 { chiều cao tối thiểu: 100%; vị trí nền: trung tâm; kích thước nền: bìa; } .bgimg {background-image: url("/w3images/wedding_pair.jpg")} .bgimg2 {background-image: url("/w3images/flowers.jpg")} </style> </head> <body> <!-- Header / Home--> <header class="w3-display-container w3-wide bgimg w3-grayscale-min" id="home"> <div class="w3-display-middle w3-text- trắng w3-center"> <h1 class="w3-jumbo">Jane & John</h1> <h2>Sắp kết hôn</h2> <h2><b>17.07.2017</b></h2> </div> </header> <!-- Thanh điều hướng (đáy dính) --> <div class="w3-bottom w3-hide-small"> <div class="w3-bar w3-white w3-center w3 -padding w3-opacity-min w3-hover-opacity-off"> <a href="#home" style="width:25%" class="w3-bar-item w3-button">Trang chủ</a> <a href="#us" style="width:25%" class="w3-bar-item w3-button">Jane & John</a> <a href="#wedding" style="width:25 %" class="w3-bar-item w3-button">Đám cưới</a> <a href="#rsvp" style="width:25%" class="w3-bar-item w3-button w3-hover -black">Trả lời</a> </div> </div> <!-- Giới thiệu / Jane và John --> <div class="w3-container w3-padding-64 w3-pale-red w3-grayscale -min" id="us"> <div class="w3-content"> <h1 class="w3-center w3-text-grey"><b>Jane & John</b></h1> <img class="w3-round w3-grayscale-min" src="/w3images/wedding_pair2.jpg" style="width:100%;margin:32px 0"> <p><i>Tất cả các bạn đều biết đến chúng tôi. Và tất cả chúng tôi đều biết bạn. Chúng tôi sắp kết hôn 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. 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 minm veniam, quis nostrud gắng sức ullamco labis nisi ut aliquip ex ea commodo consequat.</i> </p><br> <p class="w3-center"><a href="#wedding" class= "w3-button w3-black w3-round w3-padding-large w3-large">Chi tiết đám cưới</a></p> </div> </div> <!-- Ảnh nền --> <div class ="w3-display-container bgimg2"> <div class="w3-display-middle w3-text-white w3-center"> <h1 class="w3-jumbo">Bạn được mời</h1><br> <h2>Tất nhiên rồi..</h2> </div> </div> <!-- Thông tin về đám cưới --> <div class="w3-container w3-padding-64 w3-pale-red w3-grayscale- min w3-center" id="wedding"> <div class="w3-content"> <h1 class="w3-text-grey"><b>ĐÁM CƯỚI</b></h1> <img class= "w3-round-large w3-grayscale-min" src="/w3images/wedding_location.jpg" style="width:100%;margin:64px 0"> <div class="w3-row"> <div class= "w3-half"> <h2>Khi nào</h2> <p>Lễ cưới - 2:00 chiều</p> <p>Tiệc chiêu đãi & Ăn tối - 5:00 chiều</p> </div> <div class=" w3-half"> <h2>Ở đâu</h2> <p>Nơi nào đó, một địa chỉ</p> <p>Nơi nào đó, địa chỉ nào đó</p> </div> </div> </div> < /div> <!-- Phần trả lời --> <div class="w3-container w3-padding-64 w3-pale-red w3-center w3-wide" id="rsvp"> <h1>HY VỌNG BẠN CÓ THỂ THỰC HIỆN CNTT!</h1> <p class="w3-large">Vui lòng phản hồi trước tháng 1 năm 2017</p> <p class="w3-xlarge"> <button onclick="document.getElementById('id01'). style.display='block'" class="w3-button w3-round w3-red w3-opacity w3-hover-opacity-off" style="padding:8px 60px">Trả lời</button> </p> < /div> <!-- Phương thức trả lời --> <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-card-4 w3-animate-zoom" style= "padding:32px;max-width:600px"> <div class="w3-container w3-white w3-center"> <h1 class="w3-wide">BẠN CÓ THỂ ĐẾN KHÔNG?</h1> <p>Chúng tôi thực sự hy vọng bạn có thể làm được.</p> <form> <input class="w3-input w3-border" type="text" placeholder="Name(s)" name="name"> </form> < p><i>Trân trọng, John & Jane</i></p> <div class="w3-row"> <div class="w3-half"> <button onclick="document.getElementById('id01' ).style.display='none'" type="button" class="w3-button w3-block w3-green">Đi</button> </div> <div class="w3-half"> <button onclick="document.getElementById('id01').style.display='none'" type="button" class="w3-button w3-block w3-red">Không thể đến</button> </div > </div> </div> </div> </div> <!-- Footer --> <footer class="w3-center w3-black w3-padding-16"> <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> <div class="w3-hide-small" style="margin-bottom:32px"> </div> </body> </html>