Author Portfolio Landing Page using HTML and CSS

Faraz

By Faraz -

Learn how to create an Author Portfolio Landing Page using simple HTML and CSS. Perfect for writers to showcase their work online.

Join us on Telegram
author-portfolio-landing-page-using-html-and-css.webp
Read AlsoCreate a Custom Multiple File Uploader with HTML, CSS, and Javascript.jpgCreate a Custom Multiple File Uploader with HTML, CSS, and JavaScript

Table of Contents

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

An Author Portfolio Landing Page is a great way to showcase your books, blogs, and writing skills online. If you are an author and want a personal space on the internet to present your work, then this tutorial is for you.

In this blog, we will learn how to create a clean and simple Author Portfolio Landing Page using HTML and CSS. This is beginner-friendly and perfect for anyone who wants a professional online presence without coding complexity.

Prerequisites

Before starting, make sure you have the following:

  • Basic knowledge of HTML and CSS
  • A text editor (like VS Code, Sublime Text, or Notepad++)
  • A web browser (Google Chrome, Firefox, etc.)

Source Code

Step 1 (HTML Code):

First, we will start with HTML to create the basic structure of the landing page. Copy the below HTML code into your index.html file.

Read Alsofree-lawn-care-html-website-template.webpFree Lawn Care HTML Website Template

Step 2 (CSS Code):

Now, let’s style the page using CSS to make it look modern and clean. Copy the below CSS code into your styles.css file.

:root {
  --primary: #2a2a2a;
  --secondary: #5e4b3a;
  --accent: #a67c52;
  --light: #f8f5f2;
  --text: #333333;
  --text-light: #777777;
}

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

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--text);
  background-color: var(--light);
  line-height: 1.6;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  line-height: 1.2;
}

a{
  text-decoration: none;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 30px 0;
  z-index: 100;
  transition: all 0.3s ease;
}

header.scrolled {
  background-color: rgba(248, 245, 242, 0.95);
  padding: 15px 0;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--light);
  text-decoration: none;
  transition: color 0.3s ease;
}

header.scrolled .logo {
  color: var(--primary);
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin-left: 30px;
}

nav ul li a {
  color: var(--light);
  text-decoration: none;
  font-weight: 400;
  font-size: 16px;
  position: relative;
  transition: color 0.3s ease;
}

header.scrolled nav ul li a {
  color: var(--primary);
}

nav ul li a:after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -5px;
  left: 0;
  background-color: var(--accent);
  transition: width 0.3s ease;
}

nav ul li a:hover:after {
  width: 100%;
}

header.scrolled nav ul li a {
  color: var(--primary);
}

