From 3736c87c9aac4130abe2f2e380a6a50aacb8e034 Mon Sep 17 00:00:00 2001 From: Angel Date: Thu, 1 Oct 2020 18:44:37 -0500 Subject: [PATCH] Added style to countdown.html --- countDown.html | 78 +++--- css/countDown.css | 30 +++ css/styles.css | 637 +++++++++++++++++++++++----------------------- 3 files changed, 387 insertions(+), 358 deletions(-) create mode 100644 css/countDown.css diff --git a/countDown.html b/countDown.html index cd88c3b..fd55531 100644 --- a/countDown.html +++ b/countDown.html @@ -1,34 +1,44 @@ - -

-

Until Halloween

- - + + + + + + + Countdown to halloween + + +
+

Until Halloween they remain

+

+
+ + + diff --git a/css/countDown.css b/css/countDown.css new file mode 100644 index 0000000..458bbd8 --- /dev/null +++ b/css/countDown.css @@ -0,0 +1,30 @@ +body { + margin: 0px; + padding: 0px; +} + +.count-down_section { + display: flex; + justify-content: space-around; + align-items: center; + flex-direction: column; + width: 100%; + height: 100vh; + background-image: url('../images/off.jpg'); + background-size: cover; + background-repeat: no-repeat; +} + +.count-down_title { + font-family: 'Courier New', Courier, monospace; + color: white; + font-weight: bolder; + font-size: 70px; +} + +#demo { + font-family: 'Courier New', Courier, monospace; + color: white; + font-weight: bolder; + font-size: 50px; +} diff --git a/css/styles.css b/css/styles.css index 3633972..06379df 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,113 +1,113 @@ #rex { - border-radius: 5px 50px 30px 5px; - height: 150px; + border-radius: 5px 50px 30px 5px; + height: 150px; } #rexz { - border-radius: 30px 5px 15px 50px; - height: 150px; + border-radius: 30px 5px 15px 50px; + height: 150px; } #rexy { - border-radius: 15px 50px 30px; - height: 150px; + border-radius: 15px 50px 30px; + height: 150px; } -@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap"); +@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); body { - font-family: 'Baloo Tamma', cursive; - height: 100vh; + font-family: 'Baloo Tamma', cursive; + height: 100vh; } header { - background-color: rgb(83, 80, 80); - color: lightgrey; - padding: 1.5em; + background-color: rgb(83, 80, 80); + color: lightgrey; + padding: 1.5em; } img { - width: 300px; - height: 250px; - border-radius: 5%; + width: 300px; + height: 250px; + border-radius: 5%; } .main { - border: 5px solid lightgrey; - margin: auto; - padding: 2em; + border: 5px solid lightgrey; + margin: auto; + padding: 2em; } .page-section { - padding: 8rem 0; + padding: 8rem 0; } .door { - background: lightcoral; + background: lightcoral; } .peephole { - background: lightcoral; - border: 5px solid orange; - width: 60%; - margin: auto; + background: lightcoral; + border: 5px solid orange; + width: 60%; + margin: auto; } #funCanvas { - width: 100%; - margin: auto; + width: 100%; + margin: auto; } #chat-box { - padding: 10px; - text-align: center; - color: white; - margin: auto; - background: #1188bb; + padding: 10px; + text-align: center; + color: white; + margin: auto; + background: #1188bb; } .anim-controls { - padding: 10px; - text-align: center; - color: white; - margin: auto; - margin-bottom: 40px; - background: #1188bb; + padding: 10px; + text-align: center; + color: white; + margin: auto; + margin-bottom: 40px; + background: #1188bb; } .anim-controls button { - margin: 20px; - border-radius: 10px; - background: lightskyblue; + margin: 20px; + border-radius: 10px; + background: lightskyblue; } h1 { - text-transform: capitalize; - color: rgb(83, 80, 80); + text-transform: capitalize; + color: rgb(83, 80, 80); } .m-t-m { - margin-top: 20px; + margin-top: 20px; } .m-t-l { - margin-top: 50px; + margin-top: 50px; } .bg-primary { - background-color: #f4623a!important; + background-color: #f4623a !important; } .text-primary { - color: #f4623a!important; + color: #f4623a !important; } ul .dropdown-content { - /* Override default material settings causing dropdown menu item text to be cut off */ - width: auto !important; + /* Override default material settings causing dropdown menu item text to be cut off */ + width: auto !important; } nav ul a:hover { - /* override default material hover navlink css.*/ - background-color: rgba(0,0,0,0.1); - color: white; + /* override default material hover navlink css.*/ + background-color: rgba(0, 0, 0, 0.1); + color: white; } #rex { @@ -116,8 +116,8 @@ nav ul a:hover { } #rexz { - border-radius: 30px 5px 15px 50px; - height: 150px; + border-radius: 30px 5px 15px 50px; + height: 150px; } #rexy { @@ -125,444 +125,433 @@ nav ul a:hover { height: 150px; } -.col{ - background-color: rgb(39, 139, 185); +.col { + background-color: rgb(39, 139, 185); } - .main { - border: 5px solid blue; - margin: auto; - padding: 2em; + border: 5px solid blue; + margin: auto; + padding: 2em; } /* Styles for circular progress bar */ .progress { - width: 150px; - height: 150px !important; - line-height: 150px; - background: none; - margin: 0 auto; - box-shadow: none; - position: relative; - background-color: transparent !important; + width: 150px; + height: 150px !important; + line-height: 150px; + background: none; + margin: 0 auto; + box-shadow: none; + position: relative; + background-color: transparent !important; } .progress:after { - content: ""; - width: 100%; - height: 100%; - border-radius: 50%; - border: 12px solid #fff; - position: absolute; - top: 0; - left: 0; + content: ''; + width: 100%; + height: 100%; + border-radius: 50%; + border: 12px solid #fff; + position: absolute; + top: 0; + left: 0; } .progress > span { - width: 50%; - height: 100%; - overflow: hidden; - position: absolute; - top: 0; - z-index: 1; + width: 50%; + height: 100%; + overflow: hidden; + position: absolute; + top: 0; + z-index: 1; } .progress .progress-left { - left: 0; + left: 0; } .progress .progress-bar { - width: 100%; - height: 100%; - background: none; - border-width: 12px; - border-style: solid; - position: absolute; - top: 0; + width: 100%; + height: 100%; + background: none; + border-width: 12px; + border-style: solid; + position: absolute; + top: 0; } .progress .progress-left .progress-bar { - left: 100%; - border-top-right-radius: 80px; - border-bottom-right-radius: 80px; - border-left: 0; - -webkit-transform-origin: center left; - transform-origin: center left; + left: 100%; + border-top-right-radius: 80px; + border-bottom-right-radius: 80px; + border-left: 0; + -webkit-transform-origin: center left; + transform-origin: center left; } .progress .progress-right { - right: 0; + right: 0; } .progress .progress-right .progress-bar { - left: -100%; - border-top-left-radius: 80px; - border-bottom-left-radius: 80px; - border-right: 0; - -webkit-transform-origin: center right; - transform-origin: center right; - animation: loading-1 1.8s linear forwards; + left: -100%; + border-top-left-radius: 80px; + border-bottom-left-radius: 80px; + border-right: 0; + -webkit-transform-origin: center right; + transform-origin: center right; + animation: loading-1 1.8s linear forwards; } .progress .progress-value { - width: 90%; - height: 90%; - border-radius: 50%; - background: #44484b; - font-size: 24px; - color: #fff; - line-height: 135px; - text-align: center; - position: absolute; - top: 5%; - left: 5%; + width: 90%; + height: 90%; + border-radius: 50%; + background: #44484b; + font-size: 24px; + color: #fff; + line-height: 135px; + text-align: center; + position: absolute; + top: 5%; + left: 5%; } .progress.blue .progress-bar { - border-color: #049dff; + border-color: #049dff; } .progress.blue .progress-left .progress-bar { - animation: loading-2 1.5s linear forwards 1.8s; + animation: loading-2 1.5s linear forwards 1.8s; } .progress.yellow .progress-bar { - border-color: #fdba04; + border-color: #fdba04; } .progress.yellow .progress-left .progress-bar { - animation: loading-3 1s linear forwards 1.8s; + animation: loading-3 1s linear forwards 1.8s; } .progress.pink .progress-bar { - border-color: #ed687c; + border-color: #ed687c; } .progress.pink .progress-left .progress-bar { - animation: loading-4 0.4s linear forwards 1.8s; + animation: loading-4 0.4s linear forwards 1.8s; } .progress.green .progress-bar { - border-color: #1abc9c; + border-color: #1abc9c; } .progress.green .progress-left .progress-bar { - animation: loading-5 1.2s linear forwards 1.8s; + animation: loading-5 1.2s linear forwards 1.8s; } @keyframes loading-1 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(180deg); - transform: rotate(180deg); - } + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + } } @keyframes loading-2 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(144deg); - transform: rotate(144deg); - } + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(144deg); + transform: rotate(144deg); + } } @keyframes loading-3 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(90deg); - transform: rotate(90deg); - } + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + } } @keyframes loading-4 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(144deg); - transform: rotate(144deg); - } + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(144deg); + transform: rotate(144deg); + } } @keyframes loading-5 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(180deg); - } + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(180deg); + } } @media only screen and (max-width: 990px) { - .progress { - margin-bottom: 20px; - } + .progress { + margin-bottom: 20px; + } } html  { - height: 100%; - background: #1a2980; /* fallback for old browsers */ - background: -webkit-linear-gradient( - to bottom, - #26d0ce, - #1a2980 - ); /* Chrome 10-25, Safari 5.1-6 */ - background: linear-gradient( - to bottom, - #26d0ce, - #1a2980 - ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + height: 100%; + background: #1a2980; /* fallback for old browsers */ + background: -webkit-linear-gradient(to bottom, #26d0ce, #1a2980); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient( + to bottom, + #26d0ce, + #1a2980 + ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } footer { - background-color: #191919; - color: #fff; - text-align: center; - bottom: 0; - width: 100%; + background-color: #191919; + color: #fff; + text-align: center; + bottom: 0; + width: 100%; } .Hacktoberfest { - width: 50%; - height: 80px; - margin: auto; - z-index: 5; - transition: 0.5s; - font-size: 3em; + width: 50%; + height: 80px; + margin: auto; + z-index: 5; + transition: 0.5s; + font-size: 3em; } .rainbow-text { - background-image: linear-gradient( - to left, - violet, - indigo, - blue, - green, - yellow, - orange, - red - ); - -webkit-background-clip: text; - background-clip: text; - color: transparent; + background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red); + -webkit-background-clip: text; + background-clip: text; + color: transparent; } .textAlign { - text-align: center; + text-align: center; } .header { - background: #1565c0; - border-top: 10px solid black; - /* border-radius: 1em; */ - text-align: center; + background: #1565c0; + border-top: 10px solid black; + /* border-radius: 1em; */ + text-align: center; } .header h2, .header h1 { - margin: 0; - padding-bottom: 10px; - padding-top: 10px; + margin: 0; + padding-bottom: 10px; + padding-top: 10px; } .brand-logo { - margin-left: 10px; - + margin-left: 10px; } ul .dropdown-content { - /* Override default material settings causing dropdown menu item text to be cut off */ - width: auto !important; + /* Override default material settings causing dropdown menu item text to be cut off */ + width: auto !important; } nav ul a:hover { - background-color: rgba(0, 0, 0, 0.1); - color: white; - font-weight: 500; - text-decoration: none; + background-color: rgba(0, 0, 0, 0.1); + color: white; + font-weight: 500; + text-decoration: none; } .section-tags h1 { - -webkit-animation: fadeInRotate 1s linear 1s; - -moz-animation: fadeInRotate 1s linear 1s; - -ms-animation: fadeInRotate 1s linear 1s; - animation: fadeInRotate 1s linear 1s; + -webkit-animation: fadeInRotate 1s linear 1s; + -moz-animation: fadeInRotate 1s linear 1s; + -ms-animation: fadeInRotate 1s linear 1s; + animation: fadeInRotate 1s linear 1s; } .section-tags h2 { - -webkit-animation: blurFadeIn 3s linear 1s; - -moz-animation: blurFadeIn 3s linear 1s; - -ms-animation: blurFadeIn 3s linear 1s; - animation: blurFadeIn 3s linear 1s; + -webkit-animation: blurFadeIn 3s linear 1s; + -moz-animation: blurFadeIn 3s linear 1s; + -ms-animation: blurFadeIn 3s linear 1s; + animation: blurFadeIn 3s linear 1s; } .section-tags h3:nth-child(odd) { - position: relative; - -webkit-animation: slide-right 3s 1s; - -moz-animation: slide-right 3s 1s; - -ms-animation: slide-right 3s 1s; - animation: slide-right 3s 1s; + position: relative; + -webkit-animation: slide-right 3s 1s; + -moz-animation: slide-right 3s 1s; + -ms-animation: slide-right 3s 1s; + animation: slide-right 3s 1s; } .section-tags h3:nth-child(even) { - position: relative; - -webkit-animation: slide-left 3s 1s; - -moz-animation: slide-left 3s 1s; - -ms-animation: slide-left 3s 1s; - animation: slide-left 3s 1s; + position: relative; + -webkit-animation: slide-left 3s 1s; + -moz-animation: slide-left 3s 1s; + -ms-animation: slide-left 3s 1s; + animation: slide-left 3s 1s; } .section-tags h4 { - -webkit-animation: bounce 3s 1s; - -moz-animation: bounce 3s 1s; - -ms-animation: bounce 3s 1s; - animation: bounce 3s 1s; + -webkit-animation: bounce 3s 1s; + -moz-animation: bounce 3s 1s; + -ms-animation: bounce 3s 1s; + animation: bounce 3s 1s; } @keyframes fadeInRotate { - 0% { - opacity: 0; - transform: scale(0) rotate(360deg); - } - 100% { - opacity: 1; - transform: scale(1) rotate(0deg); - } + 0% { + opacity: 0; + transform: scale(0) rotate(360deg); + } + 100% { + opacity: 1; + transform: scale(1) rotate(0deg); + } } .iconLinks { - transition: 0.70s; - -webkit-transition: 0.70s; - -moz-transition: 0.70s; - -ms-transition: 0.70s; - -o-transition: 0.70s; + transition: 0.7s; + -webkit-transition: 0.7s; + -moz-transition: 0.7s; + -ms-transition: 0.7s; + -o-transition: 0.7s; } .iconLinks:hover { - cursor: pointer; - transition: 0.70s; - -webkit-transition: 0.70s; - -moz-transition: 0.70s; - -ms-transition: 0.70s; - -o-transition: 0.70s; - -webkit-transform: rotate(30deg); - -moz-transform: rotate(30deg); - -o-transform: rotate(30deg); - -ms-transform: rotate(30deg); - transform: rotate(30deg); + cursor: pointer; + transition: 0.7s; + -webkit-transition: 0.7s; + -moz-transition: 0.7s; + -ms-transition: 0.7s; + -o-transition: 0.7s; + -webkit-transform: rotate(30deg); + -moz-transform: rotate(30deg); + -o-transform: rotate(30deg); + -ms-transform: rotate(30deg); + transform: rotate(30deg); } @keyframes blurFadeIn { - 0% { - opacity: 0; - text-shadow: 0px 0px 40px #fff; - -webkit-transform: scale(1.3); - } - 50% { - opacity: 0.5; - text-shadow: 0px 0px 10px #fff; - -webkit-transform: scale(1.1); - } - 100% { - opacity: 1; - text-shadow: 0px 0px 1px #fff; - -webkit-transform: scale(1); - } + 0% { + opacity: 0; + text-shadow: 0px 0px 40px #fff; + -webkit-transform: scale(1.3); + } + 50% { + opacity: 0.5; + text-shadow: 0px 0px 10px #fff; + -webkit-transform: scale(1.1); + } + 100% { + opacity: 1; + text-shadow: 0px 0px 1px #fff; + -webkit-transform: scale(1); + } } @keyframes slide-right { - 0% { - opacity: 0; - left: -100px; - } - 100% { - opacity: 1; - left: 0; - } + 0% { + opacity: 0; + left: -100px; + } + 100% { + opacity: 1; + left: 0; + } } @keyframes slide-left { - 0% { - opacity: 0; - right: -100px; - } - 100% { - opacity: 1; - right: 0; - } + 0% { + opacity: 0; + right: -100px; + } + 100% { + opacity: 1; + right: 0; + } } @keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - transform: translateY(0); - } - 40% { - transform: translateY(-30px); - } - 60% { - transform: translateY(-15px); - } + 0%, + 20%, + 50%, + 80%, + 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-30px); + } + 60% { + transform: translateY(-15px); + } } /* Foooter styling Improved */ .footer-text { - color: #fff; + color: #fff; } .footer-flex { - display: flex; - justify-content: center; - background-color: black; - border-bottom: 10px solid #1565c0; + display: flex; + justify-content: center; + background-color: black; + border-bottom: 10px solid #1565c0; } .my-4 { - text-align: center; + text-align: center; } h2 { - color: #e29657; - + color: #e29657; } body .container { - margin: auto; + margin: auto; } .details, .container.details { - margin-bottom: 60px; + margin-bottom: 60px; } .container { - flex-grow: 1; - margin: 0 auto; - position: relative; - + flex-grow: 1; + margin: 0 auto; + position: relative; } .heart { - font-size: 50px; - color: #e00; - animation: beat .75s infinite alternate; - transform-origin: center; + font-size: 50px; + color: #e00; + animation: beat 0.75s infinite alternate; + transform-origin: center; } @keyframes beat { - to { transform: scale(1.4); } + to { + transform: scale(1.4); + } } .icon-link { - color: black; -} \ No newline at end of file + color: black; +}