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://www. example.com.vn/lib/w3-theme-black.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font -awesome.min.css"> </head> <body id="myPage"> <!-- Thanh bên khi nhấp chuột --> <nav class="w3-sidebar w3-bar-block w3-white w3-card w3 -animate-left w3-xxlarge" style="display:none;z-index:2" id="mySidebar"> <a href="javascript:void(0)" onclick="w3_close()" class="w3 -bar-item w3-button w3-display-topright w3-text-teal">Đóng <i class="fa fa-remove"></i> </a> <a href="#" class="w3 -bar-item w3-button">Liên kết 1</a> <a href="#" class="w3-bar-item w3-button">Liên kết 2</a> <a href="#" class= "w3-bar-item w3-button">Liên kết 3</a> <a href="#" class="w3-bar-item w3-button">Liên kết 4</a> <a href="#" class="w3-bar-item w3-button">Liên kết 5</a> </nav> <!-- Navbar --> <div class="w3-top"> <div class="w3-bar w3 -theme-d2 w3-left-align"> <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-hover-white w3-theme-d2" href= "javascript:void(0);" onclick="openNav()"><i class="fa fa-bars"></i></a> <a href="#" class="w3-bar-item w3-button w3-teal"> <i class="fa fa-home w3-margin-right"></i>Biểu tượng</a> <a href="#team" class="w3-bar-item w3-button w3-hide-small w3 -hover-white">Nhóm</a> <a href="#work" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Công việc</a> <a href ="#pricing" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Giá</a> <a href="#contact" class="w3-bar-item w3 -button w3-hide-small w3-hover-white">Liên hệ</a> <div class="w3-dropdown-hover w3-hide-small"> <button class="w3-button" title="Thông báo" >Thả xuống <i class="fa fa-caret-down"></i></button> <div class="w3-dropdown-content w3-card-4 w3-bar-block"> <a href=" #" class="w3-bar-item w3-button">Liên kết</a> <a href="#" class="w3-bar-item w3-button">Liên kết</a> <a href=" #" class="w3-bar-item w3-button">Liên kết</a> </div> </div> <a href="#" class="w3-bar-item w3-button w3-hide- small w3-right w3-hover-teal" title="Search"><i class="fa fa-search"></i></a> </div> <!-- Thanh điều hướng trên màn hình nhỏ --> <div id="navDemo" class="w3-bar-block w3-theme-d2 w3-hide w3-hide-large w3-hide-medium"> <a href="#team" class="w3-bar- item w3-button">Nhóm</a> <a href="#work" class="w3-bar-item w3-button">Công việc</a> <a href="#pricing" class="w3- bar-item w3-button">Giá</a> <a href="#contact" class="w3-bar-item w3-button">Liên hệ</a> <a href="#" class="w3 -bar-item w3-button">Tìm kiếm</a> </div> </div> <!-- Tiêu đề hình ảnh --> <div class="w3-display-container w3-animate-opacity"> <img src="/w3images/sailboat.jpg" alt="boat" style="width:100%;min-height:350px;max-height:600px;"> <div class="w3-container w3-display-bottomleft w3-margin-bottom"> <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-xlarge w3-theme w3-hover-teal" title=" Đi tới W3.CSS">TÌM HIỂU W3.CSS</button> </div> </div> <!-- Modal --> <div id="id01" class="w3-modal"> <div class= "w3-modal-content w3-card-4 w3-animate-top"> <header class="w3-container w3-teal w3-display-container"> <span onclick="document.getElementById('id01'). style.display='none'" class="w3-button w3-teal w3-display-topright"><i class="fa fa-remove"></i></span> <h4>Ôi trời! Chúng tôi vừa cho bạn xem một phương thức..</h4> <h5>Bởi vì chúng tôi có thể <i class="fa fa-smile-o"></i></h5> </header> <div class="w3- container"> <p>Tuyệt nhỉ? Ok, đùa thế đủ rồi..</p> <p>Hãy truy cập <a class="w3-text-teal" href="/w3css/default.asp">Hướng dẫn W3.CSS</a> của chúng tôi để tìm hiểu thêm !</p> </div> <footer class="w3-container w3-teal"> <p>Chân trang phương thức</p> </footer> </div> </div> <!-- Team Container - -> <div class="w3-container w3-padding-64 w3-center" id="team"> <h2>NHÓM CỦA CHÚNG TÔI</h2> <p>Gặp gỡ nhóm - những chú chuột văn phòng của chúng tôi:</p> < div class="w3-row"><br> <div class="w3-quarter"> <img src="/w3images/avatar.jpg" alt="Boss" style="width:45%" class=" w3-circle w3-hover-opacity"> <h3>Johnny Walker</h3> <p>Nhà thiết kế web</p> </div> <div class="w3-quarter"> <img src="/w3images/ avatar.jpg" alt="Boss" style="width:45%" class="w3-circle w3-hover-opacity"> <h3>Rebecca Flex</h3> <p>Hỗ trợ</p> </div > <div class="w3-quarter"> <img src="/w3images/avatar.jpg" alt="Boss" style="width:45%" class="w3-circle w3-hover-opacity"> < h3>Jan Ringo</h3> <p>Ông chủ</p> </div> <div class="w3-quarter"> <img src="/w3images/avatar.jpg" alt="Boss" style= "width:45%" class="w3-circle w3-hover-opacity"> <h3>Kai Ringo</h3> <p>Trình sửa lỗi</p> </div> </div> </div> <! -- Hàng công việc --> <div class="w3-row-padding w3-padding-64 w3-theme-l1" id="work"> <div class="w3-quarter"> <h2>Công việc của chúng tôi< /h2> <p>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. Bạn aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ngoại trừ tội lỗi thường xảy ra trong trường hợp không có ý kiến, không phải là thủ phạm chính thức deserunt mollit anim id est labum.</p> </div> <div class="w3-quarter"> <div class="w3-card w3-white"> <img src="/w3images/snow.jpg" alt="Snow" style="width:100%"> <div class="w3-container"> <h3>Khách hàng 1</h3> <h4>Giao dịch< /h4> <p>Blabblabla</p> <p>Blabblabla</p> <p>Blabblabla</p> <p>Blabblabla</p> </div> </div> </div> <div lớp ="w3-quarter"> <div class="w3-card w3-white"> <img src="/w3images/lights.jpg" alt="Lights" style="width:100%"> <div class= "w3-container"> <h3>Khách hàng 2</h3> <h4>Giao dịch</h4> <p>Blabblabla</p> <p>Blabblabla</p> <p>Blabblabla</p> <p> Blablabla</p> </div> </div> </div> <div class="w3-quarter"> <div class="w3-card w3-white"> <img src="/w3images/mountains. jpg" alt="Mountains" style="width:100%"> <div class="w3-container"> <h3>Khách hàng 3</h3> <h4>Giao dịch</h4> <p>Blablabla</p > <p>Blabblabla</p> <p>Blabblabla</p> <p>Blabblabla</p> </div> </div> </div> </div> <!-- Container --> < div class="w3-container" style="position:relative"> <a onclick="w3_open()" class="w3-button w3-xlarge w3-circle w3-teal" style="position:absolute;top: -28px;right:24px">+</a> </div> <!-- Hàng giá --> <div class="w3-row-padding w3-center w3-padding-64" id="pricing" > <h2>GIÁ</h2> <p>Chọn gói giá phù hợp với nhu cầu của bạn.</p><br> <div class="w3-third w3-margin-bottom"> <ul class="w3- ul w3-border w3-hover-shadow"> <li class="w3-theme"> <p class="w3-xlarge">Cơ bản</p> </li> <li class="w3-padding-16 "><b>10GB</b> Dung lượng</li> <li class="w3-padding-16"><b>10</b> Email</li> <li class="w3-padding-16 "><b>10</b> Miền</li> <li class="w3-padding-16"><b>Hỗ trợ vô tận</b></li> <li class="w3-padding-16 "> <h2 class="w3-wide"><i class="fa fa-usd"></i> 10</h2> <span class="w3-opacity">mỗi tháng</span> </ li> <li class="w3-theme-l5 w3-padding-24"> <button class="w3-button w3-teal w3-padding-large"><i class="fa fa-check"></ i> Đăng ký</button> </li> </ul> </div> <div class="w3-third w3-margin-bottom"> <ul class="w3-ul w3-border w3-hover- Shadow"> <li class="w3-theme-l2"> <p class="w3-xlarge">Pro</p> </li> <li class="w3-padding-16"><b>25GB </b> Bộ nhớ</li> <li class="w3-padding-16"><b>25</b> Email</li> <li class="w3-padding-16"><b>25 </b> Tên miền</li> <li class="w3-padding-16"><b>Hỗ trợ vô tận</b></li> <li class="w3-padding-16"> <h2 class= "w3-wide"><i class="fa fa-usd"></i> 25</h2> <span class="w3-opacity">mỗi tháng</span> </li> <li class= "w3-theme-l5 w3-padding-24"> <button class="w3-button w3-teal w3-padding-large"><i class="fa fa-check"></i> Đăng ký</ nút> </li> </ul> </div> <div class="w3-third w3-margin-bottom"> <ul class="w3-ul w3-border w3-hover-shadow"> <li lớp ="w3-theme"> <p class="w3-xlarge">Cao cấp</p> </li> <li class="w3-padding-16"><b>50GB</b> Dung lượng</li > <li class="w3-padding-16"><b>50</b> Email</li> <li class="w3-padding-16"><b>50</b> Tên miền</li > <li class="w3-padding-16"><b>Hỗ trợ vô tận</b></li> <li class="w3-padding-16"> <h2 class="w3-wide"><i class="fa fa-usd"></i> 50</h2> <span class="w3-opacity">mỗi tháng</span> </li> <li class="w3-theme-l5 w3- đệm-24"> <button class="w3-button w3-teal w3-padding-large"><i class="fa fa-check"></i> Đăng ký</button> </li> </ ul> </div> </div> <!-- Vùng chứa liên hệ --> <div class="w3-container w3-padding-64 w3-theme-l5" id="contact"> <div class="w3 -row"> <div class="w3-col m5"> <div class="w3-padding-16"><span class="w3-xlarge w3-border-teal w3-bottombar">Liên hệ với chúng tôi</span ></div> <h3>Địa chỉ</h3> <p>Hãy ghé qua để uống một tách cà phê hoặc bất cứ thứ gì.</p> <p><i class="fa fa-map-marker w3-text-teal w3-xlarge"></i> Chicago, Hoa Kỳ</p> <p><i class="fa fa-phone w3-text-teal w3-xlarge"></i> +00 1515151515</p> < p><i class="fa fa-envelope-o w3-text-teal w3-xlarge"></i> test@test.com</p> </div> <div class="w3-col m7" > <form class="w3-container w3-card-4 w3-padding-16 w3-white" action="/action_page.php" target="_blank"> <div class="w3-section"> <nhãn> Tên</label> <input class="w3-input" type="text" name="Name" bắt buộc> </div> <div class="w3-section"> <label>Email</label> <input class="w3-input" type="text" name="Email" bắt buộc> </div> <div class="w3-section"> <label>Tin nhắn</label> <input class="w3-input" type="text" name="Message" cần thiết> </div> <input class="w3-check" type="checkbox" đã kiểm tra name="Thích"> <label>Tôi thích nó!</label> <button type="submit" class="w3-button w3-right w3-theme">Gửi</button> </form> </div> </div> </div> <!-- Hình ảnh vị trí/bản đồ - -> <img src="/w3images/map.jpg" class="w3-image w3-greyscale-min" style="width:100%;"> <!-- Chân trang --> <footer class="w3 -container w3-padding-32 w3-theme-d1 w3-center"> <h4>Theo dõi chúng tôi</h4> <a class="w3-button w3-large w3-teal" href="javascript:void(0) " title="Facebook"><i class="fa fa-facebook"></i></a> <a class="w3-button w3-large w3-teal" href="javascript:void(0) " title="Twitter"><i class="fa fa-twitter"></i></a> <a class="w3-button w3-large w3-teal" href="javascript:void(0) " title="Google +"><i class="fa fa-google-plus"></i></a> <a class="w3-button w3-large w3-teal" href="javascript:void (0)" title="Google +"><i class="fa fa-instagram"></i></a> <a class="w3-button w3-large w3-teal w3-hide-small" href="javascript:void(0)" title="Linkedin"><i class="fa fa-linkedin"></i></a> <p>Được cung cấp bởi <a href="https://www .example.com.vn/w3css/default.asp" target="_blank">w3.css</a></p> <div style="position:relative;bottom:100px;z-index:1;" class="w3-tooltip w3-right"> <span class="w3-text w3-padding w3-teal w3-hide-small">Đi lên trên cùng</span> <a class="w3-button w3-theme " href="#myPage"><span class="w3-xlarge"> <i class="fa-chevron-circle-up"></i></span></a> </div> < /footer> <script> // Tập lệnh cho chức năng điều hướng bên w3_open() { var x = document.getElementById("mySidebar"); x.style.width = "300px"; x.style.paddingTop = "10%"; x.style.display = "chặn"; } // Đóng chức năng điều hướng bên w3_close() { document.getElementById("mySidebar").style.display = "none"; } // Được sử dụng để chuyển đổi menu trên màn hình nhỏ hơn khi nhấp vào nút menu function openNav() { var x = document.getElementById("navDemo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> </body> </html>