diff --git a/images/background.jpg b/images/background.jpg new file mode 100644 index 0000000..739fa25 Binary files /dev/null and b/images/background.jpg differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..a4e98cc Binary files /dev/null and b/images/logo.png differ diff --git a/images/tab-content-1.png b/images/tab-content-1.png new file mode 100644 index 0000000..a3e7f59 Binary files /dev/null and b/images/tab-content-1.png differ diff --git a/images/tab-content-2-1.png b/images/tab-content-2-1.png new file mode 100644 index 0000000..357f941 Binary files /dev/null and b/images/tab-content-2-1.png differ diff --git a/images/tab-content-2-2.png b/images/tab-content-2-2.png new file mode 100644 index 0000000..8b0732a Binary files /dev/null and b/images/tab-content-2-2.png differ diff --git a/images/tab-content-2-3.png b/images/tab-content-2-3.png new file mode 100644 index 0000000..6ca2bdb Binary files /dev/null and b/images/tab-content-2-3.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..641d16a --- /dev/null +++ b/index.html @@ -0,0 +1,190 @@ + + + + + + NETFLIX CLONE + + + + +
+
+ Netflix_logo + Sign in +
+
+

See What's Next

+

Watch anywhere. Cancel anytime

+ + Watch free for 30 days + +
+
+ +
+
+
+ +

Cancel anytime

+
+
+ +

Watch anywhere

+
+
+ +

Pick your price

+
+
+
+ +
+
+ +
+
+
+

+ If you decide Netflix isn't for you - No problem, No commitment. + Cancel online anytime. +

+ Watch free for 30 days +
+ tab-1-content image +
+
+ + +
+
+

+ Watch TV shows and movies anytime, anywhere - personalized for you. +

+ Watch free for 30 days +
+
+
+ +

Watch on your TV

+

Smart Tvs. PlayStation, Xbox, Chromecast, Apple TV, Blu-ray players and more.

+
+
+ +

Watch instantly or download for later

+

Available on phone and tablet, wherever you go.

+
+
+ +

Use any computer

+

Watch right on Netflix.com.

+
+
+
+ + +
+
+

Choose one plan and watch everything on Netflix

