https://github.com/marrcelp/responsive-layout-showcase

A responsive landing page built with HTML and CSS. Fully optimized for mobile, tablet, and desktop – showcasing modern layout techniques and mobile-first design 🖥 📲
https://github.com/marrcelp/responsive-layout-showcase

css html mobilefirst responsive-design rwd

Last synced: 11 months ago
JSON representation

A responsive landing page built with HTML and CSS. Fully optimized for mobile, tablet, and desktop – showcasing modern layout techniques and mobile-first design 🖥 📲

• Host: GitHub
• URL: https://github.com/marrcelp/responsive-layout-showcase
• Owner: marrcelp
• Created: 2024-10-21T20:14:29.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2025-03-23T20:45:03.000Z (about 1 year ago)
• Last Synced: 2025-06-04T21:50:22.670Z (about 1 year ago)
• Topics: css, html, mobilefirst, responsive-design, rwd
• Language: CSS
• Homepage: https://marrcelp.github.io/Responsive-Layout-Showcase/
• Size: 13.3 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
![demo gif](./assets/demo_rwd.gif)

# Responsive Layout Showcase

See the live version of this project – [Responsive Layout Showcase](https://marrcelp.github.io/Responsive-Layout-Showcase/)

The goal of this project is to demonstrate my skills in **Responsive Web Design (RWD)** and **CSS layout techniques**. The website was built with a mobile-first approach and uses a multi-file structure to organize styles for different screen sizes: `mobile.css`, `tablet.css`, and `desktop.css`.  

The design is fully responsive and adapts to various screen widths to provide an optimal user experience on mobile, tablet, and desktop devices.

The project simulates a landing page for an app promotion, with multiple sections including:  

**Hero, Features, Reviews, Pricing Plans, App Downloads, Footer, and Navigation** – all styled and structured to follow modern web development practices.

 

## 💡 Technologies

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)

![Responsive Design](https://img.shields.io/badge/Responsive%20Design-%23000000.svg?style=for-the-badge&logo=responsive-design&logoColor=white)

 

## 🎯 Main features

- **Fully responsive layout** built with a mobile-first approach  

- **Clean and modular CSS** structure separated into media-specific stylesheets  

- **Modern landing page design**, including:

  - Sticky navigation bar with a hamburger menu on mobile

  - Hero section with call-to-action

  - Feature grid with icons

  - User testimonials

  - Pricing plan cards

  - App store links

  - Social media integration in the footer

 

## 🖥️ Layout scaling preview

| Device        | Media Query                | File             |

|---------------|----------------------------|------------------|

| Mobile        | `max-width: 767px`         | `mobile.css`     |

| Tablet        | `768px to 1199px`          | `tablet.css`     |

| Desktop       | `min-width: 1200px`        | `desktop.css`    |

Each breakpoint has its own stylesheet for clarity and scalability.

 

## 💭 Conclusions for future projects

I would like to improve:

### More advanced accessibility

Making all sections more accessible using semantic HTML elements.

### CSS Optimization

Exploring CSS preprocessors like **SASS** to write more maintainable styles.

### Using CSS frameworks

Trying out frameworks such as **Tailwind CSS** or **Bootstrap** to speed up layout creation and improve scalability.

 

## 🙋‍♂️ Feel free to contact me  

Write something nice 😉 You can find me on:

[![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/marcel-piaszczyk-200ba8181/)  

[![Gmail](https://img.shields.io/badge/Gmail-%23D14836.svg?style=for-the-badge&logo=gmail&logoColor=white)](mailto:marcel.piaszczyk@gmail.com)