I need to do an image rollover with the article image. Ill send the picture of the original html code and ill post the css in here. I also attached the directions /* the styles for the elements */ * {     margin: 0;     padding: 0; } html {     background-color: white; } body {     font-family: Arial, Helvetica, sans-serif;     font-size: 100%;     width: 850px;     margin: 0 auto;     border: 3px solid #931420;     background-color: #fffded; } a:focus, a:hover {     font-style: italic; } /* the styles for the header */ header {     padding: 1.5em 0 2em 0;     border-bottom: 3px solid #931420;     background-image: linear-gradient(         30deg, #f6bb73 0%, #fffded 30%, white 50%, #fffded 80%, #f6bb73 100%); } header h2 {     font-size: 175%;     color: #800000; } header h3 {     font-size: 130%;     font-style: italic; } header img {     float: left;     padding: 0 30px; } .shadow {     text-shadow: 2px 2px 2px #800000; } /* the styles for the main content */ main {     clear: left; } /* the styles for the section */ section {     width: 575px;     float: right;     padding: 0 20px 20px 20px; } section h1 {     color: #800000;     font-size: 150%;     padding: .5em 0 .25em;     margin: 0; } section p {     padding-bottom: .5em; } /* the styles for the article */ article {     padding: .5em 0; } article h2 {     font-size: 115%;     padding: 0 0 .25em 0; } article img {     float: right;     margin: .5em 0 1em 1em;     border: 1px solid black; } /* the styles for the aside */ aside {     width: 215px;     float: right;     padding: 0 0 20px 20px; } aside h2 {     color: #800000;     font-size: 130%;     padding: .6em 0 .25em 0; } aside h3 {     font-size: 105%;     padding-bottom: .25em; } aside img {     padding-bottom: 1em; } /* the styles for the footer */ footer {     background-color: #931420;     clear: both; } footer p {     text-align: center;     color: white;     padding: 1em 0; }

(a) What are the problems with the above code? Consider the syntax, structure, and writing style. (b) Write CSS code that tidies up the above code. Your code should minimize the use of inline style. (c) Add a CSS selector for all paragraphs (p elements) under div elements with class “exam” to make their background colour blue.

Modify the CSS declarations for the span and p rules to meet each requirement below: Padding on the span: 5 pixels left, and 5 pixels right. Border on the span: 2 pixels solid black above (use -top suffix), and 4 pixels solid gray below (use -bottom). Padding on the paragraph: 10 pixels on all sides. Border on the paragraph: 10 pixels, light green, ridge style (use border-style, border-color, and border-width). Margin on the paragraph: 5 pixels on all sides.   <p>  The typical filler text is the <span>Lorem Ipsum</span>.  According to lipsum.com, this text has been standard dummy text since the 1500s.</p>

Modify the CSS below to float to the right the first image with floatright class, to float to the left the second image with floatleft class, and to clear floating elements on both sides of the p element with nofloats class.       body {   font: 10pt monospace;} img {   width: 160px;   padding: 2px;   border: 1px solid gray;   margin: 5px 10px;} img.floatright {   /* TODO: Add CSS here */} img.floatleft {   /* TODO: Add CSS here */} .nofloats {   /* TODO: Add CSS here */}

Please help me with this. I am not understanding what to do. Please show what it saying using the image below C- Create thumbnails of all proposed webpages and place them on one singlepaper/page. Connect all your thumbnails with arrows. All designs must haveat least one arrow pointing to them, and at least one arrow pointing fromthem. This is intended to illustrate how you will move around the website.The arrows must start from the EDGE of the ‘element’ that one clicks tonavigate from a given page and the arrows must end at the EDGE of thewebpage or sidebar or popup that opens as a result. Let me tell you some back story about what I am instructed to do.  for a application I am creating (Document editor) So I have to illustrate a totoal of 3-10 webpages using wireframes that should be Lo-Fi (no colour, and as concise as possible).  Noting that I might have popup boxes, or dropdown menus/sidebars. You should draw these as their own small boxes/rectangles/etc. Do not drawn any images…

How do I get my code to match the requirements in the picture? * {box-sizing: border-box;} body {background-color: #3F2860;font-family: Verdana,Arial, sans-serif;color:#3F2860;margin: 0px;padding: 0px;} #wrapper {background-color:#F5F5F5;width:100%;min-width:0px;max-width : 1540px;margin-left : auto;margin-right : auto;margin: 0px;color:#3F2860;padding: 0px;} #main {margin-left:170px;padding-top:1em;padding-right:2em;Padding-left:1em;background-color:#F5F5F5;height: 500px;} h2{margin-top:0px;text-align: center;} p,h3{        text-align: center;    } #nav{ float:left;height:500px;width:25%;position:relative;width:160px;padding:1em;} #hero {   text-align: left;   margin-left: 10%;} #ylp {   float: center;   background-repeat: no-repeat;   background-position: right;   height: 300px;   width: 90%;   margin-left: 1%;} #image {float:left;width:30%;position:relative;} span{  margin-left: 40px;  font-size: small;} #des{  float: right;  width: 70%;  position: relative;} #mathero { height:…

Please help me with this   1. Make the body of the page have a background of tiled “waves.png” images. This image is in the images folder. 2. Add padding (10px) to the entire body of the page. 3. Add a top and bottom margin (10px) as well as padding (10px) to the each movie description. 4. Change the background of each movie description to white, and the background colour for the box enclosing the page content to the following RGB values: R = 246, G = 212, B = 212.   <!DOCTYPE html>   <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title> Movie Recommendations</title>     <link rel="stylesheet" href="styles.css"> </head> <body>   <header>     <h1> Movie Recommendations </h1>     <h2> Some Science Fiction Movies Worth Watching </h2> </header>   <div class="movie"> <h2> Ghost in the Shell <span…

I'm trying to learn CSS and it isn't easy. Can someone help me with this problem? Modify or add one CSS rule for each requirement below to change the text color property as specified. By color name: change the text color for byname class elements from black to blue. By RGB values: change the text color for byrgb class elements from black (rgb(0, 0, 0)) to green by modifying the second number to be 255. By HSL values: change the text color for byhsl class elements from black (hsl(0, 0%, 0%)) to cyan by modifying the first number to be 200, the second number to 100%, and the third number to 50%. Code: <p class="byname">The text is blue</p> <p class="byrgb">The text is green</p> <p class="byhsl">The text is cyan</p>

Modify the CSS below to float to the right the first image with floatright class, to float to the left the second image with floatleft class, and to clear floating elements on both sides of the p element with nofloats class.       body {   font: 10pt monospace;} img {   width: 160px;   padding: 2px;   border: 1px solid gray;   margin: 5px 10px;} img.floatright {   /* TODO: Add CSS here */} img.floatleft {   /* TODO: Add CSS here */} .nofloats {   /* TODO: Add CSS here */}

what I have so far but it is not working I tried to add an image file to my page i have also included somthing my teacher sent but i can not make sence of it body {font-family: Georgia, serif;font-size: 100%;line-height: 175%;margin: 0 15% 0;background-color:rgb(210,220,157);background-image: url("bullseye.png"); /* Rounded Shape image */background-size: contain;}header {margin-top: 0;padding: 3em 1em 2em 1em;text-align: center;border-radius:4px;background-color:hsl(0, 14%, 95%);opacity:0.5;background-image: url("purpledot.png"); /*purple image*/background-repeat: repeat-x;}a {text-decoration: none;color:rgb(153,51,153);}a:visited{color: hsl(300, 13%, 51%);}a:hover{background-color: #fff;}a:focus{background-color: #fff;}a:active{color:#ff00ff;}h1 {font: bold 1.5em Georgia, serif;text-shadow: 0.1em 0.1em 0.2em gray;color: rgb(153,51,153);}h2 {font-size: 1em;text-transform: uppercase;letter-spacing: 0.5em;text-align: center;color:rgb(204,102,0);}dt {font-weight: bold;}strong {font-style:…