# Frontend Mentor - Pod request access landing page solution This is a solution to the [Pod request access landing page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/pod-request-access-landing-page-eyTmdkLSG). Frontend Mentor challenges help you improve your coding skills by building realistic projects. ## Table of contents - [Frontend Mentor - Pod request access landing page solution](#frontend-mentor---pod-request-access-landing-page-solution) - [Table of contents](#table-of-contents) - [Overview](#overview) - [The challenge](#the-challenge) - [Screenshot](#screenshot) - [Links](#links) - [My process](#my-process) - [Built with](#built-with) - [What I learned](#what-i-learned) - [Continued development](#continued-development) - [Useful resources](#useful-resources) - [Author](#author) - [Acknowledgments](#acknowledgments) **Note: Delete this note and update the table of contents based on what sections you keep.** ## Overview ### The challenge Users should be able to: - View the optimal layout depending on their device's screen size - See hover states for interactive elements - Receive an error message when the form is submitted if: - The `Email address` field is empty should show "Oops! Please add your email" - The email is not formatted correctly should show "Oops! Please check your email" ### Screenshot ![](./screenshot.jpg) Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. **Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** ### Links - Solution URL: [Add solution URL here](https://github.com/tarasis/tarasis.github.io/tree/main/projects/FrontendMentor/newbie/pod-request-access-landing-page) - Live Site URL: [Add live site URL here](https://tarasis.github.io/FrontendMentor/newbie/pod-request-access-landing-page) ## My process ### Built with - Semantic HTML5 markup - CSS custom properties - Flexbox - CSS Grid - Mobile-first workflow ### What I learned The approach to this was more difficult than any of the Frontend Mentor challenges that I had approached so far. Basically till now I've only approached the newbie free projects (although with a mixture of access to the figma design file). Now I have to think about Mobile, Tablet, and Desktop; rather than just Mobile and Desktop. Also interesting was working without a style guide document + figma doc. This time I just had the figma document, so I had to make more notes for myself. Interesting particularly because it wasn't clear from the design section what weights of Chivo I needed. To see how you can add code snippets, see below: ```html