UIkit 3 Two Columns Projects Slider Section

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