Create a Mahatma Gandhi Jayanti Tribute Blog Page using HTML, CSS, and JS

Faraz

By Faraz - Last Updated:

Learn how to create a Mahatma Gandhi Jayanti tribute blog page with HTML, CSS, and JavaScript.

Join us on Telegram
create-mahatma-gandhi-jayanti-tribute-blog-page-using-html-css-and-js.webp
Read Alsohow-to-create-a-scrollable-sticky-sidebar-with-html-css-and-javascript.webpHow to Create a Scrollable Sticky Sidebar with HTML, CSS, and JavaScript

Table of Contents

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

Gandhi Jayanti, celebrated on 2nd October, marks the birth anniversary of Mahatma Gandhi, the father of the Indian nation. This day is observed to honor his principles of non-violence, truth, and peace, which shaped India’s freedom struggle. Creating a tribute blog page for this special occasion not only celebrates Gandhi’s legacy but also allows web developers to showcase their skills in HTML, CSS, and JavaScript.

In this tutorial, we will guide you through the process of designing a modern, responsive tribute page for Gandhi Jayanti. The page will feature a hero section, an about section detailing Gandhi’s life, and a timeline that highlights key events. We’ll ensure the page is mobile-friendly so users on all devices can access it with ease.

This project is ideal for beginners who want to practice web development or for experienced developers seeking to create something meaningful. Let’s get started by building a Gandhi Jayanti tribute blog page!

Prerequisites:

Before we dive in, make sure you have basic knowledge of:

  • HTML for structuring your page.
  • CSS for styling and making your page look great.
  • JavaScript for adding interactive elements.

Additionally, you’ll need:

  1. A code editor like VS Code or Sublime Text.
  2. Basic understanding of responsive design to make the page mobile-friendly.

Source Code

Step 1 (HTML Code):

Start by creating the basic structure of your HTML page. This will include the head section for meta information and the body section for content like the navbar, hero image, about section, and footer. Here's a breakdown of the code:

1. <!DOCTYPE html> and <html lang="en">

  • Declares the document type (HTML5) and sets the language of the page to English (lang="en").

2. <head>

  • Meta Tags:
    • <meta charset="UTF-8"> ensures the page uses UTF-8 encoding, which supports most characters.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0"> makes the page responsive, adjusting to various screen sizes.
  • Title: <title>Mahatma Gandhi Tribute</title> sets the title of the page, displayed on the browser tab.
  • Styles and Fonts:
    • <link rel="stylesheet" href="styles.css"> links to an external CSS file for page styling.
    • <link href="https://fonts.goog.." rel="stylesheet"> imports the "Roboto" font from Google Fonts.

3. <body> and Sections

The body of the webpage includes multiple sections:

Navigation (<nav>)

  • Logo: The <div class="logo">Gandhi Jayanti</div> displays the page's title or logo.
  • Menu Button: <div class="toggle" id="toggle"> creates a button with 3 bars for the mobile menu toggle.
  • Navigation Links:
    • <ul class="nav-links"> contains menu items like "About Gandhi", "Philosophy", "Legacy", etc., which navigate to different sections on the page via anchor links (e.g., href="#about").

Hero Section (<header class="hero">)

  • A visually impactful section with the text "Remembering Mahatma Gandhi" and a call-to-action button ("Learn More") that links to the "About Gandhi" section.

About Section (<section id="about">)

  • This section contains information about Mahatma Gandhi’s life, his role in India’s independence, and his philosophy of non-violence.

Philosophy Section (<section id="philosophy">)

  • Displays three key aspects of Gandhi's philosophy: "Ahimsa (Non-violence)", "Satyagraha (Truth-force)", and "Simple Living".

Legacy Section (<section id="legacy">)

  • Discusses Gandhi’s lasting impact on the world, his contributions to social movements, and the observance of Gandhi Jayanti.

Timeline Section (<section id="timeline">)

  • Displays a chronological timeline of important events in Gandhi's life, such as his birth, civil disobedience in South Africa, Salt March, and his assassination.

Influence Section (<section id="influence">)

  • Highlights how Gandhi's principles have influenced modern movements and global leaders like Martin Luther King Jr. and Nelson Mandela.

Contact Section (<section id="contact">)

  • Includes a contact form that lets users submit their name, email, and message.

4. Footer (<footer>)

  • A simple footer with copyright information: &copy; 2024 Gandhi Jayanti Tribute. All Rights Reserved.

5. External JavaScript

  • <script src="script.js"></script> links to an external JavaScript file, used for interactive elements like the navigation toggle.
Read Alsohow-to-create-grid-card-layout-with-html-and-bootstrap.webpHow to Create Grid Card Layout with HTML and Bootstrap | Step-by-Step Guide

Step 2 (CSS Code):

