From 79c758f34decf70550d6e09c88e985b4e1cc949e Mon Sep 17 00:00:00 2001 From: Adwaita Raj Modak Date: Mon, 3 Oct 2022 15:44:23 +0530 Subject: [PATCH 1/4] Added Movie Website --- Movie_Website | 1 + 1 file changed, 1 insertion(+) create mode 160000 Movie_Website diff --git a/Movie_Website b/Movie_Website new file mode 160000 index 0000000..c162f6a --- /dev/null +++ b/Movie_Website @@ -0,0 +1 @@ +Subproject commit c162f6a9adf542e22716feed677281e1817f1a93 From 9034a5a5d3c012367f0fcb600de2ae4e573ed351 Mon Sep 17 00:00:00 2001 From: Adwaita Raj Modak Date: Mon, 3 Oct 2022 18:26:51 +0530 Subject: [PATCH 2/4] Added Movie Website --- Movie_Website | 1 - 1 file changed, 1 deletion(-) delete mode 160000 Movie_Website diff --git a/Movie_Website b/Movie_Website deleted file mode 160000 index c162f6a..0000000 --- a/Movie_Website +++ /dev/null @@ -1 +0,0 @@ -Subproject commit c162f6a9adf542e22716feed677281e1817f1a93 From f50e89a6958e74f47343283920b23f09e2142110 Mon Sep 17 00:00:00 2001 From: Adwaita Raj Modak Date: Mon, 3 Oct 2022 18:27:37 +0530 Subject: [PATCH 3/4] Added Movie Website --- Movie_Website/README.md | 2 + Movie_Website/css/style.css | 294 +++++++++++++++++++ Movie_Website/film/edit.css | 388 +++++++++++++++++++++++++ Movie_Website/film/index.html | 521 ++++++++++++++++++++++++++++++++++ Movie_Website/style.css | 294 +++++++++++++++++++ 5 files changed, 1499 insertions(+) create mode 100644 Movie_Website/README.md create mode 100644 Movie_Website/css/style.css create mode 100644 Movie_Website/film/edit.css create mode 100644 Movie_Website/film/index.html create mode 100644 Movie_Website/style.css diff --git a/Movie_Website/README.md b/Movie_Website/README.md new file mode 100644 index 0000000..6c1fb90 --- /dev/null +++ b/Movie_Website/README.md @@ -0,0 +1,2 @@ +# Movie_Website + diff --git a/Movie_Website/css/style.css b/Movie_Website/css/style.css new file mode 100644 index 0000000..37d801e --- /dev/null +++ b/Movie_Website/css/style.css @@ -0,0 +1,294 @@ +@import url(https://fonts.googleapis.com/css?family=Open+Sans); +.btn { + display: inline-block; + *display: inline; + *zoom: 1; + padding: 4px 10px 4px; + margin-bottom: 0; + font-size: 13px; + line-height: 18px; + color: #333333; + text-align: center; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + vertical-align: middle; + background-color: #f5f5f5; + background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -webkit-gradient( + linear, + 0 0, + 0 100%, + from(#ffffff), + to(#e6e6e6) + ); + background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); + background-image: linear-gradient(top, #ffffff, #e6e6e6); + background-repeat: repeat-x; + filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0); + border-color: #e6e6e6 #e6e6e6 #e6e6e6; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + border: 1px solid #e6e6e6; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 1px 2px rgba(0, 0, 0, 0.05); + cursor: pointer; + *margin-left: 0.3em; +} +.btn:hover, +.btn:active, +.btn.active, +.btn.disabled, +.btn[disabled] { + background-color: #e6e6e6; +} +.btn-large { + padding: 9px 14px; + font-size: 15px; + line-height: normal; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +.btn:hover { + color: #333333; + text-decoration: none; + background-color: #e6e6e6; + background-position: 0 -15px; + -webkit-transition: background-position 0.1s linear; + -moz-transition: background-position 0.1s linear; + -ms-transition: background-position 0.1s linear; + -o-transition: background-position 0.1s linear; + transition: background-position 0.1s linear; +} +.btn-primary, +.btn-primary:hover { + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + color: #ffffff; +} +.btn-primary.active { + color: rgba(255, 255, 255, 0.75); +} +.btn-primary { + background-color: #4a77d4; + background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4); + background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4); + background-image: -webkit-gradient( + linear, + 0 0, + 0 100%, + from(#6eb6de), + to(#4a77d4) + ); + background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4); + background-image: -o-linear-gradient(top, #6eb6de, #4a77d4); + background-image: linear-gradient(top, #6eb6de, #4a77d4); + background-repeat: repeat-x; + filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0); + border: 1px solid #3762bc; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 1px 2px rgba(0, 0, 0, 0.5); +} +.btn-primary:hover, +.btn-primary:active, +.btn-primary.active, +.btn-primary.disabled, +.btn-primary[disabled] { + filter: none; + background-color: #4a77d4; +} +.btn-block { + width: 100%; + display: block; +} + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} + +html { + width: 100%; + height: 100vh; + /* overflow: -moz-hidden-unscrollable; */ +} + +body { + width: 100%; + height: 100vh; + font-family: "Open Sans", sans-serif; + background: #092756; + color: #fff; + font-size: 18px; + text-align: center; + letter-spacing: 1.2px; + background: -moz-radial-gradient( + 0% 100%, + ellipse cover, + rgba(104, 128, 138, 0.4) 10%, + rgba(138, 114, 76, 0) 40% + ), + -moz-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) + 100%), + -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%); + background: -webkit-radial-gradient( + 0% 100%, + ellipse cover, + rgba(104, 128, 138, 0.4) 10%, + rgba(138, 114, 76, 0) 40% + ), + -webkit-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba( + 42, + 60, + 87, + 0.4 + ) + 100%), + -webkit-linear-gradient(-45deg, #670d10 0%, #092756 100%); + background: -o-radial-gradient( + 0% 100%, + ellipse cover, + rgba(104, 128, 138, 0.4) 10%, + rgba(138, 114, 76, 0) 40% + ), + -o-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) + 100%), + -o-linear-gradient(-45deg, #670d10 0%, #092756 100%); + background: -ms-radial-gradient( + 0% 100%, + ellipse cover, + rgba(104, 128, 138, 0.4) 10%, + rgba(138, 114, 76, 0) 40% + ), + -ms-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) + 100%), + -ms-linear-gradient(-45deg, #670d10 0%, #092756 100%); + background: -webkit-radial-gradient( + 0% 100%, + ellipse cover, + rgba(104, 128, 138, 0.4) 10%, + rgba(138, 114, 76, 0) 40% + ), + linear-gradient( + to bottom, + rgba(57, 173, 219, 0.25) 0%, + rgba(42, 60, 87, 0.4) 100% + ), + linear-gradient(135deg, #670d10 0%, #092756 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 ); +} +.login { + position: absolute; + top: 40%; + left: 50%; + margin: -150px 0 0 -150px; + width: 400px; + height: 400px; +} + +.login h1 { + color: #fff; + text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + letter-spacing: 1px; + text-align: center; +} + +input { + width: 100%; + /* display: flex; + flex-direction: column; + justify-content: center; */ + margin-bottom: 10px; + background: rgba(0, 0, 0, 0.3); + border: none; + outline: none; + padding: 10px; + font-size: 1.5rem; + color: #fff; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 4px; + box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2), + 0 1px 1px rgba(255, 255, 255, 0.2); + -webkit-transition: box-shadow 0.5s ease; + -moz-transition: box-shadow 0.5s ease; + -o-transition: box-shadow 0.5s ease; + -ms-transition: box-shadow 0.5s ease; + transition: box-shadow 0.5s ease; +} +input:focus { + box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.4), + 0 1px 1px rgba(255, 255, 255, 0.2); +} + +/* label { + width: 10%; + margin-bottom: 10px; + background: rgba(0, 0, 0, 0.3); + border: none; + outline: none; + padding: 10px; + font-size: 13px; + color: #fff; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 4px; + box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2), + 0 1px 1px rgba(255, 255, 255, 0.2); + -webkit-transition: box-shadow 0.5s ease; + -moz-transition: box-shadow 0.5s ease; + -o-transition: box-shadow 0.5s ease; + -ms-transition: box-shadow 0.5s ease; + transition: box-shadow 0.5s ease; */ +} +label:focus { + box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.4), + 0 1px 1px rgba(255, 255, 255, 0.2); +} +.dd label{ + /* margin-left: 5px; */ + /* max-width: 50%; */ + /* padding: 5px; */ + align-items: center; + /* max-width: 50%; */ + /* position: relative; */ + /* border: 2px dotted red; */ + display: flex; + flex-direction: column; + justify-content: space-around; + /* border: 2px dotted yellow; */ + border-radius: 25px; + border-width: 1px; + border-style: groove; + padding: 0; + /* cursor: pointer; */ + +} +input[type="checkbox"]{ + cursor: pointer; + max-width: 3%; + padding: 10px; + border: none; + background: none; + content: "\f00c"; + margin-bottom: 8px; + position: relative; + display: inline-block; + padding: 15px 30px; + /* display: ; */ +} +.foot{ + padding: 0 0 25px; + /* margin: 2px solid green; + text-decoration: #092756; */ +} \ No newline at end of file diff --git a/Movie_Website/film/edit.css b/Movie_Website/film/edit.css new file mode 100644 index 0000000..4919aa3 --- /dev/null +++ b/Movie_Website/film/edit.css @@ -0,0 +1,388 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap"); + +* { + outline: none !important; + scroll-behavior: smooth; +} +body { + font-family: "Poppins", sans-serif; +} +header { + position: relative; + z-index: 1000000; +} +p { + font-size: 1.15rem; +} +.navbar { + background: transparent !important; + transition: 0.4s; +} + +.navbar.scrolled { + background: #000 !important; + transition: 0.4s; +} + +.navbar-light .navbar-nav .active > .nav-link, +.navbar-light .navbar-nav .nav-link.active, +.navbar-light .navbar-nav .nav-link.show, +.navbar-light .navbar-nav .show > .nav-link { + color: #000; + background: #fff; +} +.navbar-light .navbar-nav .active > .nav-link:hover { + color: #000; +} + +.navbar-light .navbar-nav .nav-link { + color: rgba(255, 255, 255, 0.8); +} +.navbar-light .navbar-nav .nav-link:hover, +.navbar-light .navbar-nav .nav-link:focus { + color: rgba(255, 255, 255, 1); +} +.navbar-light .navbar-brand, +.navbar-light .navbar-brand:hover, +.navbar-light .navbar-brand:focus, +.navbar-light .navbar-brand:visited { + color: rgba(255, 255, 255, 1); + font-size: 2.5rem; + font-weight: 600; +} +.banner { + position: relative; + top: 0; + width: 100%; + height: 100vh; + background: url(https://images.unsplash.com/photo-1535016120720-40c646be5580?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80); + background-size: cover; + margin-bottom: 0; +} +.banner:before, +.sec2:before, +.contact:before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 400px; + background: linear-gradient(#000, transparent); + pointer-events: none; +} + +.banner:after, +.sec2:after, +/*.contact::after*/ { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 400px; + background: linear-gradient(360deg, #000, transparent); + pointer-events: none; +} + +.height100p { + height: 100vh; +} +.h100 { + height: 100%; +} +.contentBox { + position: relative; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + z-index: 10; +} +.contentBox h1 { + font-weight: 800; + color: #fff; + text-transform: uppercase; + font-size: 5rem; +} +.content h1 { + text-align: center; +} + +.contentBox h3 { + font-weight: 800; + color: rgb(209, 10, 77); + text-transform: uppercase; + font-size: 1.9rem; +} +.content h3 { + text-align: center; +} + +.contentBox p { + color: #fff; + font-size: 1.3rem; +} + +.sec1 { + padding: 100px 0; + background: #000; +} +.headerText { + color: #fff; +} +.headerText h2 { + font-size: 2.5rem; + margin-bottom: 20px; +} +.placeBox { + position: relative; + max-width: 300px; + height: 400px; + margin: 0 auto; + background: #000; + margin-top: 30px; +} +.placeBox .imgBx { + width: 100%; + height: 100%; +} + +.placeBox .imgBx img { + object-fit: cover; + width: 100%; + height: 100%; +} + +.placeBox .content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: baseline; + align-items: flex-end; +} + +.placeBox .content h3 { + position: relative; + margin: 0; + padding: 10px; + background-color: rgba(0, 0, 0, 0.95); + color: #fff; + font-size: 20px; + font-weight: 600; + width: 100%; + text-align: center; +} +.placeBox .content h3 span { + font-size: 16px; + font-weight: 500; +} + +.sec2 { + position: relative; + background: url(https://cdn.pixabay.com/photo/2016/09/08/12/00/stars-1654074_1280.jpg); + background-size: cover; + height: 100vh; +} + +.sec2 h2 { + font-weight: 800; + color: #fff; + text-transform: uppercase; + font-size: 4.5rem; +} +.btnD1 { + border: 2px solid #fff; + color: #000; + background: #fff; + border-radius: 50px; + padding: 15px 50px; + font-size: 1.15rem; + outline: navajowhite; + font-weight: 500; + margin-top: 20px; +} +.blog { + position: relative; + /* width: 100%; */ + padding: 100px 0; + background: #000; +} +.blogpost { + position: relative; + width: 100%; + margin-top: 30px; + background: #fff; +} +.blogpost .imgBx { + height: 400px; +} +.blogpost .imgBx img { + width: 100%; + height: 100%; + object-fit: cover; +} +.blogpost .content { + padding: 15px; +} + +.blogpost .content h1 { + margin: 0; + padding: 0 0 10px; + font-weight: 600; + font-size: 1.5rem; +} +.btnD2, +.btnD2:hover { + background: #262626; + color: #fff; + border-radius: 30px; + padding: 10px 20px; + float: right; +} +.contact { + position: relative; + padding: 100px 0; + background: url(https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=925&q=80); + background-size: cover; + min-height: 100vh; +} +.contact form { + position: relative; + z-index: 1000; +} + +.contact .form-control { + background: transparent; + border: none; + border-bottom: 2px solid rgba(255, 255, 255, 0.2); + height: 50px; + border-radius: 0; + background: rgba(0, 0, 0, 0.6); + color: #fff; + font-size: 1.45rem; + font-weight: 800; +} + +.contact .form-control:focus, +.contact .form-control:hover { + border: none; + border-bottom: 2px solid rgba(255, 255, 255, 1); + box-shadow: none; +} + +.contact .textarea { + min-height: 100px; +} +.contact label { + color: #fff; + font-size: 1.25rem; +} +footer { + background: #000; + padding: 50px 0 0; +} +.sci { + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; +} +.sci li { + list-style: none; + margin: 0 20px; +} +.sci li a { + color: #777; + font-size: 2em; + transition: 0.5s; +} +.sci li a:hover { + color: #fff; +} +.cpryt { + margin-top: 20px; + text-align: center; + color: #777; +} +.cpryt a, +.cpryt a:hover { + color: #fff; +} + +@media (min-width: 992px) { + .navbar-expand-lg .navbar-nav .nav-link { + padding-right: 1rem; + padding-left: 1rem; + } +} + +@media (max-width: 992px) { + .navbar-light .navbar-toggler { + /* color: rgba(0, 0, 0, 0.5); + border-color: rgba(0, 0, 0, 0.1); */ + background: #fff; + border-radius: 0; + } + .banner { + min-height: 100vh; + padding: 100px 0; + } + .contentBox h1, + .sec2 h2 { + font-size: 2rem; + } + .navbar-expand-lg .navbar-nav .nav-link { + padding-right: 1rem; + padding-left: 1rem; + } + + .sec1 { + padding: 20px 0; + } + .headerText h2 { + font-size: 2rem; + } + + .blog { + padding: 20px 0; + /* background: #000; */ + } + .blogpost .imgBx { + height: 200px; + } + .contact { + padding: 20px 0; + } + + .contact .form-control { + height: 40px; + border: 1px solid #fff; + } + + .btnD1 { + padding: 10px 40px; + margin-top: 10px; + } + footer { + background: #000; + padding: 0px 0 20px; + } + .sci li { + list-style: none; + margin: 0 10px; + } + .sci li a { + color: #777; + font-size: 1.5rem; + transition: 0.5s; + } + .sec2 { + height: auto; + padding: 40px 0; + } +} diff --git a/Movie_Website/film/index.html b/Movie_Website/film/index.html new file mode 100644 index 0000000..8cd5fc4 --- /dev/null +++ b/Movie_Website/film/index.html @@ -0,0 +1,521 @@ + + + + + + + HORIZON'21 + + + + + + + +
+ +
+ + +
+
+
+
+
+

