Nestしたカードレイアウト
-
清水大樹出身地：東京都Lorem ipsum dolor sit amet, consectetur
詳細を見る -
東俊一郎出身地：千葉県Praesent sit amet nulla ligula
詳細を見る -
伊藤海出身地：東京都Sed tortor magna, accumsan mollis commodo
詳細を見る -
牛田陽気出身地：神奈川県mattis dignissim dolor. Integer volutpat
詳細を見る -
尾形陽一出身地：大阪府amet bibendum enim aliquet vitae.
詳細を見る -
柏原兼出身地：千葉県Suspendisse iaculis aliquet ligula,
詳細を見る -
菊池広大出身地：岡山県Vivamus lacinia diam sit amet arcu vehicula dapibus sed in magna
詳細を見る -
工藤俊作郎出身地：福岡県Cras sit amet dolor diam
詳細を見る
この情報は、デモ用に作成された情報です。実際の個人情報ではありません。
#pageNest {
padding-block: 60px 60px;
.hl {
font-size: 30px;
font-weight: bold;
line-height: 1.4;
color: #22a100;
text-align: center;
}
ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
column-gap: 3%;
row-gap: 2.5em;
margin-block-start: 2em;
li {
line-height: 1.4;
}
li figure img {
aspect-ratio: 1.505 / 1;
object-fit: cover;
object-position: 0% 0%;
}
li .name {
font-size: 18px;
margin-block-start: .4em;
}
li .place span {
font-weight: bold;
color: #192aa9;
}
li p {
color: #a91919;
margin-block-end: .5em;
}
li a {
font-weight: bold;
color: #4b82e8;
position: relative;
&:hover {
text-decoration: none;
}
&::after {
content: '';
border-block-start: 2px solid #000;
border-inline-end: 2px solid #000;
inline-size: .5em;
block-size: .5em;
position: absolute;
inset: 54% -.8em auto auto;
transform: translateY(-50%) rotate(45deg) ;
transition: all 300ms 0s ease;
}
&:hover::after {
inset: 50% -1.2em auto auto;
}
}/* li a */
}
/* #pageNes ul */
p.note {
margin-block-start: 2em;
font-size: 14px;
line-height: 1.4;
}
}
/* pageNest */