/* Hero Section */
.hero {
  height: 100vh;
  min-height: 700px;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url('https://images.unsplash.com/photo-1507842217343-583bb7270b66?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')
      no-repeat center center/cover;
  display: flex;
  align-items: center;
  color: var(--light);
  text-align: center;
  position: relative;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero h1 {
  font-size: 72px;
  margin-bottom: 20px;
  animation: fadeInUp 1s ease;
}

.hero p {
  font-size: 20px;
  margin-bottom: 30px;
  animation: fadeInUp 1s ease 0.2s forwards;
  opacity: 0;
}

.btn {
  display: inline-block;
  padding: 12px 30px;
  background-color: var(--accent);
  color: var(--light);
  text-decoration: none;
  border-radius: 30px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 2px solid var(--accent);
  animation: fadeInUp 1s ease 0.4s forwards;
  opacity: 0;
}

.btn:hover {
  background-color: transparent;
  color: var(--accent);
}

.btn-outline {
  background-color: transparent;
  color: var(--accent);
  margin-left: 15px;
}

.btn-outline:hover {
  background-color: var(--accent);
  color: var(--light);
}

/* About Section */
.section {
  padding: 100px 0;
}

.section-title {
  text-align: center;
  margin-bottom: 60px;
}

.section-title h2 {
  font-size: 42px;
  color: var(--primary);
  position: relative;
  display: inline-block;
}

.section-title h2:after {
  content: '';
  position: absolute;
  width: 50px;
  height: 2px;
  background-color: var(--accent);
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
}

.about-content {
  display: flex;
  align-items: center;
  gap: 50px;
}

.about-img {
  flex: 1;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.about-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.about-img:hover img {
  transform: scale(1.05);
}

.about-text {
  flex: 1;
}

.about-text h3 {
  font-size: 32px;
  margin-bottom: 20px;
  color: var(--secondary);
}

.about-text p {
  margin-bottom: 20px;
  color: var(--text-light);
}

.signature {
  margin-top: 30px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  color: var(--primary);
}

/* Books Section */
.books {
  background-color: #f0ebe6;
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

.book-card {
  background-color: white;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.book-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.book-cover {
  height: 380px;
  overflow: hidden;
}

.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.book-card:hover .book-cover img {
  transform: scale(1.05);
}

.book-info {
  padding: 25px;
}

.book-info h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.book-info .genre {
  color: var(--accent);
  font-size: 14px;
  margin-bottom: 15px;
  display: block;
}

.book-info p {
  color: var(--text-light);
  font-size: 14px;
  margin-bottom: 20px;
}

.book-info .btn {
  padding: 8px 20px;
  font-size: 14px;
}

/* News Section */
.news-item {
  display: flex;
  margin-bottom: 40px;
  gap: 30px;
  align-items: center;
}

.news-date {
  min-width: 100px;
  text-align: center;
}

.news-date .day {
  font-size: 36px;
  font-family: 'Cormorant Garamond', serif;
  color: var(--accent);
  line-height: 1;
}

.news-date .month {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-light);
}

.news-content h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.news-content p {
  color: var(--text-light);
  margin-bottom: 15px;
}

.read-more {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}

.read-more i {
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.read-more:hover i {
  transform: translateX(5px);
}

/* Contact Section */
.contact {
  background-color: var(--primary);
  color: var(--light);
}

.contact .section-title h2 {
  color: var(--light);
}

.contact .section-title h2:after {
  background-color: var(--light);
}

.contact-container {
  display: flex;
  gap: 50px;
}

.contact-info {
  flex: 1;
}

.contact-info h3 {
  font-size: 28px;
  margin-bottom: 30px;
  color: var(--light);
}

.contact-details {
  margin-bottom: 40px;
}

.contact-item {
  display: flex;
  margin-bottom: 20px;
}

.contact-icon {
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 18px;
  color: var(--accent);
}

.contact-text h4 {
  font-size: 18px;
  margin-bottom: 5px;
}

.contact-text p,
.contact-text a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-text a:hover {
  color: var(--accent);
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-links a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light);
  transition: all 0.3s ease;
}

.social-links a:hover {
  background-color: var(--accent);
  transform: translateY(-3px);
}

.contact-form {
  flex: 1;
  background-color: white;
  padding: 40px;
  border-radius: 5px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--primary);
}

.form-control {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  transition: border-color 0.3s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
}

textarea.form-control {
  min-height: 150px;
  resize: vertical;
}

.submit-btn {
  background-color: var(--accent);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background-color: var(--secondary);
}

/* Footer */
footer {
  background-color: var(--secondary);
  color: rgba(255, 255, 255, 0.7);
  padding: 30px 0;
  text-align: center;
  font-size: 14px;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 992px) {
  .about-content {
    flex-direction: column;
  }

  .contact-container {
    flex-direction: column;
  }

  .hero h1 {
    font-size: 56px;
  }
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 42px;
  }

  .hero p {
    font-size: 18px;
  }

  .section {
    padding: 70px 0;
  }

  .section-title h2 {
    font-size: 36px;
  }

  .news-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 576px) {
  nav ul li {
    margin-left: 15px;
  }

  .hero h1 {
    font-size: 36px;
  }

  .btn {
    display: block;
    margin-bottom: 15px;
    width: 100%;
  }

  .btn-outline {
    margin-left: 0;
  }
}

Step 3 (JavaScript Code):

Finally, we will use JavaScript to add a smooth scroll effect when clicking navigation links. Copy the below JS code into your script.js file.

// Header scroll effect
window.addEventListener('scroll', function () {
  const header = document.getElementById('header');
  if (window.scrollY > 100) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});

// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();

    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth',
    });
  });
});

Final Output:

author-portfolio-landing-page-using-html-and-css.gif
Read AlsoCreating a Myntra Clone using HTML, CSS & JavaScript.jpgCreating a Myntra Clone using HTML, CSS & JavaScript (Source Code)

Conclusion:

Creating an Author Portfolio Landing Page using HTML and CSS is simple and effective. This page will help authors showcase their books and personal brand online. You can customize it further by adding images, social media links, and even a contact form.

Start building your online presence today with this simple HTML & CSS project!

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: author portfolio, html and css portfolio, landing page design, simple author website, how to create an author portfolio landing page, guide to build author portfolio website, best author portfolio landing page design with html css, author website tempalte, responsive author portfolio using html and css
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🥺