add used languages to projects

Author: erpicoding

index.html

@@ -110,15 +110,18 @@ <h2 class="sectionHeading">Projekte</h2>
       <div class="projektContainer">
         <div class="projekt">
           <h3>Hausaufgaben-Manager</h3>
-          <a href="https://erpicoding.github.io/Hausaufgaben-Manager">Öffnen</a>
           <img width="100%" src="./img/hausaufgaben-manager.png" />
+          <p><span>HTML</span><span>CSS</span><span>JavaScript</span></p>
+          <a href="https://erpicoding.github.io/Hausaufgaben-Manager">Öffnen</a>
         </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>
           <a href="https://erpicoding.github.io/secret-message-generator/"
-            >Öffnen</a
+            ><span>Öffnen</span></a
           >
-          <img width="100%" src="./img/smg.png" />
         </div>
       </div>
     </section>

style.css

@@ -345,40 +345,38 @@ h6 {
   margin: 20px;
   padding-bottom: 0px;
   position: relative;
+  background: linear-gradient(0deg, hsl(0, 0%, 5%), hsl(0, 0%, 10%));
+  box-shadow: inset 0 1px 1px hsl(0, 0%, 30%);
+  border-radius: 40px;
 }
 .projektContainer .projekt h3 {
   padding: 20px;
   text-align: center;
-  border-radius: 40px 40px 0 0;
-  background-color: hsl(0, 0%, 15%);
-  background: linear-gradient(0deg, hsl(0, 0%, 5%), hsl(0, 0%, 10%));
-  box-shadow: inset 0 1px 1px hsl(0, 0%, 30%);
 }
-.projektContainer .projekt img {
-  border-radius: 0 0 40px 40px;
+.projektContainer .projekt p {
+  height: 20px;
+  margin: 20px;
+  gap: 8px;
+}
+.projektContainer .projekt p span {
+  margin-right: 8px;
+  padding: 8px;
+  background-color: hsl(0, 0%, 15%);
+  border-radius: 8px;
 }
 .projektContainer .projekt a {
-  width: 100px;
   height: 40px;
   margin: 20px;
-  background-color: rgba(63, 207, 212, 0.2);
+  padding: 5px;
+  background-color: hsl(182, 54%, 27%);
   border-radius: 20px;
-  box-shadow: inset 0 0 5px rgba(63, 207, 212, 0.25);
-  -webkit-backdrop-filter: blur(4px);
-          backdrop-filter: blur(4px);
-  text-align: center;
-  align-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   text-decoration: none;
+  line-height: 20px;
   font-size: 20px;
   font-weight: 600;
-  position: absolute;
-  bottom: 0px;
-  right: 0px;
-  z-index: -1;
-}
-.projektContainer .projekt:hover a {
-  z-index: 10;
-  transition: 500ms;
 }
 
 dialog.newRecord {

style.css.map

@@ -413,47 +413,41 @@ h6 {
     padding-bottom: 0px;
     position: relative;
 
+    background: linear-gradient(0deg, hsl(0, 0%, 5%), hsl(0, 0%, 10%));
+    box-shadow: inset 0 1px 1px hsl(0, 0%, 30%);
+    border-radius: 40px;
+
     h3 {
       padding: 20px;
       text-align: center;
-
-      border-radius: 40px 40px 0 0;
-      background-color: $bg-grey;
-
-      background: linear-gradient(0deg, hsl(0, 0%, 5%), hsl(0, 0%, 10%));
-      box-shadow: inset 0 1px 1px hsl(0, 0%, 30%);
     }
-    img {
-      border-radius: 0 0 40px 40px;
+    p {
+      height: 20px;
+      margin: 20px;
+      gap: 8px;
+      span {
+        margin-right: 8px;
+        padding: 8px;
+        background-color: hsl(0, 0%, 15%);
+        border-radius: 8px;
+      }
     }
 
     a {
-      width: 100px;
       height: 40px;
       margin: 20px;
+      padding: 5px;
 
-      background-color: $petrol-ultra-transparent;
+      background-color: $petrol-solid;
       border-radius: 20px;
-      box-shadow: inset 0 0 5px $petrol-dark-transparent;
-      backdrop-filter: blur(4px);
 
-      text-align: center;
-      align-content: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       text-decoration: none;
+      line-height: 20px;
       font-size: 20px;
       font-weight: 600;
-
-      position: absolute;
-      bottom: 0px;
-      right: 0px;
-
-      z-index: -1;
-    }
-    &:hover {
-      a {
-        z-index: 10;
-        transition: 500ms;
-      }
     }
   }
 }