HTML COOKIE BANNER TEMPLATES
============================

30 designs in plain HTML and CSS. No frameworks, no build step, no external
images. The only outside resource is the Inter font from Google Fonts.

WHAT'S INSIDE
-------------
index.html        Open this in your browser to preview every design. Use the
                  Desktop / Tablet / Phone buttons to check each size, and
                  "Open" to view a design on its own.
sections/         30 banners & popups, one standalone .html file each.

HOW TO USE
----------
1. Open a design file in a code editor.
2. Copy the markup between <body> and </body> (leave out the <script> tag
   if there isn't one) into your page.
3. Copy the CSS inside the first <style> block into your stylesheet. You can
   skip the second block marked "Preview page only"; it only styles the
   preview page.
4. If the file has a <script> at the bottom, copy it too. It is plain
   JavaScript with no libraries.

SAFE TO PASTE ANYWHERE
Every design's CSS is scoped to the design itself (a class such as
.bs-v1-hero-03 on its outer element). It won't restyle the rest of your
site, and your site's own classes (.btn, .container, ...) won't change it.
Shared class names and variables carry a bs- prefix (.bs-btn, --bs-brand).
You can use several designs on one page without clashes.

CHANGE THE COLOURS AND SIZES
----------------------------
Every design sets these variables on its outer element:

  .bs-v1-hero-01 {   (each design has its own class)
    --bs-brand: #4f46e5;      main accent colour (buttons, links, highlights)
    --bs-brand-ink: #ffffff;  text colour on top of --bs-brand
    --bs-ink: #0f172a;        main text colour
    --bs-muted: #64748b;      secondary text
    --bs-line: #e2e8f0;       borders and dividers
    --bs-soft: #f8fafc;       soft background panels
    --bs-radius: 12px;        corner rounding
    --bs-max: 1200px;         maximum content width
  }

Change them once and every design that uses them follows. Some designs set
their own --bs-brand inside their class (for example a restaurant design in a
warm colour); search for "--brand" in that file to change it.

IMAGES
------
Image areas are CSS gradients, inline SVG or placeholder blocks, so nothing
breaks when you open the files. Replace them with your own <img> tags.

ACCESSIBILITY
-------------
Menus, tabs, toggles and accordions use the right aria- attributes and work
with a keyboard. Focus outlines are visible, and animations are turned off
for visitors who ask for reduced motion.

LICENCE
-------
Free for personal and commercial projects, including client websites. You may
change the designs however you like. You may not resell or redistribute this
pack (or its files) as a template, theme or design pack of your own.

All brand names, people and figures in the demos are fictional.
