{"id":25313967,"url":"https://github.com/ayushivashisth/simplotel-website","last_synced_at":"2026-05-04T07:40:52.131Z","repository":{"id":200138685,"uuid":"704534050","full_name":"AyushiVashisth/simplotel-website","owner":"AyushiVashisth","description":"The project comprises a webpage titled 'Simplotel,' featuring a sleek and responsive design. The header includes a navigation menu with links to 'Home,' 'Order,' 'Food,' 'Restaurant,' 'Testimonials,' and 'Contact Us,' with hover effects.","archived":false,"fork":false,"pushed_at":"2023-10-15T07:15:58.000Z","size":13743,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T13:49:14.538Z","etag":null,"topics":["css3","html5","netlify","vercel"],"latest_commit_sha":null,"homepage":"https://delicate-crumble-3d0dfe.netlify.app/","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/AyushiVashisth.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}},"created_at":"2023-10-13T13:14:47.000Z","updated_at":"2023-10-15T06:40:20.000Z","dependencies_parsed_at":"2023-10-15T22:45:45.173Z","dependency_job_id":null,"html_url":"https://github.com/AyushiVashisth/simplotel-website","commit_stats":null,"previous_names":["ayushivashisth/simplotel-website"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AyushiVashisth/simplotel-website","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AyushiVashisth%2Fsimplotel-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AyushiVashisth%2Fsimplotel-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AyushiVashisth%2Fsimplotel-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AyushiVashisth%2Fsimplotel-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AyushiVashisth","download_url":"https://codeload.github.com/AyushiVashisth/simplotel-website/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AyushiVashisth%2Fsimplotel-website/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32599413,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T22:12:39.696Z","status":"online","status_checked_at":"2026-05-04T02:00:06.625Z","response_time":58,"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":["css3","html5","netlify","vercel"],"created_at":"2025-02-13T16:39:50.667Z","updated_at":"2026-05-04T07:40:52.116Z","avatar_url":"https://github.com/AyushiVashisth.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e🌟 simplotel-website 🌟\u003c/h1\u003e\n\n\u003ch3 align=\"justify\" width=\"80%\"\u003e\n\nThe project comprises a webpage titled 'Simplotel,' featuring a sleek and responsive design. The header includes a navigation menu with links to 'Home,' 'Order,' 'Food,' 'Restaurant,' 'Testimonials,' and 'Contact Us,' with hover effects. The webpage showcases an eye-catching background image with overlaid text, adapting gracefully to various screen sizes. The 'Order Now' section presents enticing cards for 'Burger,' 'Pizza,' and 'Pasta,' each with hover animations. An 'Order' button stands out at the section's end. In sum, this project offers a visually appealing and user-friendly web experience.\". [Front-End Developer Task.pdf](https://github.com/AyushiVashisth/simplotel-website/files/12906189/Front-End.Developer.Task.pdf)\n\n\n### Frontend Deployed URL 👉 [Click here](https://delicate-crumble-3d0dfe.netlify.app/)\n\u003c/h3\u003e\n\n\n\u003cbr/\u003e\n\n\u003ch2 align=\"center\"\u003eTechnologies Used\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eFrontend\u003c/b\u003e\u003cbr\u003e\n  \u003cimg src=\"https://img.shields.io/badge/html-%23323330.svg?style=for-the-badge\u0026logo=Html\u0026logoColor=%23F7DF1E\" alt=\"react\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/css-%2338B2AC.svg?style=for-the-badge\u0026logo=css\u0026logoColor=white\" alt=\"tailwindcss\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eTools\u003c/b\u003e\u003cbr\u003e\n  \u003cimg src=\"https://img.shields.io/badge/GitHub-100000?style=for-the-badge\u0026logo=github\u0026logoColor=white\" alt=\"github\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Visual%20Studio-5C2D91.svg?style=for-the-badge\u0026logo=visual-studio\u0026logoColor=white\" alt=\"vscode\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eDeployment\u003c/b\u003e\u003cbr\u003e\n  \u003cimg src=\"https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge\u0026logo=vercel\u0026logoColor=white\" alt=\"vercel\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge\u0026logo=netlify\u0026logoColor=#00C7B7\" alt=\"netlify\"\u003e\n\u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003eFeatures\u003c/h2\u003e\n\n1. **HTML Structure**:\n   - Start by creating the basic structure of your HTML document with the `\u003chtml\u003e`, `\u003chead\u003e`, and `\u003cbody\u003e` elements.\n   - Use semantic HTML elements like `\u003cheader\u003e`, `\u003cnav\u003e`, `\u003cmain\u003e`, `\u003csection\u003e`, and `\u003cfooter\u003e` to structure your page's content.\n\n2. **CSS Styling**:\n   - Define the CSS styles for your webpage. Make sure to match the color scheme and layout you have in mind.\n   - Use external CSS files linked in the `\u003chead\u003e` of your HTML document or include inline styles within HTML elements.\n\n3. **Responsive Design**:\n   - Use CSS media queries to make your webpage responsive to different screen sizes and devices (desktop, tablet, and mobile).\n   - Adjust font sizes, padding, margins, and other CSS properties to ensure the layout adapts smoothly to different screen widths.\n\n4. **Images**:\n   - Optimize images for web use to ensure they load quickly without pixelation.\n   - Use CSS to control image size and positioning. You can set the `max-width` property to ensure images don't stretch beyond their natural size.\n\n5. **Text Overflow**:\n   - To prevent text overflow, you can use CSS properties like `overflow` and `text-overflow`.\n   - Consider using `@media` queries to adjust font sizes or line heights for smaller screens if necessary.\n\n6. **Testing**:\n   - Test your webpage in various browsers to ensure cross-browser compatibility.\n   - Test on different devices and screen sizes to verify its responsiveness.\n   - Check for any layout issues when zooming in or out.\n\n## Desktop\n![Screenshot 2023-10-14 201455](https://github.com/AyushiVashisth/simplotel-website/assets/107119119/4ede11d7-75b2-4f0b-bee1-16caa48b4a20)\n![Screenshot 2023-10-14 201529](https://github.com/AyushiVashisth/simplotel-website/assets/107119119/b5669317-1600-4b1c-84f7-50bce64e216d)\n![Screenshot 2023-10-14 201542](https://github.com/AyushiVashisth/simplotel-website/assets/107119119/6ec988cf-bf70-4cae-bd96-4a9f4ec01d0f)\n\n\n## Mobile\n![Screenshot 2023-10-14 201621](https://github.com/AyushiVashisth/simplotel-website/assets/107119119/c856f142-3a61-4855-9786-76099bc9a07b)\n![Screenshot 2023-10-14 201633](https://github.com/AyushiVashisth/simplotel-website/assets/107119119/ed5fe11a-fc70-4055-8890-2427718299a9)\n\u003c/br\u003e\n\u003c/br\u003e\n\u003c/br\u003e\n\u003cdiv\u003e\n   \u003cimg width=\"49%\" src=\"https://github.com/AyushiVashisth/simplotel-website/assets/107119119/6e7610eb-b1c8-4465-b78b-5773b25fa90a\" alt=\"github\"\u003e\n  \u003cimg  width=\"49%\" src=\"https://github.com/AyushiVashisth/simplotel-website/assets/107119119/1ec943d6-2334-4af3-86bb-6a10f0fac951\" alt=\"vscode\"\u003e\n\u003c/div\u003e\n\u003c/br\u003e\n\u003c/br\u003e\n\u003c/br\u003e\n\u003cdiv\u003e\n   \u003cimg width=\"31%\" src=\"https://github.com/AyushiVashisth/simplotel-website/assets/107119119/af45f73b-9f30-480b-b7bf-309f0e4b820e)\" alt=\"github\"\u003e\n  \u003cimg  width=\"31%\" src=\"https://github.com/AyushiVashisth/simplotel-website/assets/107119119/afceedc8-2d76-4f8c-bc6c-74be60c4bf6c\" alt=\"vscode\"\u003e\n  \u003cimg  width=\"31%\" src=\"https://github.com/AyushiVashisth/simplotel-website/assets/107119119/870d822b-194a-4617-a99b-9dbfffbf5d15\" alt=\"vscode\"\u003e\n\u003c/div\u003e\n\n\u003ch2 align=\"center\"\u003eProject Overview\u003c/h2\u003e\n\nCertainly, here's an overview of the project based on the information you've provided:\n\n**Project Name**: Responsive Webpage Development for Interview Assignment\n\n**Project Requirements**:\n\n1. **Task**: Create a responsive webpage using HTML and CSS based on a provided design without using any libraries or frameworks like Bootstrap or Material UI.\n\n2. **Design Requirements**:\n   - The webpage should match the provided design regarding layout and styling.\n   - The colour scheme used in the design should be replicated on your webpage.\n\n3. **Responsiveness**:\n   - The webpage must be fully responsive and adapt to different screen sizes, including desktop, tablet, and mobile devices.\n   - Images should not pixelate or stretch when the screen size changes.\n   - Text should not overflow its containers.\n\n4. **Technical Details**:\n   - HTML: You need to create the HTML structure for the webpage, ensuring proper semantic markup.\n   - CSS: Style the webpage to match the design, controlling layout, colours, and fonts.\n\n5. **Testing**:\n   - Test the webpage in various browsers and devices to ensure cross-browser compatibility and responsiveness.\n   - Ensure that the design remains consistent and functional when zooming in or out.\n\n6. **Submission**:\n   - Submit the completed assignment before 7 PM on the specified date via the provided submission link.\n\n**Key Points for Success**:\n\n- Pay attention to detail in matching the design and colour scheme.\n- Use media queries in CSS to make the webpage responsive.\n- Optimize images for web use and control their size in CSS to prevent pixelation and stretching.\n- Carefully manage text to avoid overflow.\n- Ensure the webpage functions as intended on various devices and screen sizes.\n- Validate your HTML and CSS to ensure code quality and compliance with web standards.\n\n\n\u003ch3\u003eThis is an individual project that I developed as a solo  web developer within a span of 2 days.\u003c/h3\u003e\n\n\u003ch2 align=\"center\"\u003eContribution Guidelines\u003c/h2\u003e\n\nWe welcome contributions to the HTML-CSS project. If you have ideas for new features or find any bugs, please open an issue in the repository. Pull requests are also encouraged.\n\n\u003ch2 align=\"center\"\u003eShow Your Support\u003c/h2\u003e\n\nIf you find this project interesting or valuable, please consider giving it a ⭐️.\n\n\u003ch1 align=\"center\"\u003e🌟 Happy Exploring! 🌟\u003c/h1\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayushivashisth%2Fsimplotel-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayushivashisth%2Fsimplotel-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayushivashisth%2Fsimplotel-website/lists"}