A responsive, stylish Mario-themed landing page designed using HTML5 and CSS3. This project showcases a variety of modern CSS techniques including fixed headers, sticky navigation, responsive layout, hover effects, and form validation.
Marioclub is a fictional fan club website built as a front-end design demo. It includes a welcoming banner, navigation links, an article section, featured images, and a form to join the club.
- Fixed header with styled title
- Sticky navigation bar
- Responsive layout using media queries
- Image hover effects and pseudo-class styling
- Form with live validation and custom focus styles
- CSS pseudo-elements and selection styling
- Font and color customization
- Clean, organized structure
project/
├── index.html # Main HTML file
├── style.css # External CSS file
├── img/
├── banner.png # Main banner image
├── thumb-1.png # Thumbnail image 1
└── thumb-2.png # Thumbnail image 2
- Clone or download the project
- Make sure the
img/folder is present alongsideindex.htmlandstyle.css - Open
index.htmlin a browser using Live Server (recommended)
- Modern web browser (Chrome, Firefox, Edge, Safari)
- VS Code with Live Server extension (optional but recommended)
Includes multiple breakpoints to ensure a smooth experience on devices from desktops to phones.
| Screen Width | Behavior |
|---|---|
| > 1000px | Full layout with large fonts |
| 850px–1000px | Slightly scaled-down content |
| 600px–850px | Smaller banner text |
| < 540px | Mobile-style navigation |
Developed by: [Hein Pyae Sone Htet]
Inspired by: Net Ninja
Mario theme, for educational/demo purposes only.