UIkit 3 Two Columns Full Screen Sign in Page

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.15.9 in Sign in, update December 27, 2022

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

LEAVE A COMMENT

Your email address will not be published.

Related Snippets