STYLING IMPROVED

Bitbox-Connect · Nov 7, 2024 · f4b696a · f4b696a
1 parent 4291092
commit f4b696a
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 20 deletions.
diff --git a/client/index.html b/client/index.html
@@ -140,12 +140,10 @@
     input[type="email"] {
         width: 100%;
         padding: 10px;
-        margin-bottom: 16px;
         border: 1px solid #000000;
         border-radius: 5px;
         font-size: 14px;
     }
-
     .signup-btn1-nl {
         width: 100%;
         height: 30px;
@@ -206,7 +204,7 @@
             <h1>Subscribe to Newsletter</h1>
             <h2 class="h2-nl">Join the Bitbox Community!</h2>
             <p class="pop_up-nl">Subscribe to receive the latest updates, tips, and project highlights from the Bitbox community. Whether you’re looking for help or want to share your knowledge, we’ve got you covered!</p>
-            <form id="emailForm-nl">
+            <form id="emailForm-nl" style="align-items: center;">
                 <input type="email" id="email-nl" placeholder="Enter your email" required>
                 <button type="submit" class="signup-btn1-nl">Subscribe</button>
             </form>

diff --git a/client/src/component/Footer.jsx b/client/src/component/Footer.jsx
@@ -182,7 +182,7 @@ const Footer = (props) => {
 
                         {/* Middle section with About links */}
                         <div className="col-md-6 col-lg-3 col-12 ft-2" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1800">
-                            <h5>About</h5>
+                            <h5 className='foot'>About</h5>
                             <ul>
                                 <li className="nav-item">
                                     <Link to="/contactus">Contact Us</Link>
@@ -204,7 +204,7 @@ const Footer = (props) => {
 
                         {/* Right section with Legal links */}
                         <div className="col-md-7 col-lg-4 col-13 ft-3" data-aos="fade-up" data-aos-delay='500' data-aos-duration="1800">
-                            <h5>Legals</h5>
+                            <h5 className='foot'>Legals</h5>
                             <ul>
                                 <li className="nav-item">
                                     <Link to="/feedback">Feedback</Link>

diff --git a/client/src/component/Footers/VisitorCount.jsx b/client/src/component/Footers/VisitorCount.jsx
@@ -54,7 +54,7 @@ const VisitorCounter = () => {
             {visitorCount !== null ? (
                 <p className="font-bold text-2xl text-gray-300">Total Visitors: {visitorCount}</p>
             ) : (
-                <p>Loading visitor count...</p>
+                <p><i>Loading visitor count...........</i></p>
             )}
         </div>
     );

diff --git a/client/src/css/Footer.css b/client/src/css/Footer.css
@@ -12,13 +12,22 @@
   margin: 0.5rem;
 }
 
+.nav-item:hover {
+  text-decoration: underline;
+}
+.foot {
+  text-decoration: 3px underline;
+}
+
 .footer-container {
   display: flex;
   justify-content: space-around;
   padding: 15px;
   width: 100vw;
   font-weight: 500;
-  background-color: var(--bg-color); /* Use CSS variable for easy theme change */
+  background-color: var(
+    --bg-color
+  ); /* Use CSS variable for easy theme change */
   transition: background-color 0.3s ease-in-out; /* Smooth transition for theme changes */
 }
 
@@ -48,7 +57,7 @@ h1 {
 }
 
 .code {
-  color: #0D92F4;
+  color: #0d92f4;
 }
 
 p {
@@ -78,7 +87,9 @@ p {
 
 .footer-container .social a:hover {
   color: #0d0d0e; /* Hover color for light mode */
-  transform: scale(1.1); /* Scale up icons slightly for a more interactive feel */
+  transform: scale(
+    1.1
+  ); /* Scale up icons slightly for a more interactive feel */
 }
 
 /* Dark mode styles */
@@ -140,7 +151,7 @@ h4 a:hover {
 }
 
 /* Nav and button styles */
-nav_ul li {
+.nav_ul li {
   padding: 0 0.6rem;
 }
 
@@ -185,7 +196,7 @@ nav_ul li {
 }
 
 .ft-1 span {
-  color: #0D92F4;
+  color: #0d92f4;
 }
 
 .ft-1 p {
@@ -207,7 +218,7 @@ nav_ul li {
 .footer-icons i {
   padding: 0.4rem 0.5rem;
   background: #e1e1e1;
-  color: #0D92F4;
+  color: #0d92f4;
   border-radius: 80%;
 }
 
@@ -217,17 +228,20 @@ nav_ul li {
   color: #091057;
 }
 
-.ft-2 ul, .ft-3 ul {
+.ft-2 ul,
+.ft-3 ul {
   list-style: none;
   padding-left: 0;
 }
 
-.ft-2 ul li, .ft-3 ul li {
+.ft-2 ul li,
+.ft-3 ul li {
   padding: 0.35rem 0;
   font-weight: 500;
 }
 
-.ft-2 ul a, .ft-3 ul a {
+.ft-2 ul a,
+.ft-3 ul a {
   text-decoration: none;
   color: #000;
   font-size: 1.06rem;
@@ -244,7 +258,7 @@ nav_ul li {
 }
 
 .Last-footer {
-  background: #0D92F4;
+  background: #1173eb;
   text-align: center;
   padding: 1rem 0;
 }
@@ -265,7 +279,8 @@ nav_ul li {
     font-size: 0.9rem;
   }
 
-  .btn1, .btn2 {
+  .btn1,
+  .btn2 {
     padding: 0.4rem 1rem;
     font-size: 0.9rem;
   }
@@ -292,11 +307,13 @@ nav_ul li {
     margin-top: 1.5rem;
   }
 
-  .ft-2 ul, .ft-3 ul {
+  .ft-2 ul,
+  .ft-3 ul {
     text-align: center;
   }
 
-  .ft-2 ul a, .ft-3 ul a {
+  .ft-2 ul a,
+  .ft-3 ul a {
     font-size: 0.95rem;
   }
 
@@ -320,7 +337,8 @@ nav_ul li {
     font-size: 0.85rem;
   }
 
-  .btn1, .btn2 {
+  .btn1,
+  .btn2 {
     padding: 0.3rem 0.8rem;
     font-size: 0.85rem;
   }