Add cover text with club name and locations

Author: farhana039

assets/css/style.css

@@ -18,6 +18,13 @@ body {
     font-family: 'Lato', sans-serif;
 }
 
+h1, h2, h3 {
+    font-family: 'Oswald', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: #252525;
+}
+
 /* Header */
 header {
     background-color: #ffffff;
@@ -36,13 +43,6 @@ header a {
     color: inherit;
 }
 
-h1 {
-    font-family: 'Oswald', sans-serif;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    color: #252525;
-}
-
 #menu {
     font-size: 110;
     letter-spacing: 4px;
@@ -94,6 +94,23 @@ main {
     height: 600px;
     width: 100%;
     background: url("../images/hero-image.webp") no-repeat center center/cover;
+    position: relative;
+}
+
+#cover-text {
+    /* Final rgba value sets the opacity so it is semi-transparent*/
+    background-color: rgba(241, 109, 107, .7);
+    font-size: 130%;
+    position: absolute;
+    bottom: 30px;
+    width: 80%;
+    min-height: 200px;
+    padding-top: 40px;
+    padding-left: 10px;
+}
+
+#cover-text > h2, #cover-text > h3 {
+    color: #ffffff;
 }
 
 /* Footer */
@@ -145,6 +162,12 @@ main {
         /* Push main content down to accomodate larger header*/
         margin-top: 79px;
     }
+
+    /* Hero */
+    #cover-text {
+        width: 300px;
+        right: 50px;
+    }
 }
 
 /* Larger devices (laptops and desktops, 992px and up) */

index.html

@@ -37,7 +37,12 @@ <h1 id="logo">Love Running</h1>
 
     <!-- Main content -->
      <main>
-        <section id="hero"></section>
+        <section id="hero"><!--</section>-->
+        <div id="cover-text">
+            <h2>Love Running</h2>
+            <h3>Dublin Docklands & Phoenix Park</h3>
+        </div>
+        </section>
      </main>
 
     <!-- Footer -->