Figure Box Scroll down and, within the main element header and after the h1 head

ID: 3727736 • Letter: F

Question

Figure Box Scroll down and, within the main element header and after the h1 heading, insert a figure box containing: the tb_ferris.png inline image with the alternate text Ferris Family using the image map named portrait_map and a figure caption with the text Kathleen Ferris and daughter Linda (1957). Directly below the figure box, create the portrait_map image map containing the following hotspots: a rectangular hotspot pointing to the tb_kathleen.html file with the left-top coordinate (10, 50) and the right-bottom coordinate (192, 223) and alternate text, “Kathleen Ferris” and a circular hotspot pointing to the tb_linda.html file with a center point at (264, 108) and a radius of 80 pixels and the alternate text, Linda Ferris-White.

The Ferris Family

<main>
<header>
<h1>The Ferris Family</h1>

<figure>
<img src=”tb_ferris.png” alt=”Ferris Family” />
<map name="portrait_map">
<img src="tb_kathleen.html" alt="Kathleen Ferris" usemap="portrait_map"/>
<img src="tb_linda.html" alt="Linda Ferris-White"usemap="portrait_map"/>
</map>

can you please help me solve this

Explanation / Answer

Solution:

code:

tb_ferris.html

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="css/tb_base.css" /> 
<link rel="stylesheet" href="css/tb_styles3.css" />
<link rel="stylesheet" href="css/tb_visual3.css" />
<meta charset="utf-8" />
<title>Tree and Book: The Ferris Family</title>
</head>

<body>
<header>
<nav id="topLinks"> <a href="#">Contact Us</a> | <a href="#">My Account</a> </nav>
<img src="images/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>
<figure>
<img src="images/tb_ferris.png" alt="Ferris Family" usemap="portrait_map">
<figcaption>Kathleen Ferris and daughter Linda (1957)</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"> 
</map>
</header>

<article>
<h1>My Mother, Kathleen Ferris</h1>
<p>My mother was a remarkable woman. She was born in 1928 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 1948, a druggist from Omaha. My mother was widowed in
1953 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 2008. 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 © 2017 English (US)</section>
</footer>
</body>
</html>

tb_visual3.css

@charset "utf-8";

/*
Name:
Date:
*/

/* HTML Styles */
html
{
background-image: url(../images/tb_back5.png); /*style rule for the html element to use the image file tb_back5.png as the background */
}

/* Page Body Styles */
body
{
border-right: 3px solid rgb(169, 130, 88); /* adds a left and right 3-pixel solid border with color value rgb(169, 130, 88) */
border-left: 3px solid rgb(169, 130, 88);
box-shadow: 25px 0 35px rgb(53, 21, 0), -25px 0 35px rgb(53, 21, 0); /*box shadow to the right border with a horizontal offset of 25 pixels, a vertical offset of 0 pixels and a 35-pixel blur and a color value of rgb(53, 21, 0), and then adds the mirror images of this shadow to the left border */
}

/* Main Styles */
main
{
background-image: url(../images/tb_back7.png); /*pplies the tb_back7.png file as a background image with a size of 100% covering the entire background with no tiling and positioned with respect to the padding box */
background-size: 100%;
background-position: absolute;
box-shadow: –10px –10px 25px rgb(71, 71, 71); /*adds two inset box shadows, each with a 25-pixel blur and a color value of rgb(71, 71, 71), and then one with offsets of –10 pixels in the horizontal and vertical direction and the other with horizontal and vertical offsets of 10 pixels */
box-shadow: 10px 10px 25px rgb(71, 71, 71);
}

main > header > h1 /*syle rule for the h1 heading within the main header */
{
text-shadow: 1px 1px 0 rgb(221, 221, 221); /* text shadow with the color value rgb(221, 221, 221) and offsets of 1 pixels and no blurring */
text-shadow: 5px 5px 20px rgba(41, 41, 41, 0.9); /* text shadow with the color value rgba(41, 41, 41, 0.9) and offsets of 5 pixels and a 20-pixel blur. */
}

/* Figure Box Styles */
figure
{
margin: 10px auto; /*sets the top/bottom margin to 10 pixels and the left/right margin to auto */
width: 70%; /* Set the width of the element to 70%.*/
}

figure > img /*Create a style rule for the image within the figure box */
{
border-width: 25px; /*sets the border width to 25 pixels*/
border-style: solid; /*sets the border style to solid*/
border-image: url(../images/tb_frame.png) 60 stretch; /* applies the tb_frame.png file as a border image with a slice size of 60 pixels stretched across the sides*/
width: 100%; /*image width of 100%,*/
display: block; /*display image as block*/
filter: sepia(80%); /*applies a sepia tone to the image with a value of 80%*/
-webkit-filter: sepia(80%); /*include the WebKit browser extension in your style sheet*/
}

