add Links section

Author: erpicoding

index.html

@@ -56,8 +56,14 @@ <h3>Programmiersprachen und andere Technologien</h3>
         <p id="languageLogoSource"></p>
       </div>
     </section>
-    <section class="contentSection" id="section2">
+    <section class="contentSection linksBg" id="section2">
       <h2 class="sectionHeading">Links</h2>
+      <a href="https://github.com/erpicoding" target="_blank" class="firstLink"
+        >Github</a
+      >
+      <a href=""></a>
+      <a href=""></a>
+      <a href=""></a>
     </section>
     <section class="contentSection" id="section3">
       <h2 class="sectionHeading">Projekte</h2>

linksBackground.png

@@ -11,10 +11,10 @@
   margin: 0px;
   padding: 0px;
   color: white;
+  scroll-behavior: smooth;
 }
 html {
   width: 100%;
-  scroll-behavior: smooth;
 }
 /*header bild*/
 header {
@@ -181,3 +181,31 @@ button.language:hover {
   clear: left;
   font-size: 12px;
 }
+
+.linksBg {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: linear-gradient(var(--petrol-transparent), rgba(0, 0, 0, 0.7)),
+    url(./linksBackground.png) center/cover no-repeat;
+  align-items: center;
+}
+.linksBg a {
+  width: 200px;
+  height: 40px;
+  margin: 20px;
+
+  background-color: var(--petrol-ultra-transparent);
+  border-radius: 20px;
+  box-shadow: inset 0 0 5px var(--petrol-dark-transparent);
+  backdrop-filter: blur(4px);
+
+  text-align: center;
+  align-content: center;
+  text-decoration: none;
+  font-size: 20px;
+  font-weight: 600;
+}
+.linksBg h2 {
+  margin-bottom: 60px;
+}