299: background-size: cover; and Multiple pages to one CSS case

Fills entire page with image, no white space

<html class="home-bg">

<html class="about-bg">

/* sets base style for each page */
html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

/* set background image per page */
.home-bg {
background: url(images/home-bg.jpg) no-repeat center center fixed;
}
.about-bg {
background: url(images/about.bg.jpg) no-repeat center center fixed;
}
Advertisements

299: How to Set-up Font on CodePen

https://fonts.google.com/?query=playf&selection.family=Playfair+Display:900|Roboto:300

Click HTML Gear and place the following link in the Stuff for <head> box.

<link href=”https://fonts.googleapis.com/css?family=Playfair+Display:900|Roboto:300” rel=”stylesheet”>

Then add the following two lines in the style.css file at the appropriate place to declare the fonts.

font-family: ‘Roboto’, sans-serif;
font-family: ‘Playfair Display’, serif;

For example,

h1 {
font-family: ‘Playfair Display’, serif;
font-weight: 900;
font-size: 72px;
}