diff --git a/Movie/10.jpg b/Movie/10.jpg new file mode 100644 index 00000000..274755ce Binary files /dev/null and b/Movie/10.jpg differ diff --git a/Movie/11.jpg b/Movie/11.jpg new file mode 100644 index 00000000..0b348aff Binary files /dev/null and b/Movie/11.jpg differ diff --git a/Movie/12.jpg b/Movie/12.jpg new file mode 100644 index 00000000..40bc3488 Binary files /dev/null and b/Movie/12.jpg differ diff --git a/Movie/13.jpg b/Movie/13.jpg new file mode 100644 index 00000000..8fe9516b Binary files /dev/null and b/Movie/13.jpg differ diff --git a/Movie/14.jpg b/Movie/14.jpg new file mode 100644 index 00000000..556f8bdc Binary files /dev/null and b/Movie/14.jpg differ diff --git a/Movie/15.jpg b/Movie/15.jpg new file mode 100644 index 00000000..613ad3d9 Binary files /dev/null and b/Movie/15.jpg differ diff --git a/Movie/16.jpg b/Movie/16.jpg new file mode 100644 index 00000000..ca1a0186 Binary files /dev/null and b/Movie/16.jpg differ diff --git a/Movie/4.jpg b/Movie/4.jpg new file mode 100644 index 00000000..e920958e Binary files /dev/null and b/Movie/4.jpg differ diff --git a/Movie/4.png b/Movie/4.png new file mode 100644 index 00000000..50a87f7d Binary files /dev/null and b/Movie/4.png differ diff --git a/Movie/5.jpg b/Movie/5.jpg new file mode 100644 index 00000000..9141ba45 Binary files /dev/null and b/Movie/5.jpg differ diff --git a/Movie/6.jpg b/Movie/6.jpg new file mode 100644 index 00000000..a44cb0ad Binary files /dev/null and b/Movie/6.jpg differ diff --git a/Movie/7.jpg b/Movie/7.jpg new file mode 100644 index 00000000..5ef5ef57 Binary files /dev/null and b/Movie/7.jpg differ diff --git a/Movie/8.jpg b/Movie/8.jpg new file mode 100644 index 00000000..94b133a6 Binary files /dev/null and b/Movie/8.jpg differ diff --git a/Movie/9.jpg b/Movie/9.jpg new file mode 100644 index 00000000..ed24e156 Binary files /dev/null and b/Movie/9.jpg differ diff --git a/Movie/about b/Movie/about new file mode 100644 index 00000000..24aaad20 --- /dev/null +++ b/Movie/about @@ -0,0 +1 @@ +it is a responive online movie website diff --git a/Movie/banner.jpg b/Movie/banner.jpg new file mode 100644 index 00000000..6215900a Binary files /dev/null and b/Movie/banner.jpg differ diff --git a/Movie/design.css b/Movie/design.css new file mode 100644 index 00000000..ed8e00f1 --- /dev/null +++ b/Movie/design.css @@ -0,0 +1,182 @@ +@import url('https://fonts.googleapis.com/css2?family=Tiro+Telugu:ital@1&display=swap'); +.buttoncolor{ + position: absolute; + top: 4%; + right: -237px; + transform: translate(-99% , -21%); + border-radius: 0px; + cursor: pointer; + color: white; + outline: none; + border: none; + font-weight: 7b00; + border-radius: 0.2vw; + padding-left: 2rem; + padding-right: 2rem; + margin-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + +} +.buttoncolor:hover{ + transform: scale(1.08); +} + +.Red{ + background-color: red; +} +.green{ + background-color: green; +} + +*{ + margin: 0; + box-sizing: border-box; +} +body{ + + font-style: normal; + background-color: black; +} +.rowposters{ + width: 100%; + object-fit: contain; + max-height: 300px; + margin-right: none; + transition: tranform 450ms; +} +.rowposters{ + display: flex; + overflow-y: hidden; + overflow-x: scroll; + padding: 3px; +} +.rowposters:hover{ + transform: scale(1.08); +} +.rowposters::-webkit-scrollbar{ + display: none; +} +.rowposters{ + max-height: 250px; +} +.row{ + color: white; + max-resolution: 20px; +} +.banner{ + background-image: url(banner.jpg); + background-size: cover; + background-position: center center; + color:white; + object-fit: contain; + height: 523px; +} +.bannercontents{ + margin-left: 30px; + padding-top: 140px; + height: 190px; +} +.bannertitle{ +font-size: 3rem; +font-weight: 800; +padding-bottom: 0.3rem; +color: black; +} +.bannerdiscription{ + width: 45rem; + line-height: 1.3; + padding-top: 1rem; + font-size: 20px; + max-width: 697px; + height: 180px; + font-family: 'Tiro Telugu', serif; + color: rgb(0, 0, 0); + font-weight: bold; + +} +.bannerbutton{ + cursor: pointer; + color: black; + outline: none; + border: none; + font-weight: 7b00; + border-radius: 0.2vw; + padding-left: 2rem; + padding-right: 2rem; + margin-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-weight: bold; +} +.bannerbutton:hover{ + transform: scale(1.08); +} +.navlogo{ + width: 121px; + object-fit: contain; +} +.nav{ + position: fixed; + top: 0; + width: 100%; + display: flex; + justify-content: space-between; + padding: 20px; + z-index: 1; + transition-timing-function: ease-in; + transition: all 0.5s; +} + + + /* styling search bar */ + .search input[type=text]{ + width:316px; + height:36px; + border: radius 1px; + border: none; + } + + .search{ + float:right; + margin:7px; + transform: translate(-400px, -2px) + + } + + .search button{ + background-color: black; + color: #f2f2f2; + float: right; + padding: 5px 10px; + margin-right: 16px; + font-size: 12px; + border: none; + cursor: pointer; + + } + a.login{ + transform: translate(-810px, 3px); + position: absolute; + right: -53px; + cursor: pointer; + color: white; + outline: none; + border: none; + font-weight: 7b00; + border-radius: 0.2vw; + background-size: cover; + background-position: center center; + object-fit: contain; + background-color: red; + border-radius: 0.2vw; + padding-left: 2rem; + padding-right: 2rem; + margin-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-weight: bold; + + + } + \ No newline at end of file diff --git a/Movie/form.css b/Movie/form.css new file mode 100644 index 00000000..0f4965cb --- /dev/null +++ b/Movie/form.css @@ -0,0 +1,79 @@ +@import url(https://fonts.googleapis.com/css?family=Roboto:300); +header .header{ + background-color: #fff; + height: 45px; +} +header a img{ + width: 134px; +margin-top: 4px; +} +.login-page { + width: 360px; + padding: 8% 0 0; + margin: auto; +} +.login-page .form .login{ + margin-top: -31px; +margin-bottom: 26px; +} +.form { + position: relative; + z-index: 1; + background: #FFFFFF; + max-width: 360px; + margin: 0 auto 100px; + padding: 45px; + text-align: center; + box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); +} +.form input { + font-family: "Roboto", sans-serif; + outline: 0; + background: #f2f2f2; + width: 100%; + border: 0; + margin: 0 0 15px; + padding: 15px; + box-sizing: border-box; + font-size: 14px; +} +.form button { + font-family: "Roboto", sans-serif; + text-transform: uppercase; + outline: 0; + background-color: #328f8a; + background-image: linear-gradient(45deg,#328f8a,#08ac4b); + width: 100%; + border: 0; + padding: 15px; + color: #FFFFFF; + font-size: 14px; + -webkit-transition: all 0.3 ease; + transition: all 0.3 ease; + cursor: pointer; +} +.form .message { + margin: 15px 0 0; + color: #b3b3b3; + font-size: 12px; +} +.form .message a { + color: #4CAF50; + text-decoration: none; +} + +.container { + position: relative; + z-index: 1; + max-width: 300px; + margin: 0 auto; +} + +body { + background-color: #328f8a; + background-image: linear-gradient(45deg,#328f8a,#08ac4b); + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + \ No newline at end of file diff --git a/Movie/index.html b/Movie/index.html new file mode 100644 index 00000000..643a847c --- /dev/null +++ b/Movie/index.html @@ -0,0 +1,162 @@ + + + + + + + FILMSZILLA + + + + + + + + + +
+

FILMSZILLA ORIGINALS

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

TRENDIND NOW

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

TOP RATED

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

ACTION MOVIES

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

COMEDEY MOVIES

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

DOCUMENTARY MOVIES

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

HORROR MOVIES

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

ROMANTIC MOVIES

+
+ + + + + + + + +
+ + + + +
+ + + + + \ No newline at end of file diff --git a/Movie/login.html b/Movie/login.html new file mode 100644 index 00000000..465ac42f --- /dev/null +++ b/Movie/login.html @@ -0,0 +1,27 @@ + + + + + CSS Login Screen Tutorial + + + + + + + \ No newline at end of file diff --git a/Movie/logo.png b/Movie/logo.png new file mode 100644 index 00000000..dac13552 Binary files /dev/null and b/Movie/logo.png differ diff --git a/Movie/music.css b/Movie/music.css new file mode 100644 index 00000000..e94eed4f --- /dev/null +++ b/Movie/music.css @@ -0,0 +1,216 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Varela+Round&display=swap"); + +body { + background-color: antiquewhite; + font-family: "Lato", sans-serif; +} + +* { + margin: 0; + padding: 0; +} + +nav { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; +} + +nav ul { + display: flex; + align-items: center; + list-style-type: none; + /* background-color: black; */ + height: 65px; + /* color: white; */ + background-color: #4c0027; + color: white; +} + +nav ul li { + padding: 0 12px; +} + +.brand img { + width: 50px; + padding: 0 10px; + margin-bottom: 2px; +} + +.brand { + display: flex; + align-items: center; + font-weight: bolder; + font-size: 1.3rem; +} + +.container { + min-height: 72vh; + background-color: black; + color: white; + font-family: "Varela Round", sans-serif; + display: flex; + margin: 23px auto; + width: 70%; + border-radius: 12px; + padding: 34px; + background: url(images/bg.jpg) no-repeat; +} + +.bottom { + position: sticky; + height: 130px; + background-color: black; + color: white; + bottom: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.icons { + margin-top: 14px; +} + +.icons i { + cursor: pointer; +} + +#myProgressBar { + width: 80vw; + cursor: pointer; +} + +.songItemContainer { + margin-top: 74px; +} + +.songItem { + height: 50px; + display: flex; + background-color: azure; + color: black; + /* width: 80%; */ + margin: 12px 0; + justify-content: space-between; + align-items: center; + border-radius: 34px; +} + +.songItem img { + width: 43px; + margin: 0 23px; + border-radius: 34px; +} + +.timestamp { + margin: 0 23px; +} + +.timestamp i { + cursor: pointer; +} + +.songInfo { + position: absolute; + left: 10vw; + font-family: "Varela Round", sans-serif; + font-size: 30px; +} + +.songInfo img { + opacity: 0; + transition: opacity 0.4s ease-in; +} + +.slider_container { +display: flex; +justify-content: center; +align-items: center; +} + +.current-time, +.total-duration { +padding: 10px; +} + + + +/*Responsive Layout */ +@media (max-width: 1250px) { + .songInfo{ + font-size: 25px; + } +} + +@media (max-width: 1050px) { + .songInfo{ + left: 4vw; + font-size: 20px; + } +} + +@media (max-width: 850px) { + .songInfo{ + left: 0vw; + } +} + +@media (max-width: 750px) { + .songName{ + font-size: 15px; + } + .timestamp{ + font-size: 14px; + } + .songInfo{ + left: 4vw; + } + .songInfo{ + left: 0vw; + /* font-size: 14px; */ + position: relative; + margin-top: 10px; + margin-left: -40px; + } +} + +@media (max-width: 600px) { + .timestamp { + margin: 0 3px; + } + .songInfo{ + left: 0vw; + position: relative; + /* font-size: 10px; */ + } +} + +@media (max-width: 450px) { + .timestamp { + margin: 0 1px; + font-size: 14px; + } + .songInfo{ + left: 0vw; + font-size: 10px; + position: relative; + } +} + +@media (max-width: 315px) { + .songName{ + font-size: 13px; + } + .timestamp { + margin: 0 0px; + font-size: 10px; + } + .songInfo{ + left: 0vw; + position: relative; + } + .songItem { + height: 75px; + } +} \ No newline at end of file diff --git a/Movie/one.jpg b/Movie/one.jpg new file mode 100644 index 00000000..8723348b Binary files /dev/null and b/Movie/one.jpg differ diff --git a/Movie/style.css b/Movie/style.css new file mode 100644 index 00000000..2e9592f8 --- /dev/null +++ b/Movie/style.css @@ -0,0 +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: 156px; + 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 diff --git a/Movie/three.jpg b/Movie/three.jpg new file mode 100644 index 00000000..f1d7de96 Binary files /dev/null and b/Movie/three.jpg differ diff --git a/Movie/two.jpg b/Movie/two.jpg new file mode 100644 index 00000000..a0a2d364 Binary files /dev/null and b/Movie/two.jpg differ