Skip to content

arieltsq/ariel-sephora-advert

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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: Desktop Wireframes

Wireframe for Mobile: Mobile Wireframes

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.

About

Build in Plain HTML, CSS, Javascript, JQuery for Sephora's Advert Calendar.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published