{"id":22821909,"url":"https://github.com/z-bj/the-keyboardio-model100","last_synced_at":"2025-07-30T03:37:53.643Z","repository":{"id":65366951,"uuid":"590967203","full_name":"z-bj/The-Keyboardio-Model100","owner":"z-bj","description":"📱💻  From scratch design of a product landing page.","archived":false,"fork":false,"pushed_at":"2023-03-09T13:13:40.000Z","size":34507,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T23:41:14.342Z","etag":null,"topics":["call-to-action","colemak","css","cta","dvorak","ergonomic-keyboard","frontend","html","keyboard-layout","landing-page","product-landing-page","qwerty","sales"],"latest_commit_sha":null,"homepage":"https://z-bj.github.io/The-Keyboardio-Model100/","language":"HTML","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/z-bj.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}},"created_at":"2023-01-19T16:22:13.000Z","updated_at":"2023-04-11T16:05:46.000Z","dependencies_parsed_at":"2025-03-30T23:50:52.877Z","dependency_job_id":null,"html_url":"https://github.com/z-bj/The-Keyboardio-Model100","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/z-bj/The-Keyboardio-Model100","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z-bj%2FThe-Keyboardio-Model100","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z-bj%2FThe-Keyboardio-Model100/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z-bj%2FThe-Keyboardio-Model100/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z-bj%2FThe-Keyboardio-Model100/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/z-bj","download_url":"https://codeload.github.com/z-bj/The-Keyboardio-Model100/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z-bj%2FThe-Keyboardio-Model100/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267804049,"owners_count":24146528,"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","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["call-to-action","colemak","css","cta","dvorak","ergonomic-keyboard","frontend","html","keyboard-layout","landing-page","product-landing-page","qwerty","sales"],"created_at":"2024-12-12T16:09:44.613Z","updated_at":"2025-07-30T03:37:53.600Z","avatar_url":"https://github.com/z-bj.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n![Keyboardio Model 100 Banner](https://github.com/z-bj/The-Keyboardio-Model100/blob/master/Keyboardio-tribute-page-banner.jpg)\n\n# The Keyboardio Model 100 Landing Page\n\n![html](https://img.shields.io/badge/HTML5-E34F26.svg?style=for-the-badge\u0026logo=HTML5\u0026logoColor=white)\n![css](https://img.shields.io/badge/CSS3-1572B6.svg?style=for-the-badge\u0026logo=CSS3\u0026logoColor=white)\n![figma](https://img.shields.io/badge/Figma-F24E1E.svg?style=for-the-badge\u0026logo=Figma\u0026logoColor=white)\n![kickstarter](https://img.shields.io/badge/Kickstarter-05CE78.svg?style=for-the-badge\u0026logo=Kickstarter\u0026logoColor=white)\n\n\n\n- This repository features a product landing page built using HTML5 and CSS3, with the design created using Figma. \n\n- JavaScript was intentionally avoided for this project.\n\n- The **\"Raise the Curtains\"** effect in CSS was implemented on the page to add a unique visual element,\u003cbr\u003eto create an **immersive user experience**\n\n\u003cimg src=\"https://cultofthepartyparrot.com/parrots/hd/portalorangeparrot.gif\" width=\"36\"\u003e\n\n## Purpose\n\nThe purpose of this landing page is to promote the Keyboardio Model 100 ergonomic keyboard, which was designed with user comfort in mind. The keyboard features a unique split design that reduces strain on the wrists and arms, making it an ideal choice for anyone who spends a significant amount of time typing.\n\n\u003e This amaizing ergonomic keyboard was funded through Kickstarter.\n\nAs a fan of the product, I created this landing page to showcase the keyboard's unique features and benefits, and to provide potential customers with a compelling reason to purchase it.\n\n## Mobile View\n\n![Keyboardio Model 100 Mobile View](https://github.com/z-bj/The-Keyboardio-Model100/blob/master/Raise_the_curtain_effect.gif)\n\n\n## Features\n\nThe landing page features a bold gradient background and a prominent heading that utilizes the \"difference\" mix-blend-mode to create a striking visual effect. The heading is also designed to be responsive, using the clamp function to ensure that it scales appropriately on different screen sizes.\n\nTo enhance the user experience, the page includes scrolling and sticky positioning, allowing users to easily navigate through the content while maintaining the effect's continuity. Additionally, the page is designed to be JavaScript-free, ensuring that it is accessible and quick to load on all devices.\n\n## Implementation\n\nThe \"Raise the Curtains\" effect was achieved using the `mix-blend-mode` property, combined with `scrolling` and `sticky` properties. Here's the code used for the effect:\n\n```html\n\n\u003csection class=\"feel-it\"\u003e\n   \u003cdiv class=\"content-feel-it\"\u003e\n       \u003ch2 class=\"h2-feel-it\"\u003e\u003cspan\u003eFEEL IT.\u003c/span\u003e MASTER IT.\u003c/h2\u003e\n   \u003c/div\u003e\n\u003c/section\u003e\n\n````\n\n```css\n\n.feel-it {\n    background-image: linear-gradient(to bottom, var(--clr-shark) 50%, var(--clr-romance) 50%);\n}\n\n.feel-it::after {\n    content: \"\";\n    display: block;\n    min-height: 100vh;\n}\n\n.content-feel-it {\n    min-height: 100vh;\n    padding: 0 3rem;\n    position: sticky;\n    top: 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    mix-blend-mode: difference;\n}\n\n/* exclusion subtracts the darkest color from the lightest */\n\n.h2-feel-it {\n    color: var(--clr-romance);\n    font-size: clamp(40px, 7vw, 140px);\n    font-weight: 500;\n}\n```\n\n## Visit the Landing Page\n\nYou can test the full page [here](https://z-bj.github.io/The-Keyboardio-Model100/).\n\n\u003cimg src=\"https://cultofthepartyparrot.com/parrots/hd/portalblueparrot.gif\" width=\"36\"\u003e\n\n## Credits\n\n-   Silvestar Bistrović for the \"Raise the Curtains\" effect discovery.\n-   Keyboardio for creating such a unique and ergonomic keyboard.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fz-bj%2Fthe-keyboardio-model100","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fz-bj%2Fthe-keyboardio-model100","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fz-bj%2Fthe-keyboardio-model100/lists"}