You will create a mobile-friendly website for one of the most popular food blogs out there, fittingly named “Food Blog”.
- Create a GitHub Repository named: FE19-CR1-YourName.
- Correct usage of the HTML structure. Make sure to use proper semantic elements and not only div elements. Use the right code indentation as well.
- Use CSS selectors (classes and/or IDs) to style your web page. Make sure the classes have useful and proper names. Stick to the English language for it.
- The contact-us link in the footer must be linked to https://codefactory.wien/en/contact-en/
- Use SASS/SCSS tools to style your website.
- Correct usage of Flexbox and/or Grid (when necessary). The elements should be displayed according to the design given, respecting the columns and rows.
- Using positioning attributes, place the images with their respective overlays as in the example (hint: remember that for an absolute position child element, the parent element must use position relative). Alternatively, you can use background-image attributes instead.
- Correct usage of Media Queries. For the mobile resolution of <= 480px, you should use the second guide template. Create a Media Query for tablets. For this option, as the tablet resolution is wider, two columns should be able to fit on the screen. *Research what is the most popular tablet breaking point.
- Create a "recipe of the month" page and include the link in the top navbar. Fill this page with individual content. Be creative and choose a delicious recipe.
- Create a webpage for the About link in the footer and provide your own design/layout solution for this additional page. It must have a navbar, a middle section with the main content about the Food blog and a footer.
NOTE: It is important to follow the structure of the layout, including the placement of all elements. The cropping of the images, the font size, and font family are not important.