+ Explore the Theatre +

+

+ Theatre or theater[a] is a collaborative form of performing art + that uses live performers, usually actors or actresses, to + present the experience of a real or imagined event before a live + audience in a specific place, often a stage. The performers may + communicate this experience to the audience through combinations + of gesture, speech, song, music, and dance. +

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

+ OUR IDEA +

+

+ Worried about your movie ? +
+ Well, out team comes up with an idea to help you predict the + success of your film. We feel that such revenue and work that goes + into making a film should not go waste especially when we can + accurately predict it's result. +
+ So lets Predict...then Shoot! +

+ + + GitHub Link + +
+
+
+
+ +
+
+
+
+
+

+ Movie Updates +

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

Godzilla Vs Kong

+ +

+ The Marvel Cinematic Universe (MCU) and DC Universe has made + it clear once and for all that creating film series and + getting popular characters from different films together is a + great formula. The Movie receives positive response. +

+ + Trailer... + +
+
+
+
+
+
+
+ +
+ +
+ +

Snyder Cut

+ +

+ The film is a back-breaking four hours and two minutes long + (in contrast to the compromised, two-hour 2017 theatrical + release version of Justice League, which was heavily reshot + and reedited by the now-disgraced Joss Whedon) +

+ + Trailer... + +
+
+
+
+
+
+
+ +
+ +
+ +

