넷플릭스 클론코딩

하리보좋아·2023년 5월 30일
CSShtml넷플릭스
0
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://kit.fontawesome.com/11c4b226a9.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="./assets/style/reset.css" />
    <link rel="stylesheet" href="./assets/style/index.css" />
    <title>클론코딩</title>
  </head>
  <body>
    <div class="container">
      <div class="back-img">
        <header>
          <div class="header-area">
            <img class="logo" src="./assets/image/logo-image .png" alt="/" />
            <div class="login-area">
              <div class="select-area">
                <img class="select-button" src="./assets/image/select-img.png" alt="" />
                <select name="" id="">
                  <option value="">한국어</option>
                  <option value="">English</option>
                </select>
                <img class="arrow-down" src="./assets/image/select-image2.png" alt="" />
              </div>
              <button><a href="">로그인</a></button>
            </div>
          </div>
        </header>
        <section>
          <div class="main-content">
            <h1>영화, 시리즈 등을 무제한으로</h1>
            <p>다양한 디바이스에서 시청하세요. 언제든 해지하실 수 있습니다.</p>
            <h2>시청할 준비가 되셨나요? 멤버십을 등록하거나 재시작하려면 이메일 주소를 입력하세요.</h2>
            <div class="input-area">
              <input type="text" placeholder="이메일 주소">
              <button>시작하기<i class="fa-solid fa-chevron-right"></i></button>
            </div>
          </div>
        </section>
        <div class="background-color">
          <section>
            <div class="category-content">
              <div>
                <img src="./assets/image/en.png" alt="이미지">
                <h3>TV로 즐기세요</h3>
                <p>스마트 TV, PlayStation, Xbox, Chromecast, Apple TV, 블루레이 플레이어 등 다양한 디바이스에서 시청하세요.</p>
              </div>
              <div>
                <img src="./assets/image/en2.png" alt="이미지">
                <h3>다양한 디바이스에서 시청하세요</h3>
                <p>각종 영화와 시리즈를 스마트폰, 태블릿, 노트북, TV에서 무제한으로 스트리밍하세요.</p>
              </div>
              <div>
                <img src="./assets/image/ko3.png" alt="이미지">
                <h3>어린이 전용 프로필을 만들어 보세요</h3>
                <p>자기만의 공간에서 좋아하는 캐릭터와 즐기는 신나는 모험. 자녀에게 이 특별한 경험을 선물하세요. 넷플릭스 회원이라면 무료입니다.</p>
              </div>
              <div>
                <img src="./assets/image/ko4.png" alt="이미지">
                <h3>즐겨 보는 콘텐츠를 저장해 오프라인으로 시청하세요</h3>
                <p>광고 없는 멤버십에서만 이용 가능합니다.</p>
              </div>
            </div>
          </section>
          <section>
            <div class="question-content">
              <h2>자주 묻는 질문</h2>
              <div class="button-area">
                <button><p>넷플릭스에서 어떤 콘텐츠를 시청할 수 있나요?</p><i class="fa-solid fa-plus"></i></button>
                <button><p>넷플릭스란 무엇인가요?</p><i class="fa-solid fa-plus"></i></button>
                <button><p>넷플릭스 요금은 얼마인가요?</p><i class="fa-solid fa-plus"></i></button>
                <button><p>어디에서 시청할 수 있나요?</p><i class="fa-solid fa-plus"></i></button>
                <button><p>멤버십을 해지하려면 어떻게 하나요?</p><i class="fa-solid fa-plus"></i></button>
                <button><p>아이들이 넷플릭스를 봐도 좋을까요?</p><i class="fa-solid fa-plus"></i></button>
              </div>
              <h2>시청할 준비가 되셨나요? 멤버십을 등록하거나 재시작하려면 이메일 주소를 입력하세요.</h2>
              <div class="input-area">
                <input type="text" placeholder="이메일 주소">
                <button>시작하기<i class="fa-solid fa-chevron-right"></i></button>
              </div>
            </div>
          </section>
          <footer>
            <div class="footer-area">
              <div class="inquiry">
                질문이 있으신가요? 문의 전화:
                <a href="tel">080-001-9587</a>
              </div>
              <ul class="question-list">
                <li>자주 묻는 질문</li>
                <li>고객 센터</li>
                <li>계정</li>
                <li>미디어 센터</li>
                <li>투자 정보(IR)</li>
                <li>입사 정보</li>
                <li>넷플릭스 지원 디바이스</li>
                <li>이용 약관</li>
                <li>
                  개인정보 처리방침</li>
                  <li>쿠키 설정</li>
                  <li>회사 정보</li>
                  <li>문의하기</li>
                  <li>속도 테스트</li>
                  <li>
                    법적 고지</li>
                    <li>오직 넷플릭스에서</li>
              </ul>
              <div class="select-area">
                <img class="select-button" src="./assets/image/select-img.png" alt="" />
                <select name="" id="">
                  <option value="">한국어</option>
                  <option value="">English</option>
                </select>
                <img class="arrow-down" src="./assets/image/select-image2.png" alt="" />
              </div>
              <p class="footer-title">넷플릭스 대한민국</p>
              <div class="footer-content">
                <p>넷플릭스서비시스코리아 유한회사 통신판매업신고번호: 제2018-서울종로-0426호 전화번호: 080-001-9587</p>
                <p>대표: 레지널드 숀 톰프슨</p>
                <p>이메일 주소: korea@netflix.com</p>
                <p>주소: 대한민국 서울특별시 종로구 우정국로 26, 센트로폴리스 A동 20층 우편번호 03161</p>
                <p>사업자등록번호: 165-87-00119</p>
                <p>클라우드 호스팅: Amazon Web Services Inc.</p>
                <p><a href="">공정거래위원회 웹사이트</a></p>
              </div>
            </div>
          </footer>
        </div>
      </div>
    </div>
  </body>
