{"id":18638798,"url":"https://github.com/starsheriff2/design-teardown-heatmap","last_synced_at":"2026-01-25T15:32:11.970Z","repository":{"id":111611708,"uuid":"304448601","full_name":"StarSheriff2/Design-Teardown-heatmap","owner":"StarSheriff2","description":"This is a clone of the Smashing Magazine's homepage. We did a design teardown for this page, using a grayscale heatmap to reveal its visual hierarchy.","archived":false,"fork":false,"pushed_at":"2021-01-29T20:00:47.000Z","size":28454,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-17T14:41:25.190Z","etag":null,"topics":["heatmap","hierarchy","teardown"],"latest_commit_sha":null,"homepage":"","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/StarSheriff2.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":"2020-10-15T21:08:57.000Z","updated_at":"2021-01-29T20:00:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"ef98a4a4-1ca5-4e93-becb-d6d08d7a9666","html_url":"https://github.com/StarSheriff2/Design-Teardown-heatmap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/StarSheriff2/Design-Teardown-heatmap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StarSheriff2%2FDesign-Teardown-heatmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StarSheriff2%2FDesign-Teardown-heatmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StarSheriff2%2FDesign-Teardown-heatmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StarSheriff2%2FDesign-Teardown-heatmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StarSheriff2","download_url":"https://codeload.github.com/StarSheriff2/Design-Teardown-heatmap/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StarSheriff2%2FDesign-Teardown-heatmap/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28754823,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T13:59:49.818Z","status":"ssl_error","status_checked_at":"2026-01-25T13:59:33.728Z","response_time":113,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["heatmap","hierarchy","teardown"],"created_at":"2024-11-07T05:43:39.779Z","updated_at":"2026-01-25T15:32:11.948Z","avatar_url":"https://github.com/StarSheriff2.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](https://img.shields.io/badge/Microverse-blueviolet)\n\n# Design Teardown Page (Heatmap of Smashing Magazine Website)\n\n\u003e This is a project that's meant to be a teardown of the visual hierarchy of [Smashing Magezine's Website](https://www.smashingmagazine.com/).\n\nIn this project we applied visual hierarchy principles to to create a heatmap of Smashing Magazine's website. The requirements were to use grayscale to show the hierarchy of the elements and clone the main layout of the page.\n\nWe used CSS Grid, Flexbox and Floats to build the layout.\n\n![screenshot](./assets/README/webpageScreenshot.png)\n\n## Built With\n\n- HTML\n- CSS\n\n## Live Demo\n\n[Live Demo](https://starsheriff2.github.io/Design-Teardown-heatmap/)\n\n## Authors\n\n👤 **Arturo Alvarez**\n\n- GitHub: [@StarSheriff2](https://github.com/StarSheriff2)\n- Twitter: [@Turo_83](https://twitter.com/Turo_83)\n- LinkedIn: [Arturo Alvarez](https://www.linkedin.com/in/arturoalvarezv/)\n\n👤 **Alejandro Contreras**\n\n- GitHub: [@bAlejandroNo4](https://github.com/AlejandroNo4)\n- Twitter: [@Alejand80002666](https://twitter.com/Alejand80002666)\n- LinkedIn: [Alejandro Contreras](https://www.linkedin.com/in/alejandro-contreras-rodriguez-b524821b5/)\n\n## Contributing\n\nContributions, issues, and feature requests are welcome!\n\nFeel free to check the [issues page](inser issues page address here).\n\n## Show your support\n\nGive a ⭐️ if you like this project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstarsheriff2%2Fdesign-teardown-heatmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstarsheriff2%2Fdesign-teardown-heatmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstarsheriff2%2Fdesign-teardown-heatmap/lists"}