safeframe/examples/IAB_RisingStars/AdFiles/adContentTemplates/portraitAd.html

SafeFrame provides a consistent JS API to include 3rd party content

<!--
THIS IS EMBEDDED AS scripted content .
Source here is provided as a mechanism to make the ad more readable.
Actual source is translated into Javascript string and placed in "portraitAdBootstrap.js" file.
-->
<style>
#adBase{
 top : 0px;
 left : 0px;
 width: 300px;
 height: 1050px;
}

#adLogo{
  float : right;
 max-width: 270px;
  width: 270px;
  height : 40px;
  margin-right : 15px;
  margin-left : 15px;
  margin-top : 15px;
  margin-bottom : 10px;
}

#adLogo > div{
  display: inline-block;
  padding: 6px; margin: 2px;
  border: 1px solid #333;
}

#adModule1Collapsed{
 clear : both;
  float : right;
 position : relative;
  width : 270px;
  height : 460px;
 cursor : pointer;
  margin-right : 15px;
  margin-left : 15px;
  margin-bottom : 15px;
  margin-top : 0px;
  background-image: url(https://s3-us-west-2.amazonaws.com/safeframe/examples/IAB_RisingStars/AdFiles/ad460.png);
}

#adModule1Expansion{
 display : none;
  position : absolute;
  left : -343px;
 width : 613px;
  height : 460px;
 cursor : pointer;
}

#adModule2Collapsed{
 clear : both;
  float : right;
 position : relative;
  width : 270px;
  height : 202px;
 cursor: pointer;
  margin-right : 15px;
  margin-left : 15px;
  margin-bottom : 5px;
  margin-top : 0px;
}

#adModule2Expansion{
 display : none;
  position : absolute;
 left : -135px;
  width : 405px;
  height : 303px;
 cursor : pointer;
}

#adModule3Collapsed{
 clear : both;
  float : right;
 position : relative;
  width : 270px;
  height : 202px;
 cursor : pointer;
  margin-right : 15px;
  margin-left : 15px;
  margin-bottom : 50px;
  margin-top : 10px;
}

#adModule3Expansion{
 display : none;
  position : absolute;
 top : -101px;
 left : -135px;
  width : 405px;
  height : 303px;
 cursor : pointer;
}

.adContent{
  position : relative;
  background-color : orange;
  margin : 15px;
}

.adContent > div, .adContent > h1, .adContent > p {
 padding: 5px;
}

</style>


<div id="adBase" style="width: 300px;">
 <!-- Pushdown Teaser -->
 <div id="adLogo" class="adContent"><div>LOGO HERE</div>
 </div>
 
 <div id="adModule1Collapsed" class="adContent" onclick="expandModule(1)" style="display: block; z-index: 1;">
  <div id="adModule1Expansion" onclick="collapseModule(1)" style="display: none; z-index: 3000; padding: 0px;"> <!-- 343 because of the 15px margins on both sides -->
  <img src="https://s3-us-west-2.amazonaws.com/safeframe/examples/IAB_RisingStars/AdFiles/adModule1Expansion.png">
  </div>
 </div>
 <div id="adModule2Collapsed" class="adContent" onclick="expandModule(2)" style="display: block; z-index: 1;">
  <div id="adModule2Expansion" onclick="collapseModule(2)" style="display: none;"> 
  <img src="https://s3-us-west-2.amazonaws.com/safeframe/examples/IAB_RisingStars/AdFiles/adModule2Expansion.png">
  </div>
 </div>
 <div id="adModule3Collapsed" class="adContent" onclick="expandModule(3)" style="display: block; z-index: 1;">
  <div id="adModule3Expansion" onclick="collapseModule(3)" style="display: none;">
  <img src="https://s3-us-west-2.amazonaws.com/safeframe/examples/IAB_RisingStars/AdFiles/adModule2Expansion.png">
  </div>
 </div>
</div>

<script src="https://s3-us-west-2.amazonaws.com/safeframe/examples/IAB_RisingStars/AdFiles/adPortraitBehavior.js"></script>