Chạy ❯
Nhận trang web của
riêng
bạn
x
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_PLACEHOLDER_2/> </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</a> <a href="# contact" class="w3-bar-item w3-button w3-text-grey w3-hover-black" onclick="closeNav()">Liên hệ</a> </div> </nav> <!-- Trang Nội dung --> <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-white 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à một nhà phát triển internet, nhưng tôi phải đối mặt với rất nhiều công việc và nỗi đau cùng một lúc. Để đi đến chi tiết nhỏ nhất, không ai nên thực hiện bất kỳ loại công việc nào trừ khi anh ta thu được lợi ích nào đó từ nó. Đừng tức giận với nỗi đau trong sự khiển trách trong niềm vui mà anh ấy muốn được thoát khỏi nỗi đau với hy vọng rằng không có sự sinh sản. Trừ khi bị dục vọng làm cho mù quáng, họ không bước ra, họ có lỗi khi bỏ bê nhiệm vụ, tâm trí mềm yếu, tức là đó là kết quả của sự gian khổ, nhưng đồng thời họ cũng rơi vào cảnh đau đớn, khó khăn lớn lao. Để đi đến chi tiết nhỏ nhất, không ai nên thực hiện bất kỳ loại công việc nào trừ khi anh ta thu được lợi ích nào đó từ nó. </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ý< / nút> </li> </ul> </div> <!-- Kết thúc lưới/bảng giá --> </div> <!-- Kết thúc phần giới thiệu --> </div> <!-- Phần liên hệ --> <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, Hoa Kỳ </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%; lề: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_PLACEHOLDER_8/> </body> </html>