Untitled

 avatar
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 &copy; 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>&mdash; 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 &copy; 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