Ex No: 4 ADVERTISEMENT USING CSS3
Aim: To design a webpage to display advertisement using CSS3 to set background color, fonts and columns.
Algorithm
Step1: Create a folder “Ex4” to place the HTML files.
Step2: Create a folder “img” to place all the image files.
Step3: Create HTML file “index.html”.
Step4: Use proper CSS3 properties to design the advertisement.
HTML Tag Description
<header> Specify title and heading
<article> Represent an article
<section> Specify the content of a section
<img> Display an image withing the webpage
<p> Display data in a paragraph
<h> Define header text
CSS Property Description
background-color Specify background color
text-align Align text in an element
border Specify border property
@keyframes Create property animation based on keyframes
animation Animate the propery using keyframes
columns Display the content in column format
border-radius Specify rounded corner radius
width, height Specify width and height value
font-size Specify size of the font
Source Code

index.html


<!DOCTYPE html>
<html>
 <head>
  <title>Advertisement</title>
  <style>
   header {
    text-align:center;
    height: 100px;
    background-color: Aquamarine;
    padding: 10px;
    border-radius: 10px 10px 0px 0px;
   }
   footer {
    text-align:center;
    font-size: 12px;
    height: 50px;
    line-height: 50px;
    background-color: Aquamarine;
    padding: 10px;
    border-radius: 10px;
   }
   article{
    width: auto;
    padding: 10px;
    margin:5px;
    overflow-x: auto;
   }
   section{
    float: left;
    width: 400px;
    height: 300px;
    border: 2px solid gray;
    padding: 10px;
    border-radius: 10px;
    margin:5px;
    overflow-x: auto;
   }
   @-webkit-keyframes textani{
    0% { color:BLACK;} 
    25% { color:RED;} 
    75% { color:ORANGE;} 
    100% { color:BLACK;} 
   }
   @keyframes textani{
    0% { color:BLACK;} 
    25% { color:RED;} 
    75% { color:ORANGE;} 
    100% { color:BLACK;}
   }
   img{
    display: block;
    margin-left: auto;
    margin-right: auto;
   }
   span{
    color: blue;
    text-decoration: underline;
   }
   .title{
    text-align:center;
    -webkit-animation: 3s textani infinite;
    animation: 3s textani infinite;
   }
   .laptop{
    font-family: "Comic Sans MS", cursive, sans-serif;
    background-color: Beige ;
    text-align: justify;
    columns: 2;
    column-rule: solid black 2px;
   }
   .mobile{
    font-family: "Courier New", Courier, monospace;
    background-color: cornsilk ;
    text-align: justify;
   }
   .hdd{
    text-align: justify;
    columns: 3;
    column-rule: dotted black 2px;
   }
 </style>
 </head>
 <body>  
  <header>
   <h1>Advertisement Using CSS3</h1>
  </header> 
  <hr>
  <article>      
   <section>
    <img src="img/lap.png">
    <h1 class="title">Laptop Sales Upto 30% off</h1>
    <p class="laptop">
     Buy Laptops online at <span>www.myweb.co.in</span> for best offers.
     Select from the best range of Laptops from most popular brands, compare laptop price 
     and buy best laptops with discounts.
    </p>    
   </section> 
   <section>
    <img src="img/mobile.jpg">
    <h1 class="title">Mobile Sales Upto 40% off</h1>
    <p class="mobile">
     Mobile phone usage is on the rise and smartphone lovers are on 
     a constant hunt to buy the best smartphone at a reasonable price. 
     <span>www.myweb.co.in</span> is the right place for you to look 
     for a mobile phone as we have phones ranging from Rs 350 up to Rs 1,00,000+.
    </p> 
   </section> 
   <section>
    <img src="img/hdd.jpg">
    <h1 class="title">External Hard Disk Sale</h1>
    <p class="hdd">
     External Hard Disk online at low price - Buy Hard Disk Drive with 
     storage capacities of 500GB, 1TB, 2TB, 3TB, 4TB at Paytmmall.com 
     and get up to 65% OFF. Shop for External Hard Disk Drive, HDD of 
     Seagate, WD Elements, Transcend, ADATA at best price.
    </p> 
   </section>
  </article>
  <footer>
   Developed by K Anbarasan
  </footer>
 </body>
</html>
Result: Thus a webpage is designed to display advertisemetn using CCS3 font, backgroun color anc columns proeprty.