Lecture 10 Advanced CSS3 features- Animation Lab Exercise 1 Design a web page with a element of width 75 pixels, height 75 pixels and green color background. When the page is loaded, the background color of the element must change from green to yellow. The animation must be completed within 3 seconds. When the animation is finished, the tag must change back to its original style.

Lecture 10 Advanced CSS3 features- Animation Lab Exercise 1 Design a web page with a element of width 75 pixels, height 75 pixels and green color background. When the page is loaded, the background color of the element must change from green to yellow. The animation must be completed within 3 seconds. When the animation is finished, the tag must change back to its original style.

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 4CP4

See similar textbooks

Similar questions

Create a styles.css page and add the following styles? H1 Background color: #f03Border on the bottom with the following rules Width: thin Style: solid Color: #003 Centered textMargin on all sides: 35 pixels H2 Text color: #333, bold p Font: GeorgiaText color: #030Padding of 15 pixels on all sides li Font family: ArialBackground color: grayText color: black, boldText size: 18 points a Color for all hyperlinks: Dark red: #CC0000 Rollover color for all hyperlinks: Dark green: #060 One additional style of your choice
Create another new text file and write the following codes. <html> <head> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <h3> A White Header </h3> <p> This paragraph has a blue font. The background color of this page is gray because we changed it with CSS! </p> </body> </html> Save this file with name MyExternalCSSdemo.html (Run and see the effect.) Create a new folder name – Tutorial -5 Create a two text file inside this folder and name – Tutorial -5.txt for HTML page and ExternalCSS.txt for CSS file Open Tutorial -5.txt as a sublime text (by right click on it) Following tasks to be completed to develop a web page using external CSS. 1. Create an External CSS which should have background colour ‘white’, Header H1 colour ‘black’ and paragraph colour ‘Red’ 2. Web page should have…
HTML/CSS: Need help in creating a sidebar header canvas for the love and hate buttons. Below are the codes and attached is image of how the sidebar header canvas must look like. Make sure to involve the correct code with the output: index.html: <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Summer School</h1> <ulclass="content home"> <li><a href="/index.html" >Summer School Info</a></li> <li><a href="/summerschool.html">Mainpage</a></li> </ul> </body> </html> summerschool.html: <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,…
Open your text editor: Please complete this code in HTML  create a new file and name it “Lec_Ex4_2.html”  create a new file and name it “style_2.css”  Type the 8 lines in the html(basic html structure).  Add this line to the head section of html:  Write these lines in the body of the html: <div id=“title”><h1>Your name</h1></div> <div id=“container1”> . </div> Style it in the CSS: #title{ background-color:blue;} #container1 {background-color:red;} If we don’t specify the width of the div element,it will take up the full width available. We can specify the width and height of the divusing percentages or pixels. Percentages are flexible (changes according tothe screen size), and pixels are fixed. Add the following property to both divs: Width:80%; This is comparing to the full screen  For the title div: Padding:2%; For the container div: Height: 400px; Height can also be made with percentages, butpixels are preferred.  Your…
Write one CSS rule for the following task: Style an article element so that: its padding is 32px, its width, including padding, is one third of its parent container width, float it to the right side of the screen. Write one CSS rule for the following task: Style a footer element so that: it clears any prior floating elements, its width is 90% of its parent container width, its width is but no smaller than 768px, its width is no bigger than 1024px, centre the footer horizontally, regardless of the screen size. Write the HTML for: The footer of a page that includes an image with the following source https://learndigital.dev/DGL103/logo.png; The image must link to the homepage of the website when clicked on; The image must include descriptive text that screen readers can access; The image must be 160px tall and wide. Write a CSS style so that the footer (DON'T include more CSS than you need to): has a background colour. has a height of 300px. Use 2 different methods to move…
<!DOCTYPE html><html><head><style>p {font-family: arial; font-size: 20px;} </style></head><body> <button onclick='buyApple()'>Purchase Appple</button><button onclick='buyOrange()'>Purchase Orange</button> <p id="balance"></p> <script>// javascript code begin// Step 1. initialize variables:change=100 // starting balanceapple=10 // price of 1 appleorange=20 // price of 1 orangetortilla=30 // price of 1 tortillafoundMoney=25 // pretend found $25// initialize the user-interface when this page loads:document.getElementById("balance").innerHTML = "$"+change;// Step 2. define event functions for each buttonfunction buyApple(){change -= apple;document.getElementById("balance").innerHTML = "$"+change;}function buyOrange(){change -= orange;document.getElementById("balance").innerHTML = "$"+change;}// Make 2 more functions here,…
Write an appropriate HTML code to get the following output: Title: Lab Exercise Five Background color: DarksalmonHeading style (Heading 2): Background color = Ghostwhite; Font type = Verdana; Font align = Center; Font color = Black Table style: Border 5px; solid white; collapse; width = 100% Table Headings: Beverages; Coffee; Tea; JuicesCoffee (unordered list): Black Coffee; Milk Coffee; Cappucino; EspressoTea (ordered list): Black Tea; Milk Tea; Green Tea; Earl Grey Tea; Jasmine Tea; Peppermint TeaJuices (description list): Morning Green Juice (Green Apple, Ginger, Spinach, Celery, Fresh Mint Leaves); Sweet Sunrise (Rasberries, Banana, Orange, Mango); Tropical Treat (Banana, Mango, Strawberry).
4.4 Write a CSS rule that places a background image halfway down the page, tiling it horizon- tally. The image should remain in place when the user scrolls up or down.4.5 Write a CSS rule that gives all h1 and h2 elements a padding of 0.5 ems, a dashed border style and a margin of 0.5 ems.4.6 Write a CSS rule that changes the color of all elements containing attribute class = "greenMove" to green and shifts them down 25 pixels and right 15 pixels.
Independent Challenge 4 – ExploreAs you continue your work creating the website for Eating Well in Season, a local food delivery company, you customize thedesign’s fonts and colors.a. In your editor, open HTM_E-11.html from the IC4 folder where you store your Data Files for this unit, save it asindex.html, open HTM_E-12.css, then save it as styles.css.b. In the first comment section in each file, add your first and last names and today’s date where indicated, then saveyour changes to both files.c. Use google.com/fonts to locate the font named Alegreya Sans, choose the Normal 400 style, then copy the linkelementfor the font’s stylesheet to the Clipboardd. Return to index.html in your editor, paste the link element just before the link element for your stylesheet, thensave your changes.e. Return to styles.css in your editor, then in the body and page container section (the code following the body andpage container comment), create a style rule that sets the font family for the body…
PLEASE HELP ME TO FIX THIS. THIS HAS TO BE THE SAME TO THE IMAGE UPLOADED. I CHANGE THE COLORS <!doctype html><html><head><meta charset="UTF-8"><title>"The Bean Counter"</title> <style type="text/css"> body { background-color : blue; color : silver; font-family : helvetica; text-align : center} hr {width: 25%; color: blue;} h1 {color : white;} section {margin-left: auto; margin-right : auto; text-align : center; background-color: #4169E1; border-style : solid; border-color : MidnightBlue; border-width: medium; padding : 8px;} .drinkBtn {width 110px;} .otherBtn {width: 60px;} .total {border: solid black;} </style></head><body><h1>"The Bean Counter"</h1> <hr/> <p><b>Figuring the price of espresso drinks<br/> so baristas can have time to chat!</b></p> <br/><section…
Use the given code to answer the following questions: External.css label { color: darkgray; } home. Html <header> <link ref “stylesheet” type”text/css” href= “external .css” <style> Label { Color: darkblue; } </style> </header> <body style=”color: darkred;”> <p> <input type “checkbox” name =”chkOrange” <label style “color: darkcyan;” for = “chkOrange”>Oranges</label> </p> </body> Which color is shown for the < label> tag? Darkred Darkcyan Darkgray Darkblue
Create a CSS file youName.css and link it to the HTML file you created earlier in Part 1. The results after filling the styles should be as shown in the image below. NOTE 1: Add classes and ids as you find suitable in the HTML file. NOTE 2: Any style that is not specified, may be specified as you wish (like margins, paddings …). NOTE 3: The width of the <body> is 700px and the font-family is “Arial”. after finsih it must be as the image