Help me solve this task. Insert the following declarations to the style rule for the square class selector. For each declaration, you must first include a declaration with the -webkit- prefix, followed by the standard declaration. Animation name property that specifies the name of the @keyframes rule animation. Animation duration property with a value of 5 seconds. MY CSS /* CSS reset */ body, header, main, section, footer, h1, h2 { margin: 0; padding: 0; border: 0; } /* Style rule for body */ body { background-color: #f0d8d1; } /* Style rules for header */ header { padding: 3%; text-align: center; font-size: 1.5em; font-weight: bold; } /* Style rules for main content area */ main { font-family: Verdana, Arial, sans-serif; font-size: 1em; margin: 0 2%; padding: 1em; background-color: #fff; border: 5px double #33091b; padding: 2%; } h2 { padding-bottom: 1%; } section { margin-bottom: 3%; } button { height: 3em; font-size: 1em; } .square { width: 200px; height: 200px; background-color: #33091b; margin-left: 6%; -webkit-animation-name: text-animation,color; animation-name: text-animation,color; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes text-animation { 0%{font-size: 1em;} 50%{font-size: 2em;} 100%{font-size: 1.35em;} } @keyframes text-animation { 0%{font-size: 1em;} 50%{font-size: 2em;} 100%{font-size: 1.35em;} } /* Animation */ @-webkit-keyframes color { from { background-color: #fbdae9; } to { background-color: #660b32; } } @keyframes color { from { background-color: #fbdae9; } to { background-color: #660b32; } } /* Style rules for the footer */ footer { font-size: .90em; text-align: center; margin-top: 2em; }

Help me solve this task. Insert the following declarations to the style rule for the square class selector. For each declaration, you must first include a declaration with the -webkit- prefix, followed by the standard declaration. Animation name property that specifies the name of the @keyframes rule animation. Animation duration property with a value of 5 seconds. MY CSS /* CSS reset / body, header, main, section, footer, h1, h2 { margin: 0; padding: 0; border: 0; } / Style rule for body / body { background-color: #f0d8d1; } / Style rules for header / header { padding: 3%; text-align: center; font-size: 1.5em; font-weight: bold; } / Style rules for main content area / main { font-family: Verdana, Arial, sans-serif; font-size: 1em; margin: 0 2%; padding: 1em; background-color: #fff; border: 5px double #33091b; padding: 2%; } h2 { padding-bottom: 1%; } section { margin-bottom: 3%; } button { height: 3em; font-size: 1em; } .square { width: 200px; height: 200px; background-color: #33091b; margin-left: 6%; -webkit-animation-name: text-animation,color; animation-name: text-animation,color; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes text-animation { 0%{font-size: 1em;} 50%{font-size: 2em;} 100%{font-size: 1.35em;} } @keyframes text-animation { 0%{font-size: 1em;} 50%{font-size: 2em;} 100%{font-size: 1.35em;} } / Animation / @-webkit-keyframes color { from { background-color: #fbdae9; } to { background-color: #660b32; } } @keyframes color { from { background-color: #fbdae9; } to { background-color: #660b32; } } / Style rules for the footer */ footer { font-size: .90em; text-align: center; margin-top: 2em; }

New Perspectives on HTML5, CSS3, and JavaScript

6th Edition

ISBN:9781305503922

Author:Patrick M. Carey

Publisher:Patrick M. Carey

Chapter4: Graphic Design With Css: Creating A Graphic Design For A Genealogy website

Section: Chapter Questions

Problem 8CP1

See similar textbooks

Related questions

Question

Help me solve this task.

Insert the following declarations to the style rule for the square class selector. For each declaration, you must first include a declaration with the -webkit- prefix, followed by the standard declaration.

Animation name property that specifies the name of the @keyframes rule animation.
Animation duration property with a value of 5 seconds.

MY CSS

/* CSS reset */

body, header, main, section, footer, h1, h2 {

margin: 0;

padding: 0;

border: 0;

}

/* Style rule for body */

body {

background-color: #f0d8d1;

}

/* Style rules for header */

header {

padding: 3%;

text-align: center;

font-size: 1.5em;

font-weight: bold;

}

/* Style rules for main content area */

main {

font-family: Verdana, Arial, sans-serif;

font-size: 1em;

margin: 0 2%;

padding: 1em;

background-color: #fff;

border: 5px double #33091b;

padding: 2%;

}

h2 {

padding-bottom: 1%;

}

section {

margin-bottom: 3%;

}

button {

height: 3em;

font-size: 1em;

}

.square {

width: 200px;

height: 200px;

background-color: #33091b;

margin-left: 6%;

-webkit-animation-name: text-animation,color;

animation-name: text-animation,color;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

}

@-webkit-keyframes text-animation {

0%{font-size: 1em;}

50%{font-size: 2em;}

100%{font-size: 1.35em;}

}

@keyframes text-animation {

0%{font-size: 1em;}

50%{font-size: 2em;}

100%{font-size: 1.35em;}

}

/* Animation */

@-webkit-keyframes color {

from { background-color: #fbdae9; }

to { background-color: #660b32; }

}

@keyframes color {

from { background-color: #fbdae9; }

to { background-color: #660b32; }

}

/* Style rules for the footer */

footer {

font-size: .90em;

text-align: center;

margin-top: 2em;

}

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 2 steps with 2 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.