From 9919f6e3091a3c6fc6313ad62dfda3d647fa4c59 Mon Sep 17 00:00:00 2001 From: Atmaram Kambli Date: Tue, 10 Oct 2023 09:01:39 +0530 Subject: [PATCH] add glow animation to the heading text --- RandomQuote/AckermanLevi1/index.css | 39 ++++++++++++++++++++++++---- RandomQuote/AckermanLevi1/index.html | 1 + 2 files changed, 35 insertions(+), 5 deletions(-) diff --git a/RandomQuote/AckermanLevi1/index.css b/RandomQuote/AckermanLevi1/index.css index 92d8abac1..a411a0aaa 100644 --- a/RandomQuote/AckermanLevi1/index.css +++ b/RandomQuote/AckermanLevi1/index.css @@ -8,6 +8,8 @@ q { body { margin: 0; + color: #ffffff; + text-align: center; width: 100%; height: 100vh; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); @@ -31,38 +33,65 @@ q { width: 100%; height: 100%; display: flex; - justify-content: center; + flex-direction: column; + justify-content: space-evenly; align-items: center; } + + .glow { + margin-bottom: 20px; + font-size: 40px; + font-weight: 900; + animation: glowText 1s ease-in-out infinite alternate + } + + @keyframes glowText { + from { + text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073; + } + to { + text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6; + } + } .quote-area { display: flex; flex-direction: column; + align-items: center; background: #fff; max-width: 600px; box-sizing: border-box; padding: 20px; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + border: 2px solid #23c6b9; } + #quote { + font-size: 20px; + } #quoteAuthor { - padding: 20px 0; + padding: 5px 0; + font-size: 22px; + font-weight: 500; } button { max-width: 200px; - text-align: center; + /* text-align: center; */ line-height: 1.3em; margin-bottom: 10px; border: none; background: #23c6b9; - color: #fff; font-weight: 900; padding: 10px; letter-spacing: .6px; cursor: pointer; } - + #tweetbtn { + max-width: 200px; ; + margin: auto; + border-radius: 8px; + } /* Reduce motion options. If on then background is static */ @media (prefers-reduced-motion: reduce) { body { diff --git a/RandomQuote/AckermanLevi1/index.html b/RandomQuote/AckermanLevi1/index.html index 6c7614bde..775d0b469 100644 --- a/RandomQuote/AckermanLevi1/index.html +++ b/RandomQuote/AckermanLevi1/index.html @@ -8,6 +8,7 @@
+

Random Quote Generator

Finish each day and be done with it. You have done what you could. Some blunders and absurdities no doubt crept in; forget them as soon as you can. Tomorrow is a new day. You shall begin it serenely and with too high a spirit to be encumbered with your old nonsense.