UIkit 3 Two Columns Contact Page

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 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: [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 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