Sweet Berries Cooking School

A stylish and responsive web design for a fictional online cooking school. The website offers a modern structure with a clear focus on user experience, responsive design and mobile optimisation.

Live Demo on GitHub Pages: Sweet Berries Cooking School

Brief Description

This website offers an overview of the online cooking courses of the "Sweet Berries Cooking School". It offers:

• Clear navigation
• A hero segment with call-to-action
• A course section with several thematic cards
• Fully responsive layout for desktop, tablet and mobile

Preview of the Project

Desktop view:

Tablet view:

Mobile view:

project Structure

project-root/
├── index.html
├── css/
│   ├── style.css
│   ├── style-tablet.css
│   └── style-mobile.css
└── assets/
    ├── Logo.svg
    ├── Menu.svg
    ├── Image.png
    ├── Image2.png
    ├── knife.svg
    ├── cooking-pot.svg
    ├── clipboard-text.svg
    ├── leaf.svg
    └── hamburger.svg

Technologies used

• HTML5: semantic structure of the page
• CSS3: grid system, media queries, box shadows, modern typography
• Google Fonts: Roboto and Roboto Serif for a modern typeface

Responsive design

The site is optimised for:

• desktop (> 1000px)
• Tablet (600px - 1000px)
• Smartphones (< 600px)

The files style-tablet.css and style-mobile.css are integrated via media queries and overwrite the desktop styles.