Question

In: Computer Science

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.

Solutions

Expert Solution

Slidebar.html

<html>
<head>  
    <link href="slidebar.css" rel="stylesheet" type="text/css"> <!-- link css file -->
    
    <body>
        <center><h1>Sidebar</h1></center><!-- h1 heading tag and center tag for center alignment-->
          <center> <div id="ad" name="ad"><!-- create division to store ad in it -->
            <div id="sliderbox"><!-- create a div -->
           <a href="#" target="_blank"><img   src="ad1.png"  > </a> <!-- write image tag within the <a> tag to make image clikable--> 
                   <a href="#" target="_blank">  <img   src="ad2.jpg"  > </a><!-- write image tag within the <a> tag to make image clikable-->
                   <a href="#" target="_blank"><img   src="ad3.jpg"  > </a> <!-- write image tag within the <a> tag to make image clikable--> 
               <a href="#" target="_blank">  <img   src="ad2.jpg"  > </a><!-- write image tag within the <a> tag to make image clikable-->
                
                   
                 </div><br clear="all"><!-- clear extra spaces-->

        </div></center> 
    </body><!--close body tag-->
    </head><!--close head tag-->
</html><!--close html tag-->

slidebar.css

   
            @keyframes slider{/*create a animation for silde images (he @keyframes rule specifies the animation code)*/
                /* from 0% to 20% show image one */ 
                0%{
                    left:0px;
                }    
               
                20%{
                    left:0px;
                }
                 /* at 25 % slide image in left side by -950 px (Image dimention: 950*475) */
                25%
                {
                    left:-950px;
                }
                /* at 45 % slide image in left side by -950 px (Image dimention: 950*475) */
                45%
                {
                   left:-950px; 
                }
                /* at 50 % slide image in left side by -1900px (950+950=1900) (Image dimention: 950*475) */
                50%{
                    left:-1900px
                }
                /* at 70 % slide image in left side by -1900px (950+950=1900) (Image dimention: 950*475) */
                70%{
                    left:-1900px;
                }
                /* at 75 % slide image in left side by -2850px (950+950+950=2850) (Image dimention: 950*475) */
                75%{
                    left:-2850px;
                }
             
            
            }
    #sliderbox{/* style the sliderbox division*/
            position: relative;/* make position relative */
            width: 4000px;/* create a width 4000px */
            animation-name: slider;/* appy slider animation to it */
            animation-duration: 15s;/* make animation duration 15s */
            animation-iteration-count: infinite;/* run inimation infinite times */
        
            
        }
        #sliderbox img{/* style image which is placed in the sliderbox division*/
            float:left;/* make it left (remove extra lines and space)*/
        }
        #ad{/* style ad division */
            overflow: hidden;/*hide the overflow, So that only one image shown at a time*/
            width: 950px;/* make a width same as image size (Image dimention: 950*475) */
            background-color: aqua;/* give some background color */
            margin-left: 50px;/* give space from left side */
            margin-top: 80px;/* give space from top */
        }
img{/*Style image*/
        height: 300px;/* set height to 300 px */
        width: 950px;/* set width to 950 px */
    }

Output 1:

Output 2:

Saved file in system :

ad.png:

ad2.png

ad3.png

Note: Image dimention: 950*475

venereology answered 6 months ago
Next > < Previous

Related Solutions

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...
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