Build with UIkit 3.3.7 in Team, update June 17, 2020
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<div class="uk-section uk-position-relative uk-overflow-hidden" uk-scrollspy="cls:uk-animation-fade; offset-top: 80px; delay: 300">
<div class="uk-container uk-position-relative">
<h3>Our Team</h3>
<div class="uk-flex uk-flex-center" uk-grid uk-scrollspy="cls:uk-animation-fade; target: .team-member-item; delay: 300">
<div class="uk-width-1-2 [email protected] uk-transition-toggle team-member-item">
<div class="uk-background-cover uk-transition-toggle uk-margin-bottom uk-position-relative cover-image" data-src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" uk-img>
<div class="uk-transition-fade uk-position-cover uk-overlay-primary uk-overlay-dark uk-flex uk-flex-center uk-flex-middle">
<ul class="uk-iconnav">
<li><a href="#"><span uk-icon="facebook"></span></a></li>
<li><a href="#"><span uk-icon="twitter"></span></a></li>
<li><a href="#"><span uk-icon="instagram"></span></a></li>
<li><a href="#"><span uk-icon="linkedin"></span></a></li>
</ul>
</div>
</div>
<span class="uk-display-block uk-text-bold">Manuella Nevoresky</span>
<span class="uk-display-block">CEO - FOUNDER</span>
</div>
<div class="uk-width-1-2 [email protected] uk-transition-toggle team-member-item">
<div class="uk-background-cover uk-transition-toggle uk-margin-bottom uk-position-relative cover-image" data-src="https://images.pexels.com/photos/1082962/pexels-photo-1082962.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" uk-img>
<div class="uk-transition-fade uk-position-cover uk-overlay-primary uk-overlay-dark uk-flex uk-flex-center uk-flex-middle">
<ul class="uk-iconnav">
<li><a href="#"><span uk-icon="facebook"></span></a></li>
<li><a href="#"><span uk-icon="twitter"></span></a></li>
<li><a href="#"><span uk-icon="instagram"></span></a></li>
<li><a href="#"><span uk-icon="linkedin"></span></a></li>
</ul>
</div>
</div>
<span class="uk-display-block uk-text-bold">Samuel Hardy</span>
<span class="uk-display-block">CEO - FOUNDER</span>
</div>
<div class="uk-width-1-2 [email protected] uk-transition-toggle team-member-item">
<div class="uk-background-cover uk-transition-toggle uk-margin-bottom uk-position-relative cover-image" data-src="https://images.pexels.com/photos/532220/pexels-photo-532220.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" uk-img>
<div class="uk-transition-fade uk-position-cover uk-overlay-primary uk-overlay-dark uk-flex uk-flex-center uk-flex-middle">
<ul class="uk-iconnav">
<li><a href="#"><span uk-icon="facebook"></span></a></li>
<li><a href="#"><span uk-icon="twitter"></span></a></li>
<li><a href="#"><span uk-icon="instagram"></span></a></li>
<li><a href="#"><span uk-icon="linkedin"></span></a></li>
</ul>
</div>
</div>
<span class="uk-display-block uk-text-bold">Tom Sunderland</span>
<span class="uk-display-block">CEO - FOUNDER</span>
</div>
<div class="uk-width-1-2 [email protected] uk-transition-toggle team-member-item">
<div class="uk-background-cover uk-transition-toggle uk-margin-bottom uk-position-relative cover-image" data-src="https://images.pexels.com/photos/6980/summer-cute-hipster-beauty.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" uk-img>
<div class="uk-transition-fade uk-position-cover uk-overlay-primary uk-overlay-dark uk-flex uk-flex-center uk-flex-middle">
<ul class="uk-iconnav">
<li><a href="#"><span uk-icon="facebook"></span></a></li>
<li><a href="#"><span uk-icon="twitter"></span></a></li>
<li><a href="#"><span uk-icon="instagram"></span></a></li>
<li><a href="#"><span uk-icon="linkedin"></span></a></li>
</ul>
</div>
</div>
<span class="uk-display-block uk-text-bold">John Tarly</span>
<span class="uk-display-block">CEO - FOUNDER</span>
</div>
</div>
</div>
</div>.team-member-item {
max-width: 350px;
}
.team-member-item .cover-image {
height: 350px;
}
@media (min-width: 960px) {
.team-member-item:nth-child(even) {
margin-top: 50px;
}
}<!-- JS -->
