Quotes displaying web page.

I found that I was able to access training courses at work so I decided to go through the web page/ Javascript path. This will be the first of I hope many small projects I do to use and understand what I am learning in the courses.

Each quote will be in an individual frame. Each frame has a unique picture as a background. The quote and author are displayed over the background in opaque sections having rounded corners and a colored background. The quote and author sections will have different background colors. I will use a Google font to ensure I have the font I want, regardless of the display system.

The top quote is displayed in the signage window for nine seconds and then slid up and hidden so the next quote can be viewed for nine seconds. After all quotes have been displayed there is a three second period of no quotes visible and then the page reloads at thirty seconds to start over.

Following is the style sheet, commented so you can understand what I am doing. Then the HTML of the page, again commented to help you to understand what is going on.

html {
/* Set the default font family, in case the Google font does not load. */
font-family: sans-serif;
}

body {
/* Set the background color for the page outside of the frames. */
background-color: #00303f;
}

h1 {
/* Select a font from Google first, then a secondary. */
font-family: ‘Roboto Condensed’, sans-serif;
/* Then it’s color. */
color: #dcae1d;
/* and it’s size. */
font-size: 50px;
}

#q00 {
/* The base folder for reference is css. Calls to images must be this way */
background: url(“../images/teddy-kelley-69798-unsplash.jpg”);
/* Causes the image to cover to the bottom of the div, then clipped at right side. */
background-size: cover;
/* Causes the image to not repeat if smaller than the div */
background-repeat: no-repeat;
}

#q01 {
background: url(“../images/diego-ph-249471-unsplash.jpg”);
background-size: cover;
background-repeat: no-repeat;
}

#q02 {
background: url(“../images/richard-r-schunemann-553253-unsplash.jpg”);
background-size: cover;
background-repeat: no-repeat;
}

.frame {
/* Select a font from Google first, then a secondary. */
font-family: ‘Roboto Condensed’, sans-serif;
/* I set a background color in case there is a problem with the image. */
background-color: #cae4db;
/* I prefer to specify each corner for clarity. */
border-radius: 20px 20px 20px 20px;
/* A small separation between frames. */
margin-bottom: 10px;
/* move the quote in from the edge. */
padding: 25px ;
/* Set the frame to 400 pixels wide. */
width: 400px;
/* Set the frame to 599 pixels high. */
height: 599px;
}

.quote {
font-family: ‘Finger Paint’, cursive;
font-size: 25px;
background-color: #7a9d96 ;
border-radius: 20px 20px 20px 20px;
border-top: 10px;
padding: 10px;
align-content: center;
/* Causes the quote to be on the left of the frame. */
float:left;
}

.author {
font-family: ‘Mystery Quest’, cursive;
font-size: 22px;
background-color: #dcae1d ;
margin-top: 20px;
border-radius: 20px 20px 20px 20px;
padding: 10px;
align-content: center ;
/* Causes the author to be on the right and under the quote. */
/* This will be under the quote due to the order in the html file. */
float: right;
}

<!DOCTYPE html>
<html lang=”en-US”>
<!– I will comment this page and the css file heavily so you know what I was thinking –>
<!– Created by Jerry Coffey –>
<!– http://thetwidgetlog.com –>
<!– 7/25/2018 – as a page to display quotes on the –>
<!– Shasta College signage system. –>
<head>
<title>Words of Wisdom</title>

<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”content-type”>

<meta charset=”UTF-8″>

<!– I set the page to restart in 30 seconds with this meta tag –>
<meta http-equiv=”refresh” content=”30″>

<!– I wanted different fonts for the quotes and this ensures they are available –>
<link href=”https://fonts.googleapis.com/css?family=Finger+Paint|Mystery+Quest|Roboto+Condensed” rel=”stylesheet”>

<!– Call the external stylesheet –>
<link rel=”stylesheet” href=”css/style.css” type=”text/css” media=”all”>

<!– We need to load jquery for the sliding up effect –>
<script src=”jss/jquery-3.1.1.min.js”></script>

</head>

<body>

<h1>Words of Wisdom.</h1>
<!– The comments in this first frame div will be the example for other frames. –>

<div id=”q00″ class=”frame”>
<!– The class frame is to allow a style setting common to all quotes. –>
<!– The id q00 is to allow a style setting unique to this div. –>
<!– The frame div constrains the quote and author div’s by a css setting. –>

<!– The class quote allows a style setting common to all quotes. –>
<div class=”quote”>
<!– The quote div will be the first of two in the frame and floated left by css. –>
<!– Place the quote you wish displayed here. –>
<p>The most difficult thing is the decision to act, the rest is merely tenacity. The fears are paper tigers. You can do anything you decide to do. You can act to change and control your life; and the procedure, the process is its own reward.</p>

</div>

<br>

<!– The class author allows style settings common to all authors. –>
<div class=”author”>
<!– The author div will be under the quote and floated right by css. –>
<!– Place the author of the quote here. –>
<p>Amelia Earhart</p>

</div>

</div> <!– Ends the first frame div. –>

<div id=”q01″ class=”frame”>

<div class=”quote”>
<p>You do what you can for as long as you can, and when you finally can’t, you do the next best thing. You back up but you don’t give up.
</div>
<br>
<div class=”author”>
<p>Chuck Yeager</p>

</div>

</div>

<div id=”q02″ class=”frame”>

<div class=”quote”>
<p>Tell me and I forget. Teach me and I remember. Involve me and I learn.</p>

</div>
<br>
<div class=”author”>
<p>Benjamin Franklin</p>

</div>

</div>

<script>
// This is the Javascript that will slide each frame up.
// It is using the id to delay the slide for each by multiples of 9 seconds.
// The slide up will take 700 millisecond’s.
{
$(“#q00”).delay(9000).slideUp(700);
$(“#q01”).delay(18000).slideUp(700);
$(“#q02”).delay(27000).slideUp(700);
}

</script>
</body>

</html>