Horje
Semantic-UI Advertisement Banner Type

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. Semantic UI Advertisement offers us 10 types of advertisement ads, Common Units, Mobile, Rectangle, Button, Skyscraper, Banner, Leaderboards, Panorama, and netboard. In this article, we will know about the Banner type advertisement. We can manipulate the banner type of advertisement. 

Semantic UI Advertisement Banner Class:

  • banner: This class is used to create normal banner-type advertisements.
  • top: This class is used to create wide banner type advertisement, here banner class is a must with the.
  • vertical: This class is used to create vertical thin banner-type advertisements.
  • half: This class is used to create half-banner-type advertisements.

Syntax:

<div class="ui banner-class test ad">
  ....
</div>

Below examples  illustrate  the Semantic UI Advertisement Banner Type:

Example 1: In this article, we will use a normal banner and top banner.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Semantic-UI Advertisement Banner Type</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" />
</head>
<body>
    <center>
        <h1 class="ui header green">
            GeeksforGeeks
        </h1>
        <strong>Semantic UI Advertisement Banner Type</strong>
    </center>
    <strong>Banner:</strong>
    <div class="ui banner test ad"
         data-text="Banner">
    </div>
    <strong>Top Banner:</strong>
    <div class="ui top banner test ad"
         data-text="Top Banner">
    </div>
</body>
</html>

Output:

Semantic UI Advertisement

Semantic UI Advertisement Banner Type

Example 2: In this article we will use vertical and half banner.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Semantic-UI Advertisement Banner Type</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" />
</head>
<body>
    <center>
        <h1 class="ui header green">
            GeeksforGeeks
        </h1>
        <strong>Semantic UI Advertisement Banner Type</strong>
    </center>
    <strong>Vertical Banner:</strong>
    <div class="ui vertical banner test ad"
         data-text="Vertical Banner">
    </div>
    <strong>Half Banner:</strong>
    <div class="ui half banner test ad"
         data-text="Half Banner">
    </div>
</body>
</html>

Output:

Semantic UI Advertisement Type

Semantic UI Advertisement Type

Reference: https://semantic-ui.com/views/advertisement.html#banner


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
Semantic-UI Search Variations Semantic-UI Search Variations
Semantic-UI Card Raised Variation Semantic-UI Card Raised Variation
Semantic-UI Dimmer Blurring Variation Semantic-UI Dimmer Blurring Variation
Semantic-UI Image Group Size Semantic-UI Image Group Size
Semantic-UI Advertisement Skyscraper Type Semantic-UI Advertisement Skyscraper Type

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 9



 

Horje