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.
Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML...
Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML tags to design your webpage: <h1>...</h1>,<h3>...</h3>, <h6>...</h6>, <p>...</p>, <b>...</b>, <i>...</i>, <a>...</a>, <img...>, <table>... </table>, <div>...</div>, <form>...</form>, <input type="text">, and <input type= "submit"> Use an external css to change the default style of your webpage. You must use at least one element selector, one id selector, and one class selector Using text input and submit button, allow the user to change the background color of...
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...
Project 2c (Javascript/HTML/CSS)– Mouse Chase: Create a page with a nice, shiny, pretty button on it....
Project 2c (Javascript/HTML/CSS)– Mouse Chase: Create a page with a nice, shiny, pretty button on it. The button should say ‘Click to receive $10!’ However, any time the user’s mouse cursor gets over the button, the button should move to a random location on the page, making the button essentially impossible to click! However, if they do somehow manage to click the button, redirect the user to an image of a 10 trillion Zimbabwe Dollar. Finally, the background color of...
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...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT