과제가 너무 많아서 오늘은 많이 하지 못했다ㅠㅠ
어제의 클론코딩은 블로그를 참고해가며 했는데,
오늘은 넷플릭스 홈페이지를 보며 한국버전(?)으로 새로 클론 코딩해봤다.
main.html
<!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">
<link rel="stylesheet" href="style.css">
<title>Netflix</title>
</head>
<body>
<header class="showcase">
<div class="showcase-top">
<img src="https://i.ibb.co/r5krrdz/logo.png" alt="" />
<a href="#" class="btn btn-rounded">로그인</a>
</div>
<div class="showcase-content">
<h1>영화와 시리즈를 무제한으로.</h1>
<p class="p1">다양한 디바이스에서 시청하세요. 언제든 해지하실 수 있습니다.</p>
<p class="p2">시청할 준비가 되셨나요? 멤버십을 등록하거나 재시작하려면 이메일 주소를 입력하세요.</p>
<input type="text" class="input" placeholder="이메일 주소"><br>
<a href="#" class="btn"
>시작하기 > <i class="fas fa-chevron-right btn-icon"></i
></a>
</div>
</header>
<section class="tabs">
<div class="container">
<div id="tab-1" class="tab-item tab-border">
<i class="fas fa-door-open fa-3x"></i>
<p class="hide-sm">Cancel at any time</p>
</div>
<div id="tab-2" class="tab-item">
<i class="fas fa-tablet-alt fa-3x"></i>
<p class="hide-sm">Watch anywhere</p>
</div>
<div id="tab-3" class="tab-item">
<i class="fas fa-tags fa-3x"></i>
<p class="hide-sm">Pick your price</p>
</div>
</div>
</section>
style.css
/* Global Styles */
:root {
--primary-color: #e50914;
--dark-color: #141414;
--light-color: #f4f4f4;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
-webkit-font-smoothing: antialiased;
background: #000;
color: #999;
}
ul {
list-style: none;
}
h1,
h2,
h3,
h4 {
color: #fff;
}
a {
color: #fff;
text-decoration: none;
}
p {
margin: 0.5rem 0;
}
img {
width: 100%;
}
.showcase {
width: 100%;
height: 93vh;
position: relative;
background: url('https://i.ibb.co/vXqDmnh/background.jpg') no-repeat center center/cover;
}
.showcase::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.6);
box-shadow: inset 120px 100px 250px #000000, inset -120px -100px 250px #000000;
}
.showcase-top {
position: relative;
z-index: 2;
height: 90px;
}
.showcase-top img {
width: 110px;
position: absolute;
top: 50%;
left: 10%;
transform: translate(-50%, -50%);
margin-left: 0;
}
.showcase-top a {
position: absolute;
top: 50%;
right: 0;
transform: translate(-50%, -50%);
}
.showcase-content {
position: relative;
z-index: 2;
width: 65%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 9rem;
}
.showcase-content h1 {
font-weight: 700;
font-size: 3.2rem;
line-height: 1.1;
margin: 0 0 2rem;
}
.showcase-content .p1 {
text-transform: uppercase;
color: #fff;
font-weight: 400;
font-size: 1.6rem;
line-height: 1.25;
margin: 0 0 2rem;
}
.showcase-content .p2 {
text-transform: uppercase;
color: #fff;
font-weight: 400;
font-size: 1.2rem;
line-height: 1.25;
margin: 0 0 2rem;
}
.showcase-content input {
width: 500px;
height: 60px;
padding-left: 10px;
font-size: medium;
}
'WEB' 카테고리의 다른 글
[Web 클론코딩] 넷플릭스 클론코딩 (0) | 2022.03.11 |
---|---|
[WEB] youtube 클론코딩 (0) | 2022.03.10 |
[ES6/Javascript] 비구조 할당 (0) | 2022.03.09 |
[ES6/Javascript] 변수 선언(let, const), 화살표 함수 선언 (0) | 2022.03.08 |
[Javascript] 로컬 스토리지 (0) | 2022.03.07 |