LÀM THẾ NÀO ĐỂ - Trang "Gặp gỡ Nhóm"
Tìm hiểu cách tạo trang "Gặp gỡ nhóm" đáp ứng bằng CSS.
Các trang / phần "Gặp gỡ nhóm" thường được sử dụng để liệt kê các nhà tuyển dụng trong một công ty, với thông tin liên hệ cụ thể:
Gặp gỡ nhóm
Jane Doe
Giám đốc điều hành và người sáng lập
Đối với giường của lối vào cửa ra vào.
Cách tạo trang gặp gỡ nhóm
Bước 1) Thêm HTML:
Thí dụ
<div class="row">
<div class="column">
<div
class="card">
<img src="img1.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="img2.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="img3.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:
Thí dụ
/* Three columns side by side */
.column {
float: left;
width:
33.3%;
margin-bottom: 16px;
padding: 0 8px;
}
/* Display the columns below each other instead of
side by side on small screens */
@media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}
/* Add some shadows to create a card effect */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
/* Some left and right
padding inside the container */
.container {
padding: 0 16px;
}
/* Clear floats */
.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;
}