UIkit 3 Two Columns Full Screen Sign up Page

Build with UIkit 3.15.9 in Sign up, 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="uk-width-1-2@m uk-padding-large uk-flex uk-flex-middle uk-flex-center" data-uk-height-viewport>
    		<div class="uk-width-3-4@s">
    			<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">Create an Account</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 for registration:</p>
    			</div>
    			<form>
    				<div class="uk-width-1-1 uk-margin">
    					<label class="uk-form-label" for="name">Full name</label>
    					<input id="name" class="uk-input uk-form-large" type="text" placeholder="Enter your name">
    				</div>
    				<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 email">
    				</div>
    				<div class="uk-width-1-1 uk-text-center">
    					<button class="uk-button uk-button-primary uk-button-large">Sign up</button>
    				</div>
    				<div class="uk-width-1-1 uk-margin uk-text-center">
    					<p class="uk-text-small uk-margin-remove">By signing up you agree to our <a class="uk-link-border" href="#">terms</a> of service.</p>
    				</div>
    			</form>
    		</div>
    	</div>
    	<div class="uk-width-1-2@m 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/nF8xhLMmg0c/680x1000);" data-uk-height-viewport>
    		<div>
    			<div class="uk-text-center">
    				<h2 class="uk-h1 uk-letter-spacing-small">Welcome Back</h2>
    			</div>
    			<div class="uk-margin-top uk-margin-medium-bottom uk-text-center">
    				<p>Already signed up, enter your details and start the learning today</p>
    			</div>
    			<div class="uk-width-1-1 uk-text-center">
    				<a href="sign-in.html" class="uk-button uk-button-primary uk-button-large">Sign In</a>
    			</div>
    		</div>
    	</div>
    </div>
  • <!-- CSS -->
  • <!-- JS -->

LEAVE A COMMENT

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

Related Snippets