{"id":19543248,"url":"https://github.com/codewithalamin/ping-coming-soon-page","last_synced_at":"2026-01-27T07:05:40.069Z","repository":{"id":154934103,"uuid":"626954518","full_name":"CodeWithAlamin/Ping-coming-soon-page","owner":"CodeWithAlamin","description":"Ping coming soon page design challenge on Frontend Mentor. The main challenge was to recreate the design as accurately as possible with email validation.","archived":false,"fork":false,"pushed_at":"2024-10-30T12:08:49.000Z","size":459,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-08T20:36:52.811Z","etag":null,"topics":["codepapa360","codewithalamin","coming-soon-page","css","design-challenge","email-validation","frontend-development","html","javascript","responsive-design","web-development"],"latest_commit_sha":null,"homepage":"https://ping-alamin.netlify.app/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeWithAlamin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2023-04-12T13:46:35.000Z","updated_at":"2024-10-30T12:08:53.000Z","dependencies_parsed_at":"2025-01-08T19:11:04.603Z","dependency_job_id":"cbe820ff-4463-4583-9cc0-dcfd08f6a2f5","html_url":"https://github.com/CodeWithAlamin/Ping-coming-soon-page","commit_stats":null,"previous_names":["codewithalamin/ping-coming-soon-page","codepapa360/ping-coming-soon-page"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CodeWithAlamin/Ping-coming-soon-page","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FPing-coming-soon-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FPing-coming-soon-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FPing-coming-soon-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FPing-coming-soon-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeWithAlamin","download_url":"https://codeload.github.com/CodeWithAlamin/Ping-coming-soon-page/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FPing-coming-soon-page/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28807181,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T06:25:51.065Z","status":"ssl_error","status_checked_at":"2026-01-27T06:25:50.640Z","response_time":168,"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":["codepapa360","codewithalamin","coming-soon-page","css","design-challenge","email-validation","frontend-development","html","javascript","responsive-design","web-development"],"created_at":"2024-11-11T03:18:05.663Z","updated_at":"2026-01-27T07:05:40.054Z","avatar_url":"https://github.com/CodeWithAlamin.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003ePing coming soon page\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\n    \u003ca href=\"https://ping-alamin.netlify.app/\"\u003e\n      🚀 Live Site\n    \u003c/a\u003e\n    |\n    \u003ca href=\"https://www.frontendmentor.io/solutions/responsive-ping-coming-soon-page-w-sass-and-dark-mode-p9mxpe4aqF\"\u003e\n      💡 Solution\n    \u003c/a\u003e\n  \u003c/h5\u003e\n\u003c/div\u003e\n\n  \u003cp align=\"center\"\u003e\n    This is my solution for the Ping coming soon page design challenge on Frontend Mentor. The objective was to build a coming soon page with email validation and get it looking as close to the design as possible.\n  \u003c/p\u003e\n\n### Screenshot\n\n\u003ca align=\"center\" href=\"https://ping-alamin.netlify.app/\"\u003e\n\n\u003cimg src=\"./screenshots/Compared - Ping coming soon page - Alamin.png\"/\u003e\n\u003c/a\u003e\n\n### The challenge\n\nUsers should be able to:\n\n- View the optimal layout for the site depending on their device's screen size\n- See hover states for all interactive elements on the page\n- Submit their email address using an `input` field\n- Receive an error message when the `form` is submitted if:\n  - The `input` field is empty. The message for this error should say _\"Whoops! It looks like you forgot to add your email\"_\n  - The email address is not formatted correctly (i.e. a correct email address should have this structure: `name@host.tld`). The message for this error should say _\"Please provide a valid email address\"_\n- **Bonus:** Dark mode toggle\n\n#### Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Flexbox\n- CSS Grid\n- JavaScript\n- Mobile-first workflow\n- NPM\n\n## Installation\n\n- Clone this repo:\n\n```sh\ngit clone https://github.com/CodeWithAlamin/Ping-coming-soon-page.git\n```\n\n- Install dependencies:\n\n```sh\nnpm install\n```\n\n- Build command:\n\n```sh\nnpm run build\n```\n\n- Run command:\n\n```sh\nnpm start\n```\n\n### What I learned\n\nThrough building this project, I was able to build upon the email validation skills I learned in a previous challenge. This second challenge, the Ping coming soon page, presented new layout and design obstacles to overcome. I gained further experience working with responsive images and honed my CSS skills. Overall, this project allowed me to build upon my previous knowledge and gain new insights in web development.\n\n### Useful resources\n\n- [RegexMagic](https://www.regular-expressions.info/email.html) - This article by \u003cb\u003eJan Goyvaerts\u003c/b\u003e provides an in-depth explanation of how to use regular expressions to validate email addresses. The article not only explains how to write regular expressions for email validation but also covers the common mistakes made while writing regular expressions for email validation.\n\nIt provides clear and concise examples of regular expressions for email validation and also explains the logic behind each regular expression.\n\n## Author\n\n\u003cb\u003e👤 Alamin\u003c/b\u003e\n\n- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)\n- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)\n- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)\n- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)\n\nFeel free to contact me with any questions or feedback!\n\n## Show your support\n\nGive a ⭐️ if you liked this project!\n\n## Acknowledgments\n\nI would like to express my gratitude to Frontend Mentor for providing this project idea and design. Their platform is an excellent resource for web developers looking to improve their skills.\n\n## License\n\nThis project is licensed under the [MIT](https://github.com/CodeWithAlamin/Ping-coming-soon-page/blob/main/LICENSE.md) license, which means you can use, modify, and distribute the code as you wish. If you have any questions or feedback, feel free to reach out. Thank you for considering my code!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Fping-coming-soon-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithalamin%2Fping-coming-soon-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Fping-coming-soon-page/lists"}