Open In App

Semantic-UI Advertisement Skyscraper Type

Improve
Improve
Like Article
Like
Save
Share
Report

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 Skyscraper type advertisement.

Semantic UI Advertisement Skyscraper Classes:

  • skyscraper: This class is used to create an ad in skyscraper ad unit size.
  • wide: This class is used to make skyscrapers ad wider.

Syntax:

<div class="ui skyscraper test ad">
...
</div>

Below examples  illustrate  the Semantic UI Advertisement Skyscraper Type:

Example 1: In this example, we will use the skyscraper advertisement.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Semantic UI Advertisement Skyscraper Type</title>
    <link href=
         rel="stylesheet" />
</head>
<body>
    <center>
        <h1 class="ui header green">
            GeeksforGeeks
        </h1>
        <strong>Semantic UI Advertisement skyscraper Type</strong>
    </center>
    <strong>Skyscraper :</strong>
    <div class="ui skyscraper test ad"
         data-text="Skyscraper">
    </div>
</body>
</html>


Output:

Semantic UI Advertisement Skycrapper Type

Semantic UI Advertisement Skyscraper Type

Example 2: In this example, we will use the wide skyscraper.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Semantic UI Advertisement Skyscraper Type</title>
    <link href=
        rel="stylesheet" />
</head>
<body>
    <center>
        <h1 class="ui header green">
            GeeksforGeeks
        </h1>
        <strong>Semantic UI Advertisement skyscraper Type</strong>
    </center>
    <strong>Wide Skyscraper :</strong>
    <div class="ui wide skyscraper test ad"
         data-text="wide Skyscraper">
    </div>
</body>
</html>


Output:

Semantic UI Advertisement Skycrapper Type

Semantic UI Advertisement Skyscraper Type

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



Last Updated : 08 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads