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"> <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,h6 {font-family: "Raleway", sans-serif} </style> </head> <body class="w3-light- màu xám w3-content" style="max-width:1600px"> <!-- Thanh bên/menu --> <nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z- chỉ số:3;chiều rộng:300px;" id="mySidebar"><br> <div class="w3-container"> <a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo w3-padding w3-hover-grey" title="close menu"> <i class="fa fa-remove"></i> </a> <img src="/w3images/avatar_g2.jpg" style="width:45 %;" class="w3-round"><br><br> <h4><b>PORTFOLIO</b></h4> <p class="w3-text-grey">Mẫu của W3.CSS</p> </div> <div class="w3-bar-block"> <a href="#portfolio" onclick="w3_close()" class="w3-bar-item w3-button w3-padding w3-text-teal "><i class="fa fa-th-large fa-fw w3-margin-right"></i>PORTFOLIO</a> <a href="#about" onclick="w3_close()" class=" w3-bar-item w3-button w3-padding"><i class="fa fa-user fa-fw w3-margin-right"></i> GIỚI THIỆU</a> <a href="#contact" onclick ="w3_close()" class="w3-bar-item w3-button w3-padding"><i class="fa fa-envelope fa-fw w3-margin-right"></i>LIÊN HỆ</a> </div> <div class="w3-panel w3-large"> <i class="fa fa-facebook-official w3-hover-opacity"></i> <i class="fa fa-instagram w3- di chuột-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> </div> </nav> < !-- Hiệu ứng lớp phủ khi mở thanh bên trên màn hình nhỏ --> <div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title=" đóng menu bên" id="myOverlay"></div> <!-- !NỘI DUNG TRANG! --> <div class="w3-main" style="margin-left:300px"> <!-- Tiêu đề --> <header id="portfolio"> <a href="#"><img src= "/w3images/avatar_g2.jpg" style="width:65px;" class="w3-circle w3-right w3-margin w3-hide-large w3-hover-opacity"></a> <span class="w3-button w3-hide-large w3-xxlarge w3-hover-text- grey" onclick="w3_open()"><i class="fa fa-bars"></i></span> <div class="w3-container"> <h1><b>Danh mục đầu tư của tôi</b ></h1> <div class="w3-section w3-bottombar w3-padding-16"> <span class="w3-margin-right">Bộ lọc:</span> <button class="w3-button w3 -black">TẤT CẢ</button> <button class="w3-button w3-white"><i class="fa fa-diamond w3-margin-right"></i>Thiết kế</button> <lớp nút ="w3-button w3-white w3-hide-small"><i class="fa fa-photo w3-margin-right"></i>Ảnh</button> <button class="w3-button w3- trắng w3-hide-small"><i class="fa fa-map-pin w3-margin-right"></i>Nghệ thuật</button> </div> </div> </header> <!- - Lưới ảnh đầu tiên--> <div class="w3-row-padding"> <div class="w3-third w3-container w3-margin-bottom"> <img src="/w3images/mountains.jpg" alt ="Na Uy" style="width:100%" class="w3-hover-opacity"> <div class="w3-container w3-white"> <p><b>Lorem Ipsum</b></p > <p>Praesent tincidunt sed Tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue grafida diam non fringilla.</p> </div> </div> <div class="w3-third w3-container w3-margin-bottom"> <img src= "/w3images/lights.jpg" alt="Na Uy" style="width:100%" class="w3-hover-opacity"> <div class="w3-container w3-white"> <p><b> Lorem Ipsum</b></p> <p>Praesent tincidunt sed Tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue grafida diam non fringilla.</p> </div> </div> <div class="w3-third w3-container"> <img src="/w3images/nature .jpg" alt="Na Uy" style="width:100%" class="w3-hover-opacity"> <div class="w3-container w3-white"> <p><b>Lorem Ipsum</b ></p> <p>Praesent tincidunt sed Tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue graida diam non fringilla.</p> </div> </div> </div> <!-- Lưới ảnh thứ hai--> <div class="w3-row -padding"> <div class="w3-third w3-container w3-margin-bottom"> <img src="/w3images/p1.jpg" alt="Na Uy" style="width:100%" class=" w3-hover-opacity"> <div class="w3-container w3-white"> <p><b>Lorem Ipsum</b></p> <p>Praesent tincidunt sed Tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue grafida diam non fringilla.</p> </div> </div> <div class="w3-third w3-container w3-margin-bottom"> <img src= "/w3images/p2.jpg" alt="Na Uy" style="width:100%" class="w3-hover-opacity"> <div class="w3-container w3-white"> <p><b> Lorem Ipsum</b></p> <p>Praesent tincidunt sed Tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue grafida diam non fringilla.</p> </div> </div> <div class="w3-third w3-container"> <img src="/w3images/p3 .jpg" alt="Na Uy" style="width:100%" class="w3-hover-opacity"> <div class="w3-container w3-white"> <p><b>Lorem Ipsum</b ></p> <p>Praesent tincidunt sed Tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue grafida diam non fringilla.</p> </div> </div> </div> <!-- Phân trang --> <div class="w3-center w3- đệm-32"> <div class="w3-bar"> <a href="#" class="w3-bar-item w3-button w3-hover-black">`</a> <a href=" #" class="w3-bar-item w3-black w3-button">1</a> <a href="#" class="w3-bar-item w3-button w3-hover-black">2< /a> <a href="#" class="w3-bar-item w3-button w3-hover-black">3</a> <a href="#" class="w3-bar-item w3- nút w3-hover-black">4</a> <a href="#" class="w3-bar-item w3-button w3-hover-black">»</a> </div> </div > <!-- Hình ảnh của tôi --> <div class="w3-row-padding w3-padding-16" id="about"> <div class="w3-col m6"> <img src="/ w3images/avatar_g.jpg" alt="Tôi" style="width:100%"> </div> <div class="w3-col m6"> <img src="/w3images/me2.jpg" alt=" Tôi" style="width:100%"> </div> </div> <div class="w3-container w3-padding-large" style="margin-bottom:32px"> <h4><b>Giới thiệu Tôi</b></h4> <p>Chỉ có tôi, tôi và tôi, khám phá vũ trụ của những điều chưa biết. Tôi có một trái tim yêu thương và quan tâm đến blog lorem ipsum và mauris neque quam. Tôi muốn chia sẻ thế giới của tôi với bạn. Praesent tincidunt sed Tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gradida diam non fringilla. Praesent tincidunt sed Tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue grafida diam non fringilla.</p> <hr> <h4>Kỹ năng kỹ thuật</h4> <!-- Thanh tiến bộ / Kỹ năng --> <p>Nhiếp ảnh</p > <div class="w3-grey"> <div class="w3-container w3-dark-grey w3-padding w3-center" style="width:95%">95%</div> </div> <p>Thiết kế web</p> <div class="w3-grey"> <div class="w3-container w3-dark-grey w3-padding w3-center" style="width:85%">85% </div> </div> <p>Photoshop</p> <div class="w3-grey"> <div class="w3-container w3-dark-grey w3-padding w3-center" style="width :80%">80%</div> </div> <p> <button class="w3-button w3-dark-grey w3-padding-large w3-margin-top w3-margin-bottom"> <i class="fa fa-download w3-margin-right"></i>Tải xuống sơ yếu lý lịch </button> </p> <hr> <h4>Tôi tính phí bao nhiêu</h4> <!-- Bảng giá -- > <div class="w3-row-padding" style="margin:0 -16px"> <div class="w3-third w3-margin-bottom"> <ul class="w3-ul w3-border w3- trắng w3-center w3-opacity w3-hover-opacity-off"> <li class="w3-black w3-xlarge w3-padding-32">Cơ bản</li> <li class="w3-padding-16" >Thiết kế web</li> <li class="w3-padding-16">Nhiếp ảnh</li> <li class="w3-padding-16">Bộ nhớ 1GB</li> <li class="w3-padding -16">Hỗ trợ qua thư</li> <li class="w3-padding-16"> <h2>$ 10</h2> <span class="w3-opacity">mỗi tháng</span> </li > <li class="w3-light-grey w3-padding-24"> <button class="w3-button w3-teal w3-padding-large w3-hover-black">Đăng ký</button> </li > </ul> </div> <div class="w3-third w3-margin-bottom"> <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity- off"> <li class="w3-teal w3-xlarge w3-padding-32">Pro</li> <li class="w3-padding-16">Thiết kế web</li> <li class="w3 -padding-16">Nhiếp ảnh</li> <li class="w3-padding-16">Bộ nhớ 50GB</li> <li class="w3-padding-16">Hỗ trợ vô tận</li> <li class ="w3-padding-16"> <h2>$ 25</h2> <span class="w3-opacity">mỗi tháng</span> </li> <li class="w3-light-grey w3- đệm-24"> <button class="w3-button w3-teal w3-padding-large w3-hover-black">Đăng ký</button> </li> </ul> </div> <div class= "w3-third"> <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off"> <li class="w3-black w3-xlarge w3-padding- 32">Cao cấp</li> <li class="w3-padding-16">Thiết kế web</li> <li class="w3-padding-16">Nhiếp ảnh</li> <li class="w3- đệm-16">Bộ nhớ không giới hạn</li> <li class="w3-padding-16">Hỗ trợ vô tận</li> <li class="w3-padding-16"> <h2>$ 25</h2> <span class="w3-opacity">mỗi tháng</span> </li> <li class="w3-light-grey w3-padding-24"> <button class="w3-button w3-teal w3- đệm-large w3-hover-black">Đăng ký</button> </li> </ul> </div> </div> </div> <!-- Phần liên hệ --> <div class=" w3-container w3-padding-large w3-grey"> <h4 id="contact"><b>Liên hệ với tôi</b></h4> <div class="w3-row-padding w3-center w3-padding -24" style="margin:0 -16px"> <div class="w3-third w3-dark-grey"> <p><i class="fa fa-envelope w3-xxlarge w3-text-light-grey "></i></p> <p>email@email.com</p> </div> <div class="w3-third w3-teal"> <p><i class="fa fa- đánh dấu bản đồ w3-xxlarge w3-text-light-grey"></i></p> <p>Chicago, Hoa Kỳ</p> </div> <div class="w3-third w3-dark-grey "> <p><i class="fa fa-phone w3-xxlarge w3-text-light-grey"></i></p> <p>512312311</p> </div> </div> <hr class="w3-opacity"> <form action="/action_page.php" target="_blank"> <div class="w3-section"> <label>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" started> </div> <button type="submit" class="w3-button w3-black w3-margin-bottom"><i class="fa fa-paper-plane w3- lề-right"></i>Gửi tin nhắn</button> </form> </div> <!-- Footer --> <footer class="w3-container w3-padding-32 w3-dark-grey" > <div class="w3-row-padding"> <div class="w3-third"> <h3>FOOTER</h3> <p>Praesent tincidunt sed Tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue grafida diam non fringilla.</p> <p>Được cung cấp bởi <a href="https://www.example.com.vn/w3css/default.asp" target="_blank ">w3.css</a></p> </div> <div class="w3-third"> <h3>BÀI ĐĂNG BLOG</h3> <ul class="w3-ul w3-hoverable"> < li class="w3-padding-16"> <img src="/w3images/workshop.jpg" class="w3-left w3-margin-right" style="width:50px"> <span class="w3- lớn">Lorem</span><br> <span>Sed mattis Nunc</span> </li> <li class="w3-padding-16"> <img src="/w3images/gondol.jpg" class ="w3-left w3-margin-right" style="width:50px"> <span class="w3-large">Ipsum</span><br> <span>Praes tinci sed</span> </li > </ul> </div> <div class="w3-third"> <h3>THẺ PHỔ BIẾN</h3> <p> <span class="w3-tag w3-black w3-margin-bottom">Du lịch </span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">New York</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom ">London</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">IKEA</span> <span class="w3-tag w3-grey w3-small w3-margin -bottom">Na Uy</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">DIY</span> <span class="w3-tag w3-grey w3-small w3 -margin-bottom">Ý tưởng</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">Em yêu</span> <span class="w3-tag w3-grey w3- nhỏ w3-margin-bottom">Gia đình</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">Tin tức</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">Quần áo</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">Mua sắm</span> <span class="w3-tag w3 -grey w3-small w3-margin-bottom">Thể thao</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">Trò chơi</span> </p> </div > </div> </footer> <div class="w3-black w3-center w3-padding-24">Đượ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></div> <!-- Nội dung trang cuối --> </div> <script> // Tập lệnh để mở và đóng thanh bên function 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"; } </script> </body> </html>