Question

In: Computer Science

Use external CSS and Javascript files Use the HTML5 elements to layout the page. Have a...

Use external CSS and Javascript files

Use the HTML5 elements to layout the page.

Have a bulleted list and 3 paragraphs this can be loren ipsum. Have the information text

fade in when the page is done loading. Stagger the animations so that the text that is higher up on the page fades in before.

Add three more animations in addition to the ones above including an interval timer based animation, an event based animation click or hover, and

an use of the .animate method.

Solutions

Expert Solution

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div>
        <h2>Technologies</h2>
       <ul>

           <li>HTML</li>
           <li>CSS</li>
           <li>JavaScript</li>
       </ul>
       <p>Lorem ipsum dolor sit amet, consectetur
            adipisicing elit. Vel nobis maxime 
            repellendus aspernatur commodi ipsam 
            reprehenderit atque deserunt quae error, 
            quo veritatis perferendis quia adipisci 
           voluptate ratione repudiandae enim sit.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur
            adipisicing elit. Vel nobis maxime 
            repellendus aspernatur commodi ipsam 
            reprehenderit atque deserunt quae error, 
            quo veritatis perferendis quia adipisci 
           voluptate ratione repudiandae enim sit.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur
            adipisicing elit. Vel nobis maxime 
            repellendus aspernatur commodi ipsam 
            reprehenderit atque deserunt quae error, 
            quo veritatis perferendis quia adipisci 
           voluptate ratione repudiandae enim sit.
        </p>
    </div>
</body>
</html>

CSS

/* fade in style */
body { 
    animation: fadeInAnimation ease 3s ;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
} 
  
@keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
     } 
} 


/* interval timer based animation */
h2{
   position:relative;
    animation:mymove 5s infinite;
    animation-timing-function:linear;
}
@keyframes mymove{
    from {left:0px;}
    to {left:200px;}
}

/* even based animation on hover */

li:hover{
   color:green;
   font-weight:bold;
   font-size:18px;
}

venereology answered 1 year ago
Next > < Previous

Related Solutions

Use external CSS and Javascript files. Use the HTML5 elements to layout the page. In a...
Use external CSS and Javascript files. Use the HTML5 elements to layout the page. In a sidebar include an advertisement that changes its image every three seconds. The can be created in paint and be very simple or more detailed.
Build a web page using an external CSS file based on the following specifications : a)...
Build a web page using an external CSS file based on the following specifications : a) The page must have a breaking point at 768px (desktop/mobile). b) The three sections contents (header, main and footer) must be full-width and no larger than 960px (horizontally centered block). Ma c) Header must be 80px high, full width and fixed and will show your name on the left /5 side. The burger icon should appear when the browser’s window is 768px or lower....
Calculator in JavaScript. No use of switch statements or CSS. Project Standards: Students will use click...
Calculator in JavaScript. No use of switch statements or CSS. Project Standards: Students will use click events to capture user input. Students will use variables to store information needed by their application and keep track of their program’s state. Students will use conditionals to control project flow. Project Task You will be building a simple calculator in the browser. It should be able to add, subtract, divide, and multiply. Your program should do the following: Display a standard calculator to...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
In this assignment, you will use regular JavaScript and the Fetch API to read an external...
In this assignment, you will use regular JavaScript and the Fetch API to read an external JSON data file from the server and then add the data from each student object into new rows in an existing HTML table. This assignment is very similar to the Adding Rows to a Table assignment. The main difference is that you will: Use the Fetch API instead of using the AJAX API to read the external JSON data file. Set Up This Assignment...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT