UIkit 3 Header with HTML5 Video Background

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.3.7 in Header, 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>
    
    <div class="uk-position-relative uk-background-center-center uk-background-cover" style="background-image: url('https://uikitbase.com/library/Blurred Crowd of People Walking.jpg');" uk-height-viewport>
    	<div class="uk-position-cover uk-cover-container">
    		<video autoplay loop playsinline muted uk-cover>
    			<source src="https://uikitbase.com/library/Blurred Crowd of People Walking.mp4" type="video/mp4">
    		</video>
    	</div>
    	<div class="uk-position-cover" style="background-image: linear-gradient(to right top, rgba(195, 55, 100, 0.9), rgba(166, 42, 111, 0.9), rgba(130, 38, 117, 0.9), rgba(87, 38, 118, 0.9), rgba(29, 38, 113, 0.9));"></div>
    	<nav class="uk-navbar-container uk-navbar-transparent uk-light">
    		<div class="uk-container">
    			<div uk-navbar>
    				<div class="uk-navbar-left">
    					<a href="#" class="uk-navbar-item uk-logo">
    						<img src="https://uikitbase.com/library/logo-light.png" alt="Logo">
    					</a>
    				</div>
    				<div class="uk-navbar-center">
    					<ul class="uk-navbar-nav [email protected]">
    						<li class="uk-active"><a href="#">Home</a></li>
    						<li>
    							<a href="#">Services</a>
    							<div class="uk-navbar-dropdown">
    								<ul class="uk-nav uk-navbar-dropdown-nav">
    									<li><a href="#">Ocean freight forwarding</a></li>
    									<li><a href="#">Customs house brokerage</a></li>
    									<li><a href="#">Transportation & Distribution</a></li>
    								</ul>
    							</div>
    						</li>
    						<li><a href="#">News</a></li>
    						<li><a href="#">About Us</a></li>
    						<li><a href="#">Contacts</a></li>
    					</ul>
    				</div>
    				<div class="uk-navbar-right">
    					<ul class="uk-navbar-nav [email protected]">
    						<li>
    							<div class="uk-navbar-item">
    								<a href="#" class="uk-button uk-button-small uk-button-default">Request a quote</a>
    							</div>
    						</li>
    					</ul>
    					<a href="#offcanvas-menu" class="uk-navbar-toggle [email protected]" uk-navbar-toggle-icon uk-toggle></a>
    				</div>
    			</div>
    		</div>
    	</nav>
    	<div class="uk-position-relative uk-container uk-container-small uk-flex uk-flex-middle" uk-height-viewport="offset-top: true">
    		<div class="uk-section uk-section-regular uk-width-1-1 uk-light">
    			<div class="uk-flex uk-text-center uk-flex-middle uk-flex-center">
    				<div class="uk-width-1-1">
    					<h1 class="uk-heading-small">WE PROVIDE HIGHEST QUALITY FREIGHT SERVICES</h1>
    					<div class="uk-text-lead">With 60 years of experience, we have become one of the largest logistics and freight forwarding companies.</div>
    					<div class="uk-margin-large-top">
    						<p>
    							<a href="#" class="uk-button uk-button-default uk-button-xlarge">View all services</a>
    						</p>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
  • <!-- CSS -->
  • <!-- JS -->

Leave a Reply to [email protected] Cancel reply

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

Related Snippets