<%- include('partials/_header.ejs') -%>

<body>
	<div class="tm-page-wrap mx-auto">
		<div class="position-relative">

			<%- include('partials/_navigation.ejs') -%>

			<div class="tm-welcome-container tm-fixed-header tm-fixed-header-2">
				<div class="text-center">
					<p class="pt-5 px-3 tm-welcome-text tm-welcome-text-2 mb-1 mt-lg-0 mt-5 text-white mx-auto">Another Image BG<br>it can be fixed.<br>Content will simply slide over.</p>                	
				</div>                
            </div>

            <div id="tm-fixed-header-bg"></div> <!-- Header image -->
		</div>

		<!-- Page content -->
		<main>
			<div class="container-fluid px-0">
				<div class="mx-auto tm-content-container">					
					<div class="row mt-3 mb-5 pb-3">
						<div class="col-12">
							<div class="mx-auto tm-about-text-container px-3">
								<h2 class="tm-page-title mb-4 tm-text-primary">About the Video Catalog</h2>
								<p class="mb-4">Video Catalog is free HTML CSS template for your website. This Bootstrap v4.4.1 website template is 100% free download for everyone. You can modify and expand this template for your CMS websites. You can use it for commercial or non-commercial work. If you wish to support <a href="https://templatemo.com" class="tm-text-primary">TemplateMo</a>, please contact us.</p>
								<p class="mb-4">You are <u>not allowed</u> to re-distribute the template ZIP file on any template collection website.</p>
								<p class="mb-4">Vivamus sit amet justo sed erat iaculis consequat. Nulla suscipit posuere lectus ut venenatis. Proin sed orci eget tellus euismod vulputate eu eu arcu. Etiam a bibendum lorem. Curabitur ac bibendum odio. Vivamus euismod dui mauris, ut tincidunt mi congue quis.</p>
								<p class="mb-0">Phasellus luctus orci dolor, a luctus massa tincidunt vitae. Integer sit amet odio id libero tincidunt dignissim in eget arcu. Aliquam tristique ut magna sit amet tincidunt. Sed tempor tellus nulla, molestie luctus lectus tincidunt id. Cras duismod leo a urna placerat, vel blandit turpis fermentum.</p>	
							</div>							
						</div>						
					</div>					
				</div>

				<div class="parallax-window" data-parallax="scroll" data-image-src="img/about-2.jpg"></div>

				<div class="mx-auto tm-content-container mt-4 px-3">
					<div class="row tm-catalog-item-list mb-4">
		                <div class="col-lg-4 col-md-6 col-sm-12 tm-catalog-item">
		                    <div class="tm-bg-gray p-4">
		                        <i class="fas fa-headphones fa-5x p-3 mb-4 tm-about-icon"></i>
		                        <h3 class="tm-text-primary mb-3">Cras convallis mollis justo</h3>
		                        <p>Sed dapibus vulputate diam nec hendrerit. In libero purus, interdum vitae purus nec, convallis sollicitudin nunc. Curabitur maximus maximus ex a scelerisque.</p>
		                    </div>		                    
		                </div>
		                <div class="col-lg-4 col-md-6 col-sm-12 tm-catalog-item">
		                    <div class="tm-bg-gray p-4">
		                        <i class="fas fa-broadcast-tower fa-5x p-3 mb-4 tm-about-icon"></i>
		                        <h3 class="tm-text-primary mb-3">Nullam dictum pretium</h3>
		                        <p>Quisque vestibulum lectus eros, tincidunt ultricies ante euismod non. Ut sed consequat est, quis lobortis lorem. Nullam dictum pretium mauris eu aliquam.</p>
		                    </div>	
		                </div>
		                <div class="col-lg-4 col-md-6 col-sm-12 tm-catalog-item">
		                    <div class="tm-bg-gray p-4">
		                        <i class="fas fa-film fa-5x p-3 mb-4 tm-about-icon"></i>
		                        <h3 class="tm-text-primary mb-3">Etiam in quam dolor</h3>
		                        <p>Aliquam in congue diam, non tincidunt ligula. Suspendisse facilisis elit eget quam semper aliquet. Donec ut purus aliquet, imperdiet lacus id, faucibus lectus.</p>
		                    </div>	
		                </div>
		                <div class="col-lg-4 col-md-6 col-sm-12 tm-catalog-item">
		                    <div class="tm-bg-gray p-4">
		                        <i class="far fa-map fa-5x p-3 mb-4 tm-about-icon"></i>
		                        <h3 class="tm-text-primary mb-3">Duis ornare felis nec orci</h3>
		                        <p>Nam dapibus lectus ultricies neque feugiat eleifend. Donec ornare dolor suscipit metus hendrerit, vel malesuada neque mattis. Fusce posuere cursus mattis.</p>
		                    </div>	
		                </div>
		                <div class="col-lg-4 col-md-6 col-sm-12 tm-catalog-item">
		                    <div class="tm-bg-gray p-4">
		                        <i class="fas fa-rainbow fa-5x p-3 mb-4 tm-about-icon"></i>
		                        <h3 class="tm-text-primary mb-3">Class aptent taciti sociosqu</h3>
		                        <p>Maecenas et libero in eros laoreet finibus sed vitae diam. Etiam consetetur, nunc sed pretium elementum, diam erat fringilla tortor, placerat condimentum.</p>
		                    </div>	
		                </div>
		                <div class="col-lg-4 col-md-6 col-sm-12 tm-catalog-item">
		                    <div class="tm-bg-gray p-4">
		                        <i class="fas fa-cloud-sun-rain fa-5x p-3 mb-4 tm-about-icon"></i>
		                        <h3 class="tm-text-primary mb-3">Suspendisse ut malesuada</h3>
		                        <p>Vestibulum non lectus id lacus aliquet porttitor in non nulla. Aenean urna diam, finibys id lorem nec, feugiat convallis dolor. Integer aliquam, eros eget rutrum iaculis.</p>
		                    </div>	
		                </div>
		            </div>
				</div>

				<div class="parallax-window" data-parallax="scroll" data-image-src="img/about-3.jpg"></div>
			</div>
		</main>

		<div class="container-fluid tm-content-container mx-auto pt-5">
			
			<%- include('partials/_footer.ejs') -%>

		</div>		
	</div>

	<script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/parallax.min.js"></script>
</body>
</html>