Free Fashion Design Website Template - HTML, Tailwind CSS & JS

Faraz

By Faraz -

Get a free, modern fashion design website template. Built with HTML, Tailwind CSS, and JavaScript. Includes animations & sliders. Download the code now!

Join us on Telegram
get-your-free-fashion-design-website-template.webp
Read Alsocreate-dice-rolling-game-using-html-css-and-javascript.webpCreate Dice Rolling Game using HTML, CSS, and JavaScript

Table of Contents

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

Are you looking to build a stunning, modern website for a fashion designer, boutique, or clothing brand? Starting from scratch can be tough. That's why we're giving away a free, single-page homepage template to help you get started!

This template isn't just basic; it's built with a professional, modern tech stack:

  • Tailwind CSS: For a utility-first, custom design.
  • Swiper.js: For beautiful, touch-friendly sliders.
  • AOS (Animate On Scroll): To add smooth scrolling animations.
  • Fancybox: For an elegant image gallery lightbox.
  • Lucide Icons: For clean, crisp icons.

This guide will walk you through the three main parts: the HTML structure, the CSS styling, and the JavaScript to make it all work.

Prerequisites

Before you start, make sure you have a basic understanding of:

  • HTML: The structure of web pages.
  • Tailwind CSS: How utility classes work. You'll also need Node.js installed to run the Tailwind compiler.
  • JavaScript (and jQuery): Just the basics of how to link files and run functions.
  • A Code Editor: We recommend VS Code, as it's free and powerful.

Source Code

Step 1 (HTML Code):

First, let's build the "skeleton" of our fashion website. This file, index.html, will contain all the content sections like the navbar, the hero (main welcome area), featured products, and a gallery.

We also need to link all our CSS and JavaScript files.

  • CSS links go inside the <head> tag.
  • JavaScript links go at the very end of the <body> tag. This helps the page load faster.

Here is the basic structure. Notice the special data-aos attributes for animations and the swiper classes for the slider.

Read Alsocreating a button in pure css with border animation.pngHow to Create a Pure CSS Button with Border Animation

Step 2 (CSS Code):

With Tailwind CSS, we don't need to write much custom CSS. Most of the styling (like text-center, font-bold, py-20) is done directly in the HTML.

However, we still need to set up Tailwind to scan our HTML file and create the final styles.css file.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;800&display=swap');

body {
  overflow-x: hidden;
  /* Prevents horizontal scrollbar from AOS animations */
}

/* --- Navbar --- */
#navbar {
  /* Initial state is defined by Tailwind classes */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-scrolled {
  background-color: rgba(247, 245, 242, 0.95);
  /* hof-ivory with more opacity */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  /* Add scroll state styles */
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  max-width: none;
  border-radius: 0;
}

/* --- Hamburger Menu Morph --- */
#menu-toggle {
  width: 30px;
  height: 24px;
  position: relative;
  z-index: 100;
}

#menu-toggle span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #111827;
  /* hof-charcoal */
  border-radius: 3px;
  opacity: 1;
  left: 0;
  transition: 0.25s ease-in-out;
}

#menu-toggle span:nth-child(1) {
  top: 0px;
}

#menu-toggle span:nth-child(2) {
  top: 10px;
}

#menu-toggle span:nth-child(3) {
  top: 20px;
}

#menu-toggle.is-active span:nth-child(1) {
  top: 10px;
  transform: rotate(135deg);
  background: #f7f5f2;
  /* hof-ivory */
}

#menu-toggle.is-active span:nth-child(2) {
  opacity: 0;
  left: -30px;
}

#menu-toggle.is-active span:nth-child(3) {
  top: 10px;
  transform: rotate(-135deg);
  background: #f7f5f2;
  /* hof-ivory */
}

/* --- Full Screen Menu --- */
#menu-overlay {
  clip-path: circle(0% at calc(100% - 40px) 40px);
  transition: clip-path 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

#menu-overlay.is-open {
  clip-path: circle(150% at calc(100% - 40px) 40px);
}

/* Menu link animation (replaces GSAP) */
#menu-overlay nav a {
  transform: translateY(20px);
  opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

#menu-overlay nav div {
  /* Social icons */
  transform: translateY(20px);
  opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

/* Staggered delay */
#menu-overlay.is-open nav a:nth-child(1) {
  transition-delay: 0.15s;
}

#menu-overlay.is-open nav a:nth-child(2) {
  transition-delay: 0.2s;
}

