Abhivendra / Campus-Diaries-Designing-Assignment

Campus Diaries Designing Assignment

This is a sample project with following requirements:

Task Description

1. Create a responsive page
2. 12 column grid (60px width, 20px gutter) {Use any css framework}
3. Header Section

• Place at top of the Page
• Add a Logo to the left of header
• Functionality
• Not visible when a Page is scrolled up -Visible again, when the scrolling stops -Visible when the Page is scrolled down
• Set height to 60px

4. Content Section

• Two column Layout
• Main Content
• Had container
• Always at the center of the screen
• Contains
• href : http://dkzstslcvgwbc.cloudfront.net/sites/all/themes/campus_diaries/images/front/.jpg
• Randomise from 1 to 10, when page load. This will show different images whenever the page is refreshed.
• set max width to 500px
• Sidebar with width 300px
• Set min height of content as 1000px

5. Sticky Bar

• Place above Footer
• Functionality
• Sticks at the bottom of screen when footer is not visible on viewport
• Sits just above the footer, when footer is visible on viewport

6. Footer Section

• At the bottom of the Page
• Set height to 120px

Acceptance Criteria

• Responsive
• Browser compatible (Chrome, Firefox, Safari)

Code Submission

• Code should be submitted through Github. A good commit history is expected. Create your own repository and send a link
• Write instructions in Readme.md (if needed) on how to setup the project and run it the first time.
• Bonus points for writing tests.

Tech

• Twitter Bootstrap - great UI boilerplate for modern web apps
• jQuery - For minimising javascript
• [HTML5] - For MarkUp
• [CSS3]- For Styling
• [Bower] - For Frontend Package Management

Installation

Go To My Github account.[@Abhivendra] Download code from repo [https://github.com/Abhivendra/Campus-Diaries-Designing-Assignment]

Run

1. UnZip downloaded Code
2. Run index.html with the help of any browser

License

NONE