Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/z-bj/the-keyboardio-model100
π±π» From scratch design of a product landing page.
https://github.com/z-bj/the-keyboardio-model100
call-to-action colemak css cta dvorak ergonomic-keyboard frontend html keyboard-layout landing-page product-landing-page qwerty sales
Last synced: 10 days ago
JSON representation
π±π» From scratch design of a product landing page.
- Host: GitHub
- URL: https://github.com/z-bj/the-keyboardio-model100
- Owner: z-bj
- Created: 2023-01-19T16:22:13.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-03-09T13:13:40.000Z (almost 2 years ago)
- Last Synced: 2023-03-10T15:33:43.700Z (almost 2 years ago)
- Topics: call-to-action, colemak, css, cta, dvorak, ergonomic-keyboard, frontend, html, keyboard-layout, landing-page, product-landing-page, qwerty, sales
- Language: HTML
- Homepage: https://z-bj.github.io/The-Keyboardio-Model100/
- Size: 32.9 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# The Keyboardio Model 100 Landing Page
- This repository features a product landing page built using HTML5 and CSS3, with the design created using Figma.
- JavaScript was intentionally avoided for this project.
- The **"Raise the Curtains"** effect in CSS was implemented on the page to add a unique visual element,
to create an **immersive user experience**
## Purpose
The 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.
> This amaizing ergonomic keyboard was funded through Kickstarter.
As 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.
## Mobile View
## Features
The 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.
To 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.
## Implementation
The "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:
```html
FEEL IT. MASTER IT.
````
```css
.feel-it {
background-image: linear-gradient(to bottom, var(--clr-shark) 50%, var(--clr-romance) 50%);
}
.feel-it::after {
content: "";
display: block;
min-height: 100vh;
}
.content-feel-it {
min-height: 100vh;
padding: 0 3rem;
position: sticky;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
mix-blend-mode: difference;
}
/* exclusion subtracts the darkest color from the lightest */
.h2-feel-it {
color: var(--clr-romance);
font-size: clamp(40px, 7vw, 140px);
font-weight: 500;
}
```
## Visit the Landing Page
You can test the full page [here](https://z-bj.github.io/The-Keyboardio-Model100/).
## Credits
- Silvestar BistroviΔ for the "Raise the Curtains" effect discovery.
- Keyboardio for creating such a unique and ergonomic keyboard.