Free Comic Book Publishing Website Template

Faraz

By Faraz -

Build your own comic book publishing website for free. Includes HTML, CSS, JavaScript, AOS animations, and Lucide Icons. Easy to use and responsive.

Join us on Telegram
free-comic-book-publishing-website-template.webp
Read Alsomodern-responsive-header-with-search-bar-free-html-css-and-js-code-snippet.webpModern Responsive Header with Search Bar: Free HTML, CSS, & JS Code Snippet

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

Do you want to build your own comic book publishing website, but don’t know where to start? We have the perfect solution for you. Here, you can download a Free Comic Book Publishing Website Template that is easy to edit, mobile-friendly, and made using HTML, CSS, and JavaScript.

This template is perfect for comic book creators, publishers, and artists who want to showcase their stories online. It also includes plugins like AOS (Animate on Scroll) for smooth animations and Lucide Icons for clean, modern icons.

Prerequisites

Before starting, you should have:

  • Basic knowledge of HTML, CSS, and JavaScript
  • A code editor like VS Code or Sublime Text
  • Basic understanding of using plugins like AOS and Lucide Icons

Source Code

Step 1 (HTML Code):

First, we start with HTML. Here, we create the layout of our website. HTML is the backbone of the website, where we add all sections like headers, comic book lists, and footers.

Copy the HTML code below into your index.html file.

Read AlsoCreate Interactive Add Remove Cards with HTML, CSS, and JavaScript.webpCreate Interactive Add/Remove Cards with HTML, CSS, and JavaScript

Step 2 (CSS Code):

Next, we style the website using CSS. CSS controls colors, fonts, layouts, and spacing to make the website look beautiful and professional.

Copy the CSS code below into your styles.css file.

/* ================================================== */
/* TABLE OF CONTENTS */
/* ================================================== */
/*
1. VARIABLES & GLOBAL STYLES
2. REUSABLE COMPONENTS
    - Containers & Sections
    - Buttons
    - Section Titles
    - Halftone Backgrounds
    - Page Headers
    - FAQ Accordion
    - CTA Section
    - Support Links 
    - Artist Services Section
    - Reader Features Section
    - Video Section
    - Showcase Section
3. HEADER & NAVBAR
4. FOOTER
5. HOMEPAGE-SPECIFIC STYLES
    - Hero Section
    - Features Section
    - Latest Books Section
    - Call to Action (CTA) Section
6. ABOUT PAGE STYLES
    - Mission & Vision
    - Timeline
    - Stats Section
    - Team Section
7. ARTIST PAGE STYLES
    - Header Section
    - Creator Spotlight Section
    - Supporter Wall
8. BLOG PAGE STYLES
    - Blog Layout
    - Blog Posts Grid
    - Pagination
    - Sidebar
    - Newsletter Section
9. POST PAGE STYLES
    - Post Layout
    - Post Header
    - Post Content
    - Author Box
    - Comments Section
    - Related Posts Section
    - Sidebar Book Carousel
10. CONTACT PAGE STYLES
    - Contact Layout
    - Contact Info Section
    - Social Stickers
    - Contact Form
    - Map Section
11. PRICING PAGE STYLES
    - Pricing Section
    - Discount Section
    - Comparison Table
    - Contact Form
    - Map Section
12. TESTIMONIALS PAGE STYLES
    - Reviews Grid Section
    - Testimonial Carousel Section
    - Video Testimonials Section
13. GALLERY PAGE STYLES
    - Masonry Gallery Grid
    - Comic Strip Section
    - Flip Panel Section
    - Slider Section
    - Lightbox
14. 404 PAGE STYLES
15. UTILITIES & HELPERS
    - Animations (Scroll, Preloader)
    - Back to Top Button
    - Register/Login Form
16. RESPONSIVE DESIGN
*/

/* ================================================== */
/* 1. VARIABLES & GLOBAL STYLES */
/* ================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap');

:root {
    --font-heading: 'Bangers', cursive;
    --font-body: 'Comic Neue', cursive;

    --color-green: #10b981;
    --color-orange: #f97316;
    --color-purple: #7c3aed;

    --color-yellow: #FFD900;
    --color-red: #FF1A1A;
    --color-blue: #00AEEF;
    --color-dark: #000;
    --color-light: #fff;

    --color-grey: #6b7280;

    --shadow-comic: 6px 6px 0 var(--color-dark);
    --shadow-comic-sm: 4px 4px 0 var(--color-dark);
    --border-comic: 4px solid var(--color-dark);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-light);
    color: var(--color-dark);
    overflow-x: hidden;
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    letter-spacing: 2px;
    line-height: 1.2;
}

p {
    margin-bottom: 1rem;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ================================================== */
