Störer

<div class="display-4">
	<div class="circle-banner bg-primary text-white">
		<div class="circle-banner-inner rotate-n15">
			Early-Bird-Rabatt sichern!
		</div>
	</div>
</div>

<div class="display-4">
	<a class="btn btn-danger circle-banner circle-banner-lg" href="#">
		<span class="circle-banner-inner rotate-n15">
			Early-Bird-Rabatt sichern!
		</span>
	</a>
</div>

<div class="display-4">
	<a class="btn btn-danger circle-banner circle-banner-lg" href="#">
		<span class="circle-banner-inner rotate-n15">
			<span class="font-weight-normal">Save the Date!</span>
			<span class="d-block fs-0_6 lh-sm">Lorem ipsum tolle Veranstaltung</span>
			<span class="fs-0_6 lh-1 badge bg-white text-danger">Samstag, 21. Juni 2027</span>
		</span>
	</a>
</div>

<div class="position-relative">
	<div class="position-absolute right-0 z-3 display-4 p-2">
		<a class="btn btn-danger circle-banner box-shadow-dark" href="#tickets">
			<span class="circle-banner-inner rotate--15">
				Early-Bird-Rabatt sichern!
			</span>
		</a>
	</div>
</div>

<figure>
	<script>document.write('<img class="img-fluid" src="" width="1140" height="380" data-fn="lazyload" data-src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-001-1140x380.jpg" alt="Beispiel Bild">');</script>
	<noscript><img class="img-fluid" src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-001-1140x380.jpg" alt="Beispiel Bild"></noscript>
</figure>

<ul class="row list-unstyled mb-0">
	
	<li class="col-md-6 d-flex mb-4">
		
		<div class="card w-100 d-flex flex-column justify-content-between">
			
			<div>
				<h3 class="card-header h4 text-center px-md-5">Lorem ipsum dolor sit amet</h3>
				
				<div class="card-body">
					<p class="mb-0">
						Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
					</p>
				</div>
			</div>
			
			<div>
				<div class="card-body pt-0 pb-1">
					<div class="text-center p">
						<a class="btn btn-primary" href="#"><span>Lorem ipsum</span><i class="fa fa-arrow-right" aria-hidden="true"></i></a>
					</div>
				</div>
			</div>
			
		</div>
		
	</li>			
							
	<li class="position-relative z-1 col-12 col-md-auto px-md-0 pb-4 pl-5 pt-md-4 pl-md-0">
		<div class="position-absolute translate-n50 h2 mt-md-1">
			<div class="circle-banner bg-primary text-white">
				<div class="circle-banner-inner rotate-n15 fs-1 text-uppercase font-weight-normal">
					Oder
				</div>
			</div>
		</div>
	</li>		
	
	<li class="col-md-6 d-flex mb-4">
		
		<div class="card w-100 d-flex flex-column justify-content-between">
			
			<div>
				<h3 class="card-header h4 text-center px-md-5">Consectetuer adipiscing elit</h3>
				
				<div class="card-body">
					<ul class="list-unstyled">
						<li>
							<span class="position-absolute lead"><span class="badge badge-pill badge-primary">1.</span></span>
							<span class="d-inline-block ml-4 pl-3 py-1">Nulla consequat massa quis enim</span>
						</li>
						<li>
							<span class="position-absolute lead"><span class="badge badge-pill badge-primary">2.</span></span>
							<span class="d-inline-block ml-4 pl-3 py-1">Donec pede justo, fringilla vel, aliquet nec</span>
						</li>
						<li>
							<span class="position-absolute lead"><span class="badge badge-pill badge-primary">3.</span></span>
							<span class="d-inline-block ml-4 pl-3 py-1">Vulputate eget, arcu</span>
						</li>
					</ul>	
				</div>
			</div>
			
			<div>
				<div class="card-body pt-0 pb-1">
					<div class="text-center p">
						<a class="btn btn-primary" href="#" target="_blank"><span>Dolor sit</span><i class="fa fa-arrow-right" aria-hidden="true"></i></a>
					</div>
				</div>
			</div>
			
		</div>
		
	</li>
	
</ul>