Learn how to design a responsive, professional Author Website Template using HTML and CSS. Step-by-step guide with code, SEO tips, and advanced styling.
Table of Contents
If you are an author or writer, having your own website is important. It helps you showcase your books, share blogs, and connect with readers. In this guide, we will learn how to create an Author Website Template using HTML and CSS. This template will be simple, modern, and responsive, perfect for beginners.
Before starting, let’s check what you need.
Prerequisites
- Basic knowledge of HTML and CSS
- A code editor (like VS Code)
- A web browser (Google Chrome, Firefox, etc.)
Source Code
Step 1 (HTML Code):
First, we start with HTML to create the website structure. We will use Tailwind CSS for styling, so include the Tailwind CDN in the <head> section.
Create a file named index.html and paste the following code:
Step 2 (CSS Code):
Although Tailwind CSS handles most styling, we will add some custom CSS for animations and extra design tweaks.
Create a file named styles.css and paste this code:
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');
:root {
--primary: #2c3e50;
--secondary: #8e6c88;
--accent: #d4b483;
--light: #f5f1ed;
--dark: #1a1a1a;
--text: #333333;
}
body {
font-family: 'Montserrat', sans-serif;
color: var(--text);
background-color: var(--light);
scroll-behavior: smooth;
width: 100%;
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5 {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
color: var(--primary);
}
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.nav-link {
position: relative;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -2px;
left: 0;
background-color: var(--secondary);
transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav-link:hover::after {
width: 100%;
}
.book-cover {
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-style: preserve-3d;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}
.book-cover:hover {
transform: perspective(1000px) rotateY(15deg) translateY(-15px) scale(1.03);
box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.2);
}
.accent-border {
position: relative;
}
.accent-border::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(
90deg,
var(--secondary),
var(--accent),
var(--secondary)
);
}
.btn-primary {
background: linear-gradient(135deg, var(--secondary), var(--primary));
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
color: white;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-primary:hover::before {
left: 100%;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px -5px rgba(142, 108, 136, 0.4);
}
.btn-secondary {
border: 2px solid var(--secondary);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
color: var(--secondary);
}
.btn-secondary:hover {
background-color: var(--secondary);
color: white;
transform: translateY(-3px);
}
.testimonial-card {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.testimonial-card.visible {
opacity: 1;
transform: translateY(0);
}
.parallax-bg {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.floating {
animation: floating 6s ease-in-out infinite;
}
@keyframes floating {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(0px);
}
}
.input-field {
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.1);
border-bottom: 1px solid var(--secondary);
}
.input-field:focus {
background: rgba(255, 255, 255, 0.2);
border-bottom: 2px solid var(--secondary);
}
.social-icon {
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.social-icon:hover {
transform: translateY(-5px) scale(1.1);
color: var(--secondary);
}
.menu-open {
transform: translateX(0);
}
.menu-closed {
transform: translateX(100%);
}
.divider {
width: 80px;
height: 2px;
background: linear-gradient(
90deg,
var(--secondary),
var(--accent),
var(--secondary)
);
margin: 20px auto;
}
.text-accent {
color: var(--accent);
} Step 3 (JavaScript Code):
Finally, we’ll add some JavaScript animations using ASOS-like fade-in effects for a premium look.
Create a file named script.js and paste this code:
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: false,
mirror: true,
});
// Mobile menu toggle
const menuToggle = document.getElementById('menu-toggle');
const menuClose = document.getElementById('menu-close');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', () => {
mobileMenu.classList.remove('menu-closed');
mobileMenu.classList.add('menu-open');
document.body.style.overflow = 'hidden';
});
menuClose.addEventListener('click', () => {
mobileMenu.classList.remove('menu-open');
mobileMenu.classList.add('menu-closed');
document.body.style.overflow = 'auto';
});
// Close menu when clicking on a link
const menuLinks = document.querySelectorAll('#mobile-menu a');
menuLinks.forEach((link) => {
link.addEventListener('click', () => {
mobileMenu.classList.remove('menu-open');
mobileMenu.classList.add('menu-closed');
document.body.style.overflow = 'auto';
});
});
// Navbar background change on scroll
const navbar = document.querySelector('nav');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('shadow-lg');
} else {
navbar.classList.remove('shadow-lg');
}
});
// Smooth scrolling for all links
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth',
});
}
});
});
// Testimonial animation on scroll
const testimonialCards = document.querySelectorAll('.testimonial-card');
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.classList.add('visible');
}, index * 200);
}
});
},
{ threshold: 0.1 }
);
testimonialCards.forEach((card) => {
observer.observe(card);
});
// Parallax effect for hero background
window.addEventListener('scroll', function () {
const parallax = document.querySelector('.parallax-bg');
if (parallax) {
const scrollPosition = window.pageYOffset;
parallax.style.transform = 'translateY(' + scrollPosition * 0.5 + 'px)';
}
});Final Output:
Conclusion:
A professional author website is a powerful tool for building your brand and connecting with readers. With this guide, you’ve created a premium, responsive Author Website Template using HTML and CSS that looks elegant and works on any device. Customize it further by adding blog pages, contact forms, and social media integration for a complete online presence.
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 😊
