Explore snippets
Discover reusable code snippets, examples, fixes, and ideas shared by developers, students, and teams.
Fade In Utility Class
A reusable CSS fade-in animation utility class.
.fade-in {
animation: fade-in 300ms ease both;
}
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
Responsive CSS Grid Gallery
A responsive gallery layout using CSS grid and auto-fit.
.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;
}Card Hover Lift
A small hover effect that lifts a card with transition and shadow.
.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 Loading Spinner
A small pure CSS loading spinner using border animation.
.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);
}
}Button Pulse Animation
A simple CSS pulse effect for call-to-action buttons.
.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 {Simple Pricing Card
A clean HTML pricing card structure that can be styled with any CSS framework.
<article class="pricing-card">
<header>
<h2>Plus</h2>
<p>For students and junior developers.</p>
</header>
<p class="price">$5 <span>/ month</span></p>
<ul>
<li>500 snippets</li>
<li>Private snippets</li>
<li>Workspace export</li>Basic SEO Head Tags
A small HTML head template with title, description, viewport, canonical URL, and Open Graph tags.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title - Site name</title>
<meta name="description" content="A short page description for search engines.">Responsive Image Figure
An HTML figure pattern for responsive images with a caption.
<figure class="image-card">
<img
src="/assets/img/example.jpg"
alt="A student writing code on a laptop"
loading="lazy"
width="1200"
height="800"
>
<figcaption>
Coding practice session with reusable snippets.
</figcaption>Accessible Login Form
A simple accessible login form with labels, autocomplete attributes, and required fields.
<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>