Question

In: Computer Science

Use CSS to format the appearance of a web page containing several literary quotes marked as...

Use CSS to format the appearance of a web page containing several literary quotes marked as blockquote elements. Figure 2–54 shows a preview of the formatted page.

Figure 2-54

Do the following:

1.Open the files code2-1.html and code2-1.css and in the comment section enter your name (First + Last) and the date (MM/DD/YYYY) into the Author: and Date: fields of each file.

2. Go to the code2-1.html file and within the head section insert a link element linking the page to the code2-1.css file. Review the contents.

3.In the code2-1.css file create a style rule for the h1 element that sets the font-size property to 3.5em and sets the line-height property to 0em.

4.Create a style rule for h1 and h2 elements that applies the fonts Helvetica, Arial, sans-serif to the font-family property and sets the letter-spacing property to 0.1em.

5. Create a style rule for the blockquote element that sets the color property to the value hsl(30, 85%, 45%) and sets the font-size property to 1.5em. Also, create a style for the first letter of the blockquote element that sets the font-size property to 1.5em.

6. Create a style for the footer element that:

  1. Centers the text by setting the text-align property to center,
  2. Sets the font-size property to 2em,
  3. Sets the color property to white, and
  4. Sets the background-color property to the color value hsl(30, 85%, 45%).

7. Open the code2-1.html file in browser preview, verifying that the page resembles that shown in Figure 2–54 (aside from the line length which depends on the width of your browser window.)

Pages to be edited:

code2-1.css:

@charset "utf-8";

/*

   New Perspectives on HTML5 and CSS3, 8th Edition

   Tutorial 2

   Coding Challenge 1

   Author:Alexandria Woodson

   Date:   10/6/2020

   

   Filename: code2-1.css

code2-1.html:

<!doctype html>

<html lang="en">

<head>

   <!--

   New Perspectives on HTML5 and CSS3, 8th Edition

   Tutorial 2

   Coding Challenge 1

   

   Author:

   Date:

   Filename: code2-1.html

   -->

   <meta charset="utf-8">

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

</head>

<body>

   <h1>Literary Excerpts</h1>

   <h2>A Selection of Great Prose</h2>

   <blockquote>

      We are the music-makers, And we are the dreamers of dreams, Wandering

      by lone sea-breakers, And sitting by desolate streams. World-losers and

      world-forsakers, Upon whom the pale moon gleams; Yet we are the movers

      and shakers, Of the world forever, it seems.<br />

      &mdash; <cite>Arthur O’Shaughnessy, Poems of Arthur O’Shaughnessy</cite>

   </blockquote>  

   <blockquote>

      I took a deep breath and listened to the old brag of my heart.

      I am, I am, I am.<br />

      &mdash; <cite>Sylvia Plath, The Bell Jar</cite>

   </blockquote>

   <blockquote>

      The most beautiful things in the world cannot be seen or touched, they

      are felt with the heart.<br />

      &mdash; <cite>Antoine de Saint-Exup&eacute;ry, The Little Prince</cite>

   </blockquote>   

   <blockquote>

      Stuff your eyes with wonder, he said, live as if you’d drop dead in ten

      seconds. See the world. It’s more fantastic than any dream made

      or paid for in factories.<br />

      &mdash; <cite>Ray Bradbury, Fahrenheit 451</cite>

   </blockquote>

   

   <footer>

      The Word Factory

   </footer>

    

</body>

</html>

Solutions

Expert Solution

Kindly upvote if this helped

HTML

<!doctype html>

<html lang="en">

<head>

  <link rel="stylesheet" href="code2-1.css">

   <meta charset="utf-8">

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

</head>

<body>

   <h1>Literary Excerpts</h1>

   <h2>A Selection of Great Prose</h2>

   <blockquote>

      We are the music-makers, And we are the dreamers of dreams, Wandering

      by lone sea-breakers, And sitting by desolate streams. World-losers and

      world-forsakers, Upon whom the pale moon gleams; Yet we are the movers

      and shakers, Of the world forever, it seems.<br />

      &mdash; <cite>Arthur O’Shaughnessy, Poems of Arthur O’Shaughnessy</cite>

   </blockquote>  

   <blockquote>

      I took a deep breath and listened to the old brag of my heart.

      I am, I am, I am.<br />

      &mdash; <cite>Sylvia Plath, The Bell Jar</cite>

   </blockquote>

   <blockquote>

      The most beautiful things in the world cannot be seen or touched, they

      are felt with the heart.<br />

      &mdash; <cite>Antoine de Saint-Exup&eacute;ry, The Little Prince</cite>

   </blockquote>   

   <blockquote>

      Stuff your eyes with wonder, he said, live as if you’d drop dead in ten

      seconds. See the world. It’s more fantastic than any dream made

      or paid for in factories.<br />

      &mdash; <cite>Ray Bradbury, Fahrenheit 451</cite>

   </blockquote>

   

   <footer>

      The Word Factory

   </footer>

    

</body>

</html>



CSS:

* Name of CSS file should be code2-1.css

h1{
        font-size:3.5em;
        line-height:0em;
}

h1,h2{
        font-family:Helvetica, Arial, sans-serif;
        letter-spacing:0.1em;
}

blockquote{
    color: hsl(30, 85%, 45%);
        font-size:1.5em;
}

blockquote:first-letter{
        font-size:1.5em;
}

footer{
        text-align:center;
        font-size:2em;
        color:#ffffff;
        background-color:hsl(30, 85%, 45%);
}



Final output

venereology answered 1 day ago
Next > < Previous

Related Solutions

use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
Debug3-4.css You’ve been given the initial HTML and CSS code for this web page, but there...
Debug3-4.css You’ve been given the initial HTML and CSS code for this web page, but there are several errors in the CSS stylesheet. Use your knowledge of CSS to locate and fix the errors. The body element should have a width that is 90% of the width of the browser window ranging from a minimum of 600 pixels up to a maximum of 1024 pixels. Fix the syntax errors in the body style rule that defines the width of the...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...
Build a web page using an external CSS file based on the following specifications : a)...
Build a web page using an external CSS file based on the following specifications : a) The page must have a breaking point at 768px (desktop/mobile). b) The three sections contents (header, main and footer) must be full-width and no larger than 960px (horizontally centered block). Ma c) Header must be 80px high, full width and fixed and will show your name on the left /5 side. The burger icon should appear when the browser’s window is 768px or lower....
Use external CSS and Javascript files. Use the HTML5 elements to layout the page. In a...
Use external CSS and Javascript files. Use the HTML5 elements to layout the page. In a sidebar include an advertisement that changes its image every three seconds. The can be created in paint and be very simple or more detailed.
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT