Free Code Snippets

A horizontal rule that spans edge-to-edge even inside padded containers.

/* CSS */
.hr-bleed{
  height:1px; background:#e5e5e5; border:0; width:100vw; max-width:100vw;
  position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
}
/* HTML: <hr class="hr-bleed"> */

Lightweight banner with Accept/Decline stored in localStorage.

<!-- Banner -->
<div id="cookie-banner" role="dialog" aria-live="polite">
  <span>This site uses cookies to enhance your experience.</span>
  <div>
    <button id="accept-cookies" type="button">Accept</button>
    <button id="decline-cookies" type="button">Decline</button>
  </div>
</div>

<style>
#cookie-banner{position:fixed;left:0;bottom:0;width:100%;display:flex;gap:12px;
align-items:center;justify-content:space-between;padding:10px 16px;background:#000;color:#fff;z-index:9999}
#cookie-banner button{background:#1e90ff;border:0;color:#fff;padding:6px 12px;border-radius:4px;cursor:pointer}
#decline-cookies{background:#f44336}
</style>

<script>
if (new URLSearchParams(location.search).has('resetCookies')) localStorage.removeItem('cookieConsent');
document.addEventListener('DOMContentLoaded', () => {
  const b=document.getElementById('cookie-banner');
  if(localStorage.getItem('cookieConsent')) { b.remove(); return; }
  document.getElementById('accept-cookies').onclick=()=>{localStorage.setItem('cookieConsent','accepted');b.remove();}
  document.getElementById('decline-cookies').onclick=()=>{localStorage.setItem('cookieConsent','declined');b.remove();}
});
</script>

A clean hero with image left, text right. Stacks on mobile. Includes soft shadow + divider.

/* ===== CSS ===== */
.hero-split{
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border-bottom:1px solid #e9ecef;
  box-shadow:0 12px 22px -18px rgba(0,0,0,.35);
  margin-bottom:1rem;
}
.hero-split .wrap{
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:24px; align-items:center; padding:18px 0;
}
@media (max-width: 992px){ .hero-split .wrap{ grid-template-columns:1fr; } }

.hero-split .media{
  border-radius:12px; overflow:hidden; background:#f6f8fb;
  aspect-ratio: var(--hero-ratio, 7/4);
}
.hero-split .media img{
  display:block; width:100%; height:100%; object-fit:cover; max-width:700px;
}

.hero-split .eyebrow{
  font-size:.85rem; letter-spacing:.04em; text-transform:uppercase;
  color:#1e90ff; font-weight:700; margin-bottom:.25rem;
}
.hero-split .title{ margin:0 0 .25rem 0; }
.hero-split .lead{ margin:0 0 .75rem 0; color:#333; }
.hero-split .btn-row{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* ===== HTML ===== */
<section class="hero-split" aria-label="Page hero">
  <div class="container">
    <div class="wrap">

      <div class="media" style="--hero-ratio:7/4;">
        <img src="images/hero-sample-700.webp"
             width="700" height="400"
             alt="Describe the hero image">
      </div>

      <div class="text">
        <div class="eyebrow">Delpha Cart Blog • Guides</div>
        <h1 class="title">A Great Hero Title</h1>
        <p class="lead">Short pitch about what visitors will get in this page or article.</p>
        <div class="btn-row">
          <a href="#" class="cta-btn">Primary Action</a>
          <a href="#" class="btn btn-outline-secondary">Secondary</a>
        </div>
      </div>

    </div>
  </div>
</section>

Simple fluid images, a fixed thumb (350×171), and a cover-crop wrapper with aspect-ratio.

/* ===== CSS ===== */
/* 1) Fluid image (scales down with container, keeps aspect) */
.img-fluid { max-width:100%; height:auto; display:block; }

/* 2) Fixed thumbnail cap (like your 350×171 blog thumbs) */
.thumb-fixed { width:auto; height:auto; max-width:350px; max-height:171px; display:block; }

/* Optional center wrapper for thumbs */
.thumb-wrap { display:flex; justify-content:center; align-items:center; padding:8px 0; }

/* 3) Cover-crop wrapper (set any ratio: 16/9, 3/2, 7/4…) */
.media-cover {
  border-radius:12px; overflow:hidden; background:#f6f8fb;
  aspect-ratio: var(--ratio, 16/9);
}
.media-cover > img { width:100%; height:100%; object-fit:cover; display:block; }

/* Contain-fit variant (no crop) */
/* .media-contain > img { object-fit:contain; background:#fff; } */

/* ===== HTML ===== */
/* Fluid image */
<img class="img-fluid"
     src="images/sample-800.jpg" width="800" height="600"
     alt="Descriptive alt text">

/* Fixed thumbnail (centered) */
<div class="thumb-wrap">
  <img class="thumb-fixed"
       src="images/blog/thumb-350x171.webp" width="350" height="171"
       alt="Blog thumbnail alt">
</div>

/* Cover-crop in a fixed ratio */
<div class="media-cover" style="--ratio: 3/2;">
  <img src="images/sample-1200x800.jpg" width="1200" height="800"
       alt="Wide image cropped nicely">
</div>