Untitled
unknown
plain_text
3 months ago
8.7 kB
5
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 4
Review Assignment
Photo Page of Kathleen Ferris
Author: John Robert Cabatbat
Date: 01/31/2025
Filename: tb_kathleen.html
-->
<meta charset="utf-8" />
<title>Tree and Book: Kathleen Ferris</title>
<link href="tb_base.css" rel="stylesheet" />
<link href="tb_styles4.css" rel="stylesheet" />
<link href="tb_visual4.css" rel="stylesheet" />
</head>
<body>
<header>
<nav id="topLinks"> <a href="#">Contact Us</a> | <a href="#">My Account</a> </nav>
<img src="tb_logo2.png" alt="Tree and Book" />
<nav class="horizontal" id="mainLinks">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Directory</a></li>
<li><a href="#">Geneology</a></li>
<li><a href="#">Search</a></li>
</ul>
</nav>
</header>
<article>
<h1>Kathleen Ferris</h1>
<figure id="figure1"> <img src="tb_kate1.png" alt="" />
<figcaption>High School Photo (1949)</figcaption>
</figure>
<figure id="figure2"> <img src="tb_kate2.png" alt="" />
<figcaption>Before her Beloved Piano (1977)</figcaption>
</figure>
<figure id="figure3"> <img src="tb_kate3.png" alt="" />
<figcaption>Still Swimming (2005)</figcaption>
</figure>
<p><a href="tb_ferris.html">Return to the Ferris Family page</a></p>
</article>
<footer>
Tree and Book © 2021 English (US)
</footer>
</body>
</html>
@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 4
Review Assignment
Individuals Design Style Sheet at Tree and Book
Author: John Robert Cabatbat
Date: 01/31/2025
Filename: tb_visual4.css
*/
/* Transformation Styles */
article{
perspective: 800px;
}
.figure1{
transform: translateZ(-120px);
}
.figure2{
transform: translateY(-20px) rotateY(50deg);
}
.figure3{
transform: translateY(-30px) rotateY(-50deg);
}
/* Filter Styles */
.figure1{
filter: saturate(1,3);
}
.figure2{
filter: brightness(0.8) contrast(1.5);
}
.figure3{
filter: hue-rotate(170deg) saturate(3) brightness(1.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 4
Review Assignment
Home Page of the Ferris Family Page at Tree and Book
Author: John Robert Cabatbat
Date: 01/31/2025
Filename: tb_ferris.html
-->
<meta charset="utf-8" />
<title>Tree and Book: The Ferris Family</title>
<link rel="stylesheet" href="tb_base.css">
<link rel="stylesheet" href="tb_style3.css">
<link rel="stylesheet" href="tb_visual3.css">
</head>
<body>
<header>
<nav id="topLinks"> <a href="#">Contact Us</a> | <a href="#">My Account</a> </nav>
<img src="tb_logo2.png" alt="Tree and Book" />
<nav class="horizontal" id="mainLinks">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Directory</a></li>
<li><a href="#">Genealogy</a></li>
<li><a href="#">Search</a></li>
</ul>
</nav>
</header>
<main>
<header>
<h1>The Ferris Family</h1>
</header>
<figure>
<img srcs="tb_ferris.png" alt="Ferris Family" usemap="#portrait_map">
<figcaption>kathleen Ferris and daughter Linda (1961)</figcaption>
</figure>
<map name="portrait_map">
<area shape="rect" coords="10,50,192,223" href="tb_kathleen.html" alt="Kathleen Ferris">
<area shape="circle" coords="264,108,80" href="tb_linda.html" alt="Linda Ferris-White">
<article>
<h1>My Mother, Kathleen Ferris</h1>
<p>My mother was a remarkable woman. She was born in 1932 in Sterling, Nebraska. Her parents,
Tom and Wyma Lewis, were farmers. From them she learned the virtues of hard work and
perseverance. She met and married
Paul Ferris in 1952, a druggist from Omaha. My mother was widowed in
1957 when Paul was killed in an automobile accident. Alone, my mom supported the family
and raised me, with the help of wonderful friends and family.</p>
<p>She started as a cashier at the local Sears. Within a few months she was
a shift manager and few years after that she had risen up the ranks to be a district manager.
She broke more than a few glass ceilings in her climb up the corporate ladder. Yet she
always had time for me and for her charity work. She knew what it was to be hungry and
she knew that what we do for others is what will endure after we're gone.</p>
<p>She was a sportswoman: an avid golfer and swimmer. We often would travel to
Colorado to hike and camp in the mountains; but mother felt that continuing education was the
key to happiness. She earned a Master's degree in Business when she was 43 and never
stopped taking classes at the local college in subjects ranging from
corporate law to ancient pottery. She nurtured my passion for writing and everything
I write is ultimately a too-distant echo of her words.</p>
<p>My mother passed away in 2012. I miss her.</p>
<p><cite>— Linda Ferris-White</cite></p>
</article>
</main>
<footer>
<nav class="vertical">
<ul>
<li><a href="#">Family Histories</a></li>
<li><a href="#">Family Trees</a></li>
<li><a href="#">Galleries</a></li>
<li><a href="#">Calendars</a></li>
<li><a href="#">Forums</a></li>
</ul>
</nav>
<nav class="vertical">
<ul>
<li><a href="#">Getting Started</a></li>
<li><a href="#">Genealogy FAQ</a></li>
<li><a href="#">Research Sites</a></li>
<li><a href="#">Interest Groups</a></li>
<li><a href="#">Government Sites</a></li>
</ul>
</nav>
<nav class="vertical">
<ul>
<li><a href="#">About Tree and Book</a></li>
<li><a href="#">Developers</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Help</a></li>
</ul>
</nav>
<section>Tree and Book © 2021 English (US)</section>
</footer>
</body>
</html>
@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 4
Review Assignment
Design Style Sheet for Tree and Book Family Home Page
Author: John Robert Cabatbat
Date: 01/31/2025
Filename: tb_visual3.css
*/
/* HTML Styles */
html{
background-image: url('tb_back5.png');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* Page Body Styles */
body{
border-left: 3px solid rgb(169, 130, 88);
border-right: 3px solid rgb(169, 130, 88);
box-shadow: 25px 0px 35px rgb(53, 21, 0), -25px 0px 35px rgb(53, 21, 0);
}
/* Main Styles */
main {
background-image: url('tb_back7.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-origin: padding-box;
box-shadow: inset -10px -10px 25px rgb(71, 71, 71), inset 10px 10px 25px rgb(71, 71, 71);
}
main header h1 {
text-shadow: 1px 1px 0px rgb(221, 221, 221), 5px 5px 20px rgba(41, 41, 41, 0.9);
}
/* Figure Box Styles */
figure {
margin: 10px auto;
width: 70%;
}
figure img{
border-width: 25px
border-style solid;
border-image: url('tb_framepng') 60 strech;
display: block;
width: 100%;
filter: sepia(80%);
-webkit-filter: sepia(80%);
}
figcaption{
font-family: 'platino Linotype', Palatino, 'Times New Roman', serif;
font-style: italic;
padding: 10px 0;
text-align: center;
}
/* Article Styles */
article{
background-image: url('tb_back6.png');
background-position: bottom right;
background-size: 15%;
background-repeat: no-repeat;
border-right: 8px double rgb(147, 116, 68);
border-bottom-right-radius: 80px;
box-shadow: inset -10px -10px 25px rgba(184, 154, 112, 0.7);
}
/* Footer Styles */
footer{
background:linear-gradient(325deg, rgb(180, 148, 104) 20%, rgb(40, 33, 23) 60%);
}Editor is loading...
Leave a Comment