Explore

Explore snippets

Discover reusable code snippets, examples, fixes, and ideas shared by developers, students, and teams.

Public snippets by CodShot user

Clear

Popular tags: #beginner #javascript #php #typescript #nextjs #react #ui #json #security #utility #validation #api

29 public snippets

Open

CSS

Public

Responsive CSS Grid Gallery

A responsive gallery layout using CSS grid and auto-fit.

CSS Preview

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.75rem;
}

#css #grid #responsive #gallery

CodShot user

Updated: 2026-06-03 14:05

Public snippets

Open

CSS

Public

Card Hover Lift

A small hover effect that lifts a card with transition and shadow.

CSS Preview

.hover-card {
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.hover-card:hover {
  transform: translateY(-4px);

#css #card #hover #ui

CodShot user

Updated: 2026-06-03 14:05

Public snippets

Open

CSS

Public

CSS Loading Spinner

A small pure CSS loading spinner using border animation.

CSS Preview

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#css #animation #loader #utility

CodShot user

Updated: 2026-06-03 14:05

Public snippets

Open

CSS

Public

Button Pulse Animation

A simple CSS pulse effect for call-to-action buttons.

CSS Preview

.button-pulse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: #4f46e5;
  color: #fff;
  text-decoration: none;
  animation: pulse 1.8s infinite;
}

@keyframes pulse {

#css #animation #button #beginner

CodShot user

Updated: 2026-06-03 14:05

Public snippets

Open

HTML / Markup

Public

Accessible Login Form

A simple accessible login form with labels, autocomplete attributes, and required fields.

HTML / Markup Preview

<form action="/signin" method="post" class="login-form">
  <div>
    <label for="email">Email address</label>
    <input
      type="email"
      id="email"
      name="email"
      autocomplete="email"
      required
    >
  </div>

  <div>

#html #form #accessibility #beginner

CodShot user

Updated: 2026-06-03 14:05

Public snippets