Skip to content
Related Articles

Related Articles

Semantic-UI Advertisement Skyscraper Type

View Discussion
Improve Article
Save Article
  • Last Updated : 08 Mar, 2022
View Discussion
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!