728x90
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Register 페이지</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="cards">
<div class="center">
<article class="card">
<figure>
<img src="https://picsum.photos/id/1011/800/450" alt="">
</figure>
<div class="card-text">
<h2>This is some title</h2>
<p>
Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultrices iaculis enim imperdiet egestas.
</p>
<a href="#">Read more<span>→</span></a>
</div>
</article>
<article class="card">
<figure>
<img src="https://picsum.photos/id/1005/800/450" alt="">
</figure>
<div class="card-text">
<h2>This is some title</h2>
<p>
Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultrices iaculis enim imperdiet egestas.
</p>
<a href="#">Read more<span>→</span></a>
</div>
</article>
<article class="card">
<figure>
<img src="https://picsum.photos/id/103/800/450" alt="">
</figure>
<div class="card-text">
<h2>This is some title</h2>
<p>
Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultrices iaculis enim imperdiet egestas.
</p>
<a href="#">Read more<span>→</span></a>
</div>
</article>
</div>
</section>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300&family=Bebas+Neue&family=Cormorant+Garamond:wght@300&display=swap');
html, body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.cards{
width: 100%;
height: 100vh;
background-image: linear-gradient(45deg, #7c9885, #b5b682);
}
.cards .center{
/* border: 1px solid red; */
width: 80%;
margin: 0 auto;
position: relative;
top: 50%; transform: translateY(-50%);
text-align: center;
}
.cards .card{
/* border: 1px solid yellow; */
display: inline-block;
max-width: 350px;
margin: 0 .5rem;
border-radius: 16px;
background:#fff;
overflow: hidden;
}
.cards .card:hover figure img{
transform: scale(1.1);
}
.cards .card:hover .card-text h2{
color: #28666e;
}
.cards .card:hover .card-text span{
opacity: 1;
margin-left: 0;
}
.cards .card figure{
margin: 0; padding: 0;
overflow: hidden;
transition: .3s;
}
.cards .card figure img{
width: 100%; height: 100%;
object-fit: cover;
border-radius: 16px 16px 0 0;
transition: .3s;
display: block;
}
.cards .card .card-text{
text-align: left;
padding: 0 1.5rem;
}
.cards .card .card-text h2{
font-family: "Bebas Neue", cursive;
font-size: 1.9rem;
letter-spacing: 0.06em;
font-family: 'Bebas Neue', sans-serif;
margin-top: 1rem;
margin-bottom: 1.3rem;
transition: .5s;
}
.cards .card .card-text p{
font-size: 1.2rem;
line-height: 1.6rem;
font-family: 'Assistant', sans-serif;
}
.cards .card .card-text a{
text-decoration: none;
color: #28666e;
display: block;
margin-bottom: 1.5rem;
}
.cards .card .card-text span{
opacity: 0;
margin-left: -20px;
transition: .3s;
font-weight: bold;
font-size: 1.5rem;
vertical-align: sub;
}728x90
'프론트엔드 > HTML & CSS 연습과제 해답' 카테고리의 다른 글
| 4. 박스모델 연습과제 해답 - 텍스트 애니메이션 효과 (0) | 2023.06.22 |
|---|---|
| 8. 폼 요소의 종류 연습과제 해답 (0) | 2023.06.21 |
| 8. 표를 만드는 테이블 요소 연습문제 해답 (0) | 2023.06.19 |
| 블록 및 인라인 레벨 요소 연습과제 해답 (3) | 2023.06.16 |
| 6. 제목, 문단, 구분선, 정형화된 텍스트 연습과제 해답 (0) | 2023.06.15 |