</html>

/* header */
.container {
  background-color: black;
  width: 100%;
  height: 100%;
}
.container .back-img {
  background-image: linear-gradient(to bottom right, rgba(0, 8, 29, 0.9) 23.83%, rgba(0, 8, 29, 0.3) 96.1%), url(../image/background-img.jpg);
  background-repeat: no-repeat;
}
header {
  padding: 3rem 3.2rem;
}
.header-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.header-area .logo {
  width: 148px;
  height: 40px;
  
  
}
.header-area .login-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-area .login-area .select-area {
  display: flex;
  position: relative;
  border: 0.5px solid rgba(212, 212, 212, 0.922);
  background-color: rgba(0, 0, 0, 0.429);
  border-radius: 4px;
  
}

.header-area .login-area .select-area .select-button {
  top: 50%;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  left: 0.75rem;
  right: auto;
  position: absolute;
  pointer-events: none;


}
.header-area .login-area .select-area label {
  display: flex;
}

.header-area .login-area .select-area select {
  width: 100%;
  height: 100%;
  border: none;
  padding: 6px 36px;
  appearance: none;
  background: none;
  color: #fff;
  min-width: auto;
  
  font-size: 1.6rem;
  font-weight: 700;
  
}
.header-area .login-area .select-area .arrow-down {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  pointer-events: none;
}
.header-area .login-area button {
  padding: 4px 16px;
  background-color: #e50914;
  font-size: 1.4rem;
  border-radius: 4px;
  color: #fff;
  font-weight: 700;
  margin-left: 1.2rem;
  height: 32px;
}
@media screen and (max-width: 959px) {
  header .header-area .logo {
    width: 89px;
    height: 24px;

  }
  
}
@media screen and (max-width: 599px) {
  header .header-area .login-area .select-area select {
    text-indent: 100%;
    white-space: nowrap;
    padding: 6px 28px 6px 36px;
    width: 6.4rem;
  }
  .header-area .login-area .select-area .select-button {
    left: 1rem;
    margin-right: 0;
  }
  .header-area .login-area .select-area .arrow-down {
    right: 13px;
  }
}
  

