From da953e6bf981fe5f5cbb98a6f6f109fb8ea5eb83 Mon Sep 17 00:00:00 2001
From: Rakesh9100 <roshanrakesh7362@gmail.com>
Date: Fri, 17 Jan 2025 17:27:24 +0530
Subject: [PATCH] Fixed heading styling conflict

---
 404.html                           |  2 +-
 assets/css_files/commonstyle.css   |  8 +++---
 assets/css_files/contributor.css   |  9 ++++++
 assets/html_files/about.html       |  2 +-
 assets/html_files/contact.html     |  2 +-
 assets/html_files/contributor.html |  2 +-
 assets/html_files/faq.html         |  2 +-
 index.html                         |  4 +--
 style.css                          | 45 +++++++++++++-----------------
 9 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/404.html b/404.html
index f9b1bdfe..390c0b13 100644
--- a/404.html
+++ b/404.html
@@ -96,7 +96,7 @@
     <footer>
         <div class="footer-container">
             <div class="company-info">
-                <h1 class="company-name heading">Beautiify</h1>
+                <h1 class="heading"><img src="./assets/images/logo.png">Beautiify</h1>
                 <p>
                     Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
                 </p>
diff --git a/assets/css_files/commonstyle.css b/assets/css_files/commonstyle.css
index a7e91384..0173643c 100644
--- a/assets/css_files/commonstyle.css
+++ b/assets/css_files/commonstyle.css
@@ -43,17 +43,17 @@ body {
 }
 
 body.dark-mode .SearchDarkMode {
-    color: #FFFFFF;
+    color: white;
 }
 
 section {
     z-index: 100;
 }
 
