UIkit 3 Header with HTML5 Video Background

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 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 Reply to David Cancel reply

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

Related Snippets