/* 2. REUSABLE COMPONENTS */
/* ================================================== */

/* --- Containers & Sections --- */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

section {
    padding: 6rem 0;
}

/* --- Section Titles --- */
.section-title {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title h2 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.section-title .text-dark {
    color: var(--color-dark);
    text-shadow: 2px 2px 0px var(--color-light);
}

.section-title p {
    font-size: 1.25rem;
    color: var(--color-grey);
    max-width: 600px;
    margin: 0 auto;
}

/* --- Buttons --- */
.comic-button {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    letter-spacing: 1px;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    border: var(--border-comic);
    box-shadow: var(--shadow-comic-sm);
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
}

.comic-button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--color-dark);
}

.comic-button:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--color-dark);
}

.comic-button .effect-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 2rem;
    color: white;
    opacity: 0;
    transition: all 0.3s ease;
    text-shadow: 2px 2px 0 #000;
    pointer-events: none;
}

.comic-button:hover .effect-text {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
}

.btn-red {
    background-color: var(--color-red);
    color: white;
}

.btn-yellow {
    background-color: var(--color-yellow);
    color: var(--color-dark);
}

.btn-blue {
    background-color: var(--color-blue);
    color: white;
}

.btn-green {
    background-color: var(--color-green);
    color: white;
}

.btn-orange {
    background-color: var(--color-orange);
    color: white;
}

.btn-purple {
    background-color: var(--color-purple);
    color: white;
}

.btn-small {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
}

.btn-premium {
    background: linear-gradient(45deg, #e53935, #ef5350);
    border: none;
    box-shadow: 4px 4px 0 #ab2825;
    padding: 0.6rem 1.2rem;
    /* Refined padding */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
    position: relative;
    font-size: 1.1rem;
    transition: background 0.3s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-premium:hover {
    background: linear-gradient(45deg, #ef5350, #e53935);
    /* Shift gradient */
    box-shadow: 2px 2px 0 #ab2825;
    /* Reduce shadow for "pressed" effect */
    transform: translate(2px, 2px);
}

.btn-premium .btn-icon,
.btn-premium .btn-text {
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
    /* Smoother animation */
}

.btn-premium:hover .btn-icon,
.btn-premium:hover .btn-text {
    transform: translateY(-150%);
}

.btn-premium .effect-text {
    position: absolute;
    top: 150%;
    left: 50%;
    transform: translate(-50%, 0);
    transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    /* Smaller font size for "Let's Go!" */
    white-space: nowrap;
}

.btn-premium:hover .effect-text {
    top: 50%;
    transform: translate(-50%, -50%);
}

.btn-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
}

.btn-premium:hover::before {
    left: 100%;
}

/* --- Halftone Backgrounds --- */
.halftone-bg {
    background-color: var(--color-yellow);
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.15) 1px, transparent 1px);
    background-size: 8px 8px;
}


/* ================================================== */
/* 3. HEADER & NAVBAR */
/* ================================================== */
#navbar-container {
    height: 80px;
}

