Erkan IŞIK
79 lines
1.5 KiB
CSS
79 lines
1.5 KiB
CSS
|
||
/* Ana Kart Ayarları */
|
||
.blog-post {
|
||
margin-bottom: 2.5rem;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.blog-post:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.blog-post .card {
|
||
border: none;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
||
height: 100%; /* Kartların eşit boyda olması için */
|
||
}
|
||
|
||
/* Row yapısını dikeyde eşitlemek için */
|
||
.blog-post .row.g-0 {
|
||
display: flex;
|
||
align-items: stretch;
|
||
}
|
||
|
||
/* Görsel Alanı */
|
||
.blog-post .col-md-4 {
|
||
display: flex;
|
||
}
|
||
|
||
.blog-post img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover; /* Resmi bozmadan alanı doldurur */
|
||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||
}
|
||
|
||
.blog-post:hover img {
|
||
transform: scale(1.05);
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* İçerik ve Footer Alanı */
|
||
.blog-post .card-body {
|
||
display: flex;
|
||
flex-direction: column; /* İçeriği dikey sırala */
|
||
height: 100%;
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.card-title a {
|
||
text-decoration: none;
|
||
color: var(--teal);
|
||
transition: color 0.3s ease;
|
||
font-weight: bolder;
|
||
}
|
||
|
||
.blog-post .content {
|
||
flex-grow: 1; /* Orta kısmı esneterek footer'ı aşağı iter */
|
||
margin-bottom: 1rem;
|
||
color: #6c757d;
|
||
}
|
||
|
||
.blog-post .card-footer {
|
||
margin-top: auto; /* En alta yapışmasını sağlayan kritik komut */
|
||
padding: 0;
|
||
background: transparent;
|
||
border: none;
|
||
}
|
||
|
||
/* Alternatif sıralama (Tek-Çift) */
|
||
.blog-post:nth-child(odd) .row {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
h5.border-bottom {
|
||
border-bottom: 2px solid var(--teal) !important;
|
||
|
||
} |