Now, let’s style the tribute page to make it visually appealing. Use modern CSS properties like Flexbox and Grid for layout, and media queries to make the page responsive. Let's break down the CSS code section by section:

Global Reset

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  • This removes default margins and padding from all elements and ensures the box-sizing is set to border-box, meaning padding and borders are included in the element's width and height.

Body Styling

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
}
  • The body uses the "Roboto" font, and text has a line-height of 1.6 for readability.

Anchor Links

a {
  text-decoration: none;
}
  • Removes underlining from all links.

Navbar Styling

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #333;
  color: #fff;
  padding: 15px 20px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease;
}
.navbar.scrolled {
  background: rgba(51, 51, 51, 0.9);
}
  • The navbar is flexbox-based for easy layout control. It has a dark background, padding, and a shadow. It changes its background when the .scrolled class is added (useful for sticky headers).

Logo

.logo {
  font-size: 1.5em;
  font-weight: bold;
}
  • The logo text is larger and bold.

Nav Links

.nav-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}
.nav-links li {
  margin: 0 15px;
}
.nav-links a {
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  transition: background 0.3s ease, color 0.3s ease;
}
.nav-links a:hover {
  background: #575757;
  color: #e74c3c;
}
  • The navigation links are flex-based, with spacing between items. On hover, the background color and text color change.

Toggle Menu (for mobile)

.toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}
.bar {
  height: 3px;
  width: 25px;
  background-color: white;
  margin: 4px 0;
}
  • The hamburger menu (three bars) is hidden by default and displayed only on mobile screens.

Media Query for Mobile

: 
@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    background: #333;
    width: 100%;
    top: 60px;
    left: 0;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  .nav-links.active {
    display: flex;
  }
  .nav-links li {
    margin: 10px 0;
    text-align: center;
  }
  .toggle {
    display: flex;
  }
}
  • For screens below 768px, the nav-links are hidden by default and only shown when .active is applied (e.g., when the menu icon is clicked). The links are stacked vertically.

Hero Section

.hero {
  background: url('image-url') no-repeat center center/cover;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}
.hero h1, .hero p {
  color: #000;
}
.hero-btn {
  background: #e74c3c;
  color: white;
  padding: 15px 30px;
  border-radius: 5px;
  transition: background 0.3s;
}
.hero-btn:hover {
  background: #c0392b;
}
  • The hero section has a full-screen background image, with centered text. The button changes color on hover.

About Section

.about {
  display: flex;
  padding: 50px 20px;
  background-color: #f4f4f4;
}
.about img {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
  • The about section is laid out using flexbox, with padding and a light background. Images have rounded corners and shadows.

Philosophy and Legacy Sections

  • These sections use similar padding and typography. The philosophy section uses a grid layout, and items grow on hover.

Timeline Section

.timeline {
  padding: 50px 20px;
  background-color: #f9f9f9;
  text-align: center;
}
.timeline-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.timeline-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
  • A grid-based layout that adjusts based on screen size. Timeline items have hover effects for interactivity.

Contact Section

.contact-form input, .contact-form textarea {
  padding: 15px;
  border-radius: 5px;
}
  • Simple form styling with padding and rounded corners.

Footer

.footer {
  background: #2c3e50;
  color: white;
  text-align: center;
  padding: 15px 0;
}
  • A basic footer with dark background and centered text.
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
}

a {
  text-decoration: none;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #333;
  color: #fff;
  padding: 15px 20px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease;
}

.navbar.scrolled {
  background: rgba(51, 51, 51, 0.9);
}

.logo {
  font-size: 1.5em;
  font-weight: bold;
}

.nav-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin: 0 15px;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px; 
  transition: background 0.3s ease, color 0.3s ease; 
}

.nav-links a:hover {
  background: #575757;
  color: #e74c3c; 
}

.toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.bar {
  height: 3px;
  width: 25px;
  background-color: white;
  margin: 4px 0;
}

@media (max-width: 768px) {
  .nav-links {
      display: none; 
      flex-direction: column;
      position: absolute;
      background: #333;
      width: 100%;
      top: 60px; 
      left: 0;
      z-index: 1000; 
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  }

  .nav-links.active {
      display: flex;
  }

  .nav-links li {
      margin: 10px 0;
      text-align: center;
  }

  .toggle {
      display: flex; 
  }
}

.hero {
  background: url('https://raw.githubusercontent.com/farazc60/Project-Images/refs/heads/main/Gandhi-Jayanti.jpg') no-repeat center center/cover;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #000;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  color: #000;
}

.hero-btn {
  background: #e74c3c;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s;
}

.hero-btn:hover {
  background: #c0392b;
}

.about {
  display: flex;
  
  padding: 50px 20px;
  background-color: #f4f4f4;
}

