Download this free Blog HTML website template built with Tailwind CSS, GSAP, and Phosphor Icons. Copy the code snippet and start your blog today!
Table of Contents
Are you looking to start a blog but don't want to start from scratch? You are in the right place. Building a website layout can take hours, but using a pre-made template saves you time and effort.
In this post, I am sharing a Free Blog HTML Website Template. This template is clean, fast, and fully responsive. We will use Tailwind CSS for styling because it makes designing very easy. To make the site look premium, we are adding GSAP for smooth animations and Phosphor Icons for beautiful visuals.
This free version gives you a stunning Homepage. If you need a complete solution with 16+ pages (including post details, categories, and contact forms), you can check out the full version at the link below.
Link: Get the Full 16-Page Version at codewithfaraz.com/shop
Prerequisites
Before we start, you don't need to install anything complex. You just need:
- A code editor (like VS Code).
- Basic knowledge of HTML and CSS.
- An internet connection (to load the libraries).
Source Code
Step 1 (HTML Code):
The HTML file helps organise our content. We will set up the navigation bar, a hero section, and a grid for your blog posts. We are using CDNs for Tailwind, GSAP, and jQuery, so you can simply copy and paste this code.
Create a file named index.html:
Detect User's Browser, Screen Resolution, OS, and More with JavaScript using UAParser.js LibraryStep 2 (CSS Code):
Since we are using Tailwind CSS, 95% of the styling is handled directly in the HTML classes above. However, for specific Google Fonts or minor adjustments, you can create a styles.css file.
body {
background-color: #fdfbf7;
color: #1f2937;
overflow-x: hidden;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #fdfbf7;
}
::-webkit-scrollbar-thumb {
background: #0f2218;
border: 2px solid #fdfbf7;
}
/* Nav Link Animation */
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: -2px;
left: 0;
background-color: #d4af37;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s ease;
}
.nav-link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* Image Zoom */
.img-zoom-container {
overflow: hidden;
}
.img-zoom {
transition: transform 0.7s ease-in-out;
}
.group:hover .img-zoom {
transform: scale(1.05);
}
/* Shutter Loader Styles */
#loader-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.shutter {
position: absolute;
background-color: #0f2218;
width: 100%;
height: 50%;
left: 0;
transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
z-index: 10;
}
#shutter-top {
top: 0;
transform-origin: top;
}
#shutter-bottom {
bottom: 0;
transform-origin: bottom;
}
#loader-content {
position: relative;
z-index: 20;
text-align: center;
color: #fdfbf7;
mix-blend-mode: difference;
}
/* Hide Scrollbar for Slider */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Dropdown */
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Mobile Dropdown Open State */
.mobile-dropdown-open i {
transform: rotate(180deg);
}
/* Scroll To Top Button */
#scroll-top-btn {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#scroll-top-btn.visible {
opacity: 1;
transform: translateY(0);
visibility: visible;
}
/* Cookie Popup Animation */
#cookie-banner {
transform: translateY(120%);
transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
#cookie-banner.visible {
transform: translateY(0);
} Step 3 (JavaScript Code):
To make the website feel "alive," we will use GSAP. This code will animate the hero section elements when the page loads and stagger the blog cards to appear one after another.
Create a file named script.js:
// Update Date
const dateOptions = { weekday: 'long', month: 'short', day: 'numeric' };
document.getElementById('current-date').textContent = new Date().toLocaleDateString('en-US', dateOptions);
$(document).ready(function () {
// 1. SHUTTER LOADER ANIMATION
const tl = gsap.timeline();
// Counter
let countObj = { val: 0 };
tl.to(countObj, {
val: 100,
duration: 1.5,
ease: "power2.inOut",
onUpdate: function () {
$("#loader-count").text(Math.floor(countObj.val));
}
})
// Fade out Counter, Reveal Brand
.to("#loader-count", { opacity: 0, duration: 0.5, scale: 0.8 }, "-=0.3")
.to("#loader-brand", { opacity: 1, scale: 1, duration: 0.8, ease: "power4.out" }, "-=0.3")
// Pause
.to({}, { duration: 0.5 })
// Open Shutters
.to("#shutter-top", { height: 0, duration: 1.2, ease: "power3.inOut" })
.to("#shutter-bottom", { height: 0, duration: 1.2, ease: "power3.inOut" }, "<")
// Fade Content out
.to("#loader-content", { opacity: 0, duration: 0.5 }, "<")
.set("#loader-overlay", { display: "none" });
// 2. Navbar Scroll Effect
const header = $('#main-header');
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
header.addClass('shadow-md');
} else {
header.removeClass('shadow-md');
}
});
// 3. Mobile Menu Logic
$('#hamburger').click(function () {
$('#mobile-menu').removeClass('-translate-x-full');
$('body').addClass('overflow-hidden');
});
$('#close-mobile').click(function () {
$('#mobile-menu').addClass('-translate-x-full');
$('body').removeClass('overflow-hidden');
});
// 4. Mobile Dropdown Toggle
$('#mobile-dropdown-btn').click(function () {
$('#mobile-dropdown-content').slideToggle(300);
$(this).toggleClass('mobile-dropdown-open');
// Icon rotation handled by CSS class
});
// 5. Search Overlay Logic
$('#search-trigger').click(function () {
$('#search-overlay').removeClass('hidden').addClass('flex');
setTimeout(() => {
$('#search-overlay').removeClass('opacity-0');
}, 10);
$('body').addClass('overflow-hidden');
$('#search-overlay input').focus();
});
$('#close-search').click(function () {
$('#search-overlay').addClass('opacity-0');
setTimeout(() => {
$('#search-overlay').removeClass('flex').addClass('hidden');
}, 300);
$('body').removeClass('overflow-hidden');
});
// 6. Curated Collections Slider
const slider = document.getElementById('category-slider');
$('#slide-next').click(function () {
slider.scrollBy({ left: 300, behavior: 'smooth' });
});
$('#slide-prev').click(function () {
slider.scrollBy({ left: -300, behavior: 'smooth' });
});
// 7. Scroll to Top Logic
const scrollTopBtn = $('#scroll-top-btn');
const progressCircle = document.getElementById('scroll-progress');
const circumference = 138;
$(window).scroll(function () {
const scrollTop = $(this).scrollTop();
const docHeight = $(document).height() - $(window).height();
const scrollPercent = scrollTop / docHeight;
if (scrollTop > 300) {
scrollTopBtn.addClass('visible');
scrollTopBtn.removeClass('invisible translate-y-4 opacity-0');
} else {
scrollTopBtn.removeClass('visible');
scrollTopBtn.addClass('invisible translate-y-4 opacity-0');
}
const offset = circumference - (scrollPercent * circumference);
progressCircle.style.strokeDashoffset = offset;
});
scrollTopBtn.click(function () {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// 8. Cookie Popup Logic
const cookieBanner = $('#cookie-banner');
const acceptBtn = $('#accept-cookies');
const rejectBtn = $('#reject-cookies');
const closeBtn = $('#close-cookie');
// Check if user has already made a choice
if (!localStorage.getItem('velocity_cookies_consent')) {
// Show banner after delay
setTimeout(() => {
cookieBanner.addClass('visible');
}, 2000);
}
function closeBanner() {
cookieBanner.removeClass('visible');
}
acceptBtn.click(function () {
localStorage.setItem('velocity_cookies_consent', 'accepted');
closeBanner();
});
rejectBtn.click(function () {
localStorage.setItem('velocity_cookies_consent', 'rejected');
closeBanner();
});
closeBtn.click(function () {
closeBanner();
});
// Keydown Escape
$(document).keydown(function (e) {
if (e.key === "Escape") {
$('#close-search').click();
$('#close-mobile').click();
}
});
});Final Output:
Conclusion:
Congratulations! You have just built a stylish, responsive blog homepage using HTML, Tailwind CSS, and GSAP. This template is lightweight and SEO-friendly, making it a great starting point for your personal brand or content site.
Want the complete experience? The free version gets you started, but a real blog needs more. The Full Version of this template includes 16 professionally designed pages, including:
- Single Blog Post Detail Page
- Category Pages
- About & Contact Us
- Author Profile
- 404 Page and more.
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 😊
