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 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 Skyscraper Type
Reference: https://semantic-ui.com/views/advertisement.html#skyscraper
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
08 Mar, 2022
Like Article
Save Article