NỘI DUNG (HIGHLIGHTS)
Hướng dẫn tạo trang giới thiệu đẹp cho WordPress: Xin chào mọi người, rảnh rỗi ngồi buồn mình tự nhiên nghĩ ra là sẽ làm một trang giới thiệu, để giới thiệu đôi nét về Blog thủ thuật máy tính f4vnn. Tiện đây mình cũng hướng dẫn tạo trang giới thiệu đẹp cho WordPress luôn. À cái này cũng có thể dùng cho Blogspot ok nhé.
Hướng dẫn tạo trang giới thiệu đẹp cho WordPress
Code để tạo trang này cũng rất đơn giản các bạn khi tạo trang chỉ cần thêm Block html và copy html và Css bên dưới này vào là được. Các bạn có thể để Css vào trong vào bên trong thẻ <style> là nó sẽ hoạt động ngay trên Page luôn.
1. Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Our Team</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="team-container">
<h2 class="team-heading">Team F4vnn</h2>
<div class="ceo">
<div class="profile-pic">
<img src="https://f4vnn.com/wp-content/uploads/2020/12/avatar-blog-thu-thuat-may-tinh-f4vnn.jpg" alt="Giới thiệu về Blog thủ thuật máy tính f4vnn" />
</div>
<div class="team-member-name">Admin Hoàng Văn Sỹ</div>
<div class="meta"><a href= " https://f4vnn.com"target="_blank"> Design & Video Editing </a></div>
</div>
<h3>Nhóm của chúng Tôi</h3>
<div class="core-team-container">
<div class="team-member">
<div class="profile-pic">
<img src="https://f4vnn.com/wp-content/uploads/2020/12/avatar-blog-thu-thuat-may-tinh-f4vnn.jpg" alt="Giới thiệu về Blog thủ thuật máy tính f4vnn" />
</div>
<div class="team-member-name">Blog Download</div>
<div class="meta"><a href= " https://giaiphap.f4vnn.com"target="_blank"> Game & App Mod </a></div>
</div>
<div class="team-member">
<div class="profile-pic">
<img src="https://f4vnn.com/wp-content/uploads/2020/12/avatar-blog-thu-thuat-may-tinh-f4vnn.jpg" alt="Giới thiệu về Blog thủ thuật máy tính f4vnn" />
</div>
<div class="team-member-name">Blog Acapella</div>
<div class="meta"><a href= " https://acafull.f4vnn.com"target="_blank"> Acapella Việt </a></div>
</div>
<div class="team-member">
<div class="profile-pic">
<img src="https://f4vnn.com/wp-content/uploads/2020/12/avatar-blog-thu-thuat-may-tinh-f4vnn.jpg" alt="Giới thiệu về Blog thủ thuật máy tính f4vnn" />
</div>
<div class="team-member-name">Liên kết</div>
<div class="meta"><a href= " https://downmienphi.top"target="_blank"> Friend </a></div>
</div>
</div>
</div>
</body>
</html>2. Css
.team-container {
font-family: "Roboto", sans-serif;
max-width: 1000px;
margin: 0 auto;
}
.team-container h2 {
text-align: center;
font-size: 48px;
text-transform: uppercase;
font-weight: normal;
letter-spacing: 8px;
background: #222;
color: #eee;
width: 500px;
margin: 48px auto;
}
.team-container .ceo {
text-align: center;
padding: 8px;
}
.team-container .ceo img {
width: 200px;
height: 200px;
}
.team-container img {
width: 160px;
height: 160px;
border-radius: 50%;
box-shadow: 0 8px 29px -17px rgba(0, 0, 0, 0.4);
}
.team-member {
display: flex;
flex-direction: column;
text-align: center;
padding: 16px;
}
.team-container .team-member-name {
font-weight: bold;
font-size: 22px;
margin: 12px 0;
}
.team-container .ceo .team-member-name {
font-size: 28px;
}
.core-team-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.team-container h3 {
text-align: center;
margin: 48px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 24px;
text-transform: uppercase;
font-weight: normal;
}Rất đơn giản đúng không các bạn có thể xem Demo mình làm ngay trên Blog này luôn nhé. Hy vọng với hướng dẫn tạo trang giới thiệu đẹp cho WordPress mà Blog thủ thuật máy tính f4vnn vừa chia sẻ sẽ có ích với bạn. Chúc bạn thành công.
Bài Viết Cùng Chuyên MụcGame & Apk Mod Acapella Việt Template BLogspot Liên Kết URL
Theo dõi trên