.navbar {
    background-color: var(--color-dark);
    padding: 10px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.nav-logo {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: white;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-link {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.1rem;
    color: white;
    padding: 0.5rem 0;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-yellow);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-in-out;
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-menu .comic-button {
    font-size: 1.1rem;
    padding: 0.5rem 1.2rem;
}

/* --- Mobile Menu --- */
.mobile-nav-container {
    display: none;
    /* Hidden on desktop */
}

.mobile-menu-button {
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1002;
    position: relative;
    width: 32px;
    height: 24px;
}

.hamburger-line {
    display: block;
    width: 100%;
    height: 4px;
    background-color: white;
    border-radius: 4px;
    position: absolute;
    left: 0;
    transition: all 0.3s ease-in-out;
}

.hamburger-line:nth-child(1) {
    top: 0;
}

.hamburger-line:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-line:nth-child(3) {
    bottom: 0;
}

.mobile-menu-button.is-active .hamburger-line:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.mobile-menu-button.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-button.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(31, 41, 55, 0.95);
    /* semi-transparent dark */
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.mobile-menu.open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu .nav-link {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin: 1rem 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-menu.open .nav-link {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation for links */
.mobile-menu.open .nav-link:nth-child(1) {
    transition-delay: 0.2s;
}

.mobile-menu.open .nav-link:nth-child(2) {
    transition-delay: 0.25s;
}

.mobile-menu.open .nav-link:nth-child(3) {
    transition-delay: 0.3s;
}

.mobile-menu.open .nav-link:nth-child(4) {
    transition-delay: 0.35s;
}

.mobile-menu.open .nav-link:nth-child(5) {
    transition-delay: 0.4s;
}

.mobile-menu.open .nav-link:nth-child(6) {
    transition-delay: 0.45s;
}


/* ================================================== */
/* 4. FOOTER */
/* ================================================== */
.site-footer {
    background-color: var(--color-dark);
    color: var(--color-light);
    padding: 4rem 0 2rem 0;
    border-top: 8px solid var(--color-yellow);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-column h3 {
    font-size: 1.75rem;
    color: var(--color-yellow);
    margin-bottom: 1.5rem;
}

.footer-column p,
.footer-column a {
    color: #d1d5db;
    margin-bottom: 0.75rem;
    display: block;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: var(--color-yellow);
}

.footer-socials {
    display: flex;
    gap: 1rem;
}

.footer-socials a {
    display: inline-block;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #374151;
    border-radius: 50%;
}

.footer-socials a:hover {
    background-color: var(--color-red);
}

.footer-newsletter-input {
    width: 100%;
    background-color: #374151;
    border: 3px solid #6b7280;
    border-radius: 8px;
    padding: 0.75rem;
    color: var(--color-light);
    font-family: var(--font-body);
    font-size: 1rem;
    margin-top: 0.5rem;
    transition: border-color 0.3s ease;
}

.footer-newsletter-input::placeholder {
    color: #9ca3af;
}

.footer-newsletter-input:focus {
    outline: none;
    border-color: var(--color-yellow);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 2px solid #374151;
    font-size: 0.9rem;
    color: var(--color-grey);
}

/* ================================================== */
/* 5. HOMEPAGE-SPECIFIC STYLES */
/* ================================================== */

/* --- Hero Section --- */
.hero-carousel-section {
    padding: 0;
    background-color: var(--color-dark);
    height: 70vh;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}

.hero-slider {
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform 0.7s ease-in-out;
}

.hero-slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.hero-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.hero-slide-content {
    position: relative;
    z-index: 2;
    color: white;
    display: flex;
    align-items: center;
    gap: 3rem;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-slide-cover img {
    width: 250px;
    height: auto;
    border: 5px solid white;
    border-radius: 8px;
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.2);
}

.hero-slide-info h1 {
    font-size: 4rem;
    line-height: 1;
    margin: 0 0 1rem 0;
    color: var(--color-yellow);
    text-shadow: 3px 3px 0 var(--color-dark);
}

.hero-slide-info p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    max-width: 500px;
}

.hero-slider-controls {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    z-index: 5;
    display: flex;
    gap: 1rem;
}

.hero-slider-btn {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid white;
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

/* --- Latest Books Section --- */
.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.book-card {
    background-color: var(--color-dark);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: var(--border-comic);
    box-shadow: var(--shadow-comic);
    transition: transform 0.3s ease;
}

.book-card:hover {
    transform: translateY(-10px);
}

.book-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}

.book-card:hover .book-cover {
    opacity: 0.1;
}

.book-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    color: white;
    text-align: center;
    transform: translateY(100%);
    transition: all 0.4s ease;
    opacity: 0;
}

.book-card:hover .book-info {
    transform: translateY(0);
    opacity: 1;
}

.book-info h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.book-info p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

/* --- Trending Section --- */
.trending-badge {
    position: absolute;
    top: 10px;
    left: -10px;
    background-color: var(--color-red);
    color: white;
    font-family: var(--font-heading);
    padding: 0.25rem 1rem;
    font-size: 1.25rem;
    border-radius: 4px;
    transform: rotate(-5deg);
    z-index: 2;
}

/* --- Genre Section --- */
.genre-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.genre-card {
    background: white;
    padding: 2.5rem 2rem;
    border: var(--border-comic);
    box-shadow: var(--shadow-comic);
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

.genre-card:hover {
    transform: translateY(-10px);
    background-color: var(--color-yellow);
}

.genre-card i {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
}

.genre-card h3 {
    font-size: 2rem;
}

/* --- Premium Stats Section --- */
.stats-section {
    background-color: var(--color-dark);
    color: white;
    padding: 5rem 0;
    border-top: var(--border-comic);
    border-bottom: var(--border-comic);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
}

.stat-item i {
    width: 60px;
    height: 60px;
    color: var(--color-yellow);
    margin-bottom: 1rem;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 4rem;
    display: block;
    line-height: 1;
}

.stat-item h4 {
    font-size: 1.25rem;
    color: #d1d5db;
}

/* --- Creator Spotlight Section --- */
.spotlight-section {
    background-color: #fff;
    overflow: hidden;
}

.spotlight-container-revised {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 2rem;
    position: relative;
}

.spotlight-panel {
    background: var(--color-dark);
    padding: 3rem;
    border-radius: 12px;
    position: relative;
    color: white;
}

.spotlight-image-revised {
    text-align: center;
}

.spotlight-image-revised img {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 8px solid white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.spotlight-content-revised h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--color-yellow);
}

.spotlight-content-revised p {
    margin-bottom: 1.5rem;
}

/* --- Testimonials --- */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
}

.review-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    border: var(--border-comic);
    box-shadow: var(--shadow-comic);
}

/* --- Artist CTA Section --- */
.artist-cta-section {
    background-color: var(--color-dark);
    padding: 6rem 0;
}

.artist-cta-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
    color: white;
}

