From 496aae7633362444a7cb6e451061af51bbd18760 Mon Sep 17 00:00:00 2001 From: Sam <74021826+x39OME@users.noreply.github.com> Date: Fri, 21 Apr 2023 00:04:13 +0300 Subject: [PATCH] Add files via upload --- .../index.html | 32 ++++ .../style.css | 147 ++++++++++++++++++ 2 files changed, 179 insertions(+) create mode 100644 100_projects/59-season's-greetings-happy-eid-2023/index.html create mode 100644 100_projects/59-season's-greetings-happy-eid-2023/style.css diff --git a/100_projects/59-season's-greetings-happy-eid-2023/index.html b/100_projects/59-season's-greetings-happy-eid-2023/index.html new file mode 100644 index 0000000..9d7b1a7 --- /dev/null +++ b/100_projects/59-season's-greetings-happy-eid-2023/index.html @@ -0,0 +1,32 @@ + + + + + + + dcoument + + +
+
+
+
+

EID

+
+
+

EID

+
+
+

mubarak

+
+
+

2023

+
+
+
+ + + diff --git a/100_projects/59-season's-greetings-happy-eid-2023/style.css b/100_projects/59-season's-greetings-happy-eid-2023/style.css new file mode 100644 index 0000000..7568675 --- /dev/null +++ b/100_projects/59-season's-greetings-happy-eid-2023/style.css @@ -0,0 +1,147 @@ +html, body { + height: 100%; + font-family: 'Poppins', sans-serif; +} +body { + width: 100%; + background: rgb(26,140,141); + background: radial-gradient(ellipse at center, rgb(141, 59, 26) 0%,rgb(120, 3, 110) 100%); +} +strong { + font-weight: bold; +} +.container-outer { + display: table; + width: 100%; + height: 100%; +} +.container { + width: 100%; + margin: 0 auto; + display: table-cell; + vertical-align: middle; +} +p { + color: #fff; +} +.main-text { + position: relative; +} +.top p, .bottom p { + line-height: 1; + margin: 0; + text-align: center; + font-weight: bold; + font-size: 72px; + letter-spacing: 10px; + position: absolute; + width: 100%; +} +.top, .bottom { + width: 100%; + display: block; + overflow: hidden; + position: relative; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-delay: 1s; +} +.bottom p { + bottom: 0px; +} +.top { + height: 32px; + animation-name: goUp; + +} +.bottom { + height: 41px; + animation-name: goDown; +} +.sub-text p { + text-align: center; + font-size: 24px; + line-height: 1; + font-weight: 300; + text-transform: uppercase; + letter-spacing: 10px; + margin: 0; + position: absolute; + width: 100%; + top: 50%; + transform: translateY(-70%); + opacity: 0; + animation-name: fadeIn; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-delay: 2s; +} +.date { + margin-top: 20px; + opacity: 0; + animation-name: fadeIn; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-delay: 3s; +} +.date p { + position: absolute; + text-align: center; + font-size: 24px; + line-height: 1; + font-weight: 300; + text-transform: uppercase; + letter-spacing: 10px; + margin: 0; + width: 100%; +} +@keyframes goUp { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(-22px); + } +} +@keyframes goDown { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(22px); + } +} +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +footer { + display: block; + width: 100%; + padding: 15px; + box-sizing: border-box; + position: absolute; + left: 0; + bottom: 0; +} +footer::after { + content: ''; + display: table; + clear: both; +} +footer p { + font-weight: 300; + font-size: 12px; +} +footer .left { + float: left; + text-align: left; +} +footer .right { + float: right; + text-align: right; +} \ No newline at end of file