Merge pull request #900 from 2004pra/textAnimation_ourAwesomeContribu…

…tors I have completely change the background of team page and added animation of the text --> "meet our top contributors" !
PriyaGhosal · Oct 17, 2024 · 7c4a5b8 · 7c4a5b8
2 parents 05ee707 + 1323f39
commit 7c4a5b8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 25 deletions.
diff --git a/...nt with magenta and blue colors high quality image for backgrounds and web.jpeg b/...nt with magenta and blue colors high quality image for backgrounds and web.jpeg
diff --git a/team.html b/team.html
@@ -13,7 +13,7 @@
 
 body {
     /* padding-top: 80px; */
-    background-color: #FFFFFF;
+    background-color: #040b21;
 }
 .home-btn{
     height: 50px;
@@ -155,33 +155,32 @@
     border-radius: 50%;
     object-fit: cover;
 }
-
-.heading-contributors {
-    margin-top: 5rem;
-    width: 100%;
-    position: relative;
-    text-align: center;
-    font: 900 2.3rem 'Orbitron', sans-serif;
-    background: #222222;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+/* text"meet our  awesome contributors" design for glowy animation  */
+.heading-contributors{
+    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  font-size: 100px;
+  font-stretch: expanded;
+  padding-bottom: 1px;
+  line-height: 120px;
+  text-transform: Uppercase;
+  color: transparent;
+  -webkit-text-stroke: 0.1px #140000;
+  background: url(img/Premium\ Photo\ _\ Vibrant\ mesh\ gradient\ with\ magenta\ and\ blue\ colors\ high\ quality\ image\ for\ backgrounds\ and\ web.jpeg);
+  -webkit-background-clip: text;
+  background-position: 0 0;
+  animation: back 10s linear infinite;
+
 }
-
-.heading-contributors:after {
-    content: "Meet our awesome contributors 💙";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(45deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-size: 200%;
-    animation: shine 2.5s infinite;
+@keyframes back{
+  100%{
+
+    background-position: 200% 0;
+  }
 }
 
 
+
+
 </style>
 <body>
 
@@ -199,7 +198,7 @@
     <main>
         <section class="team">
             <div class="team-top" id="slide">
-                <div class="heading-contributors">Meet our awesome contributors 💙 </div>
+                <div class="heading-contributors"><h2>Meet our awesome contributors 💙</h2></div>
                 <div class="team-members">
                     <!-- Team members' data will be dynamically populated here -->
                 </div>