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 5 months 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.
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...
Use an external CSS & JS file, no internal or inline styles & scripts Please comment...
Use an external CSS & JS file, no internal or inline styles & scripts Please comment your JS to break down your understanding of what is happening You can use a CDN link for your jQuery (Links to an external site.) library reference Create a web page that includes these HTML 5 semantic elements: <article> <aside> <figcaption> <figure> <footer> <header> <nav> <section> Your web page should have at least 3 images and they should all use the figure/fig caption elements...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT