whozieq / designerpromo

Solo Project #5. Scrimba.com Frontend Web Dev CareerPath Module 4 project after completing CSS fundamentals.

DesignerPromo

Solo Project #5. Scrimba Frontend Dev career path course after completing CSS fundamentals.

This project was requested to be completed in 10 separate phases, each with specific requirements:

1. Layout basics

• add the image after the h1
• center the text for the entire page
• add a new div, give it a class, and assign it a width of 570px
• center that div on the page

2. Setting up font

• add google font and configure it to work
• Roboto light and black weights

3. Setting up typography

• set font sizes and weights for the various text to match the visual design

4. Fancy it up

• style the headings so that 'Sophie' and 'graphic designer' and 'article' should be bold and on their own line and a little larger than the rest of their respective headings are
• style the link #99D930 and hover, focus #131313 and bold

5. Adjust the spacing

• top, middle and bottom sections each with their own background color that is full width
• each section needs 100px of space on the top and bottom
• top #D7D7D7 middle #FFEAEA bottom #EAF9FF (or your own colors if desired)

6. Background colors... no really, I swear

• previous colors were just placeholders, these are the real permanent colors
• put a dark color to top and bottom
• but... to do this you can only add classes to the HTML, NO other changes to the HTML allowed (CSS changes of course)

7. Finer details

• ensure space at top and bottom of each section is ONLY 100px
• do not create any new selectors in the CSS to do this

8. Adding buttons

• add see my work link in mid section
• add see all my articles link in bottom section
• style both a normal and hover state that is 'button' like. normal = #99#930 with #252525 text. hover = #252525 with #fff text
• don't use width or height to create the size of the 'button' looking links

9. Headings

• fancy up headings with 1px line at top and bottom
• color #C4C4C4
• don't change the text spacing as it exists

10. Working with what you have

• no access to the HTML, make changes only in the CSS!
• change certain items to be green including the name and date on the most recent article