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/uikit@3.3.7/dist/css/uikit.min.css" />
    
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.7/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 uk-visible@m">
    						<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 uk-visible@m">
    						<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 uk-hidden@m" 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 COMMENT

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

Related Snippets