vikramvi / clipboard-landing-page Goto Github PK

https://www.frontendmentor.io/challenges/clipboard-landing-page-5cc9bccd6c4c91111378ecb9 Put your layout skills to the test with this HTML & CSS landing page challenge. This challenge includes a design for hover states. - [LIVE WEBSITE - CLICK BELOW]

Home Page: https://vikramvi.github.io/Clipboard-landing-page/

HTML 31.01% CSS 68.99%

bem bem-css bem-methodology css-flexbox css-grid css-grid-layout css3 html5 responsive-layout responsive-web-design

clipboard-landing-page's Introduction

Namaste 🙏 I'm Vikram ( Vicky ) from India

React.js, React Native Developer

4 Startup Experience

Startup Name	Sold To	Country
Playdom	Disney	India
6Wunderkinder	Microsoft	Deutschland
Noa	NA	Deutschland
Ruchkar Solapur	NA	India

Languages, Libraries and Tools:

Connect with me:

clipboard-landing-page's People

Contributors

Stargazers

Watchers

clipboard-landing-page's Issues

All page content should be contained by landmarks

Category : Accessibility

<article class="snippets-grid">

<article class="access-clipboard-info-grid">

<article class="supercharge-workflow-grid">

<article class="companies-grid">

<article class="os-info-grid">

desktop view is wrong - need to occupy full viewport

Confusing "desktop-design.jpg" made me think that it's a long strip with white space on both sides. But post submitting solution and checking with comparison tool; I've realised that full viewport should have been occupied.

Document should have one main landmark

Category : Accessibility

<html lang="en">

large padding / margin vs usage width + max-width option

Your overflow is being caused on small screens by all the large explicit margins and paddings you are setting on the sides of elements
Instead of adding values like padding: 8rem;  use techniques like width: 100%; max-width: 20rem;

https://frontendmentor.slack.com/archives/CCYHFT85B/p1656069288485599?thread_ts=1656050081.188389&cid=CCYHFT85B