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