#menu-overlay.is-open nav a:nth-child(3) {
  transition-delay: 0.25s;
}

#menu-overlay.is-open nav a:nth-child(4) {
  transition-delay: 0.3s;
}

#menu-overlay.is-open nav a:nth-child(5) {
  transition-delay: 0.35s;
}

#menu-overlay.is-open nav a:nth-child(6) {
  transition-delay: 0.4s;
}

#menu-overlay.is-open nav div {
  transition-delay: 0.45s;
}

#menu-overlay.is-open nav a,
#menu-overlay.is-open nav div {
  transform: translateY(0);
  opacity: 1;
}

/* --- Horizontal Scroller (Swiper) --- */
.collections-slider {
  width: 100%;
  overflow: visible;
  /* Allows shadows to show */
}

.collections-slider .swiper-slide {
  width: 20rem;
  /* 320px */
  transition: transform 0.3s ease;
}

@media (min-width: 768px) {
  .collections-slider .swiper-slide {
    width: 24rem;
    /* 384px */
  }
}

.collections-slider .swiper-pagination-bullet {
  background-color: #c79a3d;
  opacity: 0.5;
}

.collections-slider .swiper-pagination-bullet-active {
  opacity: 1;
}

/* --- Fancybox Caption Styling --- */
.fancybox-caption {
  background: rgba(17, 24, 39, 0.8);
  /* hof-charcoal */
  backdrop-filter: blur(5px);
  border-top: 1px solid #c79a3d;
  /* hof-gold */
  color: #f7f5f2;
  /* hof-ivory */
  padding: 20px;
  font-size: 1rem;
}

/* --- Masonry Gallery --- */
.masonry-gallery {
  column-count: 1;
  column-gap: 1.5rem;
  /* gap-6 */
}

@media (min-width: 768px) {
  /* md: */
  .masonry-gallery {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  /* lg: */
  .masonry-gallery {
    column-count: 3;
  }
}

.masonry-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 1.5rem;
  /* gap-6 */
  break-inside: avoid;
}

