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} /* Đặt chiều rộng của thanh bên thành 120px */ .w3-sidebar {width: 120px;background: #222;} /* Thêm lề trái vào "nội dung trang" khớp với chiều rộng của thanh bên (120px) */ #main {margin-left: 120px} /* Xóa lề khỏi "nội dung trang" trên màn hình nhỏ */ @media only screen và (max-width: 600px) {#main {margin-left: 0}} </style> </ head> <body class="w3-black"> <!-- Thanh biểu tượng (Thanh bên - ẩn trên màn hình nhỏ) --> <nav class="w3-sidebar w3-bar-block w3-small w3-hide-small w3-center"> <!-- Ảnh đại diện ở góc trên bên trái --> <img src="/w3images/avatar_smoke.jpg" style="width:100%"> <a href="#" class="w3 -bar-item w3-button w3-padding-large w3-black"> <i class="fa fa-home w3-xxlarge"></i> <p>HOME</p> </a> <a href ="#about" class="w3-bar-item w3-button w3-padding-large w3-hover-black"> <i class="fa fa-user w3-xxlarge"></i> <p> GIỚI THIỆU </p> </a> <a href="#photos" class="w3-bar-item w3-button w3-padding-large w3-hover-black"> <i class="fa fa-eye w3- xxlarge"></i> <p> HÌNH ẢNH</p> </a> <a href="#contact" class="w3-bar-item w3-button w3-padding-large w3-hover-black"> <i class="fa fa-envelope w3-xxlarge"></i> <p>CONTACT</p> </a> </nav> <!-- Thanh điều hướng trên màn hình nhỏ (Ẩn trên màn hình vừa và lớn) --> <div class="w3-top w3-hide-large w3-hide-medium" id="myNavbar"> <div class="w3-bar w3-black w3-opacity w3-hover-opacity-off w3 -center w3-small"> <a href="#" class="w3-bar-item w3-button" style="width:25% !important">HOME</a> <a href="#about" class="w3-bar-item w3-button" style="width:25% !important"> GIỚI THIỆU</a> <a href="#photos" class="w3-bar-item w3-button" style= "width:25% !important">BẢNG ẢNH</a> <a href="#contact" class="w3-bar-item w3-button" style="width:25% !important">LIÊN HỆ</a> </div> </div> <!-- Nội dung trang --> <div class="w3-padding-large" id="main"> <!-- Header/Home --> <header class="w3 -container w3-padding-32 w3-center w3-black" id="home"> <h1 class="w3-jumbo"><span class="w3-hide-small">Tôi là</span> John Doe.</h1> <p>Nhiếp ảnh gia và nhà thiết kế web.</p> <img src="/w3images/man_smoke.jpg" alt="boy" class="w3-image" width="992" Height=" 1108"> </header> <!-- Giới thiệu về phần --> <div class="w3-content w3-justify w3-text-grey w3-padding-64" id="about"> <h2 class="w3 -text-light-grey">Tên tôi</h2> <hr style="width:200px" 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 w3-text-light-grey">Kỹ năng của tôi</h3> <p class="w3-wide">Nhiếp ảnh</p> <div class="w3 -white"> <div class="w3-dark-grey" style="height:28px;width:95%"></div> </div> <p class="w3-wide">Thiết kế web</ p> <div class="w3-white"> <div class="w3-dark-grey" style="height:28px;width:85%"></div> </div> <p class="w3 -wide">Photoshop</p> <div class="w3-white"> <div class="w3-dark-grey" style="height:28px;width:80%"></div> </div ><br> <div class="w3-row w3-center w3-padding-16 w3-section w3-light-grey"> <div class="w3-quarter w3-section"> <span class="w3- xlarge">11+</span><br> Đối tác </div> <div class="w3-quarter w3-section"> <span class="w3-xlarge">55+</span><br> Dự án Xong </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- quý 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 cho bảng giá --> <h3 class="w3-padding-16 w3 -text-light-grey">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-white w3-center w3-opacity w3-hover-opacity-off"> <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">Nhiế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-white w3-center w3-opacity w3- hover-opacity-off"> <li class="w3-dark-grey 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> <!-- Lời chứng thực --> <h3 class="w3-padding-24 w3-text-light-grey">Danh tiếng của tôi</h3 > <img src="/w3images/bandmember.jpg" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:80px"> <p><span class="w3 -large w3-margin-right">Chris Fox.</span> Giám đốc điều hành của Mighty Schools.</p> <p>John 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-margin-right ">Rebecca Flex.</span> Giám đốc điều hành của Công ty.</p> <p>Không ai tốt hơn John Doe.</p> <!-- Kết thúc phần Giới thiệu --> </div> <!-- Phần danh mục đầu tư --> <div class="w3-padding-64 w3-content" id="photos"> <h2 class="w3-text-light-grey">Ảnh của tôi</h2> <hr style=" width:200px" class="w3-opacity"> <!-- Lưới cho ảnh --> <div class="w3-row-padding" style="margin:0 -16px"> <div class="w3- một nửa"> <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> <!-- Phần Liên hệ --> <div class="w3-padding-64 w3-content w3-text-grey" id="contact"> <h2 class="w3-text-light-grey">Liên hệ với tôi</h2> <hr style="width:200px" class="w3-opacity"> <div class="w3-section"> <p><i class="fa fa-map-marker fa-fw w3-text-white w3 -xxlarge w3-margin-right"></i> Chicago, Hoa Kỳ</p> <p><i class="fa fa-phone fa-fw w3-text-white w3-xxlarge w3-margin-right"> </i> Điện thoại: +00 151515</p> <p><i class="fa fa-envelope fa-fw w3-text-white w3-xxlarge w3-margin-right"> </i> Email: mail @mail.com</p> </div><br> <p>Hãy liên lạc với nhau nhé. Gửi tin nhắn cho tôi:</p> <form action="/action_page.php" target="_blank"> <p><input class="w3-input w3-padding-16" type="text" placeholder=" Tên" yêu cầu tên="Tên"></p> <p><input class="w3-input w3-padding-16" type="text" placeholder="Email" yêu cầu tên="Email"></p > <p><input class="w3-input w3-padding-16" type="text" placeholder="Subject" bắt buộc name="Subject"></p> <p><input class="w3-input w3-padding-16" 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> <!-- Kết thúc phần liên hệ --> </div> <!-- Footer --> <footer class="w3-content w3-padding-64 w3-text-grey w3-xlarge"> <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> <!-- End footer --> </footer> <!-- KẾT THÚC NỘI DUNG TRANG --> </div> </body> </html >