A Pen by Brad Thorson.

End-of-Post-Placement.markdown

End of Post Placement

A Pen by Brad Thorson on CodePen.

License.

index.html

<div id="adsnative-inpost">
  <div class="adsnative-sponsor">
    Sponsored Content
  </div>
	<div class="adsnative-thumbnail"> 
		<img src="http://static.adsnative.com/media/709/e104b2d0-7bb4-40e2-981e-42f2da4a6424.png"> 
	</div>
	<div class="adsnative-post">
		<h3>This is a filler campaign</h3>
		<p>This campaign is for test purpose only. Please pause this campaign in your AdsNative Dashboard before you make the tags live.</p>
		<div class="adsnative-post-meta">
            <small>Promoted by Filler Campaign</small>
</div>
	</div>
	<div class="adsnative-reset"></div>
</div>

style.css

#adsnative-inpost {
    clear:both;
    margin:5% 1% 5% 1%;
    border-top:1px solid #dddddd;
    border-bottom:1px solid #dddddd;
    min-height:200px;
}
#adsnative-inpost .adsnative-sponsor {
    font-size:11px;
    padding-top:1%;
    margin-bottom:3%;
    text-transform:uppercase;
    text-align:center;
}
#adsnative-inpost .adsnative-thumbnail {
  float:left;
  padding:1%;
  width:40%;
}
#adsnative-inpost .adsnative-thumbnail img {
  width:100%;
}
#adsnative-inpost .adsnative-post {
  margin-left:1%;
  padding-top:10px;
  width:55%;
  float:left;
  padding-right:.5em;
}
#adsnative-inpost .adsnative-post h3 {
  line-height:11px;
  margin-top:0px;
  margin-bottom:15px;
  font-weight:bold;
  font-style:initial;
}
#adsnative-inpost .adsnative-post h3 a {
  text-decoration:none;
  font-size:18px;
  color:#333;
  line-height:120%;
}
#adsnative-inpost .adsnative-post p {
  padding-top:2%;
  padding-bottom: 2%;
}
#adsnative-inpost .adsnative-post-meta {
  padding-top:.5em;
  padding-bottom:.5em;
  text-align:right;
}
#adsnative-inpost .adsnative-post-meta img {
  height:1.6em;
  display:inline;
  vertical-align:-.5em;
}
#adsnative-inpost .adsnative-post small {
  font-size:12px;
  color:#999;
  margin-right: 1%;
}
.adsnative-reset { clear:both; }