STRIKE
Creative CSS Design
Original Design • CSS Only

STRIKE — Make an impression with motion

A bold, mobile-first portfolio-style landing page built with only HTML and CSS. Responsive across mobile, tablet, and desktop. Includes creative animations, micro-interactions, and a modern glass look.

Explore features Download
STRIKE / Design

Features

CSS Animations

Glitch heading & animated hero

Pure CSS keyframes, gradient motion, and transform-based micro-interactions. Works without JavaScript.

Mobile-First

Responsive by design

Layout scales gracefully from narrow phones up to large desktop monitors using CSS grid and media queries.

Accessibility

Reduced motion support

Detects users who prefer reduced motion and turns off heavy animation for them.

No JavaScript

Lightweight & fast

Single file, easy to host on GitHub Pages, Netlify or Vercel — zero client scripts needed.

Creative Effects

Gradient, glass, and tilt

Multiple layers of gradients and a subtle card tilt on hover for modern polish.

Easy to Fork

Single-file start

Copy the index.html and customize the palette, fonts and content to match your brand.

How to use

  1. Save this file as index.html.
  2. Create a public GitHub repo and push the file.
    • Enable GitHub Pages or deploy to Netlify/Vercel.
  3. Share your live URL on Twitter and LinkedIn with the hashtags #STRIKEDesign #CSSOnly #WebDesign.

Get the code

This project is a single HTML file to keep things simple. You can fork it, add assets, or split into multiple files for production.

Suggested repo name: strike-creative

Deploy & Share

Deploy on GitHub Pages

Push to a public repo, then enable Pages from the main branch. Your site will be available at https://<username>.github.io/<repo>/.

Deploy on Netlify

Drag and drop the folder or connect the GitHub repo. Netlify will build a static site and provide a live link.

Deploy on Vercel

Import the GitHub repo on Vercel and deploy. For static HTML, Vercel will publish immediately.

Credits & Notes

Built for the challenge: create a STRIKE-branded creative design using only HTML and CSS. Feel free to modify the color variables and typography to match your exact brand guidelines.