Amazon Sidebar Ads

by Kevin Pliester

HTML

<div class="widget">

  <div class="gp_amazon_sidebar_ad">

    <a href="https://www.amazon.de/computer-video-spiele-games-konsolen/b/ref=as_li_ss_tl?_encoding=UTF8&camp=1638&creative=19454&linkCode=ur2&node=300992&site-redirect=de&tag=sidebar-banner-21" class="gpasad">

      <div class="gpasad_text">

        <img src="http://www.gameplane.de/wp-content/uploads/2017/01/amazon_logo_q.jpg" alt="Amazon" />
        <span class="gpasad_h">Die besten Games bei Amazon</span>
        <span class="gpasad_t">Durchklicken, bestellen, spielen..</span>
      </div>

    </a>

    <a href="https://www.amazon.de/gp/angebote/ref=as_li_ss_tl?ie=UTF8&camp=1638&creative=19454&linkCode=ur2&site-redirect=de&tag=sidebar-banner-21" class="gpasad">

      <div class="gpasad_text">

        <img src="http://www.gameplane.de/wp-content/uploads/2017/01/amazon_logo_q.jpg" alt="Amazon" />
        <span class="gpasad_h">Blitzangebote bei Amazon</span>
        <span class="gpasad_t">Jeden Tag stark reduzierte Angebote und Deals.</span>
      </div>

    </a>

  </div>

</div>

CSS

.widget {
  margin: 15px;
  padding: 15px;
  max-width: 300px;
  font-family: arial;
  font-size: 13px;
  background: #fff;
  height: 100%;
  min-height: 500px;
}

.gp_amazon_sidebar_ad {
  border: 1px solid #ddd;
  padding: 10px;
  position: relative;
  background: #fff;
}

.gp_amazon_sidebar_ad a {
  color: #333;
  text-decoration: none;
}

.gp_amazon_sidebar_ad::after {
  content: 'Deals & Angebote';
  position: absolute;
  bottom: 0;
  right: 0;
  color: #bbb;
  font-size: 12px;
  margin: 0 5px 2px;
}

.gp_amazon_sidebar_ad .gpasad {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

.gp_amazon_sidebar_ad .gpasad:hover {
  background: #eee;
}

.gp_amazon_sidebar_ad .gpasad:after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0px;
}

.gp_amazon_sidebar_ad .gpasad img {
  max-width: 67.5px;
  height: auto;
  float: left;
  border: 1px solid #999;
  margin-right: 10px;
}

.gp_amazon_sidebar_ad .gpasad .gpasad_text {
  margin-bottom: 5px;
}

.gp_amazon_sidebar_ad .gpasad .gpasad_h {
  display: block;
  font-weight: bold;
  padding: 2.5px 0 0;
}

.gp_amazon_sidebar_ad .gpasad .gpasad_t {
  display: block;
}