/* --- Logo Scroller (As Featured In) --- */
.logo-scroller {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

.logo-scroller-inner {
  display: flex;
  width: fit-content;
  animation: scroll 30s linear infinite;
}

.logo-scroller-inner img {
  height: 32px;
  /* 2rem */
  margin: 0 2.5rem;
  /* 40px */
  object-fit: contain;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

Step 3 (JavaScript Code):

The final step is to initialize (start) all the plugins we included. We'll create a file named script.js.

This code will:

  • Initialize AOS: To start the "fade-up" and "zoom-in" animations when you scroll.
  • Initialize Swiper: To turn our list of products into a cool, slidable carousel.
  • Initialize Fancybox: To make our gallery images open in a popup.
  • Initialize Lucide: To render all the data-lucide icons (like our menu icon).

Create script.js and add the following:

$(window).on('load', function () {

    // --- Initialize AOS ---
    AOS.init({
        duration: 1000, // values from 0 to 3000, with step 50ms
        once: true,     // whether animation should happen only once - while scrolling down
        offset: 50      // offset (in px) from the original trigger point
    });

    // --- Initialize Lucide Icons ---
    lucide.createIcons();

    // --- Navbar Logic ---
    var $navbar = $('#navbar');
    var countersTriggered = false; // Flag to run counters only once
    var initialNavbarClasses = 'top-4 left-1/2 -translate-x-1/2 w-[95%] max-w-6xl rounded-full';
    var $scrollTopBtn = $('#scrollTopBtn');

    $(window).scroll(function () {
        var scrollPos = $(this).scrollTop();
        // Navbar scroll logic
        if (scrollPos > 50) {
            $navbar.addClass('navbar-scrolled').removeClass(initialNavbarClasses);
        } else {
            $navbar.removeClass('navbar-scrolled').addClass(initialNavbarClasses);
        }

        // Scroll to Top Button logic
        if (scrollPos > 300) {
            $scrollTopBtn.removeClass('opacity-0 invisible').addClass('opacity-100 visible');
        } else {
            $scrollTopBtn.removeClass('opacity-100 visible').addClass('opacity-0 invisible');
        }

        // Counter animation logic
        var $counters = $('#counters');
        if (!countersTriggered && $counters.length > 0) {
            var counterTop = $counters.offset().top;
            var windowHeight = $(window).height();
            var windowScrollTop = $(this).scrollTop();

            if (windowScrollTop > counterTop - windowHeight + 100) { // Trigger when 100px into view
                $('.counter-value').each(function () {
                    var target = $(this).data('target');
                    animateCounter(this, target);
                });
                countersTriggered = true; // Set flag
            }
        }
    });

    // --- Menu Toggle Logic ---
    var $menuToggle = $('#menu-toggle');
    var $menuOverlay = $('#menu-overlay');

    // --- Mobile Dropdown Logic ---
    $('#mobile-dropdown-toggle').click(function () {
        $(this).toggleClass('is-open');
        const dropdown = $('#mobile-dropdown');
        dropdown.stop(true, true).slideToggle(300).css('display', dropdown.is(':visible') ? 'flex' : 'none');
    });

    $menuToggle.click(function () {
        $(this).toggleClass('is-active');
        $menuOverlay.toggleClass('is-open');
        $('body').toggleClass('overflow-hidden');
    });

    $(window).on('resize', function () {
        if ($(window).width() > 768) { // 768px is 'md' breakpoint
            if ($menuOverlay.hasClass('is-open')) {
                $menuOverlay.removeClass('is-open');
                $menuToggle.removeClass('is-active');
                $('body').removeClass('overflow-hidden');
                $('#mobile-dropdown').slideUp(0);
                $('#mobile-dropdown-toggle').removeClass('is-open');
            }
        }
    });

    // --- Smooth Scroll & Close Menu ---
    $('a[data-scroll]').click(function (e) {
        e.preventDefault();
        var target = $(this).attr('href');

        if (target === '#hero') {
            $('html, body').animate({ scrollTop: 0 }, 1000, 'swing');
        } else {
            $('html, body').animate({
                scrollTop: $(target).offset().top - 80 // Offset for fixed navbar
            }, 1000, 'swing');
        }

        // If overlay is open, close it
        if ($menuOverlay.hasClass('is-open')) {
            $menuToggle.click();
        }
    });

    // --- Animated Counters ---
    function animateCounter(elem, target) {
        $({ count: 0 }).animate({ count: target }, {
            duration: 2000,
            easing: 'swing',
            step: function () {
                $(elem).text(Math.floor(this.count));
            },
            complete: function () {
                $(elem).text(this.count); // Ensure final value
            }
        });
    }

    // --- Collections Swiper ---
    if (document.querySelector('.collections-slider')) {
        var collectionsSwiper = new Swiper('.collections-slider', {
            loop: true,
            slidesPerView: 'auto',
            spaceBetween: 24, // 1.5rem
            grabCursor: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            autoplay: {
                delay: 4000,
                disableOnInteraction: false,
            },
        });
    }

    // --- Testimonial Slider ---
    var $slides = $('.testimonial-item');
    var currentSlide = 0;

    function showSlide(index) {
        $slides.removeClass('opacity-100').addClass('opacity-0');
        $slides.eq(index).removeClass('opacity-0').addClass('opacity-100');
    }

    showSlide(currentSlide); // Show first slide

    setInterval(function () {
        currentSlide = (currentSlide + 1) % $slides.length;
        showSlide(currentSlide);
    }, 6000); // Change slide every 6 seconds

    // --- Fancybox Initialization ---
    $('[data-fancybox]').fancybox({
        buttons: [
            "zoom",
            "slideShow",
            "thumbs",
            "close"
        ],
        loop: true,
        infobar: true,
        caption: function (instance, item) {
            return $(this).data('caption');
        },
        afterShow: function (instance, current) {
            // Customizations after show
        }
    });

    // --- Footer: Current Year ---
    $('#current-year').text(new Date().getFullYear());

});

Final Output:

get-your-free-fashion-design-website-template.gif
Read Alsohow to create a password validation form in javascript.jpgHow to Create a Password Validation Form in JavaScript?

Conclusion:

You now have a professional, single-page fashion design website template. You can customize the images, text, and colors to match your brand. This free version is perfect for a portfolio or a "coming soon" page.

Ready for the full website?

This free download is only the homepage. The full, premium version includes 14 pre-built pages, such as:

  • Collections
  • Event
  • Magazine
  • Shop (Grid & List)
  • Product Details
  • About Us
  • Contact Page
  • Blog & Blog Post
  • ...and more!

🚀 Get the complete 14-page template at codewithfaraz.com/shop!

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: fashion design website template, free fashion template, tailwind css fashion, fashion website html, responsive fashion template, free fashion design website template html css javascript, responsive fashion website template using tailwind css, how to make a fashion website homepage, fashion website template with swiper js, free website template with aos animations
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🥺