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...