Add cover text with club name and locations

stef-von-d · Mar 6, 2024 · ed3aa84 · ed3aa84
1 parent 1906e5e
commit ed3aa84
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 8 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -17,7 +17,12 @@ body {
     /* General project style */
     color: #3a3a3a;
     font-family: 'Lato', sans-serif;
-
+}
+h1, h2, h3 {
+    font-family: 'Oswald', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: #252525;
 }
 
 /* Header*/
@@ -38,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;
@@ -95,8 +93,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 */
 #social-networks {
@@ -148,6 +161,11 @@ main {
         /* Push main content down to accomodate larger header */
         margin-top: 79px;
     }
+    /* Hero*/
+    #cover-text {
+        width: 300px;
+        right:50px;
+    }
 }
 
 /* Large devices (laptop and desktop, 922px and higher */

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