index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Discover stylish, responsive CSS templates for your web projects. Elevate your design effortlessly."
    />
    <title>CSS Templates</title>
    <style>
      html,
      body {
        background-color: rgb(15 23 42);
      }
      #templates {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        justify-content: center;
        align-items: center;
        padding: 20px;
      }
      #templates div {
        margin: 10px;
      }
      h1 {
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 40px;
      }
      a {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-decoration: none;
        color: #fff;
        text-align: center;
        font-size: 30px;
        font-weight: 900;
      }
      span {
        margin-bottom: 5px;
        text-align: center;
      }
      a:hover {
        transform: scale(1.1);
      }
      img {
        width: 250px;
        height: 250px;
        background-size: cover;
      }
      @media only screen and (max-width: 1400px) {
        body {
          grid-template-columns: auto auto auto auto;
        }
      }
      @media only screen and (max-width: 1200px) {
        body {
          grid-template-columns: auto auto auto;
        }
      }
      @media only screen and (max-width: 600px) {
        body {
          grid-template-columns: auto;
        }
      }
    </style>
  </head>
  <body>
    <h1>CSS Templates</h1>
    <div id="templates"></div>
    <script>
      const templates = [
        {
          folder: "animated-tab-bar",
          name: "Animated Tab Bar",
        },
        {
          folder: "animated-tab-bar2",
          name: "Animated Tab Bar 2",
        },
        {
          folder: "ball-game",
          name: "Ball Game",
        },
        {
          folder: "basic-photoshop",
          name: "Basic Photoshop",
        },
        {
          folder: "checkbox-tiles",
          name: "Checkbox Tiles",
        },
        {
          folder: "checklist",
          name: "Checklist",
        },
        {
          folder: "digit-pincode",
          name: "Digit Pincode",
        },
        {
          folder: "digital-clock",
          name: "Digital Clock",
        },
        {
          folder: "filter-cards",
          name: "Filter Cards",
        },
        {
          folder: "goey-footer",
          name: "Goey Footer",
        },
        {
          folder: "hover-caption",
          name: "Hover Caption",
        },
        {
          folder: "hover-cards",
          name: "Hover Cards",
        },
        {
          folder: "hover-cards2",
          name: "Hover Cards 2",
        },
        {
          folder: "hover-glow",
          name: "Hover Glow",
        },
        {
          folder: "image-zoom",
          name: "Image Zoom",
        },
        {
          folder: "interactive-card",
          name: "Interactive Card",
        },
        {
          folder: "login-page",
          name: "Login Page",
        },
        {
          folder: "nav-menu",
          name: "Nav Menu",
        },
        {
          folder: "neon-buttons",
          name: "Neon Buttons",
        },
        {
          folder: "parallax-animation",
          name: "Parallax Animation",
        },
        {
          folder: "parallax-website",
          name: "Parallax Website",
        },
        {
          folder: "qr-code",
          name: "QR Code",
        },
        {
          folder: "ring-loading",
          name: "Ring Loading",
        },
        {
          folder: "social-media",
          name: "Social Media",
        },
        {
          folder: "social-media2",
          name: "Social Media 2",
        },
        {
          folder: "sortable-list",
          name: "Sortable List",
        },
        {
          folder: "typing-effect",
          name: "Typing Effect",
        },
        {
          folder: "user-dropdown",
          name: "User Dropdown",
        },
        {
          folder: "wavy-background",
          name: "Wavy Background",
        },
        {
          folder: "wavy-landing-page",
          name: "Wavy Landing Page",
        },
      ];

      templates.map((template) => {
        const templates = document.getElementById("templates");
        const newDiv = document.createElement("div");
        const newA = document.createElement("a");
        const newSpan = document.createElement("span");
        const newImg = document.createElement("img");

        newA.href = `./${template.folder}/`;
        newA.target = "_blank";
        newSpan.innerText = template.name;
        newImg.src = `./${template.folder}/${template.folder}.gif`;
        newImg.alt = template.name;

        newA.appendChild(newSpan);
        newA.appendChild(newImg);
        newDiv.appendChild(newA);

        templates.appendChild(newDiv);
      });
    </script>
  </body>
</html>