-.heading {
+section .heading {
     font-size: 4em;
     font-weight: bolder;
-    color: white;
+    color: cornsilk;
     text-align: center;
     margin: 75px 0 80px;
     text-shadow: 2px 2px 2px black, 1px 1px 1px white;
@@ -67,7 +67,7 @@ section {
 }
 
 .box {
-    border: 3px solid #ffffff;
+    border: 3px solid white;
     border-radius: 14px;
     box-shadow: 3px 3px 6px 1px white;
     margin: 20px 40px;
diff --git a/assets/css_files/contributor.css b/assets/css_files/contributor.css
index e3a1457e..11dbbe90 100644
--- a/assets/css_files/contributor.css
+++ b/assets/css_files/contributor.css
@@ -23,6 +23,7 @@ body {
     padding: 30px 70px;
     text-align: center;
     position: relative;
+    margin-bottom: 25px;
 }
 
 .contributors .heading-box:after {
@@ -41,6 +42,8 @@ body {
 
 .contributors .heading {
     font-size: 4.5rem;
+    margin-bottom: 30px;
+    color: rgb(50, 50, 12);
     transition: color 0.3s ease-in-out;
 }
 
@@ -193,4 +196,10 @@ body {
     font-size: 19px;
     font-weight: 600;
     text-align: center;
+}
+
+@media (max-width: 768px) {
+    .contributors .heading {
+        font-size: 3.5rem;
+    }
 }
\ No newline at end of file
diff --git a/assets/html_files/about.html b/assets/html_files/about.html
index b6b36c5c..4fd194b5 100644
--- a/assets/html_files/about.html
+++ b/assets/html_files/about.html
@@ -131,7 +131,7 @@ <h3 align="center" style="color: #ffecd1;">Thank You for Visiting Beautiify!</h3
     <footer>
         <div class="footer-container">
             <div class="company-info">
-                <h1 class="company-name heading"><img src="../images/logo.png">Beautiify</h1>
+                <h1 class="heading"><img src="../images/logo.png">Beautiify</h1>
                 <p>
                     Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
                 </p>
diff --git a/assets/html_files/contact.html b/assets/html_files/contact.html
index 7fde08e6..f5df206b 100644
--- a/assets/html_files/contact.html
+++ b/assets/html_files/contact.html
@@ -145,7 +145,7 @@ <h2 class="form-title">Send us a message :)</h2>
     <footer>
         <div class="footer-container">
             <div class="company-info">
-                <h1 class="company-name heading"><img src="../images/logo.png">Beautiify</h1>
+                <h1 class="heading"><img src="../images/logo.png">Beautiify</h1>
                 <p>
                     Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
                 </p>
diff --git a/assets/html_files/contributor.html b/assets/html_files/contributor.html
index 6e74f1b4..b1cd55fb 100644
--- a/assets/html_files/contributor.html
+++ b/assets/html_files/contributor.html
@@ -108,7 +108,7 @@ <h1 class="heading">Our Valuable Contributors</h1>
     <footer>
         <div class="footer-container">
             <div class="company-info">
-                <h1 class="company-name heading"><img src="../images/logo.png">Beautiify</h1>
+                <h1 class="heading"><img src="../images/logo.png">Beautiify</h1>
                 <p>
                     Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
                 </p>
diff --git a/assets/html_files/faq.html b/assets/html_files/faq.html
index 706c8705..92e8b5fb 100644
--- a/assets/html_files/faq.html
+++ b/assets/html_files/faq.html
@@ -99,7 +99,7 @@
     <footer>
         <div class="footer-container">
             <div class="company-info">
-                <h1 class="company-name heading"><img src="../images/logo.png">Beautiify</h1>
+                <h1 class="heading"><img src="../images/logo.png">Beautiify</h1>
                 <p>
                     Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
                 </p>
diff --git a/index.html b/index.html
index dc4b44ac..4b83f566 100644
--- a/index.html
+++ b/index.html
@@ -97,7 +97,7 @@
             <div class="logo">
                 <img src="./assets/images/logo.png" alt="Logo">
             </div>
-            <h1 class="heading">Beautiify</h1>
+            <h1>Beautiify</h1>
             <h3 class="sub-head">Every component, in one place!!</h3>
             <p class="paragraph">
                 Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience.
@@ -130,7 +130,7 @@ <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another searc
     <footer>
         <div class="footer-container">
             <div class="company-info">
-                <h1 class="company-name heading"><img src="./assets/images/logo.png">Beautiify</h1>
+                <h1 class="heading"><img src="./assets/images/logo.png">Beautiify</h1>
                 <p>
                     Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
                 </p>
diff --git a/style.css b/style.css
index a1b8395b..9c4d83eb 100644
--- a/style.css
+++ b/style.css
@@ -138,27 +138,23 @@
     transition: all 0.3s ease-out;
 }
 
-@-webkit-keyframes spin {
+@keyframes spin {
     0% {
-        -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
 
     100% {
-        -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }
 
-@keyframes spin {
+@-webkit-keyframes spin {
     0% {
         -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
     }
 
     100% {
         -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
     }
 }
 
@@ -452,9 +448,12 @@ section {
 }
 
 .comp-section .compcontainer h1 {
-    margin-top: -25px;
+    margin: -25px 0 20px;
     font-size: clamp(4rem, 4vw, 7rem);
-    text-shadow: 2px 2px 3px black, 1px 1px 2px white;
+    background: linear-gradient(to right, #f70479, #cccccc);
+    background: -webkit-linear-gradient(to right, #f70479, #cccccc);
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
     animation: lights 5s 750ms linear infinite;
 }
 
@@ -670,18 +669,23 @@ footer {
     padding: 0 20px;
 }
 
+.footer-container .heading {
+    font-size: 25px;
+    text-align: center;
+    margin-bottom: 20px;
+    background: linear-gradient(to right, #f70479, #cccccc);
+    background: -webkit-linear-gradient(to right, #f70479, #cccccc);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
 .company-info {
     font-weight: 600;
     flex: 1 1 30%;
 }
 
-.company-name {
-    font-size: 24px;
-    margin-bottom: 10px;
-    align-items: center;
-}
-
-.company-name img {
+.company-info img {
     width: 36px;
     width: 36px;
     vertical-align: middle;
@@ -697,17 +701,6 @@ footer {
     flex: 1 1 30%;
 }
 
-.heading {
-    font-size: 24px;
-    margin-bottom: 20px;
-    background: #00F260;
-    background: -webkit-linear-gradient(to right, #f70479, #cccccc);
-    background: linear-gradient(to right, #f70479, #cccccc);
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    text-align: center;
-}
-
 .footer-ul {
     justify-items: center;
     align-items: center;