Cute Blinking Unicorn

프론트엔드/HTML

doors 홈페이지 만들기

민밥통 2023. 10. 18. 21:20

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doors!</title>
    <link rel="stylesheet" href="doors.css">
</head>
<body>
  <div class="container">
    <div class="doors">
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      <div class="door">
        <div class="image"></div>
      </div>
      </div>
    </div>
    <h1 class="title">
      Doors.
    </h1>
  </div>
</body>
</html>

CSS

body {
  background-size: cover;
  background-repeat: no-repeat;
}
.container {
  padding: 50px 0;
}
.doors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 660px;
  /* background-color: orangered; */
  margin: 0 auto;
  padding: 40px 20px;
}
.door {
  width: 80px;
  height: 84px;
  margin: 4px;
  background-color: #555;
  border: 3px solid #fff;
  transform: skewX(-14deg);
  border-radius: 10px;
  box-sizing: border-box;
  transition: transform .1s, background-color .6s;
  overflow: hidden;
}
.door:hover {
  background-color: orangered;
  transform: skewX(-14deg) scale(1.3);
  z-index: 1;
}
.door .image {
  width: 130%;
  height: 100%;
  background-size: cover;
  transform: translateX(-11px) skewX(14deg);
  background-position: center;
}
.door:nth-child(1) .image {
}
.door:nth-child(2) .image {
}
.door:nth-child(3) .image {
}
.door:nth-child(4) .image {
}
.door:nth-child(5) .image {
}
.door:nth-child(6) .image {
}
.door:nth-child(7) .image {
}
.door:nth-child(8) .image {
}
.door:nth-child(9) .image {
}
.door:nth-child(10) .image {
}
.door:nth-child(11) .image {
}
.door:nth-child(12) .image {
}
.door:nth-child(13) .image {
}
.door:nth-child(14) .image {
}
.door:nth-child(15) .image {
}
.door:nth-child(16) .image {
}
.door:nth-child(17) .image {
}
.door:nth-child(18) .image {
}
.door:nth-child(19) .image {
}
.door:nth-child(20) .image {
}
.door:nth-child(21) .image {
}
.door:nth-child(22) .image {
}
.door:nth-child(23) .image {
}
.door:nth-child(24) .image {
}
.door:nth-child(25) .image {
}
.door:nth-child(26) .image {
}
.door:nth-child(27) .image {
}
.door:nth-child(28) .image {
}
.door:nth-child(29) .image {
}
.door:nth-child(30) .image {
}
.door:nth-child(31) .image {
}
.door:nth-child(32) .image {
}

h1.title {
  font-size: 30px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

http://127.0.0.1:5500/2023-10-18/doors.html

https://github.com/ParkYoungWoong/door-selector

'프론트엔드 > HTML' 카테고리의 다른 글

CSS 띄움을 이용한 레이아웃 + CSS clear의 활용  (0) 2023.10.25
애니메이션 201페이지 참고  (0) 2023.10.23
실습 홈페이지도 만들어보기  (0) 2023.10.18
박스 순서도  (0) 2023.10.18
그림 지정하기  (0) 2023.10.18

'프론트엔드/HTML'의 다른글

  • 현재글doors 홈페이지 만들기

관련글

티스토리툴바