Shock v1.0.4 - Bootstrap HTML Template preview 1

Shock v1.0.4 - Bootstrap HTML Template

bookmark

Shock is a creative multipurpose HTML template based on Bootstrap 5, produced by Codings. It includes various pre-built pages such as homepage, blog pages, element component pages, header and footer templates, making it suitable for quic...

HTML

Project Overview

Shock is a creative multipurpose HTML template based on Bootstrap 5, produced by Codings. It includes various pre-built pages such as homepage, blog pages, element component pages, header and footer templates, making it suitable for quickly building modern business, portfolio, or information websites. The template comes with rich interactive effects and supports high customization.

Tech Stack

  • Bootstrap 5
  • jQuery
  • Font Awesome 6
  • Swiper (carousel)
  • AOS (scroll animation library)
  • Lightbox (image lightbox)
  • CSS Variables (theme color system)

Project Structure

text
shockhtml-104/HTML Template/
├── assets/
│   ├── css/
│   │   ├── theme.css        # Theme color variables, font definitions
│   │   ├── core.css         # Core layout styles
│   │   └── main.css         # Component styles
│   ├── js/
│   │   └── main.js          # Preloader, popups, sidebar widgets, carousels, etc.
│   └── images/              # Placeholder images (replace as needed)
├── home-*.html              # Homepage templates
├── blog-*.html              # Blog listing pages
├── blog-post-*.html         # Blog detail pages
├── header-*.html            # Header templates
├── footer-*.html            # Footer templates
└── element-*.html           # Element component showcase pages

Core File Description

  • assets/css/theme.css — Defines the main color scheme (teal #07beb8, purple #6917d0, pink #ff1791) and Lato / Proxima Nova fonts
  • assets/css/main.css — Contains all component styles including buttons, cards, forms, sidebar widgets, popups, etc.
  • assets/js/main.js — Implements 19 interactive features including preloader, PopupBar, PopupBox, sidebar widget visibility, icon initialization, etc.
  • header-grid-*.html — Grid layout navigation pages offering different header solutions such as full-screen menus and search forms
  • element-*.html — 60+ standalone component demo pages that can be copied and used directly

Quick Start

This is a pure static template. Simply open home-1.html in your browser to preview the full effect. No dependency installation or build process required.

Usage Recommendations

The template consists of standalone HTML files. Copy the HTML Template directory to your server for use. It is recommended to replace the placeholder images in assets/images with real assets, and refer to the element-*.html pages to select and combine the components you need.

help_outline

FAQ