¡Hola mundo!
The layout is based on a design received via Zeplin. The website is responsive, pixel perfect and was made with flex and grid✨
- A responsive homepage website
- Must include flexbox and grid
- The menu button must be fixed
- All footer's links must got to Adalab's website
- Hero button must be linked with "3 reasons to purchase" section
- Footer button must scroll to the hero
- "Go" and "3 reasons to purchase" buttons must have a hover transition.
- Footer's button could have an animation 🎯
- Designer styleguides must be followed
Starring: Adalab Web Starter Kit - An amazing template that allowed me to use a local host, SASS, HTML Template Engines and gulp. For more information you may visit the Kit repository
- Visual Code Studio: as code editor
- HTML
- SASS
- GULP
For this project development I followed the designer guidelines and did an old and classic paper draw.
This way I was able to dissectionate each part of the design to partials so I could take advantage of the HTML template engine that the Starter Kit provides me.
I started the development with an Mobile First approach and after it I wrote the required mediaqueries to adapt the design to other devices.
Finally I used SASS for the styles. As in with my HTML, SASS allowed me to approach the styles one part at a time so I could follow the guidelines neatly.
This is how my partials look like
Remember that this repository was done using the Adalab Web Starter Kit so I highly recommend to visit the link provided before running the proyect.
Node.js and Gulp are required
After you clone the repository you must:
- Install dependencies. You will only have to do this once.
npm install- Start the proyect. This must be done everytime you code and will open a local host that will update in real time
npm start- If as me, you happen to use GitHub Pages you may send your code to production using
npm run push-docsPD: You will have to set your GitHub Page as master branch /docs folder. For Gulp installing you may run
npm -g install gulp-cliMIT