<script src="https://adventori.com/lp/enabler/ADventori-2.0.0.js" crossorigin="anonymous" type="text/javascript"></script>
<link rel=stylesheet type="text/css" href="https://adventori.com/lp/enabler/ADventori-2.0.0.css">

<div id="ADventori_myAd">     
    <div id="ADventori_myContent" onclick="ADventori.click(event,ADventori.data.urlGlobal);">
      <img id="ADventori_logo" src="https://adventori.com/lp/enabler/templates/assets/logo_carre_vert.svg">         
      <div id="ADventori_title">Your Ad here</div>      
    </div>
    <div id="ADventori_cta1" onclick="ADventori.click(event,ADventori.data.url1);">Click 1</div>
    <div id="ADventori_cta2" onclick="ADventori.click(event,ADventori.data.url2);">Click 2</div>
</div>

#ADventori_myAd *{
  box-sizing: border-box;
}
#ADventori_myAd{
    margin-top: 15px;
    margin-left: 15px;
    overflow: hidden;
    width: 300px;
    height: 250px;
    cursor:pointer;
    border: 1px solid black;
    background-color: #ffffff;
    position:relative;
}
#ADventori_myContent{
    position: relative;
    width: 100%;
    height: 100%;
    background-image : url(https://adventori.com/lp/enabler/templates/assets/bg-01.jpg)
}
#ADventori_myContent::after{
    display: block;
    width: 300px;
    height: 250px;
    content: "";
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.3) 100%);
}
#ADventori_logo{
    position:absolute;
    right: 0;
    left: 0;
    display: block;
    width: 60px;
    height: 60px;
    margin: auto;
}
#ADventori_title{
    font-size: 30px;
    line-height: 33px;
    position: absolute;
    top: 90px;
    left: 0px;
    width: 100%;
    height: 30px;
    padding: 0 20px;
    text-align: center;
    color: #114454;
}
#ADventori_cta1, #ADventori_cta2{
    position: absolute;
    margin: auto;
    bottom: 35px;
    width: 90px;
    height: 36px;
    padding: 8px;
    text-align: center; 
    color:white;
    background-color:#EC6A6D;
}
#ADventori_cta1{
  left:50px;
}
#ADventori_cta2{
  right:50px;
}
ADventori.initData({
    url1:"https://www.google.com/?q=1",
    url2:"https://www.google.com/?q=2",
    urlGlobal:"https://www.google.com/?q=3"
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.