+ Watch Free For 30 Days +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BasicStandardPremium
Monthly price after free month ends on 6/19/19$8.99$12.99$15.99
HD Available
Ultra HD Available
Screens you can watch on at the same time124
Watch on your laptop, TV, phone and tablet
Unlimited movies and TV shows
Cancel anytime
First month free
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..10f4ef2 --- /dev/null +++ b/main.js @@ -0,0 +1,24 @@ +const tabItems = document.querySelectorAll('.tab-item'); +const tabContentItems = document.querySelectorAll('.tab-content-item'); + +//select tab content item +function selectItem(e) { + removeBorder(); + removeShow(); + //add border to selected tab + this.classList.add('tab-border'); + //grab the content items from DOM + const tabContentItem = document.querySelector(`#${this.id}-content`); + //Add show class + tabContentItem.classList.add('show'); +} + +function removeBorder() { + tabItems.forEach(item => item.classList.remove('tab-border')); +} + +function removeShow() { + tabContentItems.forEach(item => item.classList.remove('show')); +} + +tabItems.forEach(item => item.addEventListener('click', selectItem)) \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..30cc95a --- /dev/null +++ b/style.css @@ -0,0 +1,407 @@ +:root { + --primary-color: #e50914; + --dark-color: #141414; +} + +* { + 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('./images/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: 170px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.showcase-top a { + position: absolute; + top: 50%; + right: 0; + transform: translate(-50%, -50%); +} + +.showcase-content { + position: relative; + z-index: 2; + margin: auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; +} + +.showcase-content h1 { + font-weight: 700; + font-size: 5.2rem; + line-height: 1.1; + margin: 0 0 2rem; +} + +.showcase-content p { + color: #fff; + text-transform: uppercase; + font-weight: 400; + font-size: 1.9rem; + line-height: 1.25; + margin: 0 0 2rem; +} + + +/* Tabs utility */ +.tabs { + background: var(--dark-color); + padding-top: 1rem; + border-bottom: 3px solid #3d3d3d; +} + +.tabs .container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 1rem; + text-align: center; + justify-content: center; + align-items: center; +} + +.tabs p { + font-size: 1.2rem; + padding-top: 0.5rem; +} + +.tabs .container > div { + padding: 1.4rem 0; +} + +.tabs .container > div:hover { + color: #fff; + cursor: pointer; +} + +.tab-border { + border-bottom: var(--primary-color) 4px solid; +} + +/* Tab Content */ +.tab-content { + padding: 3rem 0; + background: #000; + color: #fff; +} + +#tab-1-content, +#tab-2-content, +#tab-3-content { + display: none; +} + +.show { + display: block !important; +} + +#tab-1-content .tab-1-content-inner { + display: grid; + grid-template-columns: repeat(2, 1fr); + justify-content: center; + align-items: center; + text-align: center; +} + +#tab-2-content .tab-2-content-top { + display: grid; + grid-gap: 1rem; + grid-template-columns: 2fr 1fr; + justify-content: center; + align-items: center; +} + +#tab-2-content .tab-2-content-bottom { + margin-top: 2rem; + display: grid; + grid-gap: 1rem; + grid-template-columns: repeat(3, 1fr); + justify-content: center; + align-items: center; + text-align: center; +} + +.table { + width: 100%; + margin-top: 2rem; + border-collapse: collapse; + border-spacing: 0; +} + +.table thead th { + text-transform: uppercase; + padding: 0.8rem; +} + +.table tbody tr td { + color: #999; + text-align: center; + padding: 0.8rem 1.2rem; +} + +.table tbody tr td:first-child { + text-align: left; +} + +.table tbody tr:nth-child(odd) { + background: #222; +} + + +/* Footer */ +.footer { + max-width: 70%; + margin: 1rem auto; + overflow: auto; +} + +.footer, +.footer a { + color: #999; + font-size: 0.9rem; +} + +.footer p { + margin-bottom: 1.5rem; +} + +.footer .footer-cols { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 2rem; +} + +.footer li { + line-height: 1.9; +} + +/* container */ +.container { + max-width: 70%; + margin: auto; + overflow: hidden; + padding: 0 2rem; +} + +/* Text styles */ +.text-xl { + font-size: 2rem; + border-bottom: 1rem; +} + +.text-lg { + font-size: 1.8rem; + border-bottom: 1rem; +} + +.text-md { + font-size: 1.5rem; + border-bottom: 1rem; +} + +.text-center { + text-align: center; +} + +.text-dark { + color: #999; +} + +/* Buttons utility */ +.btn { + display: inline-block; + background: var(--primary-color); + color: #fff; + padding: 0.4rem 1.3rem; + text-align: center; + font-size: 1rem; + border: none; + cursor: pointer; + margin-right: 0.5rem; + outline: none; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); + border-radius: 2px; +} + +.btn:hover { + opacity: 0.9; +} + +.btn-rounded { + border-radius: 5px; +} + +.btn-xl { + font-size: 2rem; + padding: 1.5rem 2.1rem; + text-transform: uppercase; +} + +.btn-lg { + font-size: 1rem; + padding: 0.8rem 1.3rem; + text-transform: uppercase; +} + +.btn-icon { + margin-left: 1rem; +} + +@media (max-width: 960px) { + .showcase { + height: 70vh; + } + + .hide-sm { + display: none; + } + + .showcase-top img { + top: 30%; + left: 5%; + transform: translate(0); + } + + .showcase-content h1 { + font-size: 3.7rem; + line-height: 1; + } + + .showcase-content p { + font-size: 1.5rem; + } + + .footer .footer-cols { + grid-template-columns: repeat(2, 1fr); + } + + .btn-xl { + font-size: 1.5rem; + padding: 1.4rem 2rem; + text-transform: uppercase; + } + + .text-xl { + font-size: 1.5rem; + } + + .text-lg { + font-size: 1.3rem; + margin-bottom: 1rem; + } + + .text-md { + margin-bottom: 1rem; + font-size: 1.2rem; + } +} + +@media (max-width: 700px) { + .showcase::after { + background: rgba(0, 0, 0, 0.6); + box-shadow: inset 80px 80px 150px #000000, inset -80px -80px 150px #000000; + } + + .showcase-content h1 { + font-size: 2.5rem; + line-height: 1; + } + + .showcase-content p { + font-size: 1rem; + } + + #tab-1-content .tab-1-content-inner { + grid-template-columns: 1fr; + text-align: center; + } + + #tab-2-content .tab-2-content-top { + display: block; + text-align: center; + } + + #tab-2-content .tab-2-content-bottom { + margin-top: 2rem; + display: grid; + grid-template-columns: 1fr; + grid-gap: 2rem; + text-align: center; + } + + .btn-xl { + font-size: 1rem; + padding: 1.2rem 1.6rem; + text-transform: uppercase; + } +} + +@media(max-height: 600px) { + .showcase-content { + margin-top: 3rem; +} +} \ No newline at end of file