“Takım Tanıtımı” Sayfasını Nasıl Oluşturursunuz:
- Önceki sayfa Resim kenar çizgisi
- Sonraki sayfa Yapışkan resim
CSS ile yanıt verici bir “Takım Tanıtımı” sayfası oluşturma nasıl öğrenilir.
“Takım Tanıtımı” sayfası veya bölümü genellikle şirket içindeki işverenleri listelemek ve belirli iletişim bilgilerini sağlamak için kullanılır:
Bill Gates
CEO & Founder
Beni tanıtan bazı metin lorem ipsum ipsum lorem.
example@example.com
Elon Musk
Sanat Yönetmeni
Beni tanıtan bazı metin lorem ipsum ipsum lorem.
example@example.com
Steve Jobs
Tasarımcı
Beni tanıtan bazı metin lorem ipsum ipsum lorem.
example@example.com
“Takım Tanıtımı” Sayfasını Nasıl Oluşturursunuz
Adım 1 - HTML Ekle:
<div class="row">
<div class="column">
<div class="card">
<img src="img1.jpg" alt="Jane" style="width:100%">
<div class="container">
<h2>Bill Gates</h2>
<p class="title">CEO & Founder</p>
<p>Beni tanıtan bazı metin lorem ipsum ipsum lorem.</p>
<p>example@example.com</p>
<p><button class="button">İletişim</button></p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="img2.jpg" alt="Mike" style="width:100%">
<div class="container">
<h2>Elon Musk</h2>
<p class="title"> Sanat Yönetmeni</p>
<p>Beni tanıtan bazı metin lorem ipsum ipsum lorem.</p>
<p>example@example.com</p>
<p><button class="button">İletişim</button></p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="img3.jpg" alt="John" style="width:100%">
<div class="container">
<h2>Steve Jobs</h2>
<p class="title"> Tasarımcı</p>
<p>Beni tanıtan bazı metin lorem ipsum ipsum lorem.</p>
<p>example@example.com</p>
<p><button class="button">İletişim</button></p>
</div>
</div>
</div>
</div>
İkinci adım - CSS ekleyin:
/* 并排的三列 */
.column {
float: left;
width: 33.3%;
margin-bottom: 16px;
padding: 0 8px;
}
/* 在小屏幕上，将列上下显示而不是并排显示 */
@media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}
/* 添加一些阴影以创建卡片效果 */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
/* 容器内的一些左右内边距 */
.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;
}
- Önceki sayfa Resim kenar çizgisi
- Sonraki sayfa Yapışkan resim
