Today we'll have you start to unpack a parallax template. These are the things I want you to modify:
1. Top three images
2. Header font (use a different google api font, and change the color)
3. Text for the first few paragraphs (you can copy and paste from other sources)
4. Swap out different icons, and change their color
Here are some sources:
Original template download page:
https://html5up.net/photon
Modified template download page (this is the one to use for class):
https://www.dropbox.com/s/dlrmc2q3hcbcz9p/photon-template-color-coded.zip?dl=0
Font awesome reference:
https://www.w3schools.com/icons/fontawesome_icons_intro.asp
Complete list of font awesome icons:
http://astronautweb.co/snippet/font-awesome/
Here's a link to a parallax template, with a few 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:
Listing of available fonts:
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: yellow;
}
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;
}
https://www.nytimes.com/video/opinion/100000006188102/what-is-pizzagate.html
Websites of fact-checking organizations that Facebook has used to evaluate news sources:
https://www.snopes.com
https://www.factcheck.org
https://www.politifact.com
No comments:
Post a Comment