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/[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-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 [email protected]">
    				<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: [email protected]<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 [email protected]">
    				<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.

Related Snippets