figure > figcaption /*Create a style rule for the figcaption within the figure box */
{
font-family: Palatino, "Palatino Linotype", "Palatino", "Times New Roman", serif; /*font stack ‘Palatino Linotype’, Palatino, ‘Times New Roman’, serif,*/
font-style: italic; /* font style to italic */
padding: 10px 0; /*sets the top/bottom padding to 10 pixels and the left/right padding to 0 pixels*/
text-align: center; /*centers the text.*/
}

/* Article Styles */
article
{
background-image: url(../images/tb_back6.png); /*isplays the background image file tb_back6.png */
background-position: bottom right; /*placed at the bottom-right corner*/
background-repeat: no-repeat; /* with no tiling */
background-size: 15%; /*size of 15% */
border-right: 8px double rgb(147, 116, 68); /* adds an 8-pixel double border with color value rgb(147, 116, 68) to the right and bottom sides of the article element,*/
border-bottom: 8px double rgb(147, 116, 68);
border-bottom-right-radius: 80px; /* creates a curved bottom-right corner with a radius of 80 pixel*/
box-shadow: inset -10px -10px 25px rgba(184, 154, 112, 0.7); /*adds an interior shadow with horizontal and vertical offsets of –10 pixels, a 25-pixel blur, and a color value of rgba(184, 154, 112, 0.7).*/
}

/* Footer Styles */
footer
{
background: linear-gradient(325deg, rgb(180, 148, 104) 20%, rgb(40, 33, 23) 60%); /*linear gradient background with an angle of 325°, going from the color value rgb(180, 148, 104) with a color stop at 20% of the gradient length to the value rgb(40, 33, 23) with a color stop at 60*/
}

tb_kathleen.html

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<link rel="stylesheet" href="css/tb_base.css" /> 
<link rel="stylesheet" href="css/tb_styles4.css" />
<link rel="stylesheet" href="css/tb_visual4.css" />
<title>Tree and Book: Kathleen Ferris</title>
</head>
<body>
<header>
<nav id="topLinks"> <a href="#">Contact Us</a> | <a href="#">My Account</a> </nav>
<img src="images/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="images/tb_kate1.png" alt="" />
<figcaption>High School Photo (1945)</figcaption>
</figure>
<figure id="figure2"> <img src="images/tb_kate2.png" alt="" id="genta2" />
<figcaption>Before her Beloved Piano (1973)</figcaption>
</figure>
<figure id="figure3"> <img src="images/tb_kate3.png" alt="" id="genta3" />
<figcaption>Still Swimming (2001)</figcaption>
</figure>
<p><a href="tb_ferris.html">Return to the Ferris Family page</a></p>
</article>
<footer>
Tree and Book © 2017 English (US)
</footer>
</body>
</html>

tb_visual4.css

@charset "utf-8";

/*
Name:
Date:

/* Transformation Styles */
article
{
perspective: 800px; /*style rule for the article element to set the size of the perspective space to 800 pixels.*/
}

#figure1
{
transform: translateZ(-120px); /*style rule for the figure1 figure box to translate it –120 pixels along the z-axis.*/
}

#figure2
{
transform: translateY(-20px) rotateY(50deg); /* style rule for the figure2 figure box to translate it –20 pixels along the y-axis and rotate it 50° around the y-axis.*/
}

#figure3
{
transform: translateY(-30px) rotateY(-50deg); /*style rule for the figure3 figure box to translate it –30 pixels along the y-axis and rotate it–50° around the y-axis.*/
}

/* Filter Styles */
#figure1
{
-webkit-filter: saturate(1.3);
filter: saturate(1.3); /*Style rule for the figure1 figure box that applies a saturation filter with a value of 1.3.*/
}

#figure2
{
-webkit-filter: brightness(0.8) contrast(1.5);
filter: brightness(0.8) contrast(1.5); /*style rule for the figure2 figure box that sets the brightness to 0.8 and the contrast to 1.5.*/
}

#figure3
{
-webkit-filter: hue-rotate(170deg) saturate(3) brightness(1.5);
filter: hue-rotate(170deg) saturate(3) brightness(1.5); /* style rule for the figure3 figure box that sets the hue rotation to 170°, the saturation to 3, and the brightness to 1.5.*/
}

I hope this helps if you find any problem. Please comment below. Don't forget to give a thumbs up if you liked it. :)

Navigate

Figure B1 shows two air masses and a front. Study the figure and then select the

Figure E27.42 The circuit shown in Fig. E27.42 is used to make a magnetic bal- b

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Figure Box Scroll down and, within the main element header and after the h1 head

Question

Explanation / Answer

Related Questions

Navigate