The Soul

+ +

+ A jazz musician, stuck in a mediocre job, finally gets his big + break. However, when a wrong step takes him to the Great + Before, he tries to help an infant soul in order to return to + reality.Soul strives to help us remember that life itself is a + blessing. +

+ + Trailer... + +
+
+
+
+
+
+
+ +
+ +
+ +

NUN II

+ +

+ Takes its time to build the suspense and then goes full in! + That's what I'm calling a successful short horror movie. The + director really knows how to keep you on the egde of your + seat. Get your spines chilled and glasses filled coz the NUN + is coming for u!! +

+ + Trailer... + +
+
+
+
+
+
+
+ +
+
+
+
+
+

Predict Success

+

+ Lights, Camera, Action ! +
+ You are just a step away from shooting. +

+
+
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + + +
+
+ +
+
+
+
+
+
+ + + + + + + + + + + + diff --git a/Movie_Website/style.css b/Movie_Website/style.css new file mode 100644 index 0000000..77e5d1e --- /dev/null +++ b/Movie_Website/style.css @@ -0,0 +1,294 @@ +@import url(https://fonts.googleapis.com/css?family=Open+Sans); +.btn { + display: inline-block; + *display: inline; + *zoom: 1; + padding: 4px 10px 4px; + margin-bottom: 0; + font-size: 13px; + line-height: 18px; + color: #333333; + text-align: center; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + vertical-align: middle; + background-color: #f5f5f5; + background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -webkit-gradient( + linear, + 0 0, + 0 100%, + from(#ffffff), + to(#e6e6e6) + ); + background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); + background-image: linear-gradient(top, #ffffff, #e6e6e6); + background-repeat: repeat-x; + filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0); + border-color: #e6e6e6 #e6e6e6 #e6e6e6; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + border: 1px solid #e6e6e6; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 1px 2px rgba(0, 0, 0, 0.05); + cursor: pointer; + *margin-left: 0.3em; +} +.btn:hover, +.btn:active, +.btn.active, +.btn.disabled, +.btn[disabled] { + background-color: #e6e6e6; +} +.btn-large { + padding: 9px 14px; + font-size: 15px; + line-height: normal; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +.btn:hover { + color: #333333; + text-decoration: none; + background-color: #e6e6e6; + background-position: 0 -15px; + -webkit-transition: background-position 0.1s linear; + -moz-transition: background-position 0.1s linear; + -ms-transition: background-position 0.1s linear; + -o-transition: background-position 0.1s linear; + transition: background-position 0.1s linear; +} +.btn-primary, +.btn-primary:hover { + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + color: #ffffff; +} +.btn-primary.active { + color: rgba(255, 255, 255, 0.75); +} +.btn-primary { + background-color: #4a77d4; + background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4); + background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4); + background-image: -webkit-gradient( + linear, + 0 0, + 0 100%, + from(#6eb6de), + to(#4a77d4) + ); + background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4); + background-image: -o-linear-gradient(top, #6eb6de, #4a77d4); + background-image: linear-gradient(top, #6eb6de, #4a77d4); + background-repeat: repeat-x; + filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0); + border: 1px solid #3762bc; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 1px 2px rgba(0, 0, 0, 0.5); +} +.btn-primary:hover, +.btn-primary:active, +.btn-primary.active, +.btn-primary.disabled, +.btn-primary[disabled] { + filter: none; + background-color: #4a77d4; +} +.btn-block { + width: 100%; + display: block; +} + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} + +html { + width: 100%; + height: 100vh; + /* overflow: -moz-hidden-unscrollable; */ +} + +body { + width: 100%; + height: 100vh; + font-family: "Open Sans", sans-serif; + background: #092756; + color: #fff; + font-size: 18px; + text-align: center; + letter-spacing: 1.2px; + background: -moz-radial-gradient( + 0% 100%, + ellipse cover, + rgba(104, 128, 138, 0.4) 10%, + rgba(138, 114, 76, 0) 40% + ), + -moz-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) + 100%), + -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%); + background: -webkit-radial-gradient( + 0% 100%, + ellipse cover, + rgba(104, 128, 138, 0.4) 10%, + rgba(138, 114, 76, 0) 40% + ), + -webkit-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba( + 42, + 60, + 87, + 0.4 + ) + 100%), + -webkit-linear-gradient(-45deg, #670d10 0%, #092756 100%); + background: -o-radial-gradient( + 0% 100%, + ellipse cover, + rgba(104, 128, 138, 0.4) 10%, + rgba(138, 114, 76, 0) 40% + ), + -o-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) + 100%), + -o-linear-gradient(-45deg, #670d10 0%, #092756 100%); + background: -ms-radial-gradient( + 0% 100%, + ellipse cover, + rgba(104, 128, 138, 0.4) 10%, + rgba(138, 114, 76, 0) 40% + ), + -ms-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) + 100%), + -ms-linear-gradient(-45deg, #670d10 0%, #092756 100%); + background: -webkit-radial-gradient( + 0% 100%, + ellipse cover, + rgba(104, 128, 138, 0.4) 10%, + rgba(138, 114, 76, 0) 40% + ), + linear-gradient( + to bottom, + rgba(57, 173, 219, 0.25) 0%, + rgba(42, 60, 87, 0.4) 100% + ), + linear-gradient(135deg, #670d10 0%, #092756 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 ); +} +.login { + position: absolute; + top: 40%; + left: 50%; + margin: -150px 0 0 -150px; + width: 400px; + height: 400px; +} + +.login h1 { + color: #fff; + text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + letter-spacing: 1px; + text-align: center; +} + +input { + width: 100%; + /* display: flex; + flex-direction: column; + justify-content: center; */ + margin-bottom: 10px; + background: rgba(0, 0, 0, 0.3); + border: none; + outline: none; + padding: 10px; + font-size: 1.5rem; + color: #fff; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 4px; + box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2), + 0 1px 1px rgba(255, 255, 255, 0.2); + -webkit-transition: box-shadow 0.5s ease; + -moz-transition: box-shadow 0.5s ease; + -o-transition: box-shadow 0.5s ease; + -ms-transition: box-shadow 0.5s ease; + transition: box-shadow 0.5s ease; +} +input:focus { + box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.4), + 0 1px 1px rgba(255, 255, 255, 0.2); +} + +/* label { + width: 10%; + margin-bottom: 10px; + background: rgba(0, 0, 0, 0.3); + border: none; + outline: none; + padding: 10px; + font-size: 13px; + color: #fff; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 4px; + box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2), + 0 1px 1px rgba(255, 255, 255, 0.2); + -webkit-transition: box-shadow 0.5s ease; + -moz-transition: box-shadow 0.5s ease; + -o-transition: box-shadow 0.5s ease; + -ms-transition: box-shadow 0.5s ease; + transition: box-shadow 0.5s ease; */ +} +label:focus { + box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.4), + 0 1px 1px rgba(255, 255, 255, 0.2); +} +.dd label{ + /* margin-left: 5px; */ + /* max-width: 50%; */ + /* padding: 5px; */ + align-items: center; + /* max-width: 50%; */ + /* position: relative; */ + /* border: 2px dotted red; */ + display: flex; + flex-direction: column; + justify-content: space-around; + /* border: 2px dotted yellow; */ + border-radius: 25px; + border-width: 1px; + border-style: groove; + padding: 0; + /* cursor: pointer; */ + +} +input[type="checkbox"]{ + cursor: pointer; + max-width: 3%; + padding: 10px; + border: none; + background: none; + content: "\f00c"; + margin-bottom: 8px; + position: relative; + display: inline-block; + padding: 15px 30px; + /* display: ; */ +} +.foot{ + padding: 0 0 25px; + /* margin: 2px solid green; + text-decoration: #092756; */ +} \ No newline at end of file From feaddc128bdce14ded57f26295b7343acc717cd3 Mon Sep 17 00:00:00 2001 From: Adwaita Raj Modak Date: Mon, 3 Oct 2022 18:30:57 +0530 Subject: [PATCH 4/4] Adding Bill Splitter --- Bill Splitter/edit.css | 150 +++++++++++++++++++++++++++++++++++++++ Bill Splitter/index.html | 75 ++++++++++++++++++++ Bill Splitter/work.js | 39 ++++++++++ 3 files changed, 264 insertions(+) create mode 100644 Bill Splitter/edit.css create mode 100644 Bill Splitter/index.html create mode 100644 Bill Splitter/work.js diff --git a/Bill Splitter/edit.css b/Bill Splitter/edit.css new file mode 100644 index 0000000..57811b6 --- /dev/null +++ b/Bill Splitter/edit.css @@ -0,0 +1,150 @@ +:root { + --space-cadet: #6beb9c; + --space-cadet-dark: #0ba753; + --lavender-blue: #c4c4ff; + +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + +} + +body { + line-height: 1.6; + background: var(--space-cadet-dark); + font-size: 1.1rem; +} + +.center { + /* text-align: center; */ + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + + +} + +.container { + min-height: 100vh; + +} + +.bill-divider-wrapper { + max-width: 1080px; + margin: 0 auto; + background: #fff; + overflow: hidden; + +} + +.title { + background: var(--space-cadet); + padding: 0.7rem 0rem; + margin-top: auto; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.3); +} + +.title h1 { + text-align: center; + color: #fff; + +} + +.title h4 { + text-align: center; + color: #fff; + +} + +.bill-inputs, +.bill-output { + padding: 2rem 2.5rem; +} + +.bill-inputs { + border-bottom: 1px solid rgba(0, 0, 0, 0.2); +} + +.form-group { + padding: 0.5rem 0; +} + +.form-global label { + text-transform: uppercase; + display: inline-block; + padding-bottom: 0.2rem; +} + +.form-control { + width: 100%; + font-size: 1rem; + padding: 0.5rem; + border: none; + border-bottom: 1.5px solid var(--lavender-blue); + transition: all 0.3s ease-in-out; + --webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + + +} + + + +.form-control:focus { + outline: 0; + border-color: var(--space-cadet); + +} + +#calc-btn { + padding: 0.9rem 2.2rem; + font-size: 1.05rem; + text-transform: uppercase; + display: inline-block; + /* align-items: center; */ + margin-top: 1.25rem; + background: var(--space-cadet-dark); + border: none; + cursor: pointer; + transition: all 0.3s ease-in-out; + --webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; +} + +#calc-btn:focus { + outline: 0; +} + +#calc-btn:hover { + background: var(--space-cadet); +} + +.text-group { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.3rem 0; +} + +.text-group h2 { + font-weight: 500; + opacity: 0.8; + +} + +.text-group:nth-child(1) h2 { + font-weight: 500; +} + +.text-group span { + font-weight: 500; +} \ No newline at end of file diff --git a/Bill Splitter/index.html b/Bill Splitter/index.html new file mode 100644 index 0000000..df14324 --- /dev/null +++ b/Bill Splitter/index.html @@ -0,0 +1,75 @@ + + + + + + + + THE BILL + + + + +
+
+
+

BILLING

+

No Money No Honey

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

Total Amount

+ ₹ 00.00 +
+
+

Bill / Person

+ ₹ 00.00 +
+
+

Total Tip

+ ₹ 00.00 +
+
+

Tip / Person

+ ₹ 00.00 +
+
+
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/Bill Splitter/work.js b/Bill Splitter/work.js new file mode 100644 index 0000000..a4f4f61 --- /dev/null +++ b/Bill Splitter/work.js @@ -0,0 +1,39 @@ +const billDivideForm = document.getElementById('bill-divider-form'); + +billDivideForm.addEventListener('submit', billDividerHandler); + +function billDividerHandler(event) { + event.preventDefault(); + const inputs = getInputs(); + console.log(inputs); + showCalculateOutput(inputs); +} + +function getInputs() { + let subTotal = document.getElementById('subtotal').value; + let tipPercent = document.getElementById('tip').value; + let noOfPerson = document.getElementById('no-of-person').value; + // console.log(subTotal, tipPercent, noOfPerson); + return { subTotal, tipPercent, noOfPerson }; + + +} + +function showCalculateOutput(input) { + billDivideForm.reset(); + + let totalTip = (parseFloat(input.subTotal) * parseFloat(input.tipPercent)) / 100; + + let totalAmount = parseFloat(input.subTotal) + totalTip; + let tipPerPerson = totalTip / parseFloat(input.noOfPerson); + let amountPerPerson = totalAmount / parseFloat(input.noOfPerson); + + document.getElementById('total-bill').innerHTML = `$ ${totalAmount.toFixed(2)}`; + document.getElementById('bill-per-person').innerHTML = `$ ${amountPerPerson.toFixed(2)}`; + document.getElementById('total-tip').innerHTML = `$ ${totalTip.toFixed(2)}`; + document.getElementById('tip-per-person').innerHTML = `$ ${tipPerPerson.toFixed(2)}`; + + +} + +