Merge pull request #820 from atmaram-kambli/frontend

PBJI · web-flow · commit 61cc342893f7 · 2023-10-10T10:20:12.000+05:30
add glow animation to the heading text #hacktoberfest
diff --git 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
@@ -8,6 +8,7 @@
 </head>
 <body>
     <div class="container">
+        <h1 class="glow">Random Quote Generator</h1>
         <div class="quote-area">
             <div id="quote">
               <q id="quoteText">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.</q>
