Merge pull request #78 from tmsagarofficial/main

Improve the about page

site/html/about.html

@@ -106,14 +106,14 @@
             </p>
           </div>
           <div class="nosk-sticker">
-            <img src="/site/images/1683458146466.jpg" alt="Image with a text Open" class="responsive-image">
+            <img src="/site/images/nosk-logo.png" alt="Image with a text Open" class="responsive-image">
           </div>
         </div>
       </section>
 
       <section>
         <h2 class="sub-topic"><span>Our Objectives</span></h2>
-          <ul class=""">
+          <ul class="pointers">
             <li>Promote Open Source Culture</li>
             <li>Help the people to adopt FOSS</li>
             <li>Provide Workshop on various Open Source Tool and Technology</li>

site/style/about-styles.css

@@ -1,32 +1,89 @@
-.sub-topic{
-   font-size: x-large;
+/* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Roboto+Slab:wght@400;700&display=swap');
+
+body {
+
+    line-height: 1.6;
+    color: #333;
 }
-.sub-topic span {
-    border-bottom: black solid 1px;
+
+main {
+    font-family: 'Poppins', sans-serif;
+    font-size: 1.1rem;
+
+    margin: 0 auto;
+    padding: 2rem;
+    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
+    border-radius: 8px;
+    backdrop-filter: blur(5px); /* Adds a slight blur effect to the background */
+}
+
+.sub-topic {
+    font-family: 'Roboto Slab', serif;
+    font-size: 2rem;
+    font-weight: 700;
+    color: #2c3e50;
+    margin-top: 2rem;
+    margin-bottom: 1.5rem;
 }
 
-main{
-    font-size: large;
-    font-family: 'Courier New', Courier, monospace;
+.sub-topic span {
+    border-bottom: 3px solid #3498db;
 }
 
 .intro-nosk {
     display: flex;
     flex-direction: row;
+    align-items: center;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+.intro-nosk p {
+    margin-bottom: 1rem;
+}
+
+.responsive-image {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 35px;
+    margin-right: 35px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
 }
 
-.responsive-image{
-    padding: 25px;
-    min-width: 100%;
+ul {
+    padding-left: 1.5rem;
 }
 
-/* mobile screen */
-@media (max-width:771px){
-    .intro-nosk{
-        display: flex !important;
-        flex-direction: column !important;
+.pointers li {
+    margin-bottom: 0.5rem;
+}
+
+a {
+    color: #2980b9;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+a:hover {
+    color: #3498db;
+    text-decoration: underline;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .intro-nosk {
+        flex-direction: column;
+    }
+
+    .sub-topic {
+        font-size: 1.75rem;
     }
-    .responsive-image{
-        width: 100px;
+
+    main {
+        font-size: 1rem;
+        padding: 1.5rem;
     }
 }

site/style/styles.css

@@ -199,25 +199,25 @@ body {
 
 /* BACK to top button  */
 #btn-back-to-top {
+
+  z-index: 99;
   position: fixed;
   bottom: 20px;
   right: 20px;
   display: none;
 }
 
-#btn-back-to-top {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  display: none;
-}
 
-/* @media (min-width: 992px) {
-    .offcanvas{
-        visibility: visible !important;
-    }
-} */
 
+
+@media (max-width: 768px) {
+  #btn-back-to-top {
+      bottom: 10px;
+      right: 10px;
+      padding: 10px;
+      font-size: 16px;
+  }
+}
 @media (max-width: 992px) {
   .navbar-collapse {
     transition: visibility 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;