Welcome to the demo front end application for Brave UX.
Getting started: Main files are the
- main.html 2. style.css and 3. main.js.
To run the project, download the files and then open main.html in a browser of your choosing.
The html file was set up using a grid like system in order to create simplicity and structure. There divs are laid out in rows made up of several columns.
The CSS structure has a lot going on in order to make the application as close to the mockup as possible. In order to get high precision, adobe illustrator was used to match the colors. Also, many measurements were made of precisely where each element was made. This data can be found in the positions.txt file. Elements are given 2 x coordinates as well as 2 y coordinates.
The javascript file deals with 2 tasks. The first one is validation for signing up of the user. This is accomplished by both reg-ex expressions and checking each element against an expected element. The second task is to show and hide the drop-down menu. You click menu to toggle between showing and hiding the drop-down menu.
No libraries were used as the app was built out using all vanilla Javascript, CSS, and HTML. No CSS3 was used in order to make the application compliant with older browsers. This application and especially the CSS is designed to be mobile friendly. If you resize the browser the layout remains consistent and functional.