Question

In: Computer Science

An article describing the fresco School of Athens by the Renaissance painter Raphael is shown in...

An article describing the fresco School of Athens by the Renaissance painter Raphael is shown in Figure 2–56. Much of the HTML and CSS code has been created for you. Complete the web page design by adding the missing CSS styles.

Do the Following:

1.Go to the code2-3.html file and within the head section insert link elements linking the page to the code2-3_layout.css and code2-3.css files. Review the contents the files.

2.Open the code2-3.css file. For the html element, set the left padding space to 30 pixels and set the background color to the value hsla(40, 80%, 75%, 0.5).

3. Display all h1 and h2 headings in a Helvetica, Arial, or sans-serif font.

4. For all h1 headings:

  1. Set the font size to 3em,
  2. Set the line height to 1em, and
  3. Set the bottom margin to 0.

5. For all h2 headings:

  1. Set the top margin to 0,
  2. Set the font style to italic, and
  3. Set the font weight to normal.

6. For all inline images, set the top and right margins to 0, the bottom margin to 10px, and the left margin to 20px.

7. For all paragraphs, set the font size to 1.4em and set the text indent to 1em. For the first paragraph, using the first-of-type pseudo-class, set the text indent to 0. For the first line of the first paragraph, set the font variant to small-caps.

***Use the p:first-of-type::first-line pseudo-class and pseudo-element as the selector.***

Pages to be edited

Code2-3.css

@charset "utf-8";

/*

   New Perspectives on HTML5 and CSS3, 8th Edition

   Tutorial 2

   Coding Challenge 3

   Author:

   Date:   

   

   Filename: code2-3.css

*/

Code2-3.html

<!doctype html>

<html lang="en">

<head>

<!--

New Perspectives on HTML5 and CSS3, 8th Edition

Tutorial 2

Coding Challenge 3

Author:

Date:

Filename: code2-3.html

-->

<link href="code2-3_txt.css" rel="stylesheet" />

<meta charset="utf-8">

<title>Coding Challenge 2-3</title>

</head>

<body>

   <article>

      <h1>The School of Athens</h1>

      <h2>By Raphael</h2>

      <img src="code2-3_img.png" alt="School of Athens" />

      <p>The <em>School of Athens</em>, considered by many to be Raphael's

         masterwork, is a fresco representing the greatest minds of

         classical antiquity, gathered together to share their

         thoughts and beliefs. The fresco was painted between 1509 and 1511

         as a part of a commission to decorate the rooms of the

         Stanze di Raffaello in the Apostolic Palace in the Vatican.</p>

      <p>The two center figures, Aristotle and Plato, are key philosophers

         in the development of Western thought. Plato, with his belief in a

         higher realty, points skyward. Within his hands, Plato holds

         the <cite>Timaeus</cite> &mdash; one of Plato's famous dialogs on

         the nature of reality and time. In contrast, Aristotle points

         downward, indicating that he is grounded in a reality that can be

         experienced by sight and touch. In his hands, he holds his

         book <cite>Ethics</cite>, a tome that emphasizes the need for

         justice, friendship, and ethical government.

      </p>

      <p>Other famous philosophers fill the pseudo-architecture. In many cases,

         when Raphael did not have classical images to draw upon, he used

         images of contemporary figures to stand in for their classical

         counterparts. Look for a portrait of Michelangelo on the left-forward

         steps, his thoughts concerned with sketching and art.</p>

   </article>

</body>

</html>

Solutions

Expert Solution

Code_2-3.html

<!doctype html>

<html lang="en">

<head>

<!--

New Perspectives on HTML5 and CSS3, 8th Edition

Tutorial 2

Coding Challenge 3

Author:

Date:

Filename: code2-3.html

-->

<link href="code2-3_layout.css" rel="stylesheet" />
<link href="code2-3.css" rel="stylesheet" />

<meta charset="utf-8">

<title>Coding Challenge 2-3</title>

</head>

<body>

   <article>

      <h1>The School of Athens</h1>

      <h2>By Raphael</h2>

      <img src="code2-3_img.png"  />

      <p>The <em>School of Athens</em>, considered by many to be Raphael's

         masterwork, is a fresco representing the greatest minds of

         classical antiquity, gathered together to share their

         thoughts and beliefs. The fresco was painted between 1509 and 1511

         as a part of a commission to decorate the rooms of the

         Stanze di Raffaello in the Apostolic Palace in the Vatican.</p>

      <p>The two center figures, Aristotle and Plato, are key philosophers

         in the development of Western thought. Plato, with his belief in a

         higher realty, points skyward. Within his hands, Plato holds

         the <cite>Timaeus</cite> &mdash; one of Plato's famous dialogs on

         the nature of reality and time. In contrast, Aristotle points

         downward, indicating that he is grounded in a reality that can be

         experienced by sight and touch. In his hands, he holds his

         book <cite>Ethics</cite>, a tome that emphasizes the need for

         justice, friendship, and ethical government.

      </p>

      <p>Other famous philosophers fill the pseudo-architecture. In many cases,

         when Raphael did not have classical images to draw upon, he used

         images of contemporary figures to stand in for their classical

         counterparts. Look for a portrait of Michelangelo on the left-forward

         steps, his thoughts concerned with sketching and art.</p>

   </article>

