UIkit 3 Beautiful 4 Columns Team Section

This UIkit snippet, was created to help web designers, front-end developers and back-end developer save time. Use it in your project and build your app faster, You can also download the HTML, CSS, and JS code.

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 -->

LEAVE A COMMENT

Your email address will not be published.

Related Snippets