Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

Semantic-UI Advertisement Skyscraper Type

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like 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
Last Updated : 08 Mar, 2022
Like Article
Save Article
Similar Reads
Related Tutorials