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=Poppins"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min .css"> <style> body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif} body {font-size: 16px;} img {margin-bottom: -8px;} .mySlides {display: none;} </style> </head> <body class="w3-content w3-black" style="max-width:1500px;"> <!-- Tiêu đề có trình chiếu --> < header class="w3-display-container w3-center"> <button class="w3-button w3-block w3-green w3-hide-large w3-hide-medium" onclick="document.getElementById('download') .style.display='block'">Tải xuống <i class="fa fa-android"></i> <i class="fa fa-apple"></i> <i class="fa fa-windows "></i></button> <div class="mySlides w3-animate-opacity"> <img class="w3-image" src="/w3images/app.jpg" alt="Hình ảnh 1" style= "min-width:500px" width="1500" Height="1000"> <div class="w3-display-left w3-padding w3-hide-small" style="width:35%"> <div class= "w3-black w3-opacity w3-hover-opacity-off w3-padding-large w3-round-large"> <h1 class="w3-xlarge">Chụp ảnh bằng ứng dụng của chúng tôi</h1> <hr class=" w3-opacity"> <p>Trả góp cực kỳ đơn giản: miễn phí</p> <p><button class="w3-button w3-block w3-green w3-round" onclick="document.getElementById('download' ).style.display='block'">Tải xuống <i class="fa fa-android"></i> <i class="fa fa-apple"></i> <i class="fa fa- windows"></i></button></p> </div> </div> </div> <div class="mySlides w3-animate-opacity"> <img class="w3-image" src ="/w3images/app2.jpg" alt="Hình ảnh 2" style="min-width:500px" width="1500" Height="1000"> <div class="w3-display-left w3-padding w3- ẩn-small" style="width:35%"> <div class="w3-black w3-opacity w3-hover-opacity-off w3-padding-large w3-round-large"> <h1 class="w3- xlarge w3-text-red"><b>CLICK!</b> Nhanh chóng và dễ dàng</h1> <hr class="w3-opacity"> <p>Chọn từ hàng nghìn tính năng</p> <p>< nút class="w3-button w3-block w3-red w3-round" onclick="document.getElementById('download').style.display='block'">Tải xuống <i class="fa fa-android"> </i> <i class="fa fa-apple"></i> <i class="fa fa-windows"></i></button></p> </div> </div> </div> <div class="mySlides w3-animate-opacity"> <img class="w3-image" src="/w3images/app4.jpg" alt="Hình ảnh 3" style="min-width:500px " width="1500" Height="1000"> <div class="w3-display-left w3-padding w3-hide-small" style="width:35%"> <div class="w3-black w3- opacity w3-hover-opacity-off w3-padding-large w3-round-large"> <h1 class="w3-xlarge">Thiết kế thông minh</h1> <hr class="w3-opacity"> <p>Tùy chỉnh chụp ảnh khi bạn di chuyển</p> <p><button class="w3-button w3-block w3-indigo w3-round" onclick="document.getElementById('download').style.display='block'"> Tải xuống <i class="fa fa-android"></i> <i class="fa fa-apple"></i> <i class="fa fa-windows"></i></button> </p> </div> </div> </div> <a class="w3-button w3-black w3-display-right w3-margin-right w3-round w3-hide-small w3-hover-light -grey" onclick="plusDivs(1)">Tham quan <i class="fa fa-angle-right"></i></a> <a class="w3-button w3-block w3-black w3 -hide-large w3-hide-medium" onclick="plusDivs(1)">Tham quan <i class="fa fa-angle-right"></i></a> </header> <!-- Phần Ứng dụng --> <div class="w3-padding-64 w3-white"> <div class="w3-row-padding"> <div class="w3-col l8 m6"> <h1 class=" w3-jumbo"><b>Ứng dụng</b></h1> <h1 class="w3-xxxlarge w3-text-green"><b>Tại sao nên mua nó?</b></h1> <p ><span class="w3-xlarge">Chụp ảnh như dân chuyên nghiệp.</span> Bạn nên mua ứng dụng này vì 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ể cảm thấy đau buồn khi bị khiển trách vì cảm thấy khó chịu vì điều đó có thể khiến bạn cảm thấy khó chịu.</p> <button class="w3-button w3-light-grey w3-padding-large w3-section w3-hide-small" onclick= "document.getElementById('download').style.display='block'"> <i class="fa fa-download"></i> Tải xuống ứng dụng </button> <p>Có sẵn cho <i class=" fa fa-android w3-xlarge w3-text-green"></i> <i class="fa fa-apple w3-xlarge"></i> <i class="fa fa-windows w3-xlarge w3- text-blue"></i></p> </div> <div class="w3-col l4 m6"> <img src="/w3images/img_app.jpg" class="w3-image w3-right w3-hide-small" width="335" Height="471"> <div class="w3-center w3-hide-large w3-hide-medium"> <button class="w3-button w3-block w3- đệm-large" onclick="document.getElementById('download').style.display='block'"> <i class="fa fa-download"></i> Tải xuống ứng dụng </button> <img src= "/w3images/img_app.jpg" class="w3-image w3-margin-top" width="335" Height="471"> </div> </div> </div> </div> <!- - Phương thức --> <div id="download" class="w3-modal w3-animate-opacity"> <div class="w3-modal-content" style="padding:32px"> <div class="w3 -container w3-white"> <i onclick="document.getElementById('download').style.display='none'" class="fa fa-remove w3-xlarge w3-button w3-transparent w3-right w3- xlarge"></i> <h2 class="w3-wide">TẢI XUỐNG</h2> <p>Tải xuống ứng dụng trong AppStore, Google Play hoặc Microsoft Store.</p> <i class="fa fa-android w3-large"></i> <i class="fa fa-apple w3-large"></i> <i class="fa fa-windows w3-large"></i> <p><input class="w3-input w3-border" type="text" placeholder="Nhập e-mail"></p> <button type="button" class="w3-button w3-block w3-padding-large w3 -red w3-margin-bottom" onclick="document.getElementById('download').style.display='none'">Tải xuống giả mạo</button> </div> </div> </div> <!- - Phần rõ ràng --> <div class="w3-padding-64 w3-light-grey"> <div class="w3-row-padding"> <div class="w3-col l4 m6"> <img class ="w3-image w3-round-large w3-hide-small w3-grayscale" src="/w3images/app5.jpg" alt="App" width="335" Height="471"> </div> < div class="w3-col l8 m6"> <h1 class="w3-jumbo"><b>Rõ ràng</b></h1> <h1 class="w3-xxxlarge w3-text-red"><b >Pixel, ai?</b></h1> <p><span class="w3-xlarge">Một cuộc cách mạng về độ phân giải.</span> Những bức ảnh sắc nét và rõ ràng với công cụ tạo ảnh tốt nhất thế giới, 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ể cảm thấy đau buồn khi bị khiển trách vì cảm giác khó chịu khi bị buộc tội vì lore eu fugiat nulla pariatur.</p> </div> </div> </div> <!-- Mục Tính năng --> <div class="w3-container w3-padding-64 w3-dark-grey w3-center"> <h1 class="w3-jumbo"><b>Tính năng</b></h1> <p>Ứng dụng này đúng là lorem ipsum.</ p> <div class="w3-row" style="margin-top:64px"> <div class="w3-col s3"> <i class="fa fa-bolt w3-text-orange w3-jumbo" ></i> <p>Nhanh</p> </div> <div class="w3-col s3"> <i class="fa fa-heart w3-text-red w3-jumbo"></i > <p>Được yêu thích</p> </div> <div class="w3-col s3"> <i class="fa fa-cam w3-text- yellow w3-jumbo"></i> <p> Rõ ràng</p> </div> <div class="w3-col s3"> <i class="fa fa-battery-full w3-text-green w3-jumbo"></i> <p>Power< /p> </div> </div> <div class="w3-row" style="margin-top:64px"> <div class="w3-col s3"> <i class="fa fa-diamond w3-text-white w3-jumbo"></i> <p>Sắc nét</p> </div> <div class="w3-col s3"> <i class="fa fa-cloud w3-text- màu xanh w3-jumbo"></i> <p>Đám mây</p> </div> <div class="w3-col s3"> <i class="fa fa-globe w3-text-amber w3-jumbo "></i> <p>Toàn cầu</p> </div> <div class="w3-col s3"> <i class="fa fa-hdd-o w3-text-cyan w3-jumbo"> </i> <p>Bộ nhớ</p> </div> </div> <div class="w3-row" style="margin-top:64px"> <div class="w3-col s3"> <i class="fa fa-user w3-text-sand w3-jumbo"></i> <p>An toàn</p> </div> <div class="w3-col s3"> <i class= "fa fa-shield w3-text-orange w3-jumbo"></i> <p>Ổn định</p> </div> <div class="w3-col s3"> <i class="fa fa- wifi w3-text-grey w3-jumbo"></i> <p>Đã kết nối</p> </div> <div class="w3-col s3"> <i class="fa fa-image w3-text -pink w3-jumbo"></i> <p>HD</p> </div> </div> </div> <!-- Phần định giá --> <div class="w3-padding-64 w3-center w3-white"> <h1 class="w3-jumbo"><b>Giá</b></h1> <p class="w3-large">Chọn gói giá phù hợp với nhu cầu của bạn.< /p> <div class="w3-row-padding" style="margin-top:64px"> <div class="w3-half w3-section"> <ul class="w3-ul w3-card w3- hover-shadow"> <li class="w3-dark-grey w3-xlarge w3-padding-32">Cơ bản</li> <li class="w3-padding-16"><b>250</b> Ảnh</li> <li class="w3-padding-16"><b>10</b> Tính năng</li> <li class="w3-padding-16"><b>Không</b> Quảng cáo</li> <li class="w3-padding-16"><b>Giờ làm việc</b> Hỗ trợ</li> <li class="w3-padding-16"> <h2 class="w3- opacity">$ 25</h2> </li> <li class="w3-light-grey w3-padding-24"> <button class="w3-button w3-black w3-padding-large" onclick=" document.getElementById('download').style.display='block'"><i class="fa fa-download"></i> Tải xuống</button> </li> </ul> </div> <div class="w3-half w3-section"> <ul class="w3-ul w3-card w3-hover-shadow"> <li class="w3-red w3-xlarge w3-padding-32">Cao cấp </li> <li class="w3-padding-16"><b>1000</b> Ảnh</li> <li class="w3-padding-16"><b>50</b> Tính năng </li> <li class="w3-padding-16"><b>Không</b> Quảng cáo</li> <li class="w3-padding-16"><b>Hỗ trợ vô tận</b> </li> <li class="w3-padding-16"> <h2 class="w3-opacity">$ 99</h2> </li> <li class="w3-light-grey w3-padding- 24"> <button class="w3-button w3-black w3-padding-large" onclick="document.getElementById('download').style.display='block'"> <i class="fa fa-download "></i> Tải xuống</button> </li> </ul> </div> </div> <br> </div> <!-- Footer --> <footer class="w3-container w3-padding-32 w3-light-grey w3-center w3-xlarge"> <div class="w3-section"> <i class="fa fa-facebook-official w3-hover-opacity"></i> <i class="fa fa-instagram w3-hover-opacity"></i> <i class="fa fa-snapchat w3-hover-opacity"></i> <i class="fa fa-pinterest- p w3-hover-opacity"></i> <i class="fa fa-twitter w3-hover-opacity"></i> <i class="fa fa-linkedin w3-hover-opacity"></i> i> </div> <p class="w3-medium">Được hỗ trợ bởi <a href="https://www.example.com.vn/w3css/default.asp" target="_blank" class="w3-hover -text-green">w3.css</a></p> </footer> <script> // Trình chiếu var slideIndex = 1; showDivs(slideIndex); hàm plusDivs(n) { showDivs(slideIndex += n); } hàm showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "không có"; } x[slideIndex-1].style.display = "chặn"; } </script> </body> </html>