MND Header #04 Documentation

• Images
• Site Title & URL
• Styling
• Last Steps
• Browsers

ImagesBack to top

• The header images can be changed by simply replacing the header1.jpg, header2.jpg, and header3.jpg with your own in the images folder.
• The images sizes are 526px wide by 500px high.

Site Title & URLBack to top

• To add your site title in the header: Open index.html in your favourite editor → Search and edit <h1 class="site-title">. Use the <span> tag for the special effect.
• To add your site URL in the header: Open index.html in your favourite editor → Search and edit <div class="site-url">.

StylingBack to top

• The color blended over header1 and header3 can be changed in style.css - locate the classes header1 and header3. RGB value must be used, in order to make opacity work. The RGB value of a color can be found using sites like ColorHexa - replace the first 3 values in the background-color. The forth value is the opacity, you can change it to suit your header.
• In the Site Title + URL section in style.css you can change the colors, fonts, sizes for the website name and site URL.

Last StepsBack to top

• Make a screenshot of the page.
• Open/copy the screenshot in an image editor like XnView.
• Crop the header at the dimensions you want, then save it as .jpg or .png.

BrowsersBack to top

The background-blend-mode used for the color filters over the header images is supported by the latest versions of Firefox and Chrome.
A full display of browsers supporting this CSS effect can be found at CanIUse.com.

The clip-path used to create the slanted effect is supported by the latest versions of Firefox and Chrome.
A full display of browsers supporting this CSS effect can be found at CanIUse.com.