인기포스트

ABOUT ME

웹개발과 일상에 대해 포스팅하는 블로그입니다.

Today
Yesterday
Total
  • 5. HTML5 섹셔닝 (시맨틱 태그) 연습과제 해답
    프론트엔드/HTML & CSS 연습과제 해답 2023. 6. 20. 17:26
    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>&rarr;</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>&rarr;</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>&rarr;</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

    관련글 관련글 더보기

Designed by Tistory.

티스토리툴바