major updates for german content

src/scss/main.scss

@@ -1,4 +1,4 @@
-$primary: #fea500;
+$primary: #843809;
 @import "bootstrap/scss/bootstrap";
 $icomoon-font-path: "../font";
 @import "icons/style";
@@ -26,7 +26,7 @@ header {
     bottom: 0;
     left: 0;
     right: 0;
-    background: rgba(254, 165, 0, 0.9);
+    background: rgba(132, 56, 9, 0.9);
   }
 
   .profile-thumb {
@@ -392,7 +392,7 @@ section {
   }
 }
 
-.work {
+.interest {
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
@@ -405,48 +405,59 @@ section {
   text-decoration: none !important;
   color: #000;
 
+  &:hover {
+    color: #000;
+  }
+
   .desc {
     display: table-cell;
-    vertical-align: middle;
     height: 270px;
-    background: #fff;
-    opacity: 0;
-    -webkit-transition: 0.3s;
-    -o-transition: 0.3s;
-    transition: 0.3s;
+    padding: 20px;
 
     h3 {
       font-size: 20px;
-      -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-      transition: transform 0.3s, opacity 0.3s;
-      -webkit-transform: translate3d(0, -15px, 0);
-      transform: translate3d(0, -15px, 0);
     }
 
     span {
       display: block;
       color: lighten(#000, 60%);
       font-size: 14px;
-      -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-      transition: transform 0.3s, opacity 0.3s;
-      -webkit-transform: translate3d(0, 15px, 0);
-      transform: translate3d(0, 15px, 0);
     }
   }
 
-  &:hover {
+  &.interest-softwerke {
+    background-image: url(../img/sp-codes.png);
+
     .desc {
-      opacity: 1;
+      vertical-align: top;
+      color: #fff;
+    }
+  }
 
-      h3 {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-      }
+  &.interest-magic {
+    background-image: url(../img/sp-magic.png);
 
-      span {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-      }
+    .desc {
+      vertical-align: bottom;
+      color: #000;
+    }
+  }
+
+  &.interest-sports {
+    background-image: url(../img/dumbbell.jpg);
+
+    .desc {
+      vertical-align: middle;
+      color: #fff;
+    }
+  }
+
+  &.interest-photography {
+    background-image: url(../img/photography.jpg);
+
+    .desc {
+      vertical-align: top;
+      color: #000;
     }
   }
 }