Responsive website made with mobile first layout

Module 1: Final assessment exercise

Project developed with:

1. Attention to detail 🔎

2. Clean and tidy code 🧹

3. Fun 🎉

Assignment

The exercise requires the development of a web page according to a given design (Zeplin). Several points have to be solved:

Tech stack and Tools

• Media queries
  
• Mixins
  
• Transitions
  

Layout

First of all you have to make the layout on a given design:
. The hamburger button (in the upper left corner) should be fixed at the top of the screen and should not disappear when scrolling. The hamburger icon should be a link. This hamburger menu does not display any submenus.
. First module (Anonymous proxy): it must be laid out with flexbox and must occupy the height of the browser window.
. Second module (Looking Through A Window): you can layout it using any CSS properties you want.
. Third module (3 Reasons To Purchase): the 3 elements of the listing must be laid out with CSS Grid in all screen sizes.
. Fourth module (footer): it must be laid out using flexbox.All texts in the "ARTICLES" column and all texts in the "TWITTER" column must be links.

Interactions to resolve:

. The hero module arrow button should link to the "3 Reasons To Purchase" section.
. The footer arrow button should link to the top of the page.
. All footer links should go to https://adalab.es.
.Button hover ("Go" and "3 Reasons To Purchase") should include a transition of your choice (e.g. color, size, etc.).

About me