Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Semantic-UI | Advertisement

  • Last Updated : 20 May, 2020

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 addvertisement code look like.




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




<!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 ad big half-page ad.

Example 2: Skyscraper size ad.




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

You can add class ‘UI wide skyscraper test ad” to make the skyscraper wide.
Output:

Example 3: Banner size ad




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




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




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




<!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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!