This is a responsive web page that showcases a selection of Google Fonts. The page uses an on-load keyframe animation and, for on-scroll animations, the AOS Javascript library from Michal Snik. You can display a finished version of this project on GitHub by clicking the image below.
You can view the HTML and CSS project files on this CodePen.
At the end of this Chapter you will be able to:
Change the background colour of the page
Add background colour classes to the six container divs
Change the container headings and text colours
Add a selection of Google Fonts
Add an on-load animation to the web page
Add an on-scroll animation to the web page
Download the on-scroll animation files
Your first step is to create on your computer a folder that will store the HTML file, CSS file and JavaScript file needed to complete this project.
A new file is created in a tab of Sublime Text named 'untitled'.
See the Pen gEBwZM by Brendan Munnelly (@brendanmun) on CodePen.
The HTML file will be at the following location on a Windows PC.
file:///C:/websites/animation/index.html
In your web browser, the web page will look like that below.
Let's examine the contents of the two files – the index.html web page and the animation.css stylesheet.
When you look inside the index.html you can see six 'boxes' of content. Each 'box' is wrapped in a <div> and each <div> has the same class name of container.
At the top of the index.html file is a <h1> main heading.
From the animation.css stylesheet, you can see that the h1 heading is centered and bold. For desktop screens, its font-size is 54px. For mobiles the font-size of h1 is reduced 36px. It also has top, right, bottom and left margins that are different for desktop and mobile screens.
Also in the animation.css file, you can see that the .container class has margin values that create 'whitespace' at the left, right and bottom of each box, and also padding values that prevent the box content from bleeding against the box edges.
/* ==== CONTENT CONTAINERS ==== */
/* Desktop */
@media all and (min-width:768px) {
.container {
width: 60%;
margin: 0 auto 6% auto;
padding: 3% 5% 3% 5%;
}
}
/* Mobiles */
@media all and (max-width:767px) {
.container {
width: 80%;
margin: 0 auto 10% auto;
padding: 5% 6% 5% 6%;
}
}
In the index.html file, parts of the <h2> sub-headings are in bold and italic, and parts of the <p> text paragraphs are in bold or italic.
<h2><i>A Tale of Two Cities</i>, by Charles Dickens</h2>
....
<p><b>It was the spring of hope, ... </b></p>
<p><i>We had everything before us, ...</i></p>
It is important, therefore, that when you select Google Fonts later in this project, you include the bold and italic font weight and styles
Under the <h2> sub-heading in each 'box' within the index.html file, the first sentence of the first paragraph is wrapped in an inline <span> tag named uppercase.
<p><span class=uppercase">It was the best of times, it was the worst of times.</span>.
It was the age of wisdom, it was the age of foolishness. It was the season of Light,
it was the season of Darkness.<p>
In the stylesheet, you can see that this selector ensures that text it contains is always displayed in UPPERCASE characters.
/* ==== PARAGRAPH TEXT INSIDE CONTAINERS ===== */
.container p { font-weight: normal }
.container p.uppercase { text-transform: uppercase }
Let's begin with an easy task: changing the background colour of the entire web page.
/* ==== UTILITY CLASS ==== */
.img-fluid { width: 100%; height: auto }
/* ==== BODY ==== */
body { background-color: #ffb8b8 }
In the animation.css file are six selectors that each performs only one task: they add a background-color. They have class names such as .bg-purple, .bg-blue and so on. Let's apply these six selectors, one-by-one, to the six 'boxes' in the web page.
<div class="container bg-purple">
...
</div>
<div class="container bg-blue">
...
</div>
<div class="container bg-pink">
...
</div>
<div class="container bg-black">
...
</div>
<div class="container bg-brown">
...
</div>
<div class="container bg-yellow">
...
</div>
.bg-purple h2, .bg-purple p { font-family: 'PT Serif', sans-serif }
.bg-blue h2, .bg-blue p { font-family: 'Raleway', sans-serif }
.bg-pink h2, .bg-pink p { font-family: 'Playfair Display', serif }
<link href="https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i" rel=stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:500,500i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i" rel="stylesheet">
/* ==== CONTENT CONTAINERS ==== */
.container { box-shadow: 7px 7px 5px #808080 }
The stylesheet does not set any font-color for the <h1> main heading, <h2> sub-headings or <p> text paragraphs for the page content. As a result, the CSS applies the default colour of black (#000) to all these elements. Because the black text is difficult to read in the containers that now have coloured backgrounds, let's change this as follows.
/* ==== HEADING AND TEXT COLOURS ==== */
.container h2, .container p { color: #fff }
/* ==== HEADING AND TEXT COLOURS ==== */
.container h2, .container p { color: #fff }
.bg-yellow h2, .bg-yellow p { color: #000 }
In this next step, you will add three more Google Fonts to the three already specified in the HTML and CSS files. These will be Roboto Condensed, Merriweather and Source Sans Pro. Follow the steps below.
Click on the font drawer to open it. The font drawer should now look as follows.
Note that, in CSS, font-weight: 300 is the same as font-weight: normal, and font-weight: 700 is the same as font-weight: bold.
<link href="https://fonts.googleapis.com/css?family=
Merriweather:400,400i,700,700i|
Roboto+Condensed:400,400i,700,700i|
Source+Sans+Pro:400,400i,700,700i" rel="stylesheet">
</head>
/* ==== GOOGLE FONTS ==== */
.bg-purple h2, .bg-purple p { font-family: 'PT Serif', sans-serif; }
.bg-blue h2, .bg-blue p { font-family: 'Raleway', sans-serif; }
.bg-pink h2, .bg-pink p { font-family: 'Playfair Display', serif }
.bg-black h2, .bg-black p { font-family: 'Roboto Condensed', sans-serif }
.bg-brown h2, .bg-brown p { font-family: 'Merriweather', serif; }
.bg-yellow h2, .bg-yellow p { font-family: 'Source Sans Pro', sans-serif }
The three CSS selectors of .bg-black, .bg-brown and .bg-yellow should now be associated with the three Google Fonts of Roboto Condensed, Merriweather and Source Sans Pro.
As a result, the content of the 'boxes' with these background colours should be displayed in these fonts. Check that the fonts display correctly before moving on to the next step of this project.
In this section, you will add an animation effect to the main <h1> heading that appears whenever the web page is loaded. To generate the CSS code required for the animation effect, you will use the Animista website created by Ana Travas.
On-load animations are generally applied to elements located at the top of the web page. This is because the top of the web page is typically the only part visible to the user when they load the page.
<body>
<h1 class="slide-in-top">Google Fonts Showcase</h1>
0% {
-webkit-transform: translateY(-200px);
transform: translateY(-200px);
opacity: 0;
}
...
0% {
-webkit-transform: translateY(-200px);
transform: translateY(-200px);
opacity: 0;
}
In this section, you will add an animation effect to the 'boxes of fonts' that is displayed whenever the user scrolls down through the web page. You will not apply this effect to the first box, only to the remaining five
To generate the effect, you will use the AOS CSS file and Javascript code created by Michal Snik.
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>AOS.init();</script>
<div class="container bg-blue" data-aos="fade-up" data-aos-duration="1200">
In this step you will download to your computer the CSS and JS files you used to create the on-scroll animation effects in the previous step of the project above.
<link href="assets/css/aos.css" rel="stylesheet">
<script src="assets/js/aos.js"></script>
<script>AOS.init();</script>
In the <head> of your web page, within the <title> and <author> meta tags, is the name 'Mary Smith.' Replace this with your own name, and save the HTML file.
Near the top of your HTML file, just before the closing </head> tag, paste your website's unique tracking code from Google Analytics.
Each Google Tracking Code will have a unique ID in its first and last line. When finished, save the HTML file.
To check your HTML is correct, use the official W3C Markup Validation Service. Follow these steps.
Open a new tab in your web browser, and in Google Search, type in and search for the following:
Illegal character in query: | is not allowed
The first search results you should see are from a website named Stack Overflow. This is a free question-and-answer service for all types of software issues, including problems related to HTML and CSS.
<link href="https://fonts.googleapis.com/css?family=
Merriweather:400,400i,700,700i%7CRoboto+Condensed:400,400i,700,700i%7CSource+Sans+Pro:400,400i,700,700i" rel="stylesheet">
</head>
To check your CSS is correct, use the official W3C CSS Validation Service. Follow these steps.
The final step is to upload your project to GitHub. Follow these steps.
Click the dropdown list named Branch: master. If a branch named gh-pages is listed, select it. If does not already exist, in the box type, gh-pages, and then click under it to confirm.
You must use this 'gh-pages' branch (and not the 'master' branch) for all future uploads to your animation repository.
You must use this 'gh-pages' branch (and not the 'master' branch) for all uploads to your animation repository.
Note that in future, when you click the animation repository, the 'master' branch will be selected by default. So, before uploading files or folders to the animation repository, you must click the dropdown list and select the 'gh-pages' branch instead.
Now, drag-and-drop the following file and folder to upload them to your GitHub account.
Your website is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:
https://username.github.io/animation/index.html
or, simply:
https://username.github.io/animation
It may take a few minutes for your uploaded files to appear on GitHub.
Return to the Web Projects Main Page.