Let's Build: A Consultancy Website - Part 18

Completing the Home Page Header Styles

Part 18 continues where we left on with styling the remaining content inside the header portion of the home page. I utilized a lot of positioning with CSS for full effect. I was able to reproduce our design accurately on the desktop view of the site. In a future part of the series, I will revisit the responsive portions of the site to ultimately make the site function across a wide array of devices.

Keeping things modular

From this point forward I plan to style the home page and future pages in their own respective sub-sections. Doing this allows me to keep my file structure a little more modular and easier to navigate. This also makes future updates easier as time goes on.

In my sass directory each page would live inside a master pages directory and within that directory, each page would get its own directory like so:

pages /
-- home /
---- _home.scss
-- about /
---- _about.scss
...

Rather than using a master style sheet with traditional CSS I can easily concatenate Sass files to create a similar master style sheet all of which is easier to write and still remain D.R.Y. (Don't Repeat Yourself).

Download the Source Code for this Project

Source Code

The Series So Far

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8
• Part 9
• Part 10
• Part 11
• Part 12
• Part 13
• Part 14
• Part 15
• Part 16
• Part 17