diff --git a/1.m4v b/Videos/1.m4v similarity index 100% rename from 1.m4v rename to Videos/1.m4v diff --git a/2.m4v b/Videos/2.m4v similarity index 100% rename from 2.m4v rename to Videos/2.m4v diff --git a/1.jpg b/images/1.jpg similarity index 100% rename from 1.jpg rename to images/1.jpg diff --git a/2.jpg b/images/2.jpg similarity index 100% rename from 2.jpg rename to images/2.jpg diff --git a/3.jpg b/images/3.jpg similarity index 100% rename from 3.jpg rename to images/3.jpg diff --git a/4.png b/images/4.png similarity index 100% rename from 4.png rename to images/4.png diff --git a/logo.png b/images/logo.png similarity index 100% rename from logo.png rename to images/logo.png diff --git a/tv.png b/images/tv.png similarity index 100% rename from tv.png rename to images/tv.png diff --git a/index.html b/index.html index b22ddb3..6fa40bf 100644 --- a/index.html +++ b/index.html @@ -1,56 +1,63 @@ + - + Netflix +
- Netflix Logo + Netflix Logo Sign In
-

Unlimited movies, TV shows and more.

-

All of Netflix, starting at just ₹ 199.

+

Unlimited Movies, TV Shows, and More

+

All of Netflix, Starting at Just ₹199

Ready to watch? Enter your email to create or restart your membership.

- + GET STARTED >
-
- Netflix Mobile -
-

Create profiles for kids.

-

Send kids on adventures with their favourite characters in a space made just for them—free with your membership.

+
+ Netflix Mobile +
+

Create Profiles for Kids

+

Send kids on adventures with their favorite characters in a space made just for them—free with your + membership.

-
-
-

Enjoy on your TV.

-

Watch on smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray players and more.

+
+
+

Enjoy on Your TV

+

Watch on Smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray players, and more.

- Netflix TV - + Netflix TV +
-
- Netflix Mobile -
-

Download your shows to watch offline.

-

Save your favourites easily and always have something to watch.

+
+ Netflix Mobile +
+

Download Your Shows to Watch Offline

+

Save your favorites easily and always have something to watch.

-
-
-

Watch everywhere.

+
+
+

Watch Everywhere

Stream unlimited movies and TV shows on your phone, tablet, laptop, and TV.

- Device-Pile-In - + Device-Pile-In +
@@ -73,7 +80,6 @@

Frequently Asked Questions