</body>

</html>

Code_2-3.css

@charset "utf-8";

/*

   New Perspectives on HTML5 and CSS3, 8th Edition

   Tutorial 2

   Coding Challenge 3

   Author:

   Date:   

   

   Filename: code2-3.css

*/
html{
    padding-left: 30px;
    background-color: hsla(40, 80%, 75%, 0.5);
}
h1,h2{
    font-family: Helvetica, Arial, sans-serif;
}
h1{
    font-size: 3em;
    line-height: 1em;
    margin-bottom: 0;
}
h2{
    margin-top: 0;
    font-style: italic;
    font-weight: normal;
}
img{
    margin: 0 0 10px 20px;
}
p{
    font-size: 1.4em;
}
p:first-of-type{
    text-indent: 0;
}
p:first-of-type::first-line{
    font-variant: small-caps;
}

Related Solutions

Please summarize the article below. Title of Article: School zoning Which school your children attend is...
Please summarize the article below. Title of Article: School zoning Which school your children attend is sometimes dictated by the area you live in, known as school zones. For some parents in New Zealand, school zoning is an important thing to consider when deciding where to buy or rent. This is because our free state-funded education system is designed for students to go to a school within the zone that they live. If you would like your child to attend...
Find and analyze a current article describing a change that is happening in the market for...
Find and analyze a current article describing a change that is happening in the market for a good or service. 1. Description of the product or service that is experiencing a fluctuation in supply or demand. 2. What is currently changing in the market for the good or service? Is it consumer driven or industry driven? 3. Indicate whether it is an increase or decrease in supply or demand. A shift to the right (more) or a shift to the...
The CEO of an organization read a research article describing the importance of generational influence on...
The CEO of an organization read a research article describing the importance of generational influence on work motivation. He is now interested in determining if the distribution of Baby Boomer, Generation X, and Millennial employees is the same across engineering and management positions in his company. Staff in the HR department gather records and provide him with the following information: Employee Age Group Number of Managers Number of Engineers Baby Boomers 28 18 Generation X'ers 36 34 Millennials 21 45...
Find an article in a newspaper or magazine (or the online equivalent) describing a recent study...
Find an article in a newspaper or magazine (or the online equivalent) describing a recent study in which the researchers collected data through observation or an experiment to draw a conclusion. A simple poll (like “43% of Americans like to eat sushi”) is not sufficient; you should be looking for something describing a significant research study. Some examples (don’t limit yourself to these): an experiment testing a new drug or medical procedure a study linking a food or exercise with...
The following sentence appears in the abstract of an article describing a new analytical method, involving...
The following sentence appears in the abstract of an article describing a new analytical method, involving HPLC and AFS for the determination of arsenic compounds in rice: “The method was applied to a market basket of rice samples.” What would you expect to find in the Results and Discussion section of the article to support this statement? a. A table showing the results of the analysis of several rice samples purchase at a local supermarket. b. The results of experiments...
What is the context of the article? (By context, we mean describing the social, political, etc....
What is the context of the article? (By context, we mean describing the social, political, etc. landscape that surrounds a topic or idea) Provide 4 claim made in the following article. Give explanations and evidence to support the claim What was the bias in the following article and explain it Harmonizing nurse education with U.S. hurts Canada's edge ADRIANA BARTON PUBLISHED MAY 12, 2016 A push to "harmonize" nursing education in Canada and the United States may threaten Canada's high...
Who do you think is more complete in describing what it takes for the grade school...
Who do you think is more complete in describing what it takes for the grade school child to develop mastery and competence, Erik Erikson (Industry versus Inferiority) or Albert Bandura (Social Learning Theory and Self-Efficacy)? Defend your answer. Describe Erikson's stage briefly. Describe Bandura's concepts briefly. Compare and contrast them. Decide which is more complete and tell why.
Please find one article describing Enron's use of SPE's and on how this altered investor's and...
Please find one article describing Enron's use of SPE's and on how this altered investor's and analyst's perception of the company's economic health? Cite your source.
Find a recent article or video describing the competition between two or more businesses. Post a...
Find a recent article or video describing the competition between two or more businesses. Post a link to the article or video in the discussion thread and answer the following questions: What are the competing businesses and what products do they sell? Which company do you believe is winning the competition? Why?
Your task is to write an article describing the differences you have found or noticed so...
Your task is to write an article describing the differences you have found or noticed so far between C++ and Java. First you should go through the W3schools C++ tutorials as described in the week’s description, taking some notes about the differences between C++ and Java as you do so. Then, you should write your document. Your document does not need to be long, but it should be well-written. Imagine that you are writing this for Java programmers who want...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT