Blog Website 🍽️
A clean and responsive blog-style restaurant website template. This project is built using HTML5 and CSS3, and features a beautiful hero banner, service highlights, and responsive navigation — perfect for showcasing a modern food blog or restaurant service online.
Reference Website : https://templatemo.com/live/templatemo_507_victory
Live Preview : https://mq-practical-exam-8133.vercel.app/
This project was created as part of my exam, where I built a fully responsive webpage using only HTML5, default CSS, and media queries (without frameworks like Bootstrap).
- Overview
- Features
- Tech Stack
- Project Structure
- Setup Instructions
- Screenshots
- Responsiveness
- CSS Usage
- Media Queries
- Future Enhancements
- Contributing
- License
- Contact
The goal of this project was to demonstrate my ability to create a responsive layout from scratch without relying on external frameworks like Bootstrap or Tailwind.
I used pure HTML5 for structure, default CSS for styling, and media queries for handling different screen sizes.
This project helped me strengthen my skills in:
- CSS Flexbox & Grid
- Responsive Design Principles
- Breakpoint-based layouts
- Writing clean and modular code
- Built only with HTML & CSS (no frameworks).
- Clean and semantic HTML5 structure.
- Custom default CSS for all elements:
- Typography (headings, paragraphs, links).
- Layout design (header, navbar, main, footer).
- Buttons, cards, and utility classes.
- Media Queries for responsiveness.
- Optimized for mobile, tablet, and desktop.
- Fully responsive navigation menu.
- Lightweight and fast-loading (no external libraries).
| Technology | Description |
|---|---|
| HTML5 | Structure and content |
| CSS3 | Default styling (colors, spacing, fonts, layout) |
| Media Queries | Screen-specific responsiveness |
| Device Type | Breakpoint | Behavior |
|---|---|---|
| Desktop | > 1024px |
Full layout with horizontal navbar, sidebar (if included), and multi-column structure |
| Tablet | 768px – 1024px |
Adjusted spacing, stacked sections, smaller font sizes |
| Mobile | < 768px |
Navbar collapses into toggle menu, single-column layout |
XS (up to 575px)# MQ-Practical_Exam_8133