At a minimum, your site should contain the following: 1. Using CSS to center all of the content on your page in a container with a width of 80% (See Hands-on Practice 3.9). Note: the container should be centered, not the text content. 2. Break the normal flow of the page so that your content displays something like this wireframe: headings unordered list items ordered list items paragraphs and link You have some creative freedom here. Just be sure to break the normal flow using float or absolute positioning so that two structural elements are side-by- side. Review Chapter 6.7 3. Apply pseudo-class CSS style to your hyperlink (:link, :visited, :hover) 4. Make sure that all files (HTML and CSS) validate.

New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Patrick M. Carey
Chapter3: Designing A Page Layout: Creating A Website For A Chocolatier
Section3.2: Visual Overview: Page Layout Grids
Problem 9QC
icon
Related questions
Question
body { background-color:rgb(207, 201, 186);
    color:rgb(26, 12, 2);
    margin: 15px;
    padding: 10px;
    margin-right:50px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}

h1 {  font-size:  32px;
text-align: center;
margin-top: 2em;
padding: top 50px;
text-transform:uppercase;}

a:link {
    color:rgb(26, 12, 2) ;
    font-size:29px;
   
}

a:hover {
    color:rgba(80, 44, 18, 0.555);
}

a:active {
    color:rgba(196, 139, 99, 0.555);
}


h2 {
    font-size: 20px;
}

h3 {
    font-size:larger;
    margin: 20px;
    padding-top: 10px;
}

h4 {
    font-size: large;
    margin: 20px;
}

ul{
    font-size:20px;
    margin-left: 20px;
}

li{
    font-size:20px ;
    margin-left: 15px;
}

p {
font-size:25px;
padding: 5%;
text-align:center;
box-shadow:4px 4px 6px #000000;
border-color: antiquewhite;
border-radius: 15px;
}

img {
    position: absolute;
    top: 50%;
    right:10%;
   opacity: 85%;
   border-radius: 10px;
   box-shadow:4px 4px 6px #000000;
}
   
 
CSS:
 
body { background-color:rgb(207, 201, 186);
    color:rgb(26, 12, 2);
    margin: 15px;
    padding: 10px;
    margin-right:50px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}

h1 {  font-size:  32px;
text-align: center;
margin-top: 2em;
padding: top 50px;
text-transform:uppercase;}

a:link {
    color:rgb(26, 12, 2) ;
    font-size:29px;
   
}

a:hover {
    color:rgba(80, 44, 18, 0.555);
}

a:active {
    color:rgba(196, 139, 99, 0.555);
}


h2 {
    font-size: 20px;
}

h3 {
    font-size:larger;
    margin: 20px;
    padding-top: 10px;
}

h4 {
    font-size: large;
    margin: 20px;
}

ul{
    font-size:20px;
    margin-left: 20px;
}

li{
    font-size:20px ;
    margin-left: 15px;
}

p {
font-size:25px;
padding: 5%;
text-align:center;
box-shadow:4px 4px 6px #000000;
border-color: antiquewhite;
border-radius: 15px;
}

img {
    position: absolute;
    top: 50%;
    right:10%;
   opacity: 85%;
   border-radius: 10px;
   box-shadow:4px 4px 6px #000000;
}
   
At a minimum, your site should contain the following:
1. Using CSS to center all of the content on your page in a container with a width
of 80% (See Hands-on Practice 3.9). Note: the container should be centered,
not the text content.
2. Break the normal flow of the page so that your content displays something like
this wireframe:
headings
unordered
list items
ordered list items
paragraphs and link
You have some creative freedom here. Just be sure to break the normal flow
using float or absolute positioning so that two structural elements are side-by-
side.
Review Chapter 6.7
3. Apply pseudo-class CSS style to your hyperlink (:link, :visited, :hover)
4. Make sure that all files (HTML and CSS) validate.
Transcribed Image Text:At a minimum, your site should contain the following: 1. Using CSS to center all of the content on your page in a container with a width of 80% (See Hands-on Practice 3.9). Note: the container should be centered, not the text content. 2. Break the normal flow of the page so that your content displays something like this wireframe: headings unordered list items ordered list items paragraphs and link You have some creative freedom here. Just be sure to break the normal flow using float or absolute positioning so that two structural elements are side-by- side. Review Chapter 6.7 3. Apply pseudo-class CSS style to your hyperlink (:link, :visited, :hover) 4. Make sure that all files (HTML and CSS) validate.
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 1 steps

Blurred answer
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScript
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning