added hero image and corrected image styling

Smelbows · Smelbows · commit de1290591231 · 2021-10-01T15:34:24.000+02:00
diff --git a/code/index.html b/code/index.html
@@ -14,8 +14,13 @@
   </head>
   <body>
     <header>
-      <h1>GitHub Tracker</h1>
-      <div id="user-info"></div>
+      <div class="hero-image">
+        <div class="hero-text">
+          <h1>GitHub Tracker</h1>  
+        </div>
+      </div> 
+      <div id="user-info"> 
+      </div>
     </header>
     <hr />
     <h2>Projects</h2>
diff --git a/code/style.css b/code/style.css
@@ -12,26 +12,35 @@ body {
   margin: 0;
 }
 
-header {
-  display: flex;
-  flex-direction: column;
-  align-content: center;
-  width: 100%;
-  height: 450px;
-  background-image: url(./Images/GitHub-headpic.jpeg);
-  background-color: rgba(0, 0, 0, 0.342);
+.hero-image {
+  background: linear-gradient(rgba(0, 0, 0, 0.342), rgba(0, 0, 0, 0.774)), url("./Images/GitHub-headpic.jpeg");
+  height: 50vh;
+  background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
+  position: relative;
+  border: transparent;
+  z-index: -1;
+}
+.hero-text {
+    text-align: center;
+    position: absolute;
+    top: 20%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--primary);
+    font-size: 16px;
 }
 
-h1 {
-  text-align: center;
-  color: var(--primary);
-  font-size: 40px;
+.avatar {
+  width: 40%;
+  max-width: 350px;
+  border-radius: 50%;
+  margin-top: -20vh;
+  border: var(--secondary) solid 1px;
 }
 
 h2 {
-  margin-top: 3em;
   text-align: center;
   color: var(--secondary);
   font-size: 35px;
@@ -44,7 +53,6 @@ p {
 
 hr {
   background-color: #459ec6;
-  margin-top: 10%;
   width: 70%;
   height: 6px;
   border: transparent;
@@ -68,14 +76,6 @@ hr {
   font-size: 20px;
 }
 
-.avatar {
-  width: 55%;
-  max-width: 350px;
-  border-radius: 50%;
-  margin: 1em;
-  border: var(--secondary) solid 1px;
-}
-
 main {
   margin: 5em 2em;
   display: grid;
@@ -223,17 +223,14 @@ footer > * {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .avatar {
-    max-width: 40%;
+  .hero-text {
+    font-size: 20px;
   }
+
 }
 
 @media (min-width: 1024px) {
   main {
     grid-template-columns: repeat(3, 1fr);
   }
-
-  .avatar {
-    max-width: 350px;
-  }
 }
