Help me solve this task. Create a new style rule for the square class selector with the hover pseudo-class that specifies a transform property with translate(80px) as the value. 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. Create a new style rule for the square class selector with the hover pseudo-class that specifies a transform property with translate(80px) as the value. 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

Chapter7: Designing A Web Form: Creating A Survey Form

Section: Chapter Questions

Problem 17CP3

See similar textbooks

Related questions

Concept explainers

Question

Help me solve this task.

Create a new style rule for the square class selector with the hover pseudo-class that specifies a transform property with translate(80px) as the value.

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

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.