page v1.0 including breakpoints and bootstrap

index.html

@@ -15,17 +15,21 @@
     <!-- <link rel="stylesheet" href="style.css"> -->
     <title>Sahaja Yoga Sangham</title>
     <style>
-        /* X-Small devices (portrait phones, less than 576px)
-No media query for `xs` since this is the default in Bootstrap */
-
-        /* Small devices (landscape phones, 576px and up) */
-        @media (min-width: 576px) {
+        /* X-Small devices (portrait phones, less than 576px)*/
+        @media (max-width: 768px) {
             p {
-                font-size: x-large;
+                font-size: 130%;
+            }
+
+            li {
+                font-size: 130%;
             }
 
         }
 
+        /* Small devices (landscape phones, 576px and up) */
+        /* bootstrap default size */
+
         /* Medium devices (tablets, 768px and up) */
         @media (min-width: 768px) {
             img {
@@ -36,16 +40,24 @@ No media query for `xs` since this is the default in Bootstrap */
             p {
                 font-size: x-large;
             }
+
+            li {
+                font-size: x-large;
+            }
         }
 
         /* Large devices (desktops, 992px and up) */
         @media (min-width: 992px) {
+            img {
+                width: 90%;
+            }
+
             p {
                 font-size: large;
             }
 
-            img {
-                width: 90%;
+            li {
+                font-size: large;
             }
         }
 
@@ -58,11 +70,11 @@ No media query for `xs` since this is the default in Bootstrap */
         }
 
         /* //XX-Large devices (larger desktops, 1400px and up) */
-        @media (min-width: 1400px) { 
-            img{
+        @media (min-width: 1400px) {
+            img {
                 max-width: 50px;
             }
-            }
+        }
 
 
         body {
@@ -87,7 +99,7 @@ No media query for `xs` since this is the default in Bootstrap */
 
         .card {
             border: none;
-            border-radius: 0%;
+            border-radius: 15px;
         }
 
         .gradient-bg {
@@ -113,8 +125,10 @@ No media query for `xs` since this is the default in Bootstrap */
             <section class="mx-0 card mb-3 gradient-bg" id="">
                 <div class=" row g-0 my-4">
                     <div class="col-md-4 d-flex align-items-center justify-content-center">
-                        <img class="bg-dark img-fluid mx-auto" src="https://sangham.sahaja.yoga/files/2020/10/logo.png"
-                            alt="placeholder">
+                        <a href="mailto:register@sahaja.yoga">
+                            <img class="bg-dark img-fluid mx-auto"
+                                src="https://sangham.sahaja.yoga/files/2020/10/logo.png" alt="Sahaj ID">
+                        </a>
                     </div>
                     <div class="col-md-8">
                         <div class="card-body">
@@ -140,8 +154,10 @@ No media query for `xs` since this is the default in Bootstrap */
             <section class="card mb-3 default-bg" id="">
                 <div class=" row g-0 my-4">
                     <div class="col-md-4 d-flex align-items-center justify-content-center">
-                        <img class="bg-dark img-fluid mx-auto" src="https://sangham.sahaja.yoga/files/2020/10/logo.png"
-                            alt="placeholder">
+                        <a href="https://forum.sahaja.yoga">
+                            <img class="bg-dark img-fluid mx-auto"
+                                src="https://sangham.sahaja.yoga/files/2020/10/logo.png" alt="Sahaj Forum">
+                        </a>
                     </div>
                     <div class="col-md-8">
                         <div class="card-body">
@@ -163,8 +179,10 @@ No media query for `xs` since this is the default in Bootstrap */
             <section class="card mb-3 gradient-bg" id="">
                 <div class=" row g-0 my-4">
                     <div class="col-md-4 d-flex align-items-center justify-content-center">
-                        <img class="bg-dark img-fluid mx-auto" src="https://sangham.sahaja.yoga/files/2020/10/logo.png"
-                            alt="placeholder">
+                        <a href="https://share.sahaja.yoga">
+                            <img class="bg-dark img-fluid mx-auto"
+                                src="https://sangham.sahaja.yoga/files/2020/10/logo.png" alt="Sahaj Vault">
+                        </a>
                     </div>
                     <div class="col-md-8">
                         <div class="card-body">
@@ -186,8 +204,10 @@ No media query for `xs` since this is the default in Bootstrap */
             <section class="card mb-3 default-bg" id="">
                 <div class=" row g-0 my-4">
                     <div class="col-md-4 d-flex align-items-center justify-content-center">
-                        <img class="bg-dark img-fluid mx-auto" src="https://sangham.sahaja.yoga/files/2020/10/logo.png"
-                            alt="placeholder">
+                        <a href="https://meet.sahaja.yoga">
+                            <img class="bg-dark img-fluid mx-auto"
+                                src="https://sangham.sahaja.yoga/files/2020/10/logo.png" alt="Sahaj Meet">
+                        </a>
                     </div>
                     <div class="col-md-8">
                         <div class="card-body">