{"id":16432728,"url":"https://github.com/teles/pure-css-parallel-park","last_synced_at":"2025-03-23T08:31:44.816Z","repository":{"id":29426718,"uuid":"32962532","full_name":"teles/pure-css-parallel-park","owner":"teles","description":":car: Pure css parallel park is step by step tutorial on how to perfect parallel park","archived":false,"fork":false,"pushed_at":"2015-04-03T03:22:56.000Z","size":2695,"stargazers_count":31,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T10:12:21.756Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://jotateles.com.br/pure-css-parallel-park/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/teles.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-27T02:01:14.000Z","updated_at":"2024-01-27T00:38:19.000Z","dependencies_parsed_at":"2022-08-25T04:51:06.406Z","dependency_job_id":null,"html_url":"https://github.com/teles/pure-css-parallel-park","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/teles%2Fpure-css-parallel-park","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teles%2Fpure-css-parallel-park/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teles%2Fpure-css-parallel-park/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teles%2Fpure-css-parallel-park/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/teles","download_url":"https://codeload.github.com/teles/pure-css-parallel-park/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244286972,"owners_count":20428874,"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-11T08:44:14.247Z","updated_at":"2025-03-23T08:31:44.541Z","avatar_url":"https://github.com/teles.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pure CSS - Parallel park\nPure CSS - Parallel park is step by step tutorial on how to perfect parallel park.\n\n![Exhibition](https://raw.githubusercontent.com/teles/pure-css-parallel-park/gh-pages/exhibition.gif)\n\n[Click here to see a live demo](http://teles.github.io/pure-css-parallel-park/) or love it on [codepen](http://codepen.io/teles/pen/gbKeLR).\n\n## Dependences\nTo generate the css file from the sass code you will only need compass. If you don't have it, [install it](http://compass-style.org/install/)\n\n## Running the project\n\nTo compile the sass project use `compass compile`.\n\nTo watch changes in the project use `compass watch`, everytime you change something in the sass code running `grunt watch` the css will be compiled again.\n\n## Folders structure\nThe sass code is divided in folders, which folder has its own purpose. \nIn helpers folder there are stylesheets which don't generated css.\nIn core folder there are styles for html tags and typo.\nIn components folder you will find the components like car, park and breadcrumbs.\n\n## \"How do you animate the car without using javascript?\"\nThe animations are all css3, they are made using keyframes, but the interactions are using a simple combination beetwen hidden inputs and labels.\nHappens like this: when the user checks the start button he is checking a hidden input and the first animations starts after it, so it happens in the steps 2, 3 and finish. Quite simple :)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteles%2Fpure-css-parallel-park","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteles%2Fpure-css-parallel-park","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteles%2Fpure-css-parallel-park/lists"}