diff --git a/assets/js/collapse.js b/assets/js/collapse.js
new file mode 100644
index 0000000..4719eaf
--- /dev/null
+++ b/assets/js/collapse.js
@@ -0,0 +1,15 @@
+var coll = document.getElementsByClassName("collapsed");
+var i;
+
+for (i = 0; i < coll.length; i++) {
+  coll[i].nextElementSibling.style.display = "none";
+  coll[i].addEventListener("click", function() {
+    this.classList.toggle("active");
+    var content = this.nextElementSibling;
+    if (content.style.display === "block") {
+      content.style.display = "none";
+    } else {
+      content.style.display = "block";
+    }
+  });
+} 
\ No newline at end of file
diff --git a/dev/playground/index.php b/dev/playground/index.php
new file mode 100644
index 0000000..7b431a7
--- /dev/null
+++ b/dev/playground/index.php
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+
+<?php
+### ERROR HANDLING ###
+
+function warnError($errno, $errstr, $errfile, $errline)
+{
+  echo "<br><p style='padding:0px;margin:0px;background-color:white;color:black;'><b style='color:red;'>Error:</b> [$errno] $errstr <br> in file <b style='color:blue'>$errfile</b> line <b style='color:red'>$errline</b></p>";
+}
+set_error_handler("warnError");
+
+if (!$_SERVER['DOCUMENT_ROOT']) {
+  $_SERVER['DOCUMENT_ROOT'] = '/weblink';
+}
+# TODO separate file
+?>
+
+<head>
+  <!--!Copyright © 2023 Aliberk Sandıkçı-->
+  <meta charset="UTF-8">
+
+  <!-- CSS Files -->
+  <?php
+  $dir = new DirectoryIterator($_SERVER['DOCUMENT_ROOT'] . "/assets/css");
+  foreach ($dir as $file) {
+    if ((!$file->isDot()) && str_ends_with($file, ".css")) {
+      echo '<link rel="stylesheet" href="/assets/css/' . $file . '">' . PHP_EOL . '  ';
+    }
+  } ?>
+  <title>DEV PLAYGROUND</title>
+
+  <style>
+    body {
+      color: white;
+    }
+
+    .insta {
+      border: 1px dashed grey;
+      border-radius: 5px;
+      margin: 2px;
+      padding: 10px;
+      /* min-height: 100px; */
+    }
+
+    .insta::before {
+      content: "(insta) ";
+      position: relative;
+      color: pink;
+      margin-right: 10px;
+      font-size: smaller;
+      top: -10px;
+      left: -10px;
+    }
+
+    .collapsed {
+      background-color: grey;
+    }
+
+    .collapsed:hover {
+      background-color: antiquewhite;
+      color: black;
+    }
+  </style>
+</head>
+
+
+<body>
+
+  <h1>PLAYGROUND</h1>
+  <hr>
+  <sup>Trying random stuff that i see on the web (websites, insta reels etc.)</sup>
+  <h2>TODO: CATEGORIZE</h2>
+
+  <!-- 1 -->
+  <div class="insta" link="https://www.instagram.com/p/CsefQ6cK_DC/" id="p1" tags="css,background,remove background">
+    <div class="collapsed">
+      MAKE IMAGES SAME SIZE AND CENTERED, REMOVE WHITE BACKGROUND
+      <hr>
+    </div>
+    <div>
+      Before <br>
+      <img src="random-images/Adidas-1600x1600.jpg" width="100px" class="photos25062023195970-1">
+      <img src="random-images/NBA-1920x1080.jpg" width="100px" class="photos25062023195970-1">
+      <hr>
+      After <br>
+      <img src="random-images/Adidas-1600x1600.jpg" class="photos25062023195970-2">
+      <img src="random-images/NBA-1920x1080.jpg" class="photos25062023195970-2">
+      <style>
+        .photos25062023195970-1 {
+          width: 15%;
+        }
+
+        .photos25062023195970-2 {
+          width: 15%;
+          aspect-ratio: 3/2;
+          object-fit: contain;
+          mix-blend-mode: color-burn;
+        }
+      </style>
+      <hr>
+      <pre><code class="language-css">
+      .images{
+        width: 15%;
+        aspect-ratio: 3/2;
+        object-fit: contain;
+        mix-blend-mode: color-burn;
+      }</code></pre>
+    </div>
+  </div>
+
+  <!-- 2 -->
+  <div class="insta" link="https://www.instagram.com/p/CtObaQbrgId/" id="p2" tags="css,faded background">
+    <div class="collapsed">
+      FADED OVERLAY FOR IMAGES
+      <hr>
+    </div>
+    <div>
+      <figure class="card250620232109116">
+        <img src="random-images/993-536x354.jpg" alt="example image">
+        <figcaption>Example Image</figcaption>
+      </figure>
+      <div class="explanation">Create grid and place both image and figcaption on it. add gradient effect and transition to figcaption. Then make opacity: 1 when hover</div>
+      <style>
+        .card250620232109116 {
+          width: 30rem;
+          overflow: hidden;
+
+          display: grid;
+          grid-template-areas: "stack";
+        }
+
+        .card250620232109116>* {
+          grid-area: stack;
+        }
+
+        .card250620232109116>figcaption {
+          display: grid;
+          align-items: end;
+          padding: 1.5rem 2rem;
+          background-image: linear-gradient(to bottom,
+              rgb(33 44 55 / 0),
+              rgb(33 44 55 / 0),
+              rgb(33 44 55 / 0.75));
+          opacity: 0;
+          transition: opacity 300ms;
+        }
+
+        .card250620232109116:hover figcaption {
+          opacity: 1;
+        }
+      </style>
+      <pre>
+      <code class="language-html">
+        &lt;figure class="card"&gt;
+          &lt;img src="image.jpg" alt="..."&gt;
+          &lt;figcaption>Example Image&lt;/figcaption&gt;
+        &lt;/figure&gt;
+      </code></pre>
+      <pre>
+      <code class="language-css">
+        .card {
+          width: 30rem;
+          overflow: hidden;
+          display: grid;
+          grid-template-areas: "stack";
+        }
+        .card>*{
+          grid-area: stack;
+        }
+        .card>figcaption {
+          display: grid;
+          align-items: end;
+          padding: 1.5rem 2rem;
+          background-image: linear-gradient(to bottom,
+          rgb(33 44 55 / 0),
+          rgb(33 44 55 / 0),
+          rgb(33 44 55 / 0.75)
+          );
+          opacity: 0;
+          transition: opacity 300ms;
+        }
+        .card:hover figcaption{
+          opacity:1; 
+        }
+      </pre>
+      </code>
+    </div>
+  </div>
+
+  <!-- 3 -->
+
+  <div style="margin-top:100px; min-height:500px;border:2px dotted blue">Footer</div>
+
+  <?php
+  $dir = new DirectoryIterator($_SERVER['DOCUMENT_ROOT'] . "/assets/js");
+  foreach ($dir as $file) {
+    if ((!$file->isDot()) && str_ends_with($file, ".js") && $file != "jquery.js") {
+      echo '<script src="/assets/js/' . $file . '"></script>' . PHP_EOL . '  ';
+    }
+  } ?>
+</body>
+
+</html>
\ No newline at end of file
