Semantic-UI Advertisement
Last Updated :
11 May, 2023
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. Advertisement displays third-party promotional content. This is how a simple advertisement code look like.
html
<HTML>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<div class="ui banner ad">
</div>
</div>
<script src=
</script>
</body>
</html>
|
Example 1: This example creating some different size of ads.
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div class="ui container">
<div class="ui medium rectangle test ad"
data-text="Medium Rectangle">
</div>
<div class="ui banner test ad"
data-text="Banner">
</div>
<div class="ui leaderboard test ad"
data-text="Leaderboard">
</div>
<div class="ui large rectangle test ad"
data-text="Large Rectangle">
</div>
</div>
</body>
</html>
|
Output:
You can add class ‘half page’ in place of banner or any to add big half-page ad. Example 2: Skyscraper size ad.
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div class="ui container">
<div class="ui skyscraper test ad"
data-text="Skyscraper">
</div>
</div>
</body>
</html>
|
Output:
You can add class ‘UI wide skyscraper test ad” to make the skyscraper wide. 
Example 3: Banner size ad
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div style="margin-top: 10px" class="ui container">
<div class="ui banner test ad" data-text="Banner">
</div>
<div class="ui vertical banner test ad"
data-text="Vertical Banner">
</div>
<div class="ui top banner test ad"
data-text="Top Banner">
</div>
</div>
</body>
</html>
|
Output
Example 4: Leaderboard size ad
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div style="margin-top: 10px"
class="ui container">
<div class="ui leaderboard test ad"
data-text="Leaderboard">
</div>
<div class="ui large leaderboard test ad"
data-text="Large Leaderboard">
</div>
<div class="ui billboard test ad"
data-text="Billboard">
</div>
</div>
</body>
</html>
|
Output
Example 5: Netboard size
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div style="margin-top: 10px"
class="ui container">
<div class="ui netboard test ad"
data-text="Netboard">
</div>
</div>
</body>
</html>
|
Output
Example 6: Centered ad
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div style="margin-top: 10px" class="ui container">
<div class="ui centered banner test ad"></div>
</div>
</body>
</html>
|
Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...