add github link to banner

Author: erpicoding

img/logos/github-mark-white.svg

@@ -36,7 +36,13 @@
       <div class="banner animatedBorder">
         <h1>ERPI CODING</h1>
         <h2>Web-Developer</h2>
-        <a href="#sectionProjects" class="bannerLink">Projekte &rarr;</a>
+        <div class="line"></div>
+        <div class="links">
+          <a href="https://github.com/erpicoding" target="_blank"
+            ><img src="./img/logos/github-mark-white.svg" height="30px"
+          /></a>
+          <a href="#sectionProjects" class="bannerLink">Projekte &rarr;</a>
+        </div>
       </div>
     </header>
     <main>

index.html

@@ -158,9 +158,9 @@ header {
   text-align: center;
   justify-content: space-evenly;
   position: relative;
-  top: calc(50vh - 75px);
+  top: calc(50vh - 90px);
   left: calc(50% - 150px);
-  height: 150px;
+  height: 180px;
   width: 300px;
   -webkit-backdrop-filter: blur(5px);
           backdrop-filter: blur(5px);
@@ -169,10 +169,21 @@ header {
   border-radius: 25px;
   transition: 500ms;
 }
-.banner .bannerLink {
+.banner .line {
+  height: 2px;
+  width: 260px;
+  border-radius: 1px;
+  background-color: hsl(0, 0%, 50%);
+}
+.banner .links {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+.banner .links .bannerLink {
   height: 20px;
   width: 100px;
-  margin: 0px;
   padding: 5px;
   align-content: center;
   font-weight: bold;
@@ -181,7 +192,7 @@ header {
   border-radius: 20px;
   transition: 1000ms;
 }
-.banner .bannerLink:hover {
+.banner .links .bannerLink:hover {
   background-color: hsl(0, 0%, 95%);
   color: hsl(0, 0%, 15%);
 }

style.css

@@ -200,10 +200,10 @@ header {
   justify-content: space-evenly;
 
   position: relative;
-  top: calc(50vh - 75px);
+  top: calc(50vh - 90px);
   left: calc(50% - 150px);
 
-  height: 150px;
+  height: 180px;
   width: 300px;
 
   backdrop-filter: blur(5px);
@@ -213,23 +213,36 @@ header {
   border-radius: 25px;
   transition: 500ms;
 
-  .bannerLink {
-    height: 20px;
-    width: 100px;
+  .line {
+    height: 2px;
+    width: 260px;
 
-    margin: 0px;
-    padding: 5px;
+    border-radius: 1px;
 
-    align-content: center;
-    font-weight: bold;
-    text-decoration: none;
+    background-color: hsl(0, 0%, 50%);
+  }
+  .links {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    .bannerLink {
+      height: 20px;
+      width: 100px;
 
-    border: 2px solid $text;
-    border-radius: 20px;
-    transition: 1000ms;
-    &:hover {
-      background-color: $text;
-      color: $bg-grey;
+      padding: 5px;
+
+      align-content: center;
+      font-weight: bold;
+      text-decoration: none;
+
+      border: 2px solid $text;
+      border-radius: 20px;
+      transition: 1000ms;
+      &:hover {
+        background-color: $text;
+        color: $bg-grey;
+      }
     }
   }
 }