UIkit 3 Two Columns Contact 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.1.0 in Contact, update June 17, 2020

  • <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.1.0/dist/css/uikit.min.css" />
    
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.1.0/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.1.0/dist/js/uikit-icons.min.js"></script>
    
    <div class="uk-section uk-section-default" uk-height-viewport="expand: true">
    	<div class="uk-container uk-container-large">
    		<div class="uk-grid-large uk-margin" uk-grid>
    			<div class="uk-grid-item-match uk-flex-middle uk-width-expand@m">
    				<div class="uk-panel">
    					<h1 class="uk-heading-hero">Let’s talk</h1>
    					<div class="uk-divider-small"></div>
    					<div class="uk-margin uk-width-xlarge">
    						<p>If you need more information about any of our services, do not hesitate to contact us.</p>
    						<p>Phone: (907) 230-0259<br />Email: info@yourdomain.com<br /><br /></p>
    						<p>8263 Courtland Dr.<br />Romeoville, IL 60446</p>
    					</div>
    					<div class="uk-margin">
    						<div class="uk-flex-middle uk-grid-small uk-child-width-auto" uk-grid>
    							<div>
    								<a href="#" target="_blank" title="Facebook" class="uk-button uk-button-text">
    									<span uk-icon="facebook"></span>
    								</a>
    							</div>
    							<div>
    								<a href="#" target="_blank" title="Instagram" class="uk-button uk-button-text">
    									<span uk-icon="instagram"></span>
    								</a>
    							</div>
    							<div>
    								<a href="#" target="_blank" title="Pinterest" class="uk-button uk-button-text">
    									<span uk-icon="pinterest"></span>
    								</a>
    							</div>
    							<div>
    								<a href="#" target="_blank" title="LinkedIn" class="uk-button uk-button-text">
    									<span uk-icon="linkedin"></span>
    								</a>
    							</div>
    							<div>
    								<a href="#" target="_blank" title="Yelp!" class="uk-button uk-button-text">
    									<span uk-icon="yelp"></span>
    								</a>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    			<div class="uk-grid-item-match uk-flex-middle uk-width-expand@m">
    				<div class="uk-panel">
    					<div class="uk-margin">
    						<form action="" method="post">
    							<div class="uk-margin">
    								<label class="uk-form-label" for="name">Name</label>
    								<input type="text" name="name" id="form-s-text" placeholder="Enter your name..." class="uk-input">
    							</div>
    							<div class="uk-margin">
    								<label class="uk-form-label" for="email">E-Mail</label>
    								<input type="text" name="email" id="form-s-text" placeholder="Enter your E-Mail address..." class="uk-input">
    							</div>
    							<div class="uk-margin">
    								<label class="uk-form-label" for="subject">Subject</label>
    								<input type="text" name="subject" id="form-s-text" placeholder="Enter your subject..." class="uk-input">
    							</div>
    							<div class="uk-margin">
    								<label class="uk-form-label" for="message">Message</label>
    								<textarea name="message" id="messafe" rows="5" placeholder="Enter your message..." class="uk-textarea"></textarea>
    							</div>
    						</form>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
  • <!-- CSS -->
  • <!-- JS -->

LEAVE A COMMENT

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

Related Snippets