From c81ab1c2a6e7db7eb27959fe01433775f1aba649 Mon Sep 17 00:00:00 2001 From: Ujjwal-soni98 Date: Tue, 20 Sep 2022 15:25:42 +0530 Subject: [PATCH] redesigned the bakground of progress-tracker --- dist/.vscode/launch.json | 7 + dist/index.html | 59 ++---- dist/styl.css | 402 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 424 insertions(+), 44 deletions(-) create mode 100644 dist/.vscode/launch.json create mode 100644 dist/styl.css diff --git a/dist/.vscode/launch.json b/dist/.vscode/launch.json new file mode 100644 index 0000000..5c7247b --- /dev/null +++ b/dist/.vscode/launch.json @@ -0,0 +1,7 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [] +} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index 3504768..88e600e 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,56 +6,27 @@ + + Progress of Members - - - - + + + +
+
+
+
+
+
+
+
+

Progress Tracker

@@ -236,7 +207,7 @@
Prashant Rai
- + diff --git a/dist/styl.css b/dist/styl.css new file mode 100644 index 0000000..5109653 --- /dev/null +++ b/dist/styl.css @@ -0,0 +1,402 @@ + + +a:link { + color: white; + background-color: transparent; + text-decoration: none; + } + + a:visited { + color: white; + background-color: transparent; + text-decoration: none; + } + + a:hover { + color: red; + background-color: transparent; + text-decoration: underline; + } + + a:active { + color: yellow; + background-color: transparent; + text-decoration: underline; + } + #head{ + font-size: 100px; + color:aliceblue; +} + .card{ + background-image: linear-gradient(to right, rgb(255, 174, 174) , rgb(115, 157, 255)); + margin: 50px; + width: 350px; + height: 550px; + animation: myAnim 2s ease 0s infinite normal both; + } + .card{ + opacity: 0.8; + } + .card:hover{ + opacity: 1; + } + + + + +body { + margin: 0; + height: 100vh; + font-weight: 100; + background: radial-gradient(#0ffa04,#1f1017); + background-repeat: no-repeat; + background-attachment: fixed; + -webkit-overflow-Y:content; + -moz-overflow-Y:content; + -o-overflow-Y:content; + overflow-y: content; + -webkit-animation: fadeIn 1 1s ease-out; + -moz-animation: fadeIn 1 1s ease-out; + -o-animation: fadeIn 1 1s ease-out; + animation: fadeIn 1 1s ease-out; +} + +button{ +position: absolute; +border: 2px solid white; +background: transparent; +font-family: 'Roboto', sans-serif; +color: white; +width: 250px; +height: 50px; +font-size: 2em; +border-radius: 5px; +opacity: .5; +top: 60vh; +bottom: 0px; +left: 0px; +right: 0px; +margin: auto; +transition: .3s; +} + +button:hover{ +border: 2px solid #104F55; +background-color: rgba(365,365,365,0.5); +cursor: pointer; +color: #104F55; +opacity: .8; +transition: .3s; +box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); +} + +.light { + position:fixed; + width: 0px; + opacity: .75; + background-color: white; + box-shadow: #e9f1f1 0px 0px 20px 2px; + opacity: 0; + top: 0vh; + bottom: 0px; + left: 0px; + right: 0px; + margin: auto; +} + +.x1{ +-webkit-animation: floatUp 4s infinite linear; +-moz-animation: floatUp 4s infinite linear; +-o-animation: floatUp 4s infinite linear; +animation: floatUp 4s infinite linear; + -webkit-transform: scale(1.0); + -moz-transform: scale(1.0); + -o-transform: scale(1.0); +transform: scale(1.0); +} + +.x2{ +-webkit-animation: floatUp 7s infinite linear; +-moz-animation: floatUp 7s infinite linear; +-o-animation: floatUp 7s infinite linear; +animation: floatUp 7s infinite linear; +-webkit-transform: scale(1.6); +-moz-transform: scale(1.6); +-o-transform: scale(1.6); +transform: scale(1.6); +left: 15%; +} + +.x3{ +-webkit-animation: floatUp 2.5s infinite linear; +-moz-animation: floatUp 2.5s infinite linear; +-o-animation: floatUp 2.5s infinite linear; +animation: floatUp 2.5s infinite linear; +-webkit-transform: scale(.5); +-moz-transform: scale(.5); +-o-transform: scale(.5); +transform: scale(.5); +left: -15%; +} + +.x4{ +-webkit-animation: floatUp 4.5s infinite linear; +-moz-animation: floatUp 4.5s infinite linear; +-o-animation: floatUp 4.5s infinite linear; +animation: floatUp 4.5s infinite linear; +-webkit-transform: scale(1.2); +-moz-transform: scale(1.2); +-o-transform: scale(1.2); +transform: scale(1.2); +left: -34%; +} + +.x5{ +-webkit-animation: floatUp 8s infinite linear; +-moz-animation: floatUp 8s infinite linear; +-o-animation: floatUp 8s infinite linear; +animation: floatUp 8s infinite linear; +-webkit-transform: scale(2.2); +-moz-transform: scale(2.2); +-o-transform: scale(2.2); +transform: scale(2.2); +left: -57%; +} + +.x6{ +-webkit-animation: floatUp 3s infinite linear; +-moz-animation: floatUp 3s infinite linear; +-o-animation: floatUp 3s infinite linear; +animation: floatUp 3s infinite linear; +-webkit-transform: scale(.8); +-moz-transform: scale(.8); +-o-transform: scale(.8); +transform: scale(.8); +left: -81%; +} + +.x7{ +-webkit-animation: floatUp 5.3s infinite linear; +-moz-animation: floatUp 5.3s infinite linear; +-o-animation: floatUp 5.3s infinite linear; +animation: floatUp 5.3s infinite linear; +-webkit-transform: scale(3.2); +-moz-transform: scale(3.2); +-o-transform: scale(3.2); +transform: scale(3.2); +left: 37%; +} + +.x8{ +-webkit-animation: floatUp 4.7s infinite linear; +-moz-animation: floatUp 4.7s infinite linear; +-o-animation: floatUp 4.7s infinite linear; +animation: floatUp 4.7s infinite linear; +-webkit-transform: scale(1.7); +-moz-transform: scale(1.7); +-o-transform: scale(1.7); +transform: scale(1.7); +left: 62%; +} + +.x9{ +-webkit-animation: floatUp 4.1s infinite linear; +-moz-animation: floatUp 4.1s infinite linear; +-o-animation: floatUp 4.1s infinite linear; +animation: floatUp 4.1s infinite linear; +-webkit-transform: scale(0.9); +-moz-transform: scale(0.9); +-o-transform: scale(0.9); +transform: scale(0.9); +left: 85%; +} + +button:focus{ +outline: none; +} + +@-webkit-keyframes floatUp{ +0%{top: 100vh; opacity: 0;} +25%{opacity: 1;} +50%{top: 0vh; opacity: .8;} +75%{opacity: 1;} +100%{top: -100vh; opacity: 0;} +} +@-moz-keyframes floatUp{ +0%{top: 100vh; opacity: 0;} +25%{opacity: 1;} +50%{top: 0vh; opacity: .8;} +75%{opacity: 1;} +100%{top: -100vh; opacity: 0;} +} +@-o-keyframes floatUp{ +0%{top: 100vh; opacity: 0;} +25%{opacity: 1;} +50%{top: 0vh; opacity: .8;} +75%{opacity: 1;} +100%{top: -100vh; opacity: 0;} +} +@keyframes floatUp{ +0%{top: 100vh; opacity: 0;} +25%{opacity: 1;} +50%{top: 0vh; opacity: .8;} +75%{opacity: 1;} +100%{top: -100vh; opacity: 0;} +} + +.header{ +position: absolute; +top: 40%; +left: 50%; +transform: translate(-50%, -50%); +font-family: 'Roboto', sans-serif; +font-weight: 200; +color: white; +font-size: 2em; +} + +#head1, #head2,#head3, #head4, #head5{ +opacity: 0; +} + +#head1{ +-webkit-animation: fadeOut 1 5s ease-in; +-moz-animation: fadeOut 1 5s ease-in; +-o-animation: fadeOut 1 5s ease-in; +animation: fadeOut 1 5s ease-in; +} + +#head2{ +-webkit-animation: fadeOut 1 5s ease-in; +-moz-animation: fadeOut 1 5s ease-in; +-o-animation: fadeOut 1 5s ease-in; +animation: fadeOut 1 5s ease-in; +-webkit-animation-delay: 6s; +-moz-animation-delay: 6s; +-o-animation-delay: 6s; +animation-delay: 6s; +} + +#head3{ +-webkit-animation: fadeOut 1 5s ease-in; +-moz-animation: fadeOut 1 5s ease-in; +-o-animation: fadeOut 1 5s ease-in; +animation: fadeOut 1 5s ease-in; +-webkit-animation-delay: 12s; +-moz-animation-delay: 12s; +-o-animation-delay: 12s; +animation-delay: 12s; +} + +#head4{ +-webkit-animation: fadeOut 1 5s ease-in; +-moz-animation: fadeOut 1 5s ease-in; +-o-animation: fadeOut 1 5s ease-in; +animation: fadeOut 1 5s ease-in; +-webkit-animation-delay: 17s; +-moz-animation-delay: 17s; +-o-animation-delay: 17s; +animation-delay: 17s; +} + +#head5{ +-webkit-animation: finalFade 1 5s ease-in; +-moz-animation: finalFade 1 5s ease-in; +-o-animation: finalFade 1 5s ease-in; +animation: finalFade 1 5s ease-in; +-webkit-animation-fill-mode: forwards; +-moz-animation-fill-mode: forwards; +-o-animation-fill-mode: forwards; +animation-fill-mode: forwards; +-webkit-animation-delay: 22s; +-moz-animation-delay: 22s; +-o-animation-delay: 22s; +animation-delay: 22s; +} + +@-webkit-keyframes fadeIn{ +from{opacity: 0;} +to{opacity: 1;} +} + +@-moz-keyframes fadeIn{ +from{opacity: 0;} +to{opacity: 1;} +} + +@-o-keyframes fadeIn{ +from{opacity: 0;} +to{opacity: 1;} +} + +@keyframes fadeIn{ +from{opacity: 0;} +to{opacity: 1;} +} + +@-webkit-keyframes fadeOut{ +0%{opacity: 0;} +30%{opacity: 1;} +80%{opacity: .9;} +100%{opacity: 0;} +} + +@-moz-keyframes fadeOut{ +0%{opacity: 0;} +30%{opacity: 1;} +80%{opacity: .9;} +100%{opacity: 0;} +} + +@-o-keyframes fadeOut{ +0%{opacity: 0;} +30%{opacity: 1;} +80%{opacity: .9;} +100%{opacity: 0;} +} + +@keyframes fadeOut{ +0%{opacity: 0;} +30%{opacity: 1;} +80%{opacity: .9;} +100%{opacity: 0;} +} + +@-webkit-keyframes finalFade{ +0%{opacity: 0;} +30%{opacity: 1;} +80%{opacity: .9;} +100%{opacity: 1;} +} + +@-moz-keyframes finalFade{ +0%{opacity: 0;} +30%{opacity: 1;} +80%{opacity: .9;} +100%{opacity: 1;} +} + +@-o-keyframes finalFade{ +0%{opacity: 0;} +30%{opacity: 1;} +80%{opacity: .9;} +100%{opacity: 1;} +} + +@keyframes finalFade{ +0%{opacity: 0;} +30%{opacity: 1;} +80%{opacity: .9;} +100%{opacity: 1;} +} + +#footer{ +font-family: 'Roboto', sans-serif; +font-size: 1.2em; +color: white; +position: fixed; +-webkit-transform: translate(95vw,90vh); +-moz-transform: translate(95vw,90vh); +transform: translate(95vw,90vh); +transform: translate(95vw,90vh); +}