UIkit 3 Two Columns Full Screen Sign up 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 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="[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">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="[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/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.

Related Snippets