this is what it looks like:
https://i.sstatic.net/VLqN7.png
I need it to be at the top next to the first card.
<!-- top nav-->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:white">
<a class="navbar-brand" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="products.html">Products</a></li>
<li class="nav-item"><a class="nav-link" href="inspiration.html">Inspiration</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
</ul>
</div>
</nav>
<!--Section heading-->
<center>
<h1 class="section-heading h1 pt-4">Vedení / zaměstnanci</h1>
</center>
<!--Section description-->
<div style="padding-left:30%;padding-top:3%">
<!--Card-->
<div class="card testimonial-card back" style="width:25%">
<!--Background color-->
<div class="card-up teal lighten-2">
</div>
<!--Avatar-->
<div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px">
</div>
<div class="card-body">
<!--Name-->
<center>
<h4 class="card-title mt-1">Filip Dvořák</h4>
</center>
<hr>
<!--Quotation-->
<center>
<p>Tester, web designer, programmer and a game developer</p>
</center>
</div>
</div>
<!--Card-->
</div>
<div style="padding-left:50%">
<!--Card-->
<div class="card testimonial-card back" style="width:35%">
<!--Background color-->
<div class="card-up teal lighten-2">
</div>
<!--Avatar-->
<div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px;border-radius: 60px 60px 10px 10px;">
</div>
<div class="card-body">
<!--Name-->
<center>
<h4 class="card-title mt-1">Filip Dvořák</h4>
</center>
<hr>
<!--Quotation-->
<p>Tester, web designer, programmer and a game developer</p>
</div>
</div>
<!--Card-->
</div>
<!-- footer-->
<div style="padding-top:17.6%">
<footer class="page-footer fixed-bottom font-small white pt-4">
<div class="container">
<div class="row">
<div class="col spodek text-center" style="padding-top:25px">
<h5 class="text-uppercase font-weight-bold">contact</h5>
<p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37515e5b5e471953415845565c060477505a565e5b1954585a">[email protected]</a></p>
</div>
<div class="col"><img src="https://cdn.glitch.com/b511ed4c-fabf-49df-b72a-741fff06f5ca%2Ffghfghf.jpg?1538487766651" class="img" alt="" style="width:400px;height:125px"></div>
<div class="col spodek text-center" style="padding-top:25px">
<h5 class="text-uppercase font-weight-bold">sponsor</h5>
<p>Construsoft s.r.o.</p>
</div>
</div>
</div>
</footer>
</div>