Ex No: 5 BANNER ADVERTISEMENT USING CSS
Aim: To design a webpage to display Banner Advertisemetn using CSS.
Algorithm
Step1: Create a folder “Ex5” to place all the HTML files.
Step2: Create HTML file “index.html”.
Step3: Use CSS animation and Keyframe property to perform Banner Advertisement.
HTML Tag Description
<header> Specify title and heading
<article> Represent an article
<section> Specify the content of a section
<table> Display data in table format
<h> Define header text
CSS Property Description
background-color Specify background color
text-align Align text in an element
transform Places the element in the given position
hover Pseudo Class activate when mouse over an element
animation Specify keyframes to be animated and its properties
@keyframes Provides information about animation at specific frame
Source Code

index.html


 <!DOCTYPE html>
 <html>
  <head>
   <title>Banner Advertisement </title>  
   <style>
   header {
    text-align:center;
    height: auto;
    background-color: olive;
    padding: 10px;
    color: white;
    border-radius: 10px 10px 0px 0px;
    position: relative;    
   }
   header > h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   }
   footer {
    text-align:center;
    font-size: 12px;
    height: 50px;
    line-height: 50px;
    background-color: olive;
    padding: 10px;
    border-radius: 10px;
   }	
   .banner {
    position: auto;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    animation: slide 10s infinite;
   }	
  @keyframes slide {
    0% { background-image: url('images/1.jpg'); }
    25% { background-image: url('images/2.jpg'); }
    50% { background-image: url('images/3.jpg'); }
    75% { background-image: url('images/4.jpg');}
    100% { background-image: url('images/1.jpg');}
   }
   </style>
  </head>
  <body>    
   <header class="banner">
    <h1>Banner Advertisement </h1>
   </header>  
   <hr>
   <p> This Page displays the use of Banner Advertisement. </p>
   <footer>
   Developed by K Anbarasan
   </footer>
  </body>
 </html>
Result: Thus a webpage is designed to display Class Time Table using different CSS border proeprty.