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


#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;
}
#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: 120px;
    left: 0px;
    width: 100%;
    height: 30px;
    padding: 0 20px;
    text-align: center;
    color: #114454;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.