Vài hôm trước trên fanpage có một bạn hỏi về mẫu trang chủ cho game Grand Theft Auto. Nên hôm nay mình sẽ chia sẻ cho các bạn một mẫu template đơn giản bằng HTML và CSS cực kỳ dễ làm dành cho các bạn newbie.
Các bạn có thể thay đổi ảnh background thành chủ đề game mình muốn là được. Ở bài này mình sharecode luôn game GTA 5 nhé.
Cấu trúc của template
Template chúng ta sẽ thiết kế được chia làm ba phần:
- Phần đầu gồm một bức ảnh lớn và 2 nút: Forum và Fanpage. Các bạn có thể kết hợp hiệu ứng Parallax mình đã giới thiệu trong bài trước để làm cho đẹp hơn
- Phần bên tay trái sẽ là video game và một đoạn nội dung
- Phần bên tay phải sẽ là plugin fanpage facebook
Để dễ hình dung mình đưa cái ảnh bố cục template của chúng ta bên dưới.
Nguyên liệu
- Ảnh nền chủ đề GTA
- Font Raleway và Oswald
- Mã nhúng video từ Youtube và mã nhúng fanpage từ Facebook nhé
Chúng ta cần 2 file: index.html và style.css. Các bạn có thể sử dụng bất kỳ một trình soạn thảo nào để viết code (ví dụ: Notepad++, SublimeText, Atom….). Do dành cho các bạn chưa biết nhiều về HTML và CSS nên mình sẽ hướng dẫn cụ thể.
Index.html
Chúng ta xây dựng khung cho mẫu template như dưới đây. Trong thẻ body sẽ gồm 2 thẻ section lần lược có class là intro và social.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Grand Theft Auto</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="intro"> </section> <section class="social"> </section> </body> </html> |
Trong đó class intro chúng ta sẽ viết 2 thẻ liên kết đến forum và fanpage facebook.
|
1 2 3 4 5 6 7 |
<div class="inner"> <div class="content"> <h1>Welcome</h1> <a href="#" class="btn">Forum</a> <a href="#" class="btn">Fanpage</a> </div> </div> |
Class social mình sẽ chia làm 2 cột. Một dành cho video game và một dành cho hiển thị các bài đăng trên fanpage dựa trên tỉ lệ phần trăm 70% và 25%.
Cách lấy mã nhúng Youtube:
Mở link youtube –> Chọn Share –> Chọn mã nhúng
Cách lấy mã nhúng fanpage:
Kích vào link get fanpage plugin –> Điền địa chỉ fanpage –> Nhấn chọn lấy mã –> Chuyển sang thẻ iFrame –> Copy paste vào bài
|
1 2 3 4 |
<div class="column w3"> </div> <div class="column w1"> </div> |
Kết quả file index.html sẽ có nội dung hoàn chỉnh như sau: (Các bạn thay nội dung của các bạn vào nhé)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Grand Theft Auto</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="intro"> <div class="inner"> <div class="content"> <h1>Welcome</h1> <a href="#" class="btn"> Forum </a> <a href="#" class="btn"> Fanpage </a> </div> </div> </section> <section class="social"> <div class="column w3"> <iframe width="100%" height="315" src="https://www.youtube.com/embed/KSQcCsCcFV4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium voluptatibus deserunt quae unde esse quod nihil aperiam, odio iste quidem officia voluptate deleniti autem cum, ipsam qui earum tenetur, maxime.</p> </div> <div class="column w1"> <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fsharecodeweb&tabs=timeline&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" height="100%" style="border:none;overflow:hidden;" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe> </div> </section> </body> </html> |
style.css
Đầu tiên là import hai font trên vào và thiết lập ban đầu cho tài liệu HTML của chúng ta trước bằng đoạn code sau:
|
1 2 3 4 5 6 7 8 9 |
@import url('https://fonts.googleapis.com/css?family=Raleway'); @import url('https://fonts.googleapis.com/css?family=Oswald'); html, body{ margin:0; padding:0; height:100%; width:100%; } |
Định hình khung trang bằng cách style cho thẻ section với độ rộng 100% trình duyệt. Và căn giữa trình duyệt bằng lệnh margin: 10px auto còn thuộc tính background-size:cover các bạn có thể tham khảo lại bài này
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
section{ width: 100%; margin:10px auto; } .intro{ height: 100%; background: url('http://assets2.ignimgs.com/2013/09/12/gta-v-heistsjpg-e94705_1280w.jpg') no-repeat 50% 50%; display: table; top:0; background-size: cover; } .social{ height:550px; margin:3%; } |
Ở đây ta đặt chiều cao của class intro là 100% của trình duyệt để lấy full ảnh nền. Trong khi chiều cao của social chỉ là 550px. Vì plugin fanpage của facebook chúng ta cũng chỉ lấy đến 500px là đẹp.
Tiếp theo là css cho chữ Welcome và hai nút forum và fanpage . Trong đó có thuộc tính text-shadow là một thuộc tính mới, các bạn có thể tham khảo tại đây và thuộc tính transition để tạo hiệu ứng.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
.intro .inner{ display: table-cell; vertical-align: middle; width: 100%; max-width: none; } .content{ max-width: 500px; margin: 0 auto; text-align: center; } .content h1{ font-family: 'Raleway', sans-serif; color: #fcfcfd; text-shadow: 1px 1px 0 #CCC, 2px 2px 0 #CCC, 3px 3px 0 #444, 4px 4px 0 #444, 5px 5px 0 #444, 6px 6px 0 #444; font-size: 500%; -webkit-transition: all 0.12s ease-out; -moz-transition: all 0.12s ease-out; -o-transition: all 0.12s ease-out; } .btn{ border-radius: 9px; font-family: 'Oswald', sans-serif; color:#fb8e7c; font-size: 135%; padding: 10px 20px; border: solid #fcffce 3px; text-transform: uppercase; text-decoration: none; margin-right: 10px; } |
Để hiệu ứng thêm đẹp khi di chuột vào thì ta css thêm thuộc tính transform như sau:
|
1 2 3 4 5 6 7 8 9 10 11 |
h1:hover { /* CSS3 Transform Effect */ -webkit-transform: scale(1.2); /* Safari & Chrome */ -moz-transform: scale(1.2); /* Firefox */ -o-transform: scale(1.2); /* Opera */ } .btn:hover{ color:#fff; border:3px solid #fff; } |
Tiếp theo chúng ta chia 2 cột cho phần nội dung:
|
1 2 3 4 5 6 7 8 9 10 |
.column{ height: 100%; float:left; } .w3{ width: 70%; } .w1{ width: 25%; } |
Cuối cùng, để hiển thị kết quả phù hợp với độ phân giải màn hình thì ta cần css thêm đoạn sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@media screen and (max-width: 768px){ .content h1{ font-size: 250%; } .btn{ font-size: 110%; padding:7px 15px; } p{ font-size: 100%; line-height: 160%; } } |
Khi đó, code trong file style.css hoàn chỉnh sẽ như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
@import url('https://fonts.googleapis.com/css?family=Raleway'); @import url('https://fonts.googleapis.com/css?family=Oswald'); html, body{ margin:0; padding:0; height:100%; width:100%; } section{ width: 100%; margin:10px auto; } .intro{ height: 100%; background: url('http://assets2.ignimgs.com/2013/09/12/gta-v-heistsjpg-e94705_1280w.jpg') no-repeat 50% 50%; display: table; top:0; background-size: cover; } .social{ height:550px; margin:3%; } .intro .inner{ display: table-cell; vertical-align: middle; width: 100%; max-width: none; } .content{ max-width: 500px; margin: 0 auto; text-align: center; } .content h1{ font-family: 'Raleway', sans-serif; color: #fcfcfd; text-shadow: 1px 1px 0 #CCC, 2px 2px 0 #CCC, 3px 3px 0 #444, 4px 4px 0 #444, 5px 5px 0 #444, 6px 6px 0 #444; font-size: 500%; -webkit-transition: all 0.12s ease-out; -moz-transition: all 0.12s ease-out; -o-transition: all 0.12s ease-out; } h1:hover { /* CSS3 Transform Effect */ -webkit-transform: scale(1.2); /* Safari & Chrome */ -moz-transform: scale(1.2); /* Firefox */ -o-transform: scale(1.2); /* Opera */ } .btn{ border-radius: 9px; font-family: 'Oswald', sans-serif; color:#fb8e7c; font-size: 135%; padding: 10px 20px; border: solid #fcffce 3px; text-transform: uppercase; text-decoration: none; margin-right: 10px; } .btn:hover{ color:#fff; border:3px solid #fff; } .column{ height: 100%; float:left; } .w3{ width: 70%; } .w1{ width: 25%; } .column iframe{ width:90%; margin: 0 auto; display: block; } p{ font-size: 160%; line-height: 210%; text-align: justify; margin:3%; font-family: sans-serif; } @media screen and (max-width: 768px){ .content h1{ font-size: 250%; } .btn{ font-size: 110%; padding:7px 15px; } p{ font-size: 100%; line-height: 160%; } } |
Kết quả
Các bạn có thể tùy chỉnh lại màu sắc cho hợp với “phong thủy” của mình dựa trên code đã chia sẻ nhé.
Chúc các bạn thành công!
