assets/style/sphere.css

@@ -1,12 +1,35 @@
 .sphere-wrapper{
-    text-align: center;
+    display: flex;
+    
+    justify-content: center;
+    
+}
+.sphere-content-warapper{
+    position: relative;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    height: 90%;
+    width: 90%;
+}
+
+img{
+    width: 100%;
+    height: auto;
+    max-width: 100%;
 }
 
 sphere{
     margin: 1.5vw;
     height: 10vw;
     width: 10vw;
-    background-color: #bbb;
+    background-color:#707070;
     border-radius: 50%;
-    display: inline-block;    
+    display: flex;
+    justify-content: center;
+}
+
+sphere:hover{
+    background-color: 	#E8E8E8	;
 }

index.html

@@ -8,8 +8,22 @@
   </div>
 </div>
 <div class="sphere-wrapper">
+<sphere onclick="href('http://git.cliffbreak.de');">
+  <div class="sphere-content-warapper">
+    <img src="https://git.cliffbreak.de/img/gitea-lg.png" alt="gitEa">
+  </div>
+</sphere>
 <sphere>
-  <a>Test</a>
+  <div class="sphere-content-warapper">
+
+  </div>
 </sphere>
 <sphere></sphere>
+<sphere></sphere>
 </div>
+ 
+<script>
+function href(web){
+  window.location.href = web;
+}
+</script>