Style meetup times

Ashrafur93 · Nov 13, 2024 · 73d9dc2 · 73d9dc2
1 parent 93e3ece
commit 73d9dc2
Showing 1 changed file with 52 additions and 17 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -18,7 +18,9 @@ body {
     font-family: 'Lato', sans-serif;
 }
 
-h1, h2, h3 {
+h1,
+h2,
+h3 {
     font-family: 'Oswald', sans-serif;
     text-transform: uppercase;
     letter-spacing: 2px;
@@ -51,7 +53,7 @@ header a {
 }
 
 /* Navigation menu buttons list */
-#menu > li {
+#menu>li {
     margin-bottom: 1em;
 }
 
@@ -112,7 +114,8 @@ main {
     padding-left: 10px;
 }
 
-#cover-text > h2, #cover-text > h3 {
+#cover-text>h2,
+#cover-text>h3 {
     color: #ffffff;
 }
 
@@ -128,7 +131,8 @@ main {
     font-size: 280%;
 }
 
-#benefits-mental > div, #benefits-physical > div {
+#benefits-mental>div,
+#benefits-physical>div {
     line-height: 20px;
     margin-bottom: 20px;
 }
@@ -159,6 +163,31 @@ main {
     justify-content: center;
 }
 
+/* Meetups section */
+#times {
+    background: url(../images/dublin-city.webp) no-repeat center/cover;
+    /* Handles responsivity without the need of media queries */
+    display: flex;
+    flex-wrap: wrap;
+}
+
+#times div {
+    color: #fafafa;
+    background-color: rgba(0, 0, 0, 0.6);
+    padding: 15px;
+    text-align: center;
+    /* This will stop any wrapping when there isn't enough space on the screen. and each div will expand to fill any available space in it's row */
+    flex-basis: 200px;
+    flex-grow: 1;
+    /* Creates a grid for meetup time divs over the background image */
+    border: 2px solid white;
+}
+
+/* Overrides the heading colour set in general styles */
+#times h3 {
+    color: #fafafa;
+}
+
 /* Footer */
 #social-networks {
     text-align: center;
@@ -176,6 +205,7 @@ main {
 
 /* Media query for tablets and larger (768px and above) */
 @media screen and (min-width: 768px) {
+
     /* Header */
     nav {
         display: block;
@@ -189,7 +219,7 @@ main {
         display: flex;
     }
 
-    #menu > li {
+    #menu>li {
         padding-left: 1rem;
     }
 
@@ -208,6 +238,7 @@ main {
         /* Push main content down to accomodate the larger header */
         margin-top: 79px;
     }
+
     #cover-text {
         /* Hero image */
         width: 300px;
@@ -225,32 +256,35 @@ main {
     #benefits-physical>div,
     #benefits-mental>div {
         width: 75%;
-}
+    }
 
-#benefits-mental>div {
-    text-align: end;
-    align-self: flex-end;
-}
+    #benefits-mental>div {
+        text-align: end;
+        align-self: flex-end;
+    }
 
 }
 
 /* Media query for laptops and larger (992px and above) */
 @media screen and (min-width: 992px) {
+
     /* Header */
-        #menu a:hover{
-            border-bottom: 1px solid #3a3a3a;
-        }
+    #menu a:hover {
+        border-bottom: 1px solid #3a3a3a;
+    }
 
 }
 
 /* Media query for large screens (1200px and above) */
 @media screen and (min-width: 1200px) {
+
     /* Reasons text alignment with the circular image */
     #benefits {
         display: flex;
         flex-direction: row;
     }
-    #benefits > div {
+
+    #benefits>div {
         flex: 1;
     }
 
@@ -262,10 +296,11 @@ main {
         order: 1;
     }
 
-    #benefits-mental > div {
+    #benefits-mental>div {
         align-self: flex-start;
     }
 
-    #benefits-physical > div {
+    #benefits-physical>div {
         align-self: flex-end;
-    }
+    }
+}