Project Overviewlink

Merinda is a modern blog HTML template inspired by Medium's design, built with the Bootstrap framework and featuring responsive layout and dark mode toggle functionality. It is suitable for building personal blogs, writing platforms, or content/news websites.

Tech Stacklink

• Bootstrap 5 (responsive CSS framework)
• jQuery (interaction logic)
• Fontello (icon font)
• Bunny Fonts (Google Fonts alternative)

Project Structurelink

merindahtml-10/merinda-html-v4.1-unzip-first/
  1.merinda-template/
    index.html          # Homepage (article list)
    single.html         # Article detail page
    categories.html     # Category list page
    archive.html        # Archive page
    author.html         # Author page
    contact.html        # Contact page
    404.html            # 404 error page
    typography.html     # Typography example page
    search.html         # Search page
    assets/
      css/
        bootstrap.css
        style.css       # Theme main styles
        widgets.css
        fontello.css
      images/
  2.document/
    index.html          # Official documentation page
    css/styles.css
    js/scripts.js

Core File Descriptionlink

• 1.merinda-template/index.html — Blog homepage displaying article list and sidebar navigation
• 1.merinda-template/single.html — Single article detail page template
• 1.merinda-template/assets/css/style.css — Theme core styles defining layout and theme colors
• 1.merinda-template/assets/css/bootstrap.css — Bootstrap framework styles providing responsive grid
• 2.document/index.html — Template official usage documentation (with table of contents navigation)
• 2.document/js/scripts.js — Documentation page scroll navigation and back-to-top logic

Quick Startlink

1. Navigate to the 1.merinda-template directory
2. Open index.html directly in your browser, or start a local server:
   bashcontent_copyCopy

   npx serve .
   

3. Refer to 2.document/index.html for documentation

Usage Suggestionslink

• The template includes a built-in dark mode toggle (dark-light-toggle) that can be reused directly
• Mobile navigation requires scripts in assets/js — ensure jQuery is properly loaded
• After replacing the logo and article content, you can quickly launch your personal blog