UIkit 3 Two Columns Projects Slider 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.5.4 in Projects, update July 27, 2020

  • <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.4/dist/css/uikit.min.css" />
    
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.4/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.1.0/dist/js/uikit-icons.min.js"></script>
    
    <div class="uk-section">
    	<div class="uk-container">
    		<div class="uk-visible-toggle" uk-slider="autoplay: false">
    			<div class="uk-position-relative">
    				<div class="uk-slider-container uk-box-shadow-medium uk-background-primary-light">
    					<ul class="uk-slider-items uk-child-width-1-1">
    						<li>
    							<div class="uk-grid-collapse" uk-grid>
    								<div class="uk-width-1-2@s">
    									<img src="https://source.unsplash.com/ELYUBrnvLtg/800x800" alt="Image">
    								</div>
    								<div class="uk-width-expand@s uk-flex uk-flex-middle">
    									<div class="uk-padding-large">
    										<h3 class="uk-text-uppercase uk-h5 uk-letter-spacing-small">Our Best Projects</h3>
    										<h2 class="uk-heading-small uk-margin-medium-top">Education</h2>
    										<div>
    											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    										</div>
    										<hr class="uk-margin-medium-top uk-separator-small">
    										<h3 class="uk-margin-remove uk-text-uppercase uk-h5 uk-letter-spacing-small">
    											<a href="#">View Details<span class="uk-margin-left" uk-icon="arrow-right"></span></a>
    										</h3>
    									</div>
    								</div> 
    							</div>
    						</li>
    						<li>
    							<div class="uk-grid-collapse" uk-grid>
    								<div class="uk-width-1-2@s">
    									<img src="https://source.unsplash.com/2LgJiWdDdO4/800x800" alt="Image">
    								</div>
    								<div class="uk-width-expand@s uk-flex uk-flex-middle">
    									<div class="uk-padding-large">
    										<h3 class="uk-text-uppercase uk-h5 uk-letter-spacing-small">Our Best Projects</h3>
    										<h2 class="uk-heading-small uk-margin-medium-top">Technology</h2>
    										<div>
    											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    										</div>
    										<hr class="uk-margin-medium-top uk-separator-small">
    										<h3 class="uk-margin-remove uk-text-uppercase uk-h5 uk-letter-spacing-small">
    											<a href="#">View Details<span class="uk-margin-left" uk-icon="arrow-right"></span></a>
    										</h3>
    									</div>
    								</div> 
    							</div>
    						</li>
    					</ul>
    				</div>
    				<div class="uk-hidden@l">
    					<a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
    					<a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a>
    				</div>
    				<div class="uk-visible@l">
    					<a class="uk-position-center-left-out uk-slidenav-large" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
    					<a class="uk-position-center-right-out uk-slidenav-large" href="#" uk-slidenav-next uk-slider-item="next"></a>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
  • <!-- CSS -->
  • <!-- JS -->

LEAVE A COMMENT

Your email address will not be published. Required fields are marked *

Related Snippets