From 00edb27083a9d0ed6d4178c0070e51030f66daf4 Mon Sep 17 00:00:00 2001 From: Navjot Kaur Date: Fri, 3 May 2024 00:26:49 -0500 Subject: [PATCH] Styled banner --- asset-manifest.json | 6 +++--- index.html | 2 +- static/css/main.a41662f1.css | 2 ++ static/css/main.a41662f1.css.map | 1 + static/css/main.c92cd7fc.css | 2 -- static/css/main.c92cd7fc.css.map | 1 - 6 files changed, 7 insertions(+), 7 deletions(-) create mode 100644 static/css/main.a41662f1.css create mode 100644 static/css/main.a41662f1.css.map delete mode 100644 static/css/main.c92cd7fc.css delete mode 100644 static/css/main.c92cd7fc.css.map diff --git a/asset-manifest.json b/asset-manifest.json index 13b27e9..18170ad 100644 --- a/asset-manifest.json +++ b/asset-manifest.json @@ -1,13 +1,13 @@ { "files": { - "main.css": "/flixster/static/css/main.c92cd7fc.css", + "main.css": "/flixster/static/css/main.a41662f1.css", "main.js": "/flixster/static/js/main.5f524edb.js", "index.html": "/flixster/index.html", - "main.c92cd7fc.css.map": "/flixster/static/css/main.c92cd7fc.css.map", + "main.a41662f1.css.map": "/flixster/static/css/main.a41662f1.css.map", "main.5f524edb.js.map": "/flixster/static/js/main.5f524edb.js.map" }, "entrypoints": [ - "static/css/main.c92cd7fc.css", + "static/css/main.a41662f1.css", "static/js/main.5f524edb.js" ] } \ No newline at end of file diff --git a/index.html b/index.html index 3c844c4..b41e472 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -Flixster
\ No newline at end of file +Flixster
\ No newline at end of file diff --git a/static/css/main.a41662f1.css b/static/css/main.a41662f1.css new file mode 100644 index 0000000..341b36b --- /dev/null +++ b/static/css/main.a41662f1.css @@ -0,0 +1,2 @@ +.container{margin-inline:auto;width:min(100% - 30px,1080px)}.flex{display:flex}.space-between{justify-content:space-between}section{padding:60px 0}header{background-color:#5c178d;height:60px}.header-list a:hover,h1{color:#fff}header h1{font-size:2.2rem;letter-spacing:.2px;text-transform:uppercase}.header-list li,header h1{font-weight:500;line-height:60px}.header-list li{cursor:pointer;font-size:18px;margin-right:25px}a{text-decoration:none}.header-list a{color:#f1e3fa}.banner{align-items:center;background:#f8f9fe url(https://images.unsplash.com/photo-1576514129883-2f1d47a65da6?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8c3RhZ2V8ZW58MHx8MHx8fDA%3D) center 50%/cover no-repeat;display:flex;height:100svh;justify-content:center}main .banner:before{background-color:#0000008c;content:"";height:100%;left:0;position:absolute;top:60px;width:100%}.banner .container{position:relative;text-align:center;z-index:99999}.banner h1{font-size:4.4rem;font-weight:600}.banner-text{margin:0 auto;width:75%}.banner p{color:#fff;font-size:1.8rem;padding:20px 0 50px;text-align:center}.purple{color:#7021a8}.gallery h2,.gallery p{text-align:center}.gallery h2{color:#24202d;font-size:2.8rem;font-weight:600}.gallery p{color:#514c5b;font-size:16px;font-weight:400}.movie-list{gap:26px;margin:40px 0}.movie-list img{border-radius:5px;box-shadow:1px 1px 4px #bdbbc173;cursor:pointer;transition:all .25s ease-in-out;width:auto}.movie-list img:hover{transform:translateY(-4px)}.movie-list p{color:#24202d;font-size:18px;font-weight:500;padding-top:8px}footer{background-color:#0f0417;color:#fff;font-size:1.8rem;font-weight:400;line-height:60px;text-align:center}footer p{padding-bottom:30px}.footer-row ul{gap:25px;justify-content:center;padding:30px 0 0}footer a{color:#b873ea}footer a:hover{color:#fff} +/*# sourceMappingURL=main.a41662f1.css.map*/ \ No newline at end of file diff --git a/static/css/main.a41662f1.css.map b/static/css/main.a41662f1.css.map new file mode 100644 index 0000000..0d83eef --- /dev/null +++ b/static/css/main.a41662f1.css.map @@ -0,0 +1 @@ +{"version":3,"file":"static/css/main.a41662f1.css","mappings":"AAEA,WAEE,kBAAmB,CADnB,6BAEF,CAEA,MACE,YACF,CAEA,eACE,6BACF,CAEA,QACE,cACF,CAMA,OAEE,wBAAyB,CADzB,WAEF,CAEA,wBACE,UACF,CAEA,UACE,gBAAiB,CAIjB,mBAAqB,CAFrB,wBAGF,CAEA,0BANE,eAAgB,CAEhB,gBAUF,CANA,gBACE,cAAe,CAGf,cAAe,CAFf,iBAIF,CAEA,EACE,oBACF,CAEA,eACE,aACF,CAKA,QAEE,kBAAmB,CAGnB,2NAAgO,CAJhO,YAAa,CAGb,aAAc,CADd,sBAGF,CAEA,oBAME,0BAAmC,CACnC,UAAW,CAHX,WAAY,CADZ,MAAO,CAFP,iBAAkB,CAClB,QAAS,CAGT,UAGD,CAED,mBACE,iBAAkB,CAElB,iBAAkB,CADlB,aAEF,CAEA,WACE,gBAAiB,CACjB,eACF,CAEA,aAEE,aAAc,CADd,SAEF,CAEA,UAIE,UAAW,CAFX,gBAAiB,CADjB,mBAAoB,CAEpB,iBAEF,CAKA,QACE,aACF,CAEA,uBACE,iBACF,CAEA,YAGE,aAAoB,CAFpB,gBAAiB,CACjB,eAEF,CAEA,WAGE,aAAoB,CAFpB,cAAe,CACf,eAEF,CAEA,YAEE,QAAS,CADT,aAEF,CAEA,gBAEE,iBAAkB,CAClB,gCAA+C,CAE/C,cAAe,CADf,+BAAiC,CAHjC,UAKF,CAEA,sBACE,0BACF,CAEA,cAIE,aAAoB,CAFpB,cAAe,CACf,eAAgB,CAFhB,eAIF,CAMA,OACE,wBAAyB,CAGzB,UAAW,CAFX,gBAAiB,CACjB,eAAgB,CAEhB,gBAAiB,CACjB,iBACF,CAEA,SACE,mBACF,CAEA,eAGE,QAAS,CADT,sBAAuB,CADvB,gBAGF,CAEA,SACE,aACF,CAEA,eACE,UACF","sources":["css/index.css"],"sourcesContent":["@charset \"utf-8\";\r\n\r\n.container {\r\n width: min(100% - 30px, 1080px);\r\n margin-inline: auto;\r\n}\r\n\r\n.flex {\r\n display: flex;\r\n}\r\n\r\n.space-between {\r\n justify-content: space-between;\r\n}\r\n\r\nsection {\r\n padding: 60px 0;\r\n}\r\n\r\n\r\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */\r\n/* Header */\r\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */\r\nheader {\r\n height: 60px;\r\n background-color: #5c178d;\r\n}\r\n\r\nh1, .header-list a:hover {\r\n color: #fff;\r\n}\r\n\r\nheader h1 {\r\n font-size: 2.2rem;\r\n font-weight: 500;\r\n text-transform: uppercase;\r\n line-height: 60px;\r\n letter-spacing: 0.2px;\r\n}\r\n\r\n.header-list li {\r\n cursor: pointer;\r\n margin-right: 25px;\r\n line-height: 60px;\r\n font-size: 18px;\r\n font-weight: 500;\r\n}\r\n\r\na {\r\n text-decoration: none;\r\n}\r\n\r\n.header-list a {\r\n color: rgb(241 227 250);\r\n}\r\n\r\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */\r\n/* Banner */\r\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */\r\n.banner {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 100svh;\r\n background: #f8f9fe url('https://images.unsplash.com/photo-1576514129883-2f1d47a65da6?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8c3RhZ2V8ZW58MHx8MHx8fDA%3D') center 50% / cover no-repeat;\r\n}\r\n\r\nmain .banner::before {\r\n position: absolute;\r\n top: 60px;\r\n left: 0;\r\n height: 100%;\r\n width: 100%;\r\n background-color: rgb(0 0 0 / 0.55);\r\n content: '';\r\n }\r\n\r\n.banner .container {\r\n position: relative;\r\n z-index: 99999;\r\n text-align: center;\r\n}\r\n\r\n.banner h1 {\r\n font-size: 4.4rem;\r\n font-weight: 600;\r\n}\r\n\r\n.banner-text {\r\n width: 75%;\r\n margin: 0 auto;\r\n}\r\n\r\n.banner p {\r\n padding: 20px 0 50px;\r\n font-size: 1.8rem;\r\n text-align: center;\r\n color: #fff;\r\n}\r\n\r\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */\r\n/* Gallery */\r\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */\r\n.purple {\r\n color: rgb(112 33 168);\r\n}\r\n\r\n.gallery h2, .gallery p {\r\n text-align: center;\r\n}\r\n\r\n.gallery h2 {\r\n font-size: 2.8rem;\r\n font-weight: 600;\r\n color: rgb(36 32 45);\r\n}\r\n\r\n.gallery p {\r\n font-size: 16px;\r\n font-weight: 400;\r\n color: rgb(81 76 91);\r\n}\r\n\r\n.movie-list {\r\n margin: 40px 0;\r\n gap: 26px;\r\n}\r\n\r\n.movie-list img {\r\n width: auto;\r\n border-radius: 5px;\r\n box-shadow: 1px 1px 4px rgb(189 187 193 / 0.45);\r\n transition: all 0.25s ease-in-out;\r\n cursor: pointer;\r\n}\r\n\r\n.movie-list img:hover {\r\n transform: translateY(-4px);\r\n}\r\n\r\n.movie-list p {\r\n padding-top: 8px;\r\n font-size: 18px;\r\n font-weight: 500;\r\n color: rgb(36 32 45);\r\n}\r\n\r\n\r\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */\r\n/* Footer */\r\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */\r\nfooter {\r\n background-color: #0f0417;\r\n font-size: 1.8rem;\r\n font-weight: 400;\r\n color: #fff;\r\n line-height: 60px;\r\n text-align: center;\r\n}\r\n\r\nfooter p {\r\n padding-bottom: 30px;\r\n}\r\n\r\n.footer-row ul {\r\n padding: 30px 0 0;\r\n justify-content: center;\r\n gap: 25px;\r\n}\r\n\r\nfooter a {\r\n color: #b873ea;\r\n}\r\n\r\nfooter a:hover {\r\n color: #fff;\r\n}"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/static/css/main.c92cd7fc.css b/static/css/main.c92cd7fc.css deleted file mode 100644 index da1614a..0000000 --- a/static/css/main.c92cd7fc.css +++ /dev/null @@ -1,2 +0,0 @@ -.container{margin-inline:auto;width:min(100% - 30px,1080px)}.flex{display:flex}.space-between{justify-content:space-between}section{padding:60px 0}header{background-color:#5c178d;height:60px}.header-list a:hover,h1{color:#fff}header h1{font-size:2.2rem;letter-spacing:.2px;text-transform:uppercase}.header-list li,header h1{font-weight:500;line-height:60px}.header-list li{cursor:pointer;font-size:18px;margin-right:25px}a{text-decoration:none}.header-list a{color:#f1e3fa}.banner{align-items:center;background:#f8f9fe url(https://cdn.dribbble.com/users/72506/screenshots/17150636/media/03d39dee8956cbef2f44af459702053a.jpg?resize=1200x900&vertical=center) center 60%/cover no-repeat;display:flex;height:44rem;justify-content:center}main .banner:before{background-color:#0000006b;content:"";height:57%;left:0;position:absolute;top:60px;width:100%}.banner .container{position:relative;text-align:center;z-index:99999}.banner h1{font-size:4.4rem;font-weight:600}.banner-text{margin:0 auto;width:75%}.banner p{color:#fff;font-size:1.8rem;padding:20px 0 50px;text-align:center}.purple{color:#7021a8}.gallery h2,.gallery p{text-align:center}.gallery h2{color:#24202d;font-size:2.8rem;font-weight:600}.gallery p{color:#514c5b;font-size:16px;font-weight:400}.movie-list{gap:26px;margin:40px 0}.movie-list img{border-radius:5px;box-shadow:1px 1px 4px #bdbbc173;cursor:pointer;transition:all .25s ease-in-out;width:auto}.movie-list img:hover{transform:translateY(-4px)}.movie-list p{color:#24202d;font-size:18px;font-weight:500;padding-top:8px}footer{background-color:#0f0417;color:#fff;font-size:1.8rem;font-weight:400;line-height:60px;text-align:center}footer p{padding-bottom:30px}.footer-row ul{gap:25px;justify-content:center;padding:30px 0 0}footer a{color:#b873ea}footer a:hover{color:#fff} -/*# sourceMappingURL=main.c92cd7fc.css.map*/ \ No newline at end of file diff --git a/static/css/main.c92cd7fc.css.map b/static/css/main.c92cd7fc.css.map deleted file mode 100644 index 3ee0a19..0000000 --- a/static/css/main.c92cd7fc.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"static/css/main.c92cd7fc.css","mappings":"AAEA,WAEE,kBAAmB,CADnB,6BAEF,CAEA,MACE,YACF,CAEA,eACE,6BACF,CAEA,QACE,cACF,CAMA,OAEE,wBAAyB,CADzB,WAEF,CAEA,wBACE,UACF,CAEA,UACE,gBAAiB,CAIjB,mBAAqB,CAFrB,wBAGF,CAEA,0BANE,eAAgB,CAEhB,gBAUF,CANA,gBACE,cAAe,CAGf,cAAe,CAFf,iBAIF,CAEA,EACE,oBACF,CAEA,eACE,aACF,CAKA,QAEE,kBAAmB,CAGnB,uLAA4L,CAJ5L,YAAa,CAGb,YAAa,CADb,sBAGF,CAEA,oBAME,0BAAmC,CACnC,UAAW,CAHX,UAAW,CADX,MAAO,CAFP,iBAAkB,CAClB,QAAS,CAGT,UAGD,CAED,mBACE,iBAAkB,CAElB,iBAAkB,CADlB,aAEF,CAEA,WACE,gBAAiB,CACjB,eACF,CAEA,aAEE,aAAc,CADd,SAEF,CAEA,UAIE,UAAW,CAFX,gBAAiB,CADjB,mBAAoB,CAEpB,iBAEF,CAKA,QACE,aACF,CAEA,uBACE,iBACF,CAEA,YAGE,aAAoB,CAFpB,gBAAiB,CACjB,eAEF,CAEA,WAGE,aAAoB,CAFpB,cAAe,CACf,eAEF,CAEA,YAEE,QAAS,CADT,aAEF,CAEA,gBAEE,iBAAkB,CAClB,gCAA+C,CAE/C,cAAe,CADf,+BAAiC,CAHjC,UAKF,CAEA,sBACE,0BACF,CAEA,cAIE,aAAoB,CAFpB,cAAe,CACf,eAAgB,CAFhB,eAIF,CAMA,OACE,wBAAyB,CAGzB,UAAW,CAFX,gBAAiB,CACjB,eAAgB,CAEhB,gBAAiB,CACjB,iBACF,CAEA,SACE,mBACF,CAEA,eAGE,QAAS,CADT,sBAAuB,CADvB,gBAGF,CAEA,SACE,aACF,CAEA,eACE,UACF","sources":["css/index.css"],"sourcesContent":["@charset \"utf-8\";\r\n\r\n.container {\r\n width: min(100% - 30px, 1080px);\r\n margin-inline: auto;\r\n}\r\n\r\n.flex {\r\n display: flex;\r\n}\r\n\r\n.space-between {\r\n justify-content: space-between;\r\n}\r\n\r\nsection {\r\n padding: 60px 0;\r\n}\r\n\r\n\r\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */\r\n/* Header */\r\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */\r\nheader {\r\n height: 60px;\r\n background-color: #5c178d;\r\n}\r\n\r\nh1, .header-list a:hover {\r\n color: #fff;\r\n}\r\n\r\nheader h1 {\r\n font-size: 2.2rem;\r\n font-weight: 500;\r\n text-transform: uppercase;\r\n line-height: 60px;\r\n letter-spacing: 0.2px;\r\n}\r\n\r\n.header-list li {\r\n cursor: pointer;\r\n margin-right: 25px;\r\n line-height: 60px;\r\n font-size: 18px;\r\n font-weight: 500;\r\n}\r\n\r\na {\r\n text-decoration: none;\r\n}\r\n\r\n.header-list a {\r\n color: rgb(241 227 250);\r\n}\r\n\r\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */\r\n/* Banner */\r\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */\r\n.banner {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 44rem;\r\n background: #f8f9fe url('https://cdn.dribbble.com/users/72506/screenshots/17150636/media/03d39dee8956cbef2f44af459702053a.jpg?resize=1200x900&vertical=center') center 60% / cover no-repeat;\r\n}\r\n\r\nmain .banner::before {\r\n position: absolute;\r\n top: 60px;\r\n left: 0;\r\n height: 57%;\r\n width: 100%;\r\n background-color: rgb(0 0 0 / 0.42);\r\n content: '';\r\n }\r\n\r\n.banner .container {\r\n position: relative;\r\n z-index: 99999;\r\n text-align: center;\r\n}\r\n\r\n.banner h1 {\r\n font-size: 4.4rem;\r\n font-weight: 600;\r\n}\r\n\r\n.banner-text {\r\n width: 75%;\r\n margin: 0 auto;\r\n}\r\n\r\n.banner p {\r\n padding: 20px 0 50px;\r\n font-size: 1.8rem;\r\n text-align: center;\r\n color: #fff;\r\n}\r\n\r\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */\r\n/* Gallery */\r\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */\r\n.purple {\r\n color: rgb(112 33 168);\r\n}\r\n\r\n.gallery h2, .gallery p {\r\n text-align: center;\r\n}\r\n\r\n.gallery h2 {\r\n font-size: 2.8rem;\r\n font-weight: 600;\r\n color: rgb(36 32 45);\r\n}\r\n\r\n.gallery p {\r\n font-size: 16px;\r\n font-weight: 400;\r\n color: rgb(81 76 91);\r\n}\r\n\r\n.movie-list {\r\n margin: 40px 0;\r\n gap: 26px;\r\n}\r\n\r\n.movie-list img {\r\n width: auto;\r\n border-radius: 5px;\r\n box-shadow: 1px 1px 4px rgb(189 187 193 / 0.45);\r\n transition: all 0.25s ease-in-out;\r\n cursor: pointer;\r\n}\r\n\r\n.movie-list img:hover {\r\n transform: translateY(-4px);\r\n}\r\n\r\n.movie-list p {\r\n padding-top: 8px;\r\n font-size: 18px;\r\n font-weight: 500;\r\n color: rgb(36 32 45);\r\n}\r\n\r\n\r\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */\r\n/* Footer */\r\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */\r\nfooter {\r\n background-color: #0f0417;\r\n font-size: 1.8rem;\r\n font-weight: 400;\r\n color: #fff;\r\n line-height: 60px;\r\n text-align: center;\r\n}\r\n\r\nfooter p {\r\n padding-bottom: 30px;\r\n}\r\n\r\n.footer-row ul {\r\n padding: 30px 0 0;\r\n justify-content: center;\r\n gap: 25px;\r\n}\r\n\r\nfooter a {\r\n color: #b873ea;\r\n}\r\n\r\nfooter a:hover {\r\n color: #fff;\r\n}"],"names":[],"sourceRoot":""} \ No newline at end of file