.artist-cta-image {
    width: 250px;
    height: auto;
    transform: rotate(-5deg);
}

.artist-cta-content h2 {
    font-size: 3rem;
    color: var(--color-yellow);
}

/* ================================================== */
/* 7. UTILITIES & HELPERS */
/* ================================================== */
/* --- Preloader --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-light);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    visibility: visible;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

.preloader-title {
    font-size: 3rem;
    color: var(--color-dark);
}

.loader-dots {
    display: flex;
    gap: 10px;
}

.loader-dots div {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.loader-dots .dot1 {
    animation-delay: -0.32s;
    background-color: var(--color-red);
}

.loader-dots .dot2 {
    animation-delay: -0.16s;
    background-color: var(--color-yellow);
}

.loader-dots .dot3 {
    background-color: var(--color-blue);
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1.0);
    }
}

/* --- Back to Top Button --- */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--color-red);
    color: white;
    border: 3px solid var(--color-dark);
    border-radius: 50%;
    display: none;
    /* JS will manage display */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-comic-sm);
}

#back-to-top:hover {
    transform: translateY(-5px) rotate(10deg);
    box-shadow: 6px 6px 0 var(--color-dark);
}

/* ================================================== */
/* 8. RESPONSIVE DESIGN */
/* ================================================== */
@media (max-width: 768px) {
    h1 {
        font-size: 3.5rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    .section-title h2 {
        font-size: 2.5rem;
    }

    .nav-menu {
        display: none;
    }

    .mobile-nav-container {
        display: block;
    }

    .hero-slide-content {
        flex-direction: column;
        text-align: center;
    }

    .hero-slide-cover img {
        width: 200px;
    }

    .hero-slide-info h1 {
        font-size: 3rem;
    }
}



@media (min-width: 992px) {
    .spotlight-container-revised {
        grid-template-columns: 1fr 1fr;
    }

    .spotlight-image-revised img {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 350px;
        height: 350px;
    }

    .artist-cta-container {
        flex-direction: row;
        text-align: left;
    }
}

Step 3 (JavaScript Code):

Finally, we add JavaScript to make our website interactive. We can add functions like menu toggle, animations, or any dynamic behavior.

Copy the JavaScript code below into your script.js file.

(function () {
  "use strict";

  const initializeApp = () => {
      initializeIcons();
      initializeAOS();
      initializeNavbar();
      initializeStatsCounter();
      initializeBackToTopButton();
      initializeHeroSlider();
      initializeFAQ();
  };

  /**
   * Initializes Lucide icons.
   */
  const initializeIcons = () => {
      if (typeof lucide !== 'undefined') {
          lucide.createIcons();
      }
  };

  /**
   * Initializes AOS (Animate On Scroll).
   */
  const initializeAOS = () => {
      if (typeof AOS !== 'undefined') {
          AOS.init({
              duration: 600,
              easing: 'ease-in-out',
              once: true,
          });
      }
  };

  const initializeNavbar = () => {
      const mobileMenuButton = document.getElementById('mobile-menu-button');
      const mobileMenu = document.getElementById('mobile-menu');
      const navLinks = document.querySelectorAll('.nav-link');
      const currentPage = window.location.pathname.split("/").pop() || 'index.html';

      // Active link highlighting
      navLinks.forEach(link => {
          if (link.getAttribute('href') === currentPage) {
              link.classList.add('active');
          }
      });

      // Mobile menu toggle
      if (mobileMenuButton && mobileMenu) {
          mobileMenuButton.addEventListener('click', (e) => {
              e.stopPropagation();
              mobileMenu.classList.toggle('open');
              mobileMenuButton.classList.toggle('is-active');
          });
      }
  };

  /**
   * Initializes Hero Slider if exists.
   */
  const initializeHeroSlider = () => {
      const slider = document.querySelector('.hero-slider');
      if (!slider) return;

      const slides = slider.querySelectorAll('.hero-slide');
      const prevBtn = document.querySelector('.hero-slider-btn.prev-btn');
      const nextBtn = document.querySelector('.hero-slider-btn.next-btn');
      let currentIndex = 0;

      const goToSlide = (index) => {
          if (index < 0) index = slides.length - 1;
          if (index >= slides.length) index = 0;
          slider.style.transform = `translateX(-${index * 100}%)`;
          currentIndex = index;
      };

      if (nextBtn && prevBtn) {
          nextBtn.addEventListener('click', () => goToSlide(currentIndex + 1));
          prevBtn.addEventListener('click', () => goToSlide(currentIndex - 1));
      }

      // Auto-play
      setInterval(() => goToSlide(currentIndex + 1), 8000);
  };

  /**
   * Initializes the animated statistics counter.
   */
  const initializeStatsCounter = () => {
      const statsSection = document.querySelector('.stats-section');
      if (!statsSection) return;

      const observer = new IntersectionObserver((entries) => {
          if (entries[0].isIntersecting) {
              const statNumbers = statsSection.querySelectorAll('.stat-number');
              statNumbers.forEach(num => {
                  if (!num.classList.contains('animated')) {
                      animateStat(num);
                      num.classList.add('animated');
                  }
              });
              observer.unobserve(statsSection);
          }
      }, { threshold: 0.5 });

      observer.observe(statsSection);
  };

  /**
   * Animates a single statistic number from 0 to its goal.
   * @param {HTMLElement} element - The element containing the stat number.
   */
  const animateStat = (element) => {
      const goal = +element.dataset.goal;
      const duration = 2000;
      let startTimestamp = null;

      const step = (timestamp) => {
          if (!startTimestamp) startTimestamp = timestamp;
          const progress = Math.min((timestamp - startTimestamp) / duration, 1);
          const currentCount = Math.floor(progress * goal);
          element.innerText = currentCount.toLocaleString('en-US');
          if (progress < 1) {
              window.requestAnimationFrame(step);
          } else {
              element.innerText = goal.toLocaleString('en-US');
          }
      };
      window.requestAnimationFrame(step);
  };

  /**
   * Manages the visibility and functionality of the "Back to Top" button.
   */
  const initializeBackToTopButton = () => {
      const backToTopButton = document.getElementById('back-to-top');
      if (!backToTopButton) return;

      window.addEventListener('scroll', () => {
          if (window.scrollY > 300) {
              backToTopButton.style.display = 'flex';
          } else {
              backToTopButton.style.display = 'none';
          }
      });

      backToTopButton.addEventListener('click', () => {
          window.scrollTo({ top: 0, behavior: 'smooth' });
      });
  };

  /**
   * Handles the preloader fade-out effect.
   */
  const handlePreloader = () => {
      const preloader = document.getElementById('preloader');
      if (preloader) {
          preloader.classList.add('hidden');
      }
  };

  // --- App Initialization ---
  if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initializeApp);
  } else {
      initializeApp();
  }

  window.addEventListener('load', handlePreloader);

})();

Final Output:

free-comic-book-publishing-website-template.gif
Read AlsoCreate a World Holiday Search Engine using HTML, CSS, and JavaScript.jpgCreate a World Holiday Search Engine using HTML, CSS, and JavaScript

Conclusion:

This Free Comic Book Publishing Website Template is perfect for authors, publishers, comic creators, and book lovers who want to showcase books online without spending money. It is simple to set up, easy to edit, and comes with modern plugins like AOS animations and Lucide Icons.

Download the template today and start building your online book publishing platform for free!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: free, comic, book, publishing, website, template, html, css, js, responsive, comic, book, publishing, website, template, free, download, author, comic, book, website, template, free, template, for, publishing, comics, online, book, publishing, template, book, publisher, website, templates, comic, book, template, free, website, template, html, css, template, comic, publishing, website
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Components

Please allow ads on our site🥺