This is a solution to the Bookmark landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Receive an error message when the newsletter form is submitted if:
- The input field is empty
- The email address is not formatted correctly
- Live Site URL: Github Pages
- CSS custom properties
- Flexbox
- Grid
- Mobile-first workflow
- Better Semantics.
- Web Accessibility.
- Using row-reverse could be avoided by showing and hiding duplicate html content. When refreshing, you can see the content moving.
- Putting 'position: relative' on the first-section::before prevents the hamburger from working.
- Using ::before for the background image with absolute positioning means all viewport sizes must be accounted for.
- Made the mobile nav fixed.
- Stack Overflow - Embedding SVGs
- W3 - Heading hierarchy
- W3 schools - Border image
- Stack Overflow - Border image
- CSS Tricks - Border image property
- Geeks for Geeks - Image resizing
- Free Code Camp - Hamburger Menu
- Geeks for Geeks - Stop Scrolling
- Codepen - FAQ Accordion
- Codepen - Tabs matched with ids and hrefs
- MDN - Form Validation
- Stack Overflow - Filter to change svg img tag
- Codepen - CSS filter generator
- W3 Schools - Colors Converter
- Geeks for Geeks - Stop Scrolling