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=Montserrat"> <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: "Montserrat", sans-serif} .w3-row-padding img {margin-bottom: 12px} .bgimg { vị trí nền: trung tâm; lặp lại nền: không lặp lại; kích thước nền: bìa; hình nền: url('/w3images/profile_girl.jpg'); chiều cao tối thiểu: 100%; } </style> </head> <body> <!-- Thanh bên có hình ảnh --> <nav class="w3-sidebar w3-hide-medium w3-hide-small" style="width:40%"> <div class="bgimg"></div> </nav> <!-- Thanh bên ẩn (hiển thị khi nhấp vào biểu tượng menu)--> <nav class="w3-sidebar w3-black w3-animate-right w3 -xxlarge" style="display:none;padding-top:150px;right:0;z-index:2" id="mySidebar"> <a href="javascript:void(0)" onclick="closeNav() " class="w3-button w3-black w3-xxxlarge w3-display-topright" style="padding:0 12px;"> <i class="fa fa-remove"></i> </a> <div class="w3-bar-block w3-center"> <a href="#" class="w3-bar-item w3-button w3-text-grey w3-hover-black" onclick="closeNav()"> Trang chủ</a> <a href="#portfolio" class="w3-bar-item w3-button w3-text-grey w3-hover-black" onclick="closeNav()">Danh mục đầu tư</a> <a href="#about" class="w3-bar-item w3-button w3-text-grey w3-hover-black" onclick="closeNav()">Giới thiệu về</a> <a href="#contact" lớp ="w3-bar-item w3-button w3-text-grey w3-hover-black" onclick="closeNav()">Liên hệ</a> </div> </nav> <!-- Nội dung trang -- > <div class="w3-main w3-padding-large" style="margin-left:40%"> <!-- Biểu tượng menu để mở thanh bên --> <span class="w3-button w3-top w3 -trắng w3-xxlarge w3-text-grey w3-hover-text-black" style="width:auto;right:0;" onclick="openNav()"><i class="fa fa-bars"></i></span> <!-- Tiêu đề --> <header class="w3-container w3-center" style=" đệm:128px 16px" id="home"> <h1 class="w3-jumbo"><b>Jane Doe</b></h1> <p>Nhiếp ảnh gia và nhà thiết kế web.</p> <img src= "/w3images/profile_girl.jpg" class="w3-image w3-hide-large w3-hide-small w3-round" style="display:block;width:60%;margin:auto;"> <img src= "/w3images/profile_girl.jpg" class="w3-image w3-hide-large w3-hide-medium w3-round" width="1000" Height="1333"> <button class="w3-button w3-light -grey w3-padding-large w3-margin-top"> <i class="fa fa-download"></i> Tải xuống sơ yếu lý lịch </button> </header> <!-- Phần danh mục đầu tư --> <div class="w3-padding-32 w3-content" id="portfolio"> <h2 class="w3-text-grey">Danh mục đầu tư của tôi</h2> <hr class="w3-opacity"> <!-- Lưới dành cho ảnh --> <div class="w3-row-padding" style="margin:0 -16px"> <div class="w3-half"> <img src="/w3images/wedding.jpg" style ="width:100%"> <img src="/w3images/rocks.jpg" style="width:100%"> <img src="/w3images/sailboat.jpg" style="width:100%"> </div> <div class="w3-half"> <img src="/w3images/underwater.jpg" style="width:100%"> <img src="/w3images/chef.jpg" style=" width:100%"> <img src="/w3images/wedding.jpg" style="width:100%"> <img src="/w3images/p6.jpg" style="width:100%"> </ div> <!-- Kết thúc lưới ảnh --> </div> <!-- Kết thúc phần Portfolio --> </div> <!-- Giới thiệu về phần --> <div class="w3-content w3-justify w3-text-grey w3-padding-32" id="about"> <h2>Giới thiệu</h2> <hr class="w3-opacity"> <p>Một số nội dung về tôi. Một số văn bản về tôi. 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> <h3 class="w3-padding-16">Kỹ năng của tôi</h3> <p class="w3-wide">Nhiếp ảnh</p> <div class="w3-light-grey"> < div class="w3-container w3-center w3-padding-small w3-dark-grey" style="width:95%">95%</div> </div> <p class="w3-wide"> Thiết kế Web</p> <div class="w3-light-grey"> <div class="w3-container w3-center w3-padding-small w3-dark-grey" style="width:85%">85 %</div> </div> <p class="w3-wide">Photoshop</p> <div class="w3-light-grey"> <div class="w3-container w3-center w3-padding -small w3-dark-grey" style="width:80%">80%</div> </div><br> <div class="w3-row w3-center w3-dark-grey w3-padding- 16 w3-section"> <div class="w3-quarter w3-section"> <span class="w3-xlarge">14+</span><br> Đối tác </div> <div class="w3- quý w3-section"> <span class="w3-xlarge">55+</span><br> Dự án đã hoàn thành </div> <div class="w3-quarter w3-section"> <span class="w3 -xlarge">89+</span><br> Khách hàng hài lòng </div> <div class="w3-quarter w3-section"> <span class="w3-xlarge">150+</span><br > Cuộc họp </div> </div> <button class="w3-button w3-light-grey w3-padding-large w3-section"> <i class="fa fa-download"></i> Tải xuống Sơ yếu lý lịch </button> <!-- Lời chứng thực --> <h3 class="w3-padding-24">Danh tiếng của tôi</h3> <img src="/w3images/avatar_smoke.jpg" alt="Avatar" class=" w3-left w3-circle w3-margin-right" style="width:80px"> <p><span class="w3-large w3-text-black w3-margin-right">Chandler Bing.</span> Nhà thiết kế web.</p> <p>Jane Doe thật tuyệt vời. Tôi rất vui khi được gặp cô ấy!</p><br> <img src="/w3images/bandmember.jpg" alt="Avatar" class="w3-left w3-circle w3-margin-right" style= "width:80px"> <p><span class="w3-large w3-text-black w3-margin-right">Chris Fox.</span> Giám đốc điều hành tại Mighty Schools.</p> <p>Jane Doe đã cứu chúng tôi khỏi thảm họa web.</p><br> <img src="/w3images/avatar_g2.jpg" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width :80px"> <p><span class="w3-large w3-text-black w3-margin-right">Rebecca Flex.</span> Giám đốc điều hành tại Công ty.</p> <p>Không ai giỏi hơn Jane Doe.</p><br> <!-- Lưới bảng giá --> <h3 class="w3-padding-16">Giá của tôi</h3> <div class="w3-row-padding" style="margin:0 -16px"> <div class="w3-half w3-margin-bottom"> <ul class="w3-ul w3-center w3-card w3-hover-shadow"> <li class= "w3-dark-grey w3-xlarge w3-padding-32">Cơ bản</li> <li class="w3-padding-16">Thiết kế web</li> <li class="w3-padding-16" >Chụp ảnh</li> <li class="w3-padding-16">Bộ nhớ 5GB</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-white w3-padding-large w3-hover-black">Đăng ký</button> </li> </ul> </div> <div class="w3-half" > <ul class="w3-ul w3-center w3-card w3-hover-shadow"> <li class="w3-black 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-padding-24"> <button class="w3-button w3-white w3-padding-large w3-hover-black">Đăng ký< /button> </li> </ul> </div> <!-- Kết thúc lưới/bảng giá --> </div> <!-- Kết thúc phần giới thiệu --> </div> <!-- Liên hệ Phần --> <div class="w3-padding-32 w3-content w3-text-grey" id="contact" style="margin-bottom:64px"> <h2>Liên hệ với tôi</h2> <hr class ="w3-opacity"> <div class="w3-section"> <p><i class="fa fa-map-marker fa-fw w3-xxlarge w3-margin-right"></i> Chicago, US</p> <p><i class="fa fa-phone fa-fw w3-xxlarge w3-margin-right"></i> Điện thoại: +00 151515</p> <p><i class= "fa fa-envelope fa-fw w3-xxlarge w3-margin-right"> </i> Email: mail@mail.com</p> </div> <!-- Hình ảnh vị trí/bản đồ --> < img src="/w3images/map.jpg" class="w3-image w3-greyscale" style="width:100%;margin:32px 0"> <p>Hãy liên hệ với chúng tôi. Gửi tin nhắn cho tôi:</p> <form action="/action_page.php" target="_blank"> <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Name" require name="Name"></p> <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Email" bắt buộc name=" Email"></p> <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Chủ đề" tên bắt buộc="Chủ đề"></p> <p ><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Message" bắt buộc name="Message"></p> <p> <button class="w3-button w3-light-grey w3-padding-large" type="submit"> <i class="fa fa-paper-plane"></i> GỬI TIN NHẮN </button> </p> </form> <! -- Phần liên hệ cuối --> </div> <!-- Footer --> <footer class="w3-container w3-padding-64 w3-light-grey w3-center w3-opacity w3-xlarge" style= "margin:-24px"> <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> <p class="w3-medium">Được cung cấp bởi <a href="https: //www.example.com.vn/w3css/default.asp" target="_blank" class="w3-hover-text-green">w3.css</a></p> <!-- Cuối trang -- > </footer> <!-- NỘI DUNG TRANG KẾT THÚC --> </div> <script> // Mở và đóng chức năng thanh bên openNav() { document.getElementById("mySidebar").style.width = "60%" ; document.getElementById("mySidebar").style.display = "chặn"; } function closeNav() { document.getElementById("mySidebar").style.display = "none"; } </script> </body> </html>