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
Welcome to f4vnn.com: là một web/blog cá nhân, chủ yếu chia sẻ kiến thức về máy tính, internet, công nghệ và thủ thuật WordPress, Blogger... Mình hi vọng một điều là: Tại đây, các bạn có thể học thêm được rất nhiều kinh nghiệm và thủ thuật khi sử dụng máy tính ^_^
ĐỪNG QUÊN ĐĂNG KÝ FANPAGE ĐỂ NHẬN THỦ THUẬT MỚI NHẤT NHÉ!
