Sephora - Advert Calendar

• Front end test from Invision prototype

• Build in Plain HTML, CSS, Javascript, JQuery and Bootstrap

Here's the link to view the build protoype : Sephora-Advert-Calendar

File Structure

+-- Assets
|   +-- Avalon-Book.otf
|   +-- Avalon-Demi.otf
|   +-- SephoraSerif-Book.otf
|   +--  style.css
+--Images
|   +-- banner.png
|   +-- confetti.png
|   +-- snowflakes.png
|   +-- tarte.jpg
+-- Javascript
|   +-- function.js
|   +-- timer.js
+-- index.html

Food for thought

Part of my initial thought process :

I started out by asking myself, how I would want to structure the grids around with the bootstrap grids. Thus I started to draw out the wireframes for it.

Disclaimer : Wireframes are more for the thought process and may not be drawn accurate to assets or scales.

Wireframe for Desktop:

Wireframe for Mobile:

During the process of doing it :

• Created few branches in the process of doing it, so that master branch is left untouch until css-bugs are resolved.

• Created to-do list of things (functions/view portions) during the process of building this so as to pace myself out

Things that could have been done better

• Refractor the CSS better. (It could have been neater using SASS)
• Positioning the Images overlay to be more smooth
• Have better naming conventions for CSS classes.