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:
- 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
Heading
- Font size:
3rem
- Bottom margin:
15px
Paragraph
- Font size:
1.2rem
- Line height:
1.6
Usage
- Place
index.php in your web root
- Upload
mainbanner.jpg to the same root directory
- 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.