Added cover text with club name and location

easybulb · Jul 17, 2024 · 935953d · 935953d
1 parent e006401
commit 935953d
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 8 deletions.
diff --git a/assets/CSS/style.css b/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 {
@@ -37,13 +44,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;
@@ -99,6 +99,24 @@ main {
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 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 */
@@ -150,6 +168,12 @@ main {
         /* Push main content down to accommodate larger header */
         margin-top: 79px;
     }
+
+    /* Hero */
+    #cover-text {
+        width: 300px;
+        right: 50px;
+    }
 }
 
 /* Large devices (laptops and desktops, 992px and up) */

diff --git a/index.html b/index.html
@@ -38,7 +38,12 @@ <h1 id="logo">Love Running</h1>
 
     <!-- Main content -->
     <main>
-        <section id="hero"></section>
+        <section id="hero">
+            <div id="cover-text">
+                <h2>Love Running</h2>
+                <h3>Dublin Docklands and Phoenix Park</h3>
+            </div>
+        </section>
     </main>
 
     <!-- Footer -->