diff --git a/index.html b/index.html new file mode 100644 index 0000000..0333b17 --- /dev/null +++ b/index.html @@ -0,0 +1,91 @@ + + + + + Netflix + + + + + +
+ + +
+ + + +
+
+ + + +
+
+

See Again

+ +
+ + + + + +
+ + + +

Top 10 in India

+ +
+ + + + + +
+ +

Trending Now

+ +
+ + + + + +
+ + + + + + + +
+
+ + + + +
+
+ + + + +
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..7615306 --- /dev/null +++ b/style.css @@ -0,0 +1,291 @@ +/* CSS VARIABLES */ +:root { + --primary: #141414; + --light: #F3F3F3; + --dark: #686868; + } + + html, body { + width: 100vw; + min-height: 100vh; + margin: 0; + padding: 0; + background-color: var(--primary); + color: var(--light); + font-family: Arial, Helvetica, sans-serif; + box-sizing: border-box; + line-height: 1.4; + } + + img { + max-width: 100%; + } + + h1 { + padding-top: 60px; + } + + .wrapper { + margin: 0; + padding: 0; + } + + /* HEADER */ + header { + padding: 20px 20px 0 20px; + position: fixed; + top: 0; + display: grid; + grid-gap:5px; + grid-template-columns: 1fr 4fr 1fr; + grid-template-areas: + "nt mn mn sb . . . "; + background-color: var(--primary); + width: 100%; + margin-bottom: 0px; + } + + .netflixLogo { + grid-area: nt; + object-fit: cover; + width: 100px; + max-height: 100%; + + padding-left: 30px; + padding-top: 0px; + } + + .netflixLogo img { + height: 35px; + } + + #logo { + color: #E50914; + margin: 0; + padding: 0; + } + + + .main-nav { + grid-area: mn; + padding: 0 30px 0 20px; + } + + .main-nav a { + color: var(--light); + text-decoration: none; + margin: 5px; + } + + .main-nav a:hover { + color: var(--dark); + } + + .sub-nav { + grid-area: sb; + padding: 0 40px 0 40px; + } + + .sub-nav a { + color: var(--light); + text-decoration: none; + margin: 5px; + } + + .sub-nav a:hover { + color: var(--dark); + } + + .centre{ + font-weight: 900; + font: 1em sans-serif; + text-transform: uppercase; + } + + + /* MAIN CONTIANER */ + .main-container { + padding: 50px; + } + + .box { + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(6, minmax(100px, 1fr)); + } + + .box a { + transition: transform .3s; + } + + .box a:hover { + transition: transform .3s; + -ms-transform: scale(1.4); + -webkit-transform: scale(1.4); + transform: scale(1.4); + } + + .box img { + border-radius: 2px; + } + + /* LINKS */ + .link { + padding: 50px; + } + + .sub-links ul { + list-style: none; + padding: 0; + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(4, 1fr); + } + + .sub-links a { + color: var(--dark); + text-decoration: none; + } + + .sub-links a:hover { + color: var(--dark); + text-decoration: underline; + } + + .logos a{ + padding: 10px; + } + + .logo { + color: var(--dark); + } + + + /* FOOTER */ + footer { + padding: 20px; + text-align: center; + color: var(--dark); + margin: 10px; + } + + /* MEDIA QUERIES */ + + @media(max-width: 900px) { + + header { + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(2, 1fr); + grid-template-areas: + "nt nt nt . . . sb . . . " + "mn mn mn mn mn mn mn mn mn mn"; + } + + .box { + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(4, minmax(100px, 1fr)); + } + + } + + @media(max-width: 700px) { + + header { + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(2, 1fr); + grid-template-areas: + "nt nt nt . . . sb . . . " + "mn mn mn mn mn mn mn mn mn mn"; + } + + .box { + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(3, minmax(100px, 1fr)); + } + + .sub-links ul { + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(3, 1fr); + } + + } + + @media(max-width: 500px) { + + .wrapper { + font-size: 15px; + } + + header { + margin: 0; + padding: 20px 0 0 0; + position: static; + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(1, 1fr); + grid-template-areas: + "nt" + "mn" + "sb"; + text-align: center; + } + + .netflixLogo { + max-width: 100%; + margin: auto; + padding-right: 20px; + } + + .main-nav { + display: grid; + grid-gap: 0px; + grid-template-columns: repeat(1, 1fr); + text-align: center; + } + + h1 { + text-align: center; + font-size: 18px; + } + + + + .box { + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(1, 1fr); + text-align: center; + } + + .box a:hover { + transition: transform .3s; + -ms-transform: scale(1); + -webkit-transform: scale(1); + transform: scale(1.2); + } + + .logos { + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(2, 1fr); + text-align: center; + } + + .sub-links ul { + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(1, 1fr); + text-align: center; + font-size: 15px; + } + + + + + + } \ No newline at end of file