Simple Advert

index.html

<style>
@import url('https://fonts.googleapis.com/css2?family=Festive&display=swap');
</style>

<div id='box'>
  <div id='bg'></div>
  <img id='product' src='https://source.unsplash.com/dcPNZeSY3yk'>
  <img id='person' src='https://source.unsplash.com/UOavP_Z38lE/800x450'>
  <div id='tagline' class="text">Spring Sale!</div>
  <div id='cta' class="btn btn-lg btn-outline-dark bg-light">Don't Miss It!</div>
</div>

script.js

let t1 = gsap.timeline();
t1.from("#tagline", {duration: 1, left:"50%"});
t1.to("#cta", {duration: 2, left:"25%"}, "-=0.5");
t1.fromTo("#cta", {fontSize:"100%"}, {duration: 2, fontSize:"130%"}, "-=0.5");
t1.play();

scripts

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>

simple-advert.markdown

Simple Advert

A Pen by Daniel Winterstein on CodePen.

License.

style.css

#box {
  width:500px;
  height:500px;
}
#bg {
  width:100%;
  height:100%;
  background: white;
  position:absolute;
}
#person {
  width:70%;
  right:0;
  top:0;
  border: solid white 3px;
  position:absolute;
}
#product {
  width:50%;
  left:0;
  top:30%;
  position:absolute;
}

#tagline {
  font-size:60pt;  
  left:10%;
  top:10%;
  position:absolute;
  font-family: 'Festive', cursive;
  text-shadow: 2px 2px #ffffff;
}
#cta {  
  left:0;
  top:40%;
  position:absolute;  
  font-size:100%
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />