UIkit 3 Simple Newsletter Subscription Section

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.5.4 in Newsletter Subscription, update June 30, 2020

  • <!-- 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>
    
    <section class="uk-section uk-section-primary uk-light">
    	<div class="uk-container">
    		<div class="uk-width-3-4@m uk-margin-auto uk-padding-large">
    			<div class="uk-text-center">
    				<h2 class="uk-h3 uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet ipsum tortor, ac aliquet dui porta a.</h2>
    			</div>
    			<div class="uk-margin-medium-top">
    				<div uk-scrollspy="cls: uk-animation-slide-bottom; repeat: true">
    					<form>
    						<div class="uk-grid-small" uk-grid>
    							<div class="uk-width-expand@s uk-first-column">
    								<input type="email" class="uk-input uk-form-large uk-width-1-1 uk-border-pill" placeholder="Email Address">
    							</div>
    							<div class="uk-width-1-1 uk-width-auto@s">
    								<input type="submit" value="Subscribe" class="uk-button uk-button-primary uk-button-large uk-border-pill">
    							</div>
    						</div>
    					</form>
    				</div>
    			</div>
    		</div>
    	</div>
    </section>
  • <!-- CSS -->
  • <!-- JS -->

LEAVE A COMMENT

Your email address will not be published.

Related Snippets