{"id":17991257,"url":"https://github.com/oleksiyrudenko/html5-checkout-form","last_synced_at":"2026-01-18T18:01:51.330Z","repository":{"id":85274094,"uuid":"117420157","full_name":"OleksiyRudenko/html5-checkout-form","owner":"OleksiyRudenko","description":"HTML5 Checkout Form (educational project)","archived":false,"fork":false,"pushed_at":"2018-01-27T20:05:33.000Z","size":1681,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T01:37:02.648Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://oleksiyrudenko.github.io/html5-checkout-form/index.html","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/OleksiyRudenko.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":"2018-01-14T10:16:21.000Z","updated_at":"2018-01-17T13:30:35.000Z","dependencies_parsed_at":"2023-05-15T03:45:08.167Z","dependency_job_id":null,"html_url":"https://github.com/OleksiyRudenko/html5-checkout-form","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OleksiyRudenko%2Fhtml5-checkout-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OleksiyRudenko%2Fhtml5-checkout-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OleksiyRudenko%2Fhtml5-checkout-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OleksiyRudenko%2Fhtml5-checkout-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OleksiyRudenko","download_url":"https://codeload.github.com/OleksiyRudenko/html5-checkout-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247117762,"owners_count":20886439,"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":[],"created_at":"2024-10-29T19:20:49.883Z","updated_at":"2026-01-18T18:01:51.314Z","avatar_url":"https://github.com/OleksiyRudenko.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML5 Checkout Form Example\n\n[180114]\n\nThis project's been developed while taking\n[Kottans Frontend Course](https://github.com/kottans/frontend).\n\n[Check it out](https://oleksiyrudenko.github.io/html5-checkout-form/index.html)\n(click logo to see unstyled page).\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n**Table of Contents**  \n\n- [The Task](#the-task)\n  - [Notes from mock-up author](#notes-from-mock-up-author)\n- [Assets](#assets)\n- [Used Resources Reference](#used-resources-reference)\n- [Validation](#validation)\n- [Snippets](#snippets)\n  - [Skipped Radio Groups](#skipped-radio-groups)\n- [Time Track](#time-track)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## The Task\n\n * Make a form according to mockup: \n   https://dribbble.com/shots/1322677-Checkout-Page/attachments/186093\n * Use only HTML \u0026 CSS, no JavaScript.  \n * Form elements should be clickable and respond to user action.  \n * The look should be as close as possible to mockup.  \n * Test the result in all available browsers \u0026 on different devices.  \n * Turn off CSS styling and check how your form looks and \n   if it is still usable.\n \n [Mock-up decomposition](https://docs.google.com/presentation/d/1HmaVJSr-67Eu3OBkawoHJ112bMO5kv3B65d6eCb3Wlk/edit#slide=id.g2ee63ceef6_0_5)\n _(private access)_\n \n### Notes from mock-up author\n \n \u003e The top panel (order summary + help) will be sticky and lively\n updated as the user go through the form. New steps will be \n revealed progressively.\n \n[TOC :arrow_double_up: ](#table-of-contents)\n \n## Assets\n \n * [Proxima Nova fonts by Mark Simonson](https://github.com/elliakou/proxima-nova-web-fonts) /\n   [Local README.md](fonts/proxima-nova/README.md) (NB! There is a known issue re\n   `Proxima Nova Alt Regular.woff2` that results in non-critical error)\n * [Font Awesome](https://fontawesome.com/how-to-use/web-fonts-with-css)\n   for icons\n   \n[TOC :arrow_double_up: ](#table-of-contents)\n\n## Used Resources Reference\n\n * [Manage page styling](https://guides.codechewing.com/js/disable-enable-stylesheet-javascript)\n * [Repainting PNG with CSS](https://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css/39796437)\n   and a [tool](https://codepen.io/sosuke/pen/Pjoqqp) _(you may need recalc values several times to reach target accuracy)_\n * [How To Style A Checkbox With CSS](https://paulund.co.uk/style-checkboxes-with-css)\n * [Custom radio button with rich content](https://codepen.io/adamstuartclark/pen/pbYVYR) \n   // [more...](http://freefrontend.com/css-radio-buttons/) \n\n[TOC :arrow_double_up: ](#table-of-contents)  \n    \n## Validation\n\n * [HTML5 validator](https://html5.validator.nu/?doc=https%3A%2F%2Foleksiyrudenko.github.io%2Fhtml5-checkout-form%2Findex.html\u0026showimagereport=yes\u0026showsource=yes)\n * [CSS validator](https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Foleksiyrudenko.github.io%2Fhtml5-checkout-form%2Findex.html\u0026profile=css3svg\u0026usermedium=all\u0026warning=1\u0026vextwarning=\u0026lang=en)\n\n[TOC :arrow_double_up: ](#table-of-contents)  \n\n## Snippets\n\n### Skipped Radio Groups\n\nStylized radio buttons where inputs\nare hidden are out of keyboard\nnavigation loop.\n\nSolution:\n```css\n    .visually-hidden {\n      position: absolute;\n      overflow: hidden;\n      clip: rect(0 0 0 0);\n      height: 1px;\n      width: 1px;\n      margin: -1px;\n      padding: 0;\n      border: 0;\n    }\n```\n\n[TOC :arrow_double_up: ](#table-of-contents)\n\n## Time Track\n\n * `TOTAL= 19h45`\n * `180114 00h10` - setup\n * `180114 01h25` - initialize `index.html`\n * `180116 01h15` - mockup analysis (color map)\n * `180115 00h50` - html: improve layout\n * `180115 00h50` - html: input validation\n * `180115 00h20` - style: logo\n * `180115 10h55` - style: general\n * `180117 02h00` - style: checkbox/radio restyling\n * `180119 00h20` - style: file upload button\n    [source](https://codepen.io/OleksiyRudenko/pen/XVoVLe)\n * `180116 00h20` - misc (helpers, chores etc.) \n * `180118 00h25` - imagery\n * `180123 00h55` - bugfixes\n\n[TOC :arrow_double_up: ](#table-of-contents)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foleksiyrudenko%2Fhtml5-checkout-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foleksiyrudenko%2Fhtml5-checkout-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foleksiyrudenko%2Fhtml5-checkout-form/lists"}