<div class="banner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet faucibus turpis ac accumsan. ornare a in lacus. </p>
<button> Button 1</button>
<button> Button 2</button>
</div>
.banner {
--w:700px;
--c:(100vw - var(--w));
color:#fff;
background:#000e;
padding:10px;
box-sizing:border-box;
text-align:center;
position:fixed;
bottom:clamp(0px,var(--c)*1000,calc(100% - 10px));
transform:translateY(clamp(0%,var(--c)*1000,100%));
right:clamp(0px,var(--c)*1000,10px);
width:clamp(300px,var(--c)*-1000,100%);
}
.banner p {
margin:0;
display:inline-block;
text-align:left;
}
.banner button {
border:none;
cursor:pointer;
background:#fff;
color:#000;
margin: 10px 5px 0 0;
font-size:clamp(15px,var(--c)*1000,20px);
padding: 5px 20px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.