References for Monday(2/12)

Here's a link do a version of the template we played with last week, with a few more tweaks, and some color-coding:

https://www.dropbox.com/s/2v82ch3qr125cis/photon-template-color-coded.zip?dl=0

And here are some resources we'll talk about –

FONT RESOURCES

Embedding fonts through Google developer:

https://developers.google.com/fonts/docs/getting_started

Listing of available fonts:

https://fonts.google.com

Where to find it in the template: main.css

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic");

body, input, select, textarea {

color: #666;

font-family: "Source Sans Pro", Helvetica, sans-serif;

font-size: 16pt;

font-weight: 300;

line-height: 1.65em;

}


SPLITTING BODY AND HEADER TEXT:

splitting h1 and body text

h1, h2, input, select, textarea {

color: #666;

font-family: "Lobster", Helvetica, sans-serif;

font-size: 16pt;

font-weight: 300;

line-height: 1.65em;

}

body, input, select, textarea {

color: #666;

font-family: Helvetica, sans-serif;

font-size: 16pt;

font-weight: 300;

line-height: 1.65em;

}

CHANGING THE COLOR OF THE FIRST HEADER TEXT:

COLOR OF HEADER TEXT

set it to blue

#header h1, #header h2, #header h3, #header h4, #header h5, #header h6, #header strong, #header b {

color: blue;

}

CHANGING THE COLOR OF THE HEADER IMAGE AS IT LOADS:

Look for "gradient"

header

#header:after {

-moz-transition: opacity 1s ease;

-webkit-transition: opacity 1s ease;

-ms-transition: opacity 1s ease;

transition: opacity 1s ease;

background-image: linear-gradient(45deg, #f20444, #4361c2);

content: '';

height: 100%;

left: 0;

opacity: 0;

position: absolute;

top: 0;

width: 100%;

}

footer

#footer {

padding: 6em 0 6em 0 ;

background-color: #d12e49;

color: rgba(255, 255, 255, 0.75);

background-attachment: fixed, fixed, fixed;

background-image: url("images/overlay2.png"), url("images/overlay4.svg"), linear-gradient(45deg, #4361c2, #4fa49a 50%, #9dc66b 95%);

background-position: top left, center center, center center;

background-size: auto, cover, cover;

text-align: center;

}