1만시간의 법칙 -클론 CSS 코드 리뷰

@font-face {
  font-family: "OTEnjoystoriesBA";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/OTEnjoystoriesBA.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "GmarketSansBold";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "GmarketSansMedium";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 400;
  src: url("https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2")
      format("woff2"),
    url("https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff")
      format("woff"),
    url("https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf")
      format("opentype");
}

@keyframes rotate {
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: "GmarketSansMedium";
  background-color: #5b2386;
  color: #fff;
}

/* 메인 콘텐츠 */
#contents {
  display: flex;
  justify-content: center;
}

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}

/* 제목 이미지 */
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
}

.title .clock_img {
  position: relative;
  width: 265px;
  height: 265px;
}

.title_img {
  position: absolute;
  width: 564px;
}

.title_img img {
  width: 100%;
  height: auto;
}

/* 1만 시간의 법칙 설명 */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px;
}

.intro .intro_saying {
  font-family: "OTEnjoystoriesBA";
  font-size: 36px;
  color: #f5df4d;
  margin-bottom: 50px;
}

.intro .explain {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 80px;
}

.intro .quotes {
  position: relative;
  padding-top: 20px;
}

.intro .explain p {
  position: absolute;
  font-size: 17px;
  line-height: 1.7;
}

.intro .explain span {
  font-family: "GmarketSansBold";
  font-size: 20px;
}

/* 사용자 입력 */
.inputs {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  margin-bottom: 70px;
}

.inputs div {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.inputs input {
  padding: 15px 20px;
  margin: 0 15px;
  border: none;
  border-radius: 10px;
  font-size: 20px;
  font-family: "GmarketSansMedium";
  width: 200px;
}

.inputs input::placeholder {
  color: #babcbe;
}

/* 버튼 공통 스타일 */
button {
  display: flex;
  align-items: center;
  font-family: "GmarketSansBold";
  font-size: 20px;
  color: #5b2386;
  background-color: #fcee21;
  border: none;
  border-radius: 30px;
  padding: 10px 40px;
  cursor: pointer;
  word-break: keep-all;
}

/* 시작 버튼 */
.start {
  display: flex;
  justify-content: center;
  margin-bottom: 80px;
}

.start .btn_wrap {
  position: relative;
}

.start .click_img {
  position: absolute;
  right: -75px;
  bottom: -25px;
}

/* 결과 로딩 */
.result_loading {
  display: none;
  justify-content: center;
  margin-bottom: 80px;
}

.result_loading .img_wrap {
  width: 100px;
  height: 100px;
}

.result_loading .img_wrap img {
  width: 100%;
  height: auto;
  animation: rotate 1.1s infinite linear;
}

/* 결과 */
.result {
  display: none;
  flex-direction: column;
  align-items: center;
  line-height: 1.5;
  margin-bottom: 80px;
}

.result .result_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.result .result_wrap div {
  display: flex;
  align-items: center;
  font-size: 20px;
}

.result span {
  padding: 0 20px;
  font-family: "GmarketSansBold";
  font-size: 70px;
}

/* 버튼 */
.buttons {
  display: flex;
  justify-content: center;
  margin-top: 70px;
}

/* 공유 버튼 */
.buttons .share button {
  background-color: #fff;
  margin-left: 20px;
}

/* 모달 - 훈련하러가기 */
#modal {
  position: fixed;
  display: none;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

#modal .modal_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 600px;
  height: 600px;
  background-color: #fff;
  border-radius: 20px;
}

#modal .cheer {
  font-family: "OTEnjoystoriesBA";
  color: #5b2386;
  text-align: center;
}

#modal .cheer h1 {
  font-size: 80px;
}

#modal .cheer h3 {
  font-size: 30px;
}

#modal .licat_img {
  margin-bottom: 20px;
}

#modal .close_btn {
  box-shadow: 0px 6px 16px 0px rgb(0 0 0 / 15%),
    0px 5px 16px 0px rgb(0 0 0 / 15%);
  margin-bottom: 20px;
}

#modal .btn p {
  color: #747474;
  font-size: 13px;
  text-align: center;
}

/* 저작권 */
#copyright {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 50px;
  left: 0;
  bottom: 0;
}

#copyright p {
  font-size: 10px;
  line-height: 1.5;
  padding: 20px 0;
  text-align: center;
}