Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > [ Sharecode ] Một mẫu landing page cho game GTA 5 bằng HTML và CSS
[ Sharecode ] Một mẫu landing page cho game GTA 5 bằng HTML và CSS
Nguyễn Trung Hiếu
Share Code Web Company 2018

[ Sharecode ] Một mẫu landing page cho game GTA 5 bằng HTML và CSS

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 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.
template webgame gta 5

Nguyên liệu

Cùng sharecode template dành cho game thủ nào

Chúng ta cần 2 file: index.htmlstyle.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 social.

Trong đó class intro chúng ta sẽ viết 2 thẻ liên kết đến forum và fanpage facebook.

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

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é)

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:

Đị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

Ở đâ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 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.

Để hiệu ứng thêm đẹp khi di chuột vào thì ta css thêm thuộc tính transform như sau:

Tiếp theo chúng ta chia 2 cột cho phần nội dung:

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:

Khi đó, code trong file style.css hoàn chỉnh sẽ như sau:

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é.
grand theft auto template
Chúc các bạn thành công!

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}
%d bloggers like this: