{"id":19959217,"url":"https://github.com/petsamuel/error-page","last_synced_at":"2025-11-26T23:02:31.583Z","repository":{"id":61139174,"uuid":"548607351","full_name":"Petsamuel/error-page","owner":"Petsamuel","description":"A basic landing page design challenge by devchallenges using vanilla CSS and HTML.","archived":false,"fork":false,"pushed_at":"2023-03-11T21:39:09.000Z","size":268,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-01T16:22:35.090Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/Petsamuel.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":"2022-10-09T22:42:03.000Z","updated_at":"2022-10-09T22:44:30.000Z","dependencies_parsed_at":"2025-01-12T07:27:49.940Z","dependency_job_id":"b5ba2038-501c-4d3e-ae07-4cd78cdf2977","html_url":"https://github.com/Petsamuel/error-page","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Petsamuel/error-page","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Petsamuel%2Ferror-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Petsamuel%2Ferror-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Petsamuel%2Ferror-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Petsamuel%2Ferror-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Petsamuel","download_url":"https://codeload.github.com/Petsamuel/error-page/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Petsamuel%2Ferror-page/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286079811,"owners_count":27282121,"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","status":"online","status_checked_at":"2025-11-26T02:00:06.075Z","response_time":193,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-11-13T01:46:49.467Z","updated_at":"2025-11-26T23:02:31.568Z","avatar_url":"https://github.com/Petsamuel.png","language":"CSS","readme":"\u003c!-- Please update value in the {}  --\u003e\n\n\u003ch1 align=\"center\"\u003e{404-Error-Page}\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n   Solution for a challenge from  \u003ca href=\"http://devchallenges.io\" target=\"_blank\"\u003eDevchallenges.io\u003c/a\u003e.\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\n    \u003ca href=\"https://petsamuel.github.io/error-page/\"\u003e\n      Demo\n    \u003c/a\u003e\n    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://github.com/Petsamuel/error-page\"\u003e\n      Solution\n    \u003c/a\u003e\n    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://devchallenges.io/challenges/wBunSb7FPrIepJZAg0sY\"\u003e\n      Challenge\n    \u003c/a\u003e\n  \u003c/h3\u003e\n\u003c/div\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\n## Table of Contents\n\n- [Overview](#overview)\n  - [Built With](#built-with)\n- [Features](#features)\n- [Contact](#contact)\n- [Acknowledgements](#acknowledgements)\n\n\u003c!-- OVERVIEW --\u003e\n\n## Overview\n\n![screenshot](/127.0.0.1_3000_index.html.png)\n\nA basic landing page design challenge by devchallenges using vanilla CSS and HTML.\nFollowing the mobile first responsive design method, I developed the single webpage utilizing both semantic and non-semantic forms of element organization.\n\nAs seen here, the section element was wrapped in the main element (semantic).\n\n``` html\n \u003cmain\u003e\n      \u003csection class=\"intro-text-container\"\u003e\n        \u003cp class=\"intro-text\"\u003e404 NOT FOUND\u003c/p\u003e\n      \u003c/section\u003e\n      \u003csection class=\"container\"\u003e\n        \u003cdiv class=\"Scarecrow\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"error-message-container\"\u003e\n          \u003cp class=\"error-heading\"\u003eI have bad news for you\u003c/p\u003e\n          \u003cp class=\"error-text\"\u003eThe page you are looking for might be removed or is temporarily unavailable\n          \u003c/p\u003e\n          \u003cdiv class=\"button\"\u003e\n            \u003ca href=\"#\"\u003eBack to homepage\u003c/a\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/section\u003e\n    \u003c/main\u003e\n```\nusing the root pseudo class i was able to defined required styles for the pages, the image is being passed directly to the Scarecrow class.\n\nhowever the container class element the property of flex, makes the the image and the text to display on the same row.\nas seen here in the Css.\n\n\n``` css\n/* pseudo class deceleration*/\n:root {\n    --Scarecrow: url(\"/assets/images/Scarecrow.png\");\n    --font1: \"Inconsolata\";\n    --line-height: 36px;\n    --letter-spacing: -0.035em;\n    --text-color: #4F4F4F;\n}\n\n.container {\n    display: flex;\n    justify-content: space-between;\n    gap:10%;\n}\n.Scarecrow {\n    content: var(--Scarecrow);\n    width: 50%;\n}\n.button {\n    width: 216px;\n    height: 68px;\n    background: #333333;\n    font-family: 'Space Mono';\n    display:flex;\n    justify-content: center;\n\n}\na {\n    color: white;\n    font-style: normal;\n    font-weight: 700;\n    font-size: 14px;\n    line-height: 21px;\n    letter-spacing: -0.035em;\n    text-transform: uppercase;\n    align-self: center;\n     \n}\n```\n\n\n\n\n### Built With\n\n\u003c!-- This section should list any major frameworks that you built your project using. Here are a few examples.--\u003e\n\n- [html](https://reactjs.org/)\n- [Css](https://vuejs.org/)\n\n\n## Features\n\n\u003c!-- List the features of your application or follow the template. Don't share the figma file here :) --\u003e\n\nThis application/site was created as a submission to a [DevChallenges](https://devchallenges.io/challenges) challenge. The [challenge](https://devchallenges.io/challenges/wBunSb7FPrIepJZAg0sY) was to build an application to complete the given user stories.\n\n\n\n## Contact\n\n\u003c!-- Medium [Post-link](https://{your-web-site-link}) --\u003e\n- GitHub [Petsamuel](https://github.com/Petsamuel/)\n- Twitter [@Bieefilled](https://twitter.com/Bieefilled)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpetsamuel%2Ferror-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpetsamuel%2Ferror-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpetsamuel%2Ferror-page/lists"}