- + \ No newline at end of file diff --git a/style.css b/style/style.css similarity index 93% rename from style.css rename to style/style.css index 612dd1a..9f2de78 100644 --- a/style.css +++ b/style/style.css @@ -1,345 +1,345 @@ -:root{ - --primary-color: #e50914; - --dark-color: #141414; - --light-color: #f4f4f4; -} - -*{ - margin: 0; - padding: 0; -} - -body{ - font-family: Arial, Helvetica, sans-serif; - background: #000000; - color: #999999; -} - -ul{ - list-style: none; -} - -h1,h2,h3,h4{ - color: #ffffff; -} - -h3{ - font-weight: lighter; -} - -a{ - color: #ffffff; - text-decoration: none; -} - -p{ - margin: 0.5rem 0; - font-weight: bold; - color: #ffffff; -} - -img{ - width: 100%; -} - -.showcase{ - width: 100%; - height: 100vh; - position: relative; - background: url("1.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.4); - box-shadow: 120px 100px 250px #000000 , inset -120px -100px 250px #000000; -} - -.showcase-top{ - position: relative; - z-index: 2; - height: 90px; -} - -.showcase-top img{ - width: 140px; - position: absolute; - top: 50%; - left: 0; - transform: translate(40% , -50%); -} - -.showcase-top a{ - position: absolute; - top: 50%; - right: 0; - transform: translate(-60% , -50%); -} - -.showcase-content{ - position: relative; - margin: 0 26%; - z-index: 2; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; - align-items: center; - margin-top: 9rem; -} - -.showcase-content h1{ - font-weight: 700; - font-size: 64px; - margin: 0 30px; - max-width: 800px; - line-height: 74.5px; -} - -.showcase-content h3{ - color: white; - font-size: 25px; - margin: 16px 0; -} - -.showcase-content p{ - font-size: 19.2px; - font-weight: 300; - padding-top: 0.5rem; - padding-bottom: 1rem; -} - -.showcase-content input{ - position: absolute; - left: 0; - bottom: -8vh; - width: 454px; - height: 3rem; - font-size: 1rem; - padding-left: 0.5rem; -} - -.btn{ - display: inline-block; - background: var(--primary-color); - color: white; - padding: 0.5rem 1.2rem; - font-size: 1rem; - text-align: center; - border: none; - cursor: pointer; - border-radius: 2px; - margin-right: 0.5rem; - outline: none; - box-shadow: 0 5px 3px rgba(0, 0, 0, 0.45); -} - -.btn:hover{ - opacity: 0.9; -} - -.btn-rounded{ - border-radius: 5px; -} - -.showcase-content .btn-lg{ - position: absolute; - right: 0; - bottom: -8vh; - padding: 0.5rem 1.2rem; - font-size: 1.5rem; - text-transform: uppercase; - height: 36px; - width: 14rem; -} - -.card-0 , -.card-1, -.card-2, -.card-3{ - border-top: 8px rgb(69, 69, 69) solid; - padding: 50px; -} - -.card-0{ - position: relative; - display: inline-grid; - grid-template-columns: 40% 50%; - text-align: left; - align-items: center; - padding: 25px 45px 50px; -} - -.desc-0{ - padding-left: 100px; -} - -.card-1{ - position: relative; - display: inline-grid; - grid-template-columns: 50% 40%; - text-align: left; - align-items: center; - padding: 25px 45px 50px; -} - -.desc-1{ - padding-left: 80px; -} - -.style-cards h1{ - font-size: 3rem; - padding: 1rem; - padding-left: 0; -} - -.style-cards h3{ - font-size: 1.6rem; - line-height: 2rem; -} - -.card-1 video{ - position: relative; - width: 100%; - height: 54%; - grid-column: 2/2; - grid-row: 1/2; - z-index: -1; -} - -.card-1 img{ - grid-column: 2/2; - grid-row: 1/2; -} - -.card-2{ - position: relative; - display: inline-grid; - grid-template-columns: 40% 50%; - text-align: left; - align-items: center; - padding: 25px 45px 50px; -} - -.desc-2{ - padding-left: 100px; -} - -.card-3{ - position: relative; - display: inline-grid; - grid-template-columns: 50% 40%; - text-align: left; - align-items: center; - padding: 25px 45px 50px; -} - -.desc-3{ - padding-left: 80px; - padding-right: 20px; -} - -.card-3 img{ - width: 110%; - grid-column: 2/2; - grid-row: 1/2; -} - -.card-3 video{ - position: relative; - top: -87px; - left: 125px; - width: 65%; - height: 78%; - grid-column: 2/2; - grid-row: 1/2; - z-index: -1; -} - -.faq{ - text-align: center; -} - -.faq h1{ - padding-bottom: 40px; - font-size: 3rem; -} - -.questions{ - display: flex; - flex-direction: column; - flex-basis: 40%; - align-items: center; -} - -.questions li{ - padding: 20px 30px; - margin: 5px; - font-size: 1.6rem; - background-color: #303030; - color: white; - text-align: left; - width: 50%; -} - -.faq p{ - padding-top: 60px; - font-size: 1.2rem; - font-weight: 200; -} - -.input{ - display: inline-grid; - align-items: center; - grid-template-columns: 50% 40%; -} - -.input input{ - width: 600px; - height: 3rem; -} - -.input button{ - height: 3.25rem; - width: 320px; - left: 20px; - text-align: center; - background-color: var(--primary-color); - font-size: 1.5rem; - padding: 15px 32px; - border: none; - border-radius: 2px; - color: white; -} - -.footer{ - max-width: 70%; - margin: 1rem auto; - overflow: auto; -} - -.footer , -.footer a{ - color: #999999; - 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: 2.4; +:root{ + --primary-color: #e50914; + --dark-color: #141414; + --light-color: #f4f4f4; +} + +*{ + margin: 0; + padding: 0; +} + +body{ + font-family: Arial, Helvetica, sans-serif; + background: #000000; + color: #999999; +} + +ul{ + list-style: none; +} + +h1,h2,h3,h4{ + color: #ffffff; +} + +h3{ + font-weight: lighter; +} + +a{ + color: #ffffff; + text-decoration: none; +} + +p{ + margin: 0.5rem 0; + font-weight: bold; + color: #ffffff; +} + +img{ + width: 100%; +} + +.showcase{ + width: 100%; + height: 100vh; + position: relative; + background: url("1.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.4); + box-shadow: 120px 100px 250px #000000 , inset -120px -100px 250px #000000; +} + +.showcase-top{ + position: relative; + z-index: 2; + height: 90px; +} + +.showcase-top img{ + width: 140px; + position: absolute; + top: 50%; + left: 0; + transform: translate(40% , -50%); +} + +.showcase-top a{ + position: absolute; + top: 50%; + right: 0; + transform: translate(-60% , -50%); +} + +.showcase-content{ + position: relative; + margin: 0 26%; + z-index: 2; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + align-items: center; + margin-top: 9rem; +} + +.showcase-content h1{ + font-weight: 700; + font-size: 64px; + margin: 0 30px; + max-width: 800px; + line-height: 74.5px; +} + +.showcase-content h3{ + color: white; + font-size: 25px; + margin: 16px 0; +} + +.showcase-content p{ + font-size: 19.2px; + font-weight: 300; + padding-top: 0.5rem; + padding-bottom: 1rem; +} + +.showcase-content input{ + position: absolute; + left: 0; + bottom: -8vh; + width: 454px; + height: 3rem; + font-size: 1rem; + padding-left: 0.5rem; +} + +.btn{ + display: inline-block; + background: var(--primary-color); + color: white; + padding: 0.5rem 1.2rem; + font-size: 1rem; + text-align: center; + border: none; + cursor: pointer; + border-radius: 2px; + margin-right: 0.5rem; + outline: none; + box-shadow: 0 5px 3px rgba(0, 0, 0, 0.45); +} + +.btn:hover{ + opacity: 0.9; +} + +.btn-rounded{ + border-radius: 5px; +} + +.showcase-content .btn-lg{ + position: absolute; + right: 0; + bottom: -8vh; + padding: 0.5rem 1.2rem; + font-size: 1.5rem; + text-transform: uppercase; + height: 36px; + width: 14rem; +} + +.card-0 , +.card-1, +.card-2, +.card-3{ + border-top: 8px rgb(69, 69, 69) solid; + padding: 50px; +} + +.card-0{ + position: relative; + display: inline-grid; + grid-template-columns: 40% 50%; + text-align: left; + align-items: center; + padding: 25px 45px 50px; +} + +.desc-0{ + padding-left: 100px; +} + +.card-1{ + position: relative; + display: inline-grid; + grid-template-columns: 50% 40%; + text-align: left; + align-items: center; + padding: 25px 45px 50px; +} + +.desc-1{ + padding-left: 80px; +} + +.style-cards h1{ + font-size: 3rem; + padding: 1rem; + padding-left: 0; +} + +.style-cards h3{ + font-size: 1.6rem; + line-height: 2rem; +} + +.card-1 video{ + position: relative; + width: 100%; + height: 54%; + grid-column: 2/2; + grid-row: 1/2; + z-index: -1; +} + +.card-1 img{ + grid-column: 2/2; + grid-row: 1/2; +} + +.card-2{ + position: relative; + display: inline-grid; + grid-template-columns: 40% 50%; + text-align: left; + align-items: center; + padding: 25px 45px 50px; +} + +.desc-2{ + padding-left: 100px; +} + +.card-3{ + position: relative; + display: inline-grid; + grid-template-columns: 50% 40%; + text-align: left; + align-items: center; + padding: 25px 45px 50px; +} + +.desc-3{ + padding-left: 80px; + padding-right: 20px; +} + +.card-3 img{ + width: 110%; + grid-column: 2/2; + grid-row: 1/2; +} + +.card-3 video{ + position: relative; + top: -87px; + left: 125px; + width: 65%; + height: 78%; + grid-column: 2/2; + grid-row: 1/2; + z-index: -1; +} + +.faq{ + text-align: center; +} + +.faq h1{ + padding-bottom: 40px; + font-size: 3rem; +} + +.questions{ + display: flex; + flex-direction: column; + flex-basis: 40%; + align-items: center; +} + +.questions li{ + padding: 20px 30px; + margin: 5px; + font-size: 1.6rem; + background-color: #303030; + color: white; + text-align: left; + width: 50%; +} + +.faq p{ + padding-top: 60px; + font-size: 1.2rem; + font-weight: 200; +} + +.input{ + display: inline-grid; + align-items: center; + grid-template-columns: 50% 40%; +} + +.input input{ + width: 600px; + height: 3rem; +} + +.input button{ + height: 3.25rem; + width: 320px; + left: 20px; + text-align: center; + background-color: var(--primary-color); + font-size: 1.5rem; + padding: 15px 32px; + border: none; + border-radius: 2px; + color: white; +} + +.footer{ + max-width: 70%; + margin: 1rem auto; + overflow: auto; +} + +.footer , +.footer a{ + color: #999999; + 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: 2.4; } \ No newline at end of file