.about-content {
  padding: 20px;
}

.about-content h2 {
  color: #e74c3c;
  margin-bottom: 20px;
}

.about-content p {
  margin-bottom: 20px;
}

.about img {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.philosophy {
  padding: 50px 20px;
  text-align: center;
}

.philosophy h2 {
  color: #e74c3c;
  margin-bottom: 30px;
}

.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 0 20px;
}

.philosophy-item {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}

.philosophy-item:hover {
  transform: translateY(-5px);
}

.legacy {
  padding: 50px 20px;
  background: #e9ecef;
  text-align: center;
}

.legacy h2 {
  color: #e74c3c;
  margin-bottom: 20px;
}

.timeline {
  padding: 50px 20px;
  background-color: #f9f9f9;
  text-align: center;
}

.timeline h2 {
  font-size: 2em;
  margin-bottom: 20px;
}

.timeline-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 0 auto;
  max-width: 1200px;
}

.timeline-item {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.timeline-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.timeline-item h3 {
  font-size: 1.5em;
  color: #333;
  margin-bottom: 10px;
}

.timeline-item p {
  font-size: 1em;
  color: #666;
}

.contact {
  padding: 50px 20px;
  text-align: center;
}

.contact h2 {
  color: #e74c3c;
  margin-bottom: 30px;
}

.contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form input,
.contact-form textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
}

.contact-form button {
  background: #e74c3c;
  color: white;
  padding: 15px;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s;
}

.contact-form button:hover {
  background: #c0392b;
}

.footer {
  background: #2c3e50;
  color: white;
  text-align: center;
  padding: 15px 0;
}

@media (max-width: 768px) {
  .about {
      grid-template-columns: 1fr;
  }
}

Step 3 (JavaScript Code):

While JavaScript isn't strictly necessary for a simple tribute page, you can add interactive features like a toggle for the navbar. Here’s a detailed explanation:

1. Variables and DOM Elements

  • const toggle = document.getElementById('toggle');
    This retrieves the element with the ID toggle from the HTML, typically a button or icon used for opening/closing the navigation menu on mobile.
  • const navLinks = document.getElementById('nav-links');
    This retrieves the element with the ID nav-links, which represents the list of navigation links (menu items).
  • const navbar = document.querySelector('.navbar');
    This retrieves the element with the class navbar, which is the navigation bar of the website.

2. Toggling the Mobile Navigation Menu

toggle.addEventListener('click', () => {
    navLinks.classList.toggle('active');
});
  • This sets up an event listener on the toggle element (the mobile menu button).
  • When the button is clicked, the classList.toggle('active') method is used to either add or remove the active class from the navLinks element.
  • The active class controls whether the mobile menu is shown or hidden. If active is added, the menu becomes visible, and if it’s removed, the menu hides.

3. Changing the Navbar Style on Scroll

window.addEventListener('scroll', () => {
    if (window.scrollY > 0) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
});
  • This sets up an event listener for the scroll event, which triggers whenever the user scrolls the webpage.
  • window.scrollY gives the vertical scroll position of the window. When scrollY > 0, it means the user has scrolled down from the top.
  • If the user scrolls down even a little (scrollY > 0), the scrolled class is added to the navbar. This class is typically used to apply a different background color or style to the navbar when scrolling.
  • If the user scrolls back to the top (scrollY === 0), the scrolled class is removed, returning the navbar to its default style.
const toggle = document.getElementById('toggle');
const navLinks = document.getElementById('nav-links');
const navbar = document.querySelector('.navbar');

toggle.addEventListener('click', () => {
    navLinks.classList.toggle('active');
});

window.addEventListener('scroll', () => {
    if (window.scrollY > 0) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
});

Final Output:

create-mahatma-gandhi-jayanti-tribute-blog-page-using-html-css-and-js.gif
Read Alsohow-to-write-a-plan-expiry-alert-email-with-an-html-template.webpHow to Write a Plan Expiry Alert Email with an HTML Template

Conclusion:

By following this step-by-step guide, you’ve successfully built a modern, responsive tribute blog page for Gandhi Jayanti using HTML, CSS, and a little JavaScript. You can continue adding more content, images, or animations to enhance the design. This project is a great way to practice your web development skills while honoring Mahatma Gandhi’s legacy. Feel free to share this page to spread awareness of Gandhi Jayanti!

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: how to create gandhi jayanti tribute blog page, gandhi jayanti blog using html; css; and javascript, step-by-step guide for gandhi tribute blog, responsive tribute page for gandhi jayanti, gandhi jayanti tribute page design tutorial, short-tail keywords:, gandhi jayanti blog, tribute blog html css, gandhi jayanti website, gandhi tribute page, mahatma gandhi jayanti festival
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