/* footer */
.footer-area {
  padding: 0 9.6rem 9.6rem;
  margin-top: 2.4rem;
  color: rgba(255, 255, 255, 0.7);
}
.footer-area .inquiry {
 word-break: keep-all;
  
  font-size: 1.8rem;
}
.footer-area .inquiry a {
  margin-left: 4px;
  text-decoration: underline;
}
.footer-area .question-list {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin-top: 3.6rem;
}
.footer-area .question-list li {
  font-size: 1.4rem;
  margin-top: 1.2rem;
  flex: 0 0 33.33%;
  text-decoration: underline;
}
.footer-area .select-area {
  display: flex;
  position: relative;
  border: 0.5px solid rgba(212, 212, 212, 0.922);
  background-color: rgba(0, 0, 0, 0.429);
  border-radius: 4px;
  width: 13rem;
  margin-top: 3.6rem;
  
}

.footer-area .select-area .select-button {
  top: 50%;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  left: 0.75rem;
  right: auto;
  position: absolute;
  pointer-events: none;


}
.footer-area .select-area select {
  max-width: 100%;
  height: 100%;
  border: none;
  padding: 6px 36px;
  appearance: none;
  background: none;
  color: #fff;
  min-width: auto;
  
  font-size: 1.6rem;
  font-weight: 700;
  
}
.footer-area .select-area .arrow-down {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  pointer-events: none;
}

.footer-area .footer-title {
  font-size: 1.4rem;
  margin-top: 3.6rem;
}
.footer-area .footer-content {
  display: flex;
  flex-direction: column;
  margin-top: 3.6rem;
  font-size: 1.2rem;
}
.footer-area .footer-content p:nth-of-type(7) {
  text-decoration: underline;
}

@media screen and (max-width: 959px) {
  .footer-area .question-list li {
    flex: 0 0 50%;
  }
}
@media screen and (max-width: 599px) {
  .footer-area .question-list {
    display: flex;
    flex-direction: column;
  }
  .footer-area {
    padding: 0 1.6rem 9.6rem;
  }
}

/* section main-content */

section .main-content {
  padding: 6rem 9.6rem 0;
}
section .main-content h1 {
  font-size: 4.8rem;
  color: #fff;
  font-weight: 900;
  margin-top: 1.6rem;
  word-break: keep-all;
}
section .main-content p {
  font-size: 1.8rem;
  color: #fff;
  margin-top: 1.6rem;
  word-break: keep-all;
}
section .main-content h2,
.question-content h2:nth-of-type(2) {
  font-size: 2rem;
  color: #fff;
  margin-top: 3.2rem;
  word-break: keep-all;
}
section .main-content .input-area,
.question-content .input-area {
  display: flex;
  align-items: center;
  margin-top: 1.6rem;
}
section .main-content .input-area input,
.question-content .input-area input {
  padding: 1.6rem 1.6rem 1.6rem;
  border: 1px solid rgba(212, 212, 212, 0.922);
  background-color: rgba(0, 0, 0, 0.429);
  border-radius: 4px;
  font-size: 1.6rem;
  font-weight: 600;
  width: 423px;
  height: 56px;
  
  
}
section .main-content .input-area button,
.question-content .input-area button {
 
  flex: 0 0 auto;
  background-color: #e50914;
  padding: 16px 24px;
  color: #fff;
  font-weight: 600;
  font-size: 2.4rem;
  border-radius: 4px;
  margin-left: 8px;
  line-height: 1;
  
}
section .main-content .input-area button i,
.question-content .input-area button i {
  margin-left: 4px;
  font-size: 2rem;
  line-height: 1;
 
}
@media screen and (max-width: 959px) {
  section .main-content {
    padding: 6rem 6.4rem 0;
  }
  section .main-content h1 {
    font-size: 4rem;
  }
  section .main-content h2 {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 599px) {
  section .main-content {
    padding: 60px 40px 0;
  }
  section .main-content .input-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .question-content .input-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    
  }
  
  section .main-content .input-area button {
    margin-left: 0;
    margin-top: 1.6rem;
    padding: 8px 16px;
    font-size: 1.8rem;
  }
  .question-content .input-area button {
    margin-left: 0;
    margin-top: 1.6rem;
    padding: 8px 16px;
    font-size: 1.8rem;
    
  }
  section .main-content .input-area input,
.question-content .input-area input {
  width: 100%;
}
  section .main-content .input-area button i,
.question-content .input-area button i {
  font-size: 1.6rem;
  margin: 8px 3px;
  
}
}

