HTML help Create two divs: the first div will be empty and second div will contain...
HTML help
- Create two divs: the first div will be empty and second div will contain words.
- Put a border for the first div.
- Choose a background color to fill the first div.
- Make the first div move in a rectangular pattern. The div will grow in size towards right bottom corner and then will shrink back to initial size when it moves toward initial position.
- Use animation-duration.
- Make the background color of first div change to another color when it moves to another corner. Therefore, this div will change color four times.
- Once the first div returns to the initial position, use the animation-direction attribute to reverse the direction of movement of this div.
- The first div will execute the animation for 5 times. Use animation-iteration-count to set number of times of animation.
Homework Answers
<!DOCTYPE html>
<html>
<head>
<style>
.out {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 3;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 5;
animation-direction: alternate;
}
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div class="out">
<div class="in"><H3>Text
Area</H3></div>
</div>
</body>
</html>
Add Answer to:
HTML help
Create two divs: the first div will be empty
and second div will contain...
HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids...
HTML/CSS/ Bootstrap grids to create image
I am attemted to recreate a photo using bootstrap grids and have
come across a snag. I need this:
To look more like this....
It does not really need to be perfect as far as scaling, at this
point I just want the yellow box in the corner with borders like
the pic. Also the original pic has white borders that we are
ignoring.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags...
As part of this assignment we are using the base Gallery HTML and writing JavaScript code...
As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...
Hello, I was wondering if someone could help me with this PHP and HTML problem. Basically,...
Hello, I was wondering if someone could help me with this PHP and HTML problem. Basically, there is code for a multiplication table and i need to change it to support the following. Make the page background (not table background) to change among three colors of your choice. Use the drop-down list to specify the size of the multiplication table to be 8, 10, 12, and 14 Put the multipliers in the first column and the multiplicand on the first...
PLEASE HELP: EASY CODE. Using your template create a webpage that contains a div. Give the...
PLEASE HELP: EASY CODE. Using your template create a webpage that contains a div. Give the body element the id of TOOscary. Give the div the id of ghost. At the bottom of the page (just before the closing body tag) insert a script element. In the script element insert an assignment statement to save the content of the webpage using the variable candy. Hint: candy= document.getElementById(‘TOOscary’).innerHTML; We want to save it so we can bring it back after we...
can you do this js and html question. ill give you the html and js and...
can you do this js and html question. ill give you the html and
js and css files just fix my error use if and else like what i did
dont use switch just fix my erorr.
<!DOCTYPE html>
<!-- Webpage HTML document for Lab 4.
Authors: Amirhossein Chinaei, Andriy Pavlovych
For: EECS 1012, York University, Lassonde School of Engineering
-->
<html lang="En">
<head>
<meta charset="UTF-8">
<!-- title for web page -->
<title> EECS1012: Lab 4 - Computational Thinking
</title>...
n the Labs Labs 1 and 2, which increase in difficulty, require you to create webpages based on what you learned in the...
n the Labs Labs 1 and 2, which increase in difficulty, require you to create webpages based on what you learned in the chapter; Lab 3 requires you to dive deeper into a topic covered in the chapter. Lab 1: Creating an External Style Sheet for City Farmer Problem: You work for a local but rapidly growing gardening supply company called City Farmer that specializes in products that support food self-sufficiency. The company has hired you to help create the...
How do I get my HTML and CSS to look similar to this mockup? HTML: <!DOCTYPE...
How do I get my HTML and CSS to look similar to this mockup?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>nitro
site</title>
<link href="css/main.css"
rel="stylesheet"/>
</head>
<body>
<header class="header">
<section class="navlist">
<img
class="logo" src="assets/logobeans.png"/>
<h2
class="headertitle">nitro</h2>
<nav>
<ul>
<li><a
href="index.html"
target="_parent">About</a></li>
<li><a
href="/html/menu.html"
target="_blank">Menu</a></li>
<li><a
href="/html/menu.html">Shop Now</a></li>
</ul>
</nav>
</section>
<section
class="headerContainer">
<h1
class="heading">Nitro Coffee</h1>
<p
class="productDesc">Coffee is a brewed drink prepared from
roasted coffee beans, the seeds of berries from certain Coffea
species.</p>...
2 Apply Your Knowledge Reinforce the skills and apply the concepts you learned in this chapter Styling a Webpage Instru...
2 Apply Your Knowledge Reinforce the skills and apply the concepts you learned in this chapter Styling a Webpage Instructions: In this exercise, you will use your text editor to create external, embedded, and inline styles for the Durango Jewelry and Gem Shop home page. You will style the sections of the semantic wireframe header, nav, main, and tooter and a div element that surrounds all of the content to center the content on the page. You will also float...
given below are the project description and their Html and css files i need javascript according...
given below are the project description and their Html and css
files i need javascript according to the project and other
files!
WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...
Hello Ive been tryting to add the CDN of jquery to my html code and I...
Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...
HTML/CSS/ Bootstrap grids to create image
I am attemted to recreate a photo using bootstrap grids and have
come across a snag. I need this:
To look more like this....
It does not really need to be perfect as far as scaling, at this
point I just want the yellow box in the corner with borders like
the pic. Also the original pic has white borders that we are
ignoring.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags...
can you do this js and html question. ill give you the html and
js and css files just fix my error use if and else like what i did
dont use switch just fix my erorr.
<!DOCTYPE html>
<!-- Webpage HTML document for Lab 4.
Authors: Amirhossein Chinaei, Andriy Pavlovych
For: EECS 1012, York University, Lassonde School of Engineering
-->
<html lang="En">
<head>
<meta charset="UTF-8">
<!-- title for web page -->
<title> EECS1012: Lab 4 - Computational Thinking
</title>...
n the Labs Labs 1 and 2, which increase in difficulty, require you to create webpages based on what you learned in the chapter; Lab 3 requires you to dive deeper into a topic covered in the chapter. Lab 1: Creating an External Style Sheet for City Farmer Problem: You work for a local but rapidly growing gardening supply company called City Farmer that specializes in products that support food self-sufficiency. The company has hired you to help create the...
How do I get my HTML and CSS to look similar to this mockup?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>nitro
site</title>
<link href="css/main.css"
rel="stylesheet"/>
</head>
<body>
<header class="header">
<section class="navlist">
<img
class="logo" src="assets/logobeans.png"/>
<h2
class="headertitle">nitro</h2>
<nav>
<ul>
<li><a
href="index.html"
target="_parent">About</a></li>
<li><a
href="/html/menu.html"
target="_blank">Menu</a></li>
<li><a
href="/html/menu.html">Shop Now</a></li>
</ul>
</nav>
</section>
<section
class="headerContainer">
<h1
class="heading">Nitro Coffee</h1>
<p
class="productDesc">Coffee is a brewed drink prepared from
roasted coffee beans, the seeds of berries from certain Coffea
species.</p>...
2 Apply Your Knowledge Reinforce the skills and apply the concepts you learned in this chapter Styling a Webpage Instructions: In this exercise, you will use your text editor to create external, embedded, and inline styles for the Durango Jewelry and Gem Shop home page. You will style the sections of the semantic wireframe header, nav, main, and tooter and a div element that surrounds all of the content to center the content on the page. You will also float...
given below are the project description and their Html and css
files i need javascript according to the project and other
files!
WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...
Most questions answered within 3 hours.
-
Write a C++ program that will convert distance measurements from
miles to kilometers. Specifically, the program...
asked 39 seconds from now -
Given the following stresses (in MP a); in each case:
(a) Find the principal stresses σ1;...
asked 3 minutes ago -
You are one of the first engineers hired into the
manufacturing engineering department at a brand...
asked 8 minutes ago -
Suppose car models A, B, and C are popular among drivers.
Suppose 12% of the drivers...
asked 26 minutes ago -
write a program that finds the number of zeros in an 8-bit data
item using assembly...
asked 26 minutes ago -
Which statement is always true: The total energy of a closed
system...
A) is always equally...
asked 40 minutes ago -
find the critical value associated with a right sided hypothesis of
the mean using a sample...
asked 2 hours ago -
Which of the following statements is true with respect to a
simple linear regression model?
a....
asked 3 hours ago -
The energy required to remove an electron from a surface of a
solid element is called...
asked 4 hours ago -
How would you train your employees to avoid risks of using
mobile devices?
asked 5 hours ago -
Assume Kw = 1.01 ✕ 10−14
For pure water, we can calculate [H3O+ ] = [OH...
asked 6 hours ago -
Suppose that on a temperature scale X, water boils at 203.0°X
and freezes at -105.7°X. What...
asked 6 hours ago