Let's Build: A Consultancy Website - Part 17 - Styling The Home Page Header

Hi, My name is Andy Leverenz. I design, code, and am an author of things. Check out my agency called Couple of Creatives https://coupleofcreatives.com and my blog Web-Crunch https://web-crunch.com🤘🏻

==========

Styling our home page header begins in part 17 of the Let's Build: A Consultancy Website series.

The beginning of a pattern emerges

In part 17, you'll start to see a pattern form. I create fields within Kirby and output to the page in specific sections which correlate to our design.

The first section we are working on is the home page header. Here I had to learn a bit about how to best output images and to decide the best path to take for recreating our static design in responsive form.

Gotchas

A big gotcha for me was getting the full url of any regular image field on the $page object. The header image in our design needed to be positioned in such a way that required me to create an inline style. With a bit of CSS and some fancy Kirby PHP, I was finally able to achieve my goal.

Other things that took place

Along the way, I create a variety of sass files and imports as well as discussed Sass mixins and how I go about using them in my projects. I included typography from Google Fonts (https://fonts.google.com/) as well as a browser reset style sheet normalize.css (https://necolas.github.io/normalize.css/).

==========

💻 Previously published at: https://web-crunch.com/lets-build-consultancy-website-part-17/

💻 Check out the blog: https://web-crunch.com

💡 👫 Check out my agency: https://coupleofcreatives.com

🚀 Links: Weekly Newsletter: https://web-crunch.com/subscribe Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever Medium: https://medium.com/the-web-crunch-publication

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/books/ptt

📌Recommended Stuff I Use to Shoot Video: Canon EOS Rebel SL1 - http://amzn.to/2m3EZDH Linco Lighting Set - http://amzn.to/2mF8Shs Logitech HD Pro Webcam C920 - http://amzn.to/2mpqzBk Rode NT-USB Condenser Microphone - http://amzn.to/2mFhaG9

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting ... https://www.youtube.com/watch?v=RgqSVYLz50k