feat: add apps

index.html

@@ -31,7 +31,7 @@
         gap: 24px;
 
         transition-property: transform;
-        transition-duration: 100ms;
+        transition-duration: 150ms;
       }
 
       #logo-container {
@@ -79,9 +79,17 @@
         border: 1px solid black;
         gap: 24px;
         height: 290px;
+        transition-property: opacity;
+        transition-duration: 500ms;
         opacity: 0.3;
       }
 
+      .app:hover {
+        transition-property: opacity;
+        transition-duration: 500ms;
+        opacity: 0.8;
+      }
+
       .app1 {
         grid-area: app1;
         padding: 20px 0;
@@ -116,14 +124,14 @@
       </div>
       <div class="app2">
         <div class="app">
-          <img src="/ikon.png" height="128px" width="128px" />
-          <p class="app-name">Blog</p>
+          <img src="/konulu-konum-logo.jpg" height="128px" width="128px" />
+          <p class="app-name">Konulu<br />Konum</p>
         </div>
       </div>
       <div class="app3">
         <div class="app">
-          <img src="/ikon.png" height="128px" width="128px" />
-          <p class="app-name">Blog</p>
+          <img src="/degisim-kotudur.png" height="128px" width="128px" />
+          <p class="app-name">Değişim<br />Kötüdür</p>
         </div>
       </div>
       <div id="logo-container">
@@ -151,7 +159,7 @@
       </div>
     </div>
     <script>
-      let constrain = 600;
+      let constrain = 800;
       let panContainer = document.getElementById("pan-container");
       let ex1Layer = document.getElementById("logo");