UIkit 3 Two Columns Full Screen Sign in Page

<!-- 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-grid uk-grid-collapse" data-uk-grid>
	<div class="[email protected] uk-padding-large uk-flex uk-flex-middle uk-flex-center" data-uk-height-viewport>
		<div class="[email protected]">
			<div class="uk-text-center uk-margin-bottom">
				<a class="uk-logo uk-text-primary uk-text-bold" href="#">UIkitBase</a>
			</div>
			<div class="uk-text-center uk-margin-medium-bottom">
				<h1 class="uk-letter-spacing-small">Sign In to UIkitBase</h1>
			</div>
			<div class="uk-grid uk-child-width-auto uk-grid-small uk-flex uk-flex-center uk-margin" data-uk-grid>
				<div>
					<a href="#" data-uk-icon="icon: facebook" class="uk-icon-button uk-icon-button-large"></a>
				</div>
				<div>
					<a href="#" data-uk-icon="icon: google" class="uk-icon-button uk-icon-button-large"></a>
				</div>
				<div>
					<a href="#" data-uk-icon="icon: linkedin" class="uk-icon-button uk-icon-button-large"></a>
				</div>
			</div>
			<div class="uk-text-center uk-margin">
				<p class="uk-margin-remove">Or use your email account:</p>
			</div>
			<form>
				<div class="uk-width-1-1 uk-margin">
					<label class="uk-form-label" for="email">Email</label>
					<input id="email" class="uk-input uk-form-large" type="email" placeholder="Enter your email">
				</div>
				<div class="uk-width-1-1 uk-margin">
					<label class="uk-form-label" for="password">Password</label>
					<input id="password" class="uk-input uk-form-large" type="password" placeholder="Enter your password">
				</div>
				<div class="uk-width-1-1 uk-margin uk-text-center">
					<a class="uk-text-small uk-link-muted" href="#">Forgot your password?</a>
				</div>
				<div class="uk-width-1-1 uk-text-center">
					<button class="uk-button uk-button-primary uk-button-large">Sign In</button>
				</div>
			</form>
		</div>
	</div>
	<div class="[email protected] uk-padding-large uk-flex uk-flex-middle uk-flex-center uk-light uk-background-cover uk-background-norepeat uk-background-blend-overlay uk-overlay-primary" style="background-image: url(https://source.unsplash.com/2FPjlAyMQTA/680x1000);" data-uk-height-viewport>
		<div>
			<div class="uk-text-center">
				<h2 class="uk-h1 uk-letter-spacing-small">Hello There, Join Us</h2>
			</div>
			<div class="uk-margin-top uk-margin-medium-bottom uk-text-center">
				<p>Enter your personal details and join the learning community</p>
			</div>
			<div class="uk-width-1-1 uk-text-center">
				<a href="#" class="uk-button uk-button-primary uk-button-large">Sign Up</a>
			</div>
		</div>
	</div>
</div>

<!-- CSS -->

<!-- JS -->