change project button design

Author: erpicoding

index.html

@@ -97,43 +97,43 @@ <h2>Programmiersprachen und andere Technologien</h2>
           </div>
         </div>
       </section>
-    </main>
-    <section class="contentSection" id="sectionProjects">
-      <h2 class="sectionHeading">Projekte</h2>
-      <div class="projektContainer">
-        <div class="projekt">
-          <h3>Hausaufgaben-Manager</h3>
-          <img width="100%" src="./img/hausaufgaben-manager.png" />
-          <p><span>HTML</span><span>CSS</span><span>JavaScript</span></p>
-          <div class="links">
-            <a href="https://erpicoding.github.io/Hausaufgaben-Manager"
-              >Öffnen</a
-            >
-            <a
-              class="github"
-              href="https://github.com/erpicoding/Hausaufgaben-Manager"
-              >Github</a
-            >
+      <section class="contentSection" id="sectionProjects">
+        <h2 class="sectionHeading">Projekte</h2>
+        <div class="projektContainer">
+          <div class="projekt">
+            <h3>Hausaufgaben-Manager</h3>
+            <img width="100%" src="./img/hausaufgaben-manager.png" />
+            <p><span>HTML</span><span>CSS</span><span>JavaScript</span></p>
+            <div class="links">
+              <a href="https://erpicoding.github.io/Hausaufgaben-Manager"
+                >Öffnen</a
+              >
+              <a
+                class="github"
+                href="https://github.com/erpicoding/Hausaufgaben-Manager"
+                >Github</a
+              >
+            </div>
           </div>
-        </div>
 
-        <div class="projekt">
-          <h3>Verschlüsselungs Programm</h3>
-          <img width="100%" src="./img/smg.png" />
-          <p><span>HTML</span><span>CSS</span><span>JavaScript</span></p>
-          <div class="links">
-            <a href="https://erpicoding.github.io/secret-message-generator/"
-              >Öffnen</a
-            >
-            <a
-              class="github"
-              href="https://github.com/erpicoding/secret-message-generator/"
-              >Github</a
-            >
+          <div class="projekt">
+            <h3>Verschlüsselungs Programm</h3>
+            <img width="100%" src="./img/smg.png" />
+            <p><span>HTML</span><span>CSS</span><span>JavaScript</span></p>
+            <div class="links">
+              <a href="https://erpicoding.github.io/secret-message-generator/"
+                >Öffnen</a
+              >
+              <a
+                class="github"
+                href="https://github.com/erpicoding/secret-message-generator/"
+                >Github</a
+              >
+            </div>
           </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </main>
 
     <dialog id="newRecord" class="newRecord">
       <h1>Neuer Rekord:</h1>

style.css

@@ -9,6 +9,11 @@
 
 html {
   width: 100%;
+  scrollbar-width: none;
+}
+
+html::-webkit-scrollbar {
+  display: none;
 }
 
 /*  HA-Madal
@@ -172,8 +177,13 @@ header {
   align-content: center;
   font-weight: bold;
   text-decoration: none;
+  border: 2px solid hsl(0, 0%, 95%);
   border-radius: 20px;
-  transition: 500ms;
+  transition: 1000ms;
+}
+.banner .bannerLink:hover {
+  background-color: hsl(0, 0%, 95%);
+  color: hsl(0, 0%, 15%);
 }
 
 @property --angle {

style.css.map

@@ -27,6 +27,10 @@ $text-grey: hsl(0, 0%, 60%);
 }
 html {
   width: 100%;
+  scrollbar-width: none;
+}
+html::-webkit-scrollbar {
+  display: none;
 }
 /*  HA-Madal
 */
@@ -219,8 +223,14 @@ header {
     align-content: center;
     font-weight: bold;
     text-decoration: none;
+
+    border: 2px solid $text;
     border-radius: 20px;
-    transition: 500ms;
+    transition: 1000ms;
+    &:hover {
+      background-color: $text;
+      color: $bg-grey;
+    }
   }
 }