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.
<!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 Skyscraper Type
Example 2: In this example, we will use the wide skyscraper.
<!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 Skyscraper Type
Reference: https://semantic-ui.com/views/advertisement.html#skyscraper