modhuban

Blog JP Landing Page

A simple full-screen hero landing page built with HTML and CSS.

Features

• Full viewport hero section (100vh)
• Background image with dark overlay
• Centered title and description text
• Responsive clean layout
• Uses Arial font
• Favicon support
• Meta description tag included

File Structure

• index.php — Main landing page file
• mainbanner.jpg — Background hero image (must exist in root)

Code Overview

Page Title

The browser tab title is set to:

Blog JP

Hero Section

The page displays a full-screen hero banner with:

• Background image: /mainbanner.jpg
• Dark transparent overlay using linear-gradient
• Centered heading:
  • Blog JP
• Empty paragraph placeholder for future description text

Styling Details

Body / HTML

• Removes default margin and padding
• Sets full height for proper hero display

Hero Container

• Full screen height (100vh)
• Flexbox centering (horizontal + vertical)
• White text
• Background image centered and cover-fitted

Content Box

• Maximum width: 700px

Heading

• Font size: 3rem
• Bottom margin: 15px

Paragraph

• Font size: 1.2rem
• Line height: 1.6

Usage

1. Place index.php in your web root
2. Upload mainbanner.jpg to the same root directory
3. Open the page in your browser

Example Output

A full-screen landing page with:

• Dark overlay background image
• Centered large title: Blog JP
• Space for subtitle/description text

Notes

• The <p> tag is currently empty and can be updated with a description or tagline
• The favicon href="/" is currently placeholder and should be replaced with a real favicon path if needed
• Since there is no PHP logic in the file, this can also be renamed to index.html

Suggested Improvements

• Add a call-to-action button
• Add mobile responsive font scaling
• Add proper favicon path
• Add SEO meta tags (keywords, Open Graph, Twitter cards)
• Replace empty description content with meaningful text

License

Free to use and modify.