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

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

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.

<!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>

<!DOCTYPE html>

<head>

<title>Grand Theft Auto</title>

</head>

<body>

</section>

</section>

</body>

</html>

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

<div class="inner">
	<div class="content">
		<h1>Welcome</h1>
		<a href="#" class="btn">Forum</a>
		<a href="#" class="btn">Fanpage</a>
	</div>
</div>

<h1>Welcome</h1>

<a href="#" class="btn">Forum</a>

<a href="#" class="btn">Fanpage</a>

</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

<div class="column w3">
</div>
<div class="column w1">
</div>

</div>

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

<!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>

<!DOCTYPE html>

<head>

<title>Grand Theft Auto</title>

</head>

<body>

<h1>Welcome</h1>

Forum

</a>

Fanpage

</a>

</div>

</section>

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

</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:

@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%;
}

@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

section{
	width: 100%;
	margin:10px auto;
}
.intro{
	height: 100%;
	background: url('https://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%;
}

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.

.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;
}

.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:

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;
}

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:

.column{
	height: 100%;
	float:left;
}
.w3{
	width: 70%;
}
.w1{
	width: 25%;
}

.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:

@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%;
	}
}

@media screen and (max-width: 768px){

.content h1{

font-size: 250%;

}

.btn{

font-size: 110%;

padding:7px 15px;

}

font-size: 100%;

line-height: 160%;

}

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

@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('https://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%;
	}
}

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;

}

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;

}

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!

Cấu trúc của template

Nguyên liệu

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

Index.html

style.css

Kết quả

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu