Cách thực hiện - Giới thiệu về trang
Tìm hiểu cách tạo trang giới thiệu / trang giới thiệu về chúng tôi.
Về chúng tôi
Hãy tự mình thử »Tạo một trang giới thiệu
Bước 1) Thêm HTML:
Ví dụ
<div class="about-section">
<h1>About Us Page</h1>
<p>Some
text about who we are and what we do.</p>
<p>Resize the browser
window to see that this page is responsive by the way.</p>
</div>
<h2 style="text-align:center">Our Team</h2>
<div class="row">
<div class="column">
<div class="card">
<img src="/w3images/team1.jpg" alt="Jane" style="width:100%">
<div class="container">
<h2>Jane
Doe</h2>
<p class="title">CEO &
Founder</p>
<p>Some text that
describes me lorem ipsum ipsum lorem.</p>
<p> [email protected] </p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
<div
class="column">
<div class="card">
<img src="/w3images/team2.jpg" alt="Mike" style="width:100%">
<div class="container">
<h2>Mike
Ross</h2>
<p class="title">Art
Director</p>
<p>Some text that
describes me lorem ipsum ipsum lorem.</p>
<p> [email protected] </p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
<div
class="column">
<div class="card">
<img src="/w3images/team3.jpg" alt="John" style="width:100%">
<div class="container">
<h2>John
Doe</h2>
<p
class="title">Designer</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p> [email protected] </p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
</div>
Bước 2) Thêm CSS:
Ví dụ
body {
font-family: Arial, Helvetica, sans-serif;
margin:
0;
}
html {
box-sizing: border-box;
}
*,
*:before, *:after {
box-sizing: inherit;
}
.column {
float: left;
width: 33.3%;
margin-bottom: 16px;
padding: 0 8px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,
0, 0, 0.2);
margin: 8px;
}
.about-section {
padding: 50px;
text-align: center;
background-color:
#474e5d;
color: white;
}
.container {
padding: 0
16px;
}
.container::after, .row::after {
content: "";
clear: both;
display: table;
}
.title {
color:
grey;
}
.button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor:
pointer;
width: 100%;
}
.button:hover {
background-color: #555;
}
@media screen and (max-width: 650px) {
.column {
width: 100%;
display:
block;
}
}
Hãy tự mình thử »Bạn đã bao giờ nghe nói về Example.com.vn Spaces chưa? Tại đây, bạn có thể tạo trang web của mình từ đầu hoặc sử dụng mẫu và lưu trữ miễn phí.
Bắt đầu miễn phí ❯* Không cần thẻ tín dụng