Semantic-UI Advertisement
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"> <!-- Banner <ins class="adsbygoogle" style="display:inline-block;width:468px;height:60px" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXXXXXXXX"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> !--> </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
Please Login to comment...