Home page UI enhancement

index.html

@@ -8,6 +8,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>मातृबोधः</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Protest+Riot&family=Quicksand:[email protected]&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles.css" />
     <link rel="stylesheet" href="animations.css" />
     <link rel="stylesheet" href="scontentcss.css" />
@@ -40,9 +43,10 @@
                         <li><a href="feedback.html">Feedback</a></li>
                     </ul>
                 </li>
+
                 <li><a href="login.html">Login</a></li>
 
-            <a href="#" class="btn-contact">Contact</a>
+            <a href="#" class="btn-contact" id="btn-contact">Contact</a>
            </ul>
         </nav>
 
@@ -104,7 +108,7 @@ <h2 >
           <p class="subtitle ">
             A Chariot of Indian Children with Ancient Wisdom for Modern Times
           </p>
-          <a href="#" class="btn btn-primary">View Services</a>
+          <a href="#" class="btn btn-primary" style="border-color: #e5a186">View Services</a>
         </div>
       </div>
 
@@ -193,6 +197,7 @@ <h2>Educating Kids with India’s Cultural Heritage</h2>
         <img src="/1.jpg" alt="Krishna and Arjuna on chariot" />
       </div>
     </section>
+
     <section class="content-section" id="content">
       <!-- Roadmap Cards -->
       <div class="roadmap">

scontentcss.css

@@ -24,9 +24,9 @@
 .roadmap-card {
   flex: 1;
   background-color: #fff;
-  border-radius: 12px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.159);
+  padding: 1.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -61,7 +61,7 @@
 
 .roadmap-card:hover {
   transform: translateY(-10px);
-  box-shadow: 0 8px 16px #f8bea7;
+  box-shadow: -2px 7px 26px #4e4c4c;
 }
 
 @media screen and (min-width: 1400px) {

style.css

@@ -4,7 +4,11 @@
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
 }
-
+*{
+    font-family: "Quicksand", serif;
+    font-weight: 400;
+    font-style: normal;
+}
 body {
     background: #f1f1f1;
     display: flex;
@@ -123,3 +127,30 @@ button:hover {
     bottom: 10px;
     width: 100%;
 }
+
+ /* Webkit browsers: Chrome, Safari, Edge */
+html, body {
+    scrollbar-width: thin; /* Thin scrollbar in Firefox */
+    scrollbar-color: #888 #f1f1f1; /* Scrollbar thumb color and track color */
+  }
+
+  /* Webkit-specific scrollbars */
+  ::-webkit-scrollbar {
+    width: 6px; /* Thin scrollbar */
+    height: 6px; /* Thin horizontal scrollbar */
+  }
+
+  ::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 5px; /* Rounded corners for the track */
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 5px; /* Rounded corners for the thumb */
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; /* Darker thumb color on hover */
+  }
+

styles.css

@@ -1,3 +1,9 @@
+*{
+  font-family: "Quicksand", serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -50,6 +56,7 @@ nav {
   align-items: center;
   margin: 0;
   padding: 0;
+  font-size:19px;
   flex: 1;
   justify-content: flex-end;
 }
@@ -61,14 +68,14 @@ nav {
 }
 
 .nav-links li {
-  margin: 0 20px;
+  margin: 0 22px;
   position: relative;
 }
 
 .nav-links a {
   text-decoration: none;
   color: black;
-  font-weight: bold;
+  font-weight: 500;
   position: relative;
   transition: color 0.3s ease;
 }
@@ -77,14 +84,15 @@ nav {
   content: "";
   position: absolute;
   left: 0;
-  bottom: -3px;
+  bottom: -5px;
   width: 0;
   height: 2px;
   background-color: #e5a186;
   transition: width 0.3s ease;
 }
 
 .nav-links a:hover {
+  font-weight: 700;
   color: #e5a186;
 }
 
@@ -105,6 +113,8 @@ nav {
   z-index: 1;
   list-style: none;
   padding: 0;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
 }
 
 .nav-links .dropdown-content a {
@@ -122,14 +132,27 @@ nav {
   background-color: #f1f1f1;
 }
 
+.btn-contact {
+  background-color: white;
+  color: black;
+  padding: 10px 22px;
+  border: 2px solid black;
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: bold;
+  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
+  text-decoration: none;
+  margin-bottom: 5px;
+}
 
-
-.btn-contact:is(:focus, :hover) {
+#btn-contact:focus,
+#btn-contact:hover {
   background-color: #e5a186;
-  border-color: #e5a186;
-  color: white;
-  transform: scale(1.1);
+  border-color: #e5a186;;
+  color: rgb(12, 12, 12);
+  /* transform: scale(0.9); */
 }
+
 @media (max-width: 768px) {
     .navbar-collapse {
         display: flex;
@@ -171,8 +194,10 @@ nav {
 
 
 /* Hero Section */
-.hero {
-  /* display: flex;
+
+  /* 
+  .hero {
+  display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -182,8 +207,9 @@ nav {
   /* background: url("/WhatsApp\ Image\ 2024-09-24\ at\ 01.04.26_9c5f6797.jpg")
     no-repeat center/cover; */
   /* position: relative;
-  z-index: 1; */
-}
+  z-index: 1; 
+}*/
+
 
 .hero h1 {
   font-size: 70px;
@@ -298,18 +324,21 @@ nav {
   border-radius: 10px;
 }
 /* Adjust carousel image height */
-.hero-duplicate{
-     /* display: flex;
+
+     /*
+     .hero-duplicate{
+      display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100vh;
     padding: 0 5%;
     margin-top: 80px; 
     /* background: url('/WhatsApp\ Image\ 2024-09-24\ at\ 01.04.26_9c5f6797.jpg') no-repeat center/cover; */
-    /* z-index: 1;  */
+    /* z-index: 1;
+  }  */
+
 
-}
 .carousel-item{
     position: relative;
      display: flex;