<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="container1">
<h1>addImage()</h1>
<div id="ADventori_myAd1">
<div id="ADventori_myContent1">
<img id="ADventori_logo1" src="https://adventori.com/lp/enabler/templates/assets/logo_carre_vert.svg">
<div id="ADventori_Container_img1"></div>
</div>
</div>
</div>
#container1{
margin-left: 25px;
width: 300px;
height: 400px;
display:inline-block;
position:relative;
}
h1{
height: 30px;
width: 300px;
font-size: 15px;
position: absolute;
top: 5px;
color: #114454;
}
p{
width: 300px;
font-size: 13px;
top: 20px;
color: #353535;
position: absolute;
}
#ADventori_myAd1 *{
box-sizing: border-box;
}
#ADventori_myAd1{
margin-top: 80px;
float: left;
overflow: hidden;
width: 300px;
height: 250px;
cursor:pointer;
border: 1px solid black;
background-color: #ffffff;
}
#ADventori_myContent1, #ADventori_myContent2, #ADventori_myContent3{
position: relative;
width: 100%;
height: 100%;
background-image : url(https://adventori.com/lp/enabler/templates/assets/bg-01.jpg)
}
#ADventori_myContent1::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_logo1{
position:absolute;
right: 0;
left: 0;
display: block;
width: 60px;
height: 60px;
margin: auto;
}
#ADventori_Container_img1{
width: 270px;
height: 160px;
font-size: 22px;
line-height: 25px;
position: absolute;
top: 75px;
left: 0px;
right:0px;
margin:auto;
color: #114454;
background-color:#EC6A6D;
overflow:hidden;
}
#ADventori_Container_img1 img{
position:absolute;
top:50%;
left:0;
right:0;
margin:0 auto;
max-width:100%;
max-height:100%;
transform:translateY(-50%);
}
ADventori.initData({
"photo":"https://www.w3schools.com/css/img_fjords.jpg"
});
//banner 1
ADventori.Display.addImage(document.getElementById('ADventori_Container_img1'),ADventori.data.photo, ADventori.data.photo);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.