/* category-content */
.category-content {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10rem;
  
  gap: 16px;
  margin-right: -16px;
}
.category-content div {
  flex: 0 0 calc(50% - 16px);
  padding: 26px 64px 40px;
  border-radius: 8px;
  background: linear-gradient(to bottom right, #09143C 0%, #101338 57.21%, #400E20 99.57%);
}
.category-content div h3 {
  font-size: 2.4rem;
  color: #fff;
  line-height: 1.2;
  word-break: keep-all;
}
.category-content div p {
  font-size: 1.6rem;
  color: #fff;
  margin-top: 1.6rem;
  word-break: keep-all;
  line-height: 2rem;
}
@media screen and (max-width: 599px) {
  .category-content {
    flex-direction: column;
    
  }
  .background-color {
    padding: 0 24px;
  }
  .category-content {
    margin-right: 0;
  }
  
}
@media screen and (max-width: 959px) {
  .category-content div {
    padding: 26px 40px 40px;
  }
}
@media screen and (max-width: 403px) {
  .category-content div {
    padding: 22px 16px 32px;
  }
}
@media screen and (max-width: 805px) {
  .category-content p {
    overflow-y: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    
  }
}


/* question-content */
.question-content {
  display: flex;
  flex-direction: column;
  color: #fff;
  padding: 0 9.6rem 9.6rem;
  margin-top: 5.2rem;
  
}
.question-content h2:nth-of-type(1) {
  margin-top: 1.6rem;
  font-size: 4rem;
  font-weight: 700;
}
.question-content h2:nth-of-type(2) {
  font-size: 1.8rem;
}
.question-content .button-area {
  display: flex;
  flex-direction: column;
  margin-top: 1.6rem;
}
.question-content .button-area button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.4rem;
  width: 100%;
  background-color: rgba(19, 33, 68, 1);
  margin-bottom: 8px;
  border-radius: 2px;
}
.question-content .button-area button:hover {
  background-color: rgba(34, 51, 98, 1);
  transition: 0.3s;
}
.question-content .button-area button p {
  font-size: 2.4rem;
  font-weight: 600;
  word-break: keep-all;
}
.question-content .button-area button i {
  font-size: 36px;
}
.question-content .input-area {
  width: 100%;
}
@media screen and (max-width: 959px) {
  .question-content .button-area button p {
    font-size: 1.8rem;
  }
  .question-content .button-area button i {
    font-size: 1.6rem;
  }
  .question-content .input-area input {
    width: 100%;
  }
}
@media screen and (max-width: 599px) {
  .question-content {
    padding: 0 1.6rem 9.6rem;
  }
  .question-content .button-area button p {
    text-align: left;
  }
}
.background-color {
  padding: 0 3.2rem;
  background: linear-gradient(rgba(0, 0, 0, 0) ,black);
}

@media screen and (max-width: 599px) {
  .background-color {
    padding: 0 2.4rem;
}
}

background-repeat

background-repeat:
repeat : 가로 , 세로방향으로 반복
repeat-x : 가로방향으로 반복
repeat-y : 세로방향으로 반복
no-repeat : 반복 안함
initial : 기본값으로 설정
inherit : 부모요소를 상속받아 적용

pointer-events: none;

클릭, 호버 등등 비활성화 시킨다.

appearance: none;

버튼이나 체크박스 등등 기본적으로 나오는 것들을 안나타나게 만들어준다.

text-indent

문장 들여쓰기할때 사용
예를들어 text-indent: 50% 이면 문장이 50%부터 시작된다.

profile
하리보좋아
하이
이전 포스트

block과 inline-block의 차이

다음 포스트

iqos버튼 hover

0개의 댓글