{"id":26986687,"url":"https://github.com/marrcelp/responsive-layout-showcase","last_synced_at":"2025-07-14T12:35:06.559Z","repository":{"id":259113574,"uuid":"876347332","full_name":"marrcelp/Responsive-Layout-Showcase","owner":"marrcelp","description":"A responsive landing page built with HTML and CSS. Fully optimized for mobile, tablet, and desktop – showcasing modern layout techniques and mobile-first design 🖥 📲","archived":false,"fork":false,"pushed_at":"2025-03-23T20:45:03.000Z","size":13987,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-04T21:50:22.670Z","etag":null,"topics":["css","html","mobilefirst","responsive-design","rwd"],"latest_commit_sha":null,"homepage":"https://marrcelp.github.io/Responsive-Layout-Showcase/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marrcelp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-10-21T20:14:29.000Z","updated_at":"2025-03-23T20:52:22.000Z","dependencies_parsed_at":"2025-05-28T17:53:35.449Z","dependency_job_id":null,"html_url":"https://github.com/marrcelp/Responsive-Layout-Showcase","commit_stats":null,"previous_names":["marrcelp/rwd_project-html-css","marrcelp/responsive-layout-showcase"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/marrcelp/Responsive-Layout-Showcase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marrcelp%2FResponsive-Layout-Showcase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marrcelp%2FResponsive-Layout-Showcase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marrcelp%2FResponsive-Layout-Showcase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marrcelp%2FResponsive-Layout-Showcase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marrcelp","download_url":"https://codeload.github.com/marrcelp/Responsive-Layout-Showcase/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marrcelp%2FResponsive-Layout-Showcase/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265292419,"owners_count":23742058,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","mobilefirst","responsive-design","rwd"],"created_at":"2025-04-03T19:32:04.880Z","updated_at":"2025-07-14T12:35:06.508Z","avatar_url":"https://github.com/marrcelp.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"![demo gif](./assets/demo_rwd.gif)\n\n# Responsive Layout Showcase\n\nSee the live version of this project – [Responsive Layout Showcase](https://marrcelp.github.io/Responsive-Layout-Showcase/)\n\nThe 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`.  \nThe design is fully responsive and adapts to various screen widths to provide an optimal user experience on mobile, tablet, and desktop devices.\n\nThe project simulates a landing page for an app promotion, with multiple sections including:  \n**Hero, Features, Reviews, Pricing Plans, App Downloads, Footer, and Navigation** – all styled and structured to follow modern web development practices.\n\n\u0026nbsp;\n\n## 💡 Technologies\n\n![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge\u0026logo=css3\u0026logoColor=white)\n![Responsive Design](https://img.shields.io/badge/Responsive%20Design-%23000000.svg?style=for-the-badge\u0026logo=responsive-design\u0026logoColor=white)\n\n\u0026nbsp;\n\n## 🎯 Main features\n\n- **Fully responsive layout** built with a mobile-first approach  \n- **Clean and modular CSS** structure separated into media-specific stylesheets  \n- **Modern landing page design**, including:\n  - Sticky navigation bar with a hamburger menu on mobile\n  - Hero section with call-to-action\n  - Feature grid with icons\n  - User testimonials\n  - Pricing plan cards\n  - App store links\n  - Social media integration in the footer\n\n\u0026nbsp;\n\n## 🖥️ Layout scaling preview\n\n| Device        | Media Query                | File             |\n|---------------|----------------------------|------------------|\n| Mobile        | `max-width: 767px`         | `mobile.css`     |\n| Tablet        | `768px to 1199px`          | `tablet.css`     |\n| Desktop       | `min-width: 1200px`        | `desktop.css`    |\n\nEach breakpoint has its own stylesheet for clarity and scalability.\n\n\u0026nbsp;\n\n## 💭 Conclusions for future projects\n\nI would like to improve:\n\n### More advanced accessibility\nMaking all sections more accessible using semantic HTML elements.\n\n### CSS Optimization\nExploring CSS preprocessors like **SASS** to write more maintainable styles.\n\n### Using CSS frameworks\nTrying out frameworks such as **Tailwind CSS** or **Bootstrap** to speed up layout creation and improve scalability.\n\n\u0026nbsp;\n\n## 🙋‍♂️ Feel free to contact me  \nWrite something nice 😉 You can find me on:\n\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://www.linkedin.com/in/marcel-piaszczyk-200ba8181/)  \n[![Gmail](https://img.shields.io/badge/Gmail-%23D14836.svg?style=for-the-badge\u0026logo=gmail\u0026logoColor=white)](mailto:marcel.piaszczyk@gmail.com)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarrcelp%2Fresponsive-layout-showcase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarrcelp%2Fresponsive-layout-showcase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarrcelp%2Fresponsive-layout-showcase/lists"}