about.html

<!DOCTYPE html>
<head>

	<!-- Meta -->
	<meta charset="utf-8">
	<title>Xpert Stack - We craft beautiful digital solutions</title>
	<meta name="description" content="Another web startup from bangladesh.">
	<meta name="author" content="Xpert Stack">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- CSS -->
	<link rel="stylesheet" href="css/base.css"/>
	<link rel="stylesheet" href="css/skeleton.css"/>
	<link rel="stylesheet" href="css/layout.css"/>
	<link rel="stylesheet" href="https://use.fontawesome.com/1652f679dc.css">
	<link rel="stylesheet" href="css/retina.css"/>
	<link rel="stylesheet" href="css/animsition.min.css"/>
	<link rel="shortcut icon" href="favicon.png">
</head>
<body>

	<div class="animsition">

	<!-- Navbar -->
		<div id="menu-wrap" class="menu-back cbp-af-header">
			<div class="container">
				<div class="sixteen columns">
					<div class="logo"></div>
					<ul class="slimmenu">
						<li>
							<a href="index.html">Mainpage</a>
						</li>
						<li>
							<a class="active-menu" href="about.html" class="animsition-link">About</a>
						</li>
						<li>
							<a href="#">Portfolio</a>
						</li>
						<li>
							<a href="https://medium.com/XpertStack" target="_blank" class="animsition-link">Blog</a>
						</li>
						<li>
							<a href="contact.html">Contact</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

	<!-- Primary Layout -->

	<section class="cd-section">
		<div class="cd-block">
			<div class="about-top">

				<div class="big-text-pages-top">
					<h1>Xpert Stack<span>.</span></h1>
				</div>

				<div class="small-text">- we craft beautiful digital solutions -</div>

				<a href="#scroll-link" class="scroll scroll-down"></a>

			</div>
		</div>
	</section> <!-- .cd-section -->

	<section class="section white-background padding-top-bottom shadow-sec" id="scroll-link">
		<div class="container">
			<div class="eight columns">
				<div class="section-big-header-text">
					<h2>Original ideas into digital work<span>.</span></h2>
					<div class="line-big-header"></div>
					<p>We believe in coming up with original ideas and turning them into digital work that is both innovative and measurable.</p>
				</div>
			</div>
			<div class="eight columns">
				<p class="text-bottom-margin">We carry a passion for performance marketing and have a knack for untangling even the toughest of knots.</p>
				<p class="text-bottom-margin">We are relentless in moving boundaries and carry out this spirited attitude into digital solutions. Digital solutions that engage, inspire and make you think. Make you curious.</p>
				<p>Taking on thought-provoking projects that challenge us creatively and make us go the extra mile is what we consider a way of life.</p>
			</div>
		</div>
	</section>

	<section class="section white-background padding-bottom hidden-sec">
		<div class="container">
				<div class="four columns">
					<div class="team-wrap">
						<img src="images/Nazir Ahmed Sabbir.jpg" alt="Nazir Ahmed Sabbir - Founder & CEO Xpert Stack">
						<div class="mask-team">
							<h6>Nazir Ahmed Sabbir</h6>
							<p><span>Founder & CEO</span></p>
							<ul class="skills-list">
								<li>
									<p><span>&#xf1db;</span>Ideas Generator</p>
								</li>
								<li>
									<p><span>&#xf1db;</span>Planning</p>
								</li>
								<li>
									<p><span>&#xf1db;</span>Execution</p>
								</li>
								<li>
									<p><span>&#xf1db;</span>Development</p>
								</li>

							</ul>
							<div class="social-team">
								<ul class="list-social-team">
									<li class="icon-soc-team">
										<a href="https://www.facebook.com/NaSb.1151/">&#xf09a;</a>
									</li>
									<li class="icon-soc-team">
										<a href="https://twitter.com/NaSabbir">&#xf099;</a>
									</li>
									<li class="icon-soc-team">
										<a href="https://plus.google.com/+NazirAhmedSabbir0">&#xf0d5;</a>
									</li>
									<li class="icon-soc-team">
										<a href="https://t.me/NaSabbir">&#xf2c6;</a>
									</li>
									<li class="icon-soc-team">
										<a href="https://github.com/NaSabbir">&#xf09b;</a>
									</li>
									<li class="icon-soc-team">
										<a href="#">&#xf0d5;</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="four columns">
					<div class="team-wrap">
						<img src="images/Sufi Ahmed Hamim.jpg" alt="Sufi Ahmed Hamim profile picture">
						<div class="mask-team">
							<h6>Sufi Ahmed Hamim</h6>
							<p><span>Creative Designer</span></p>
							<ul class="skills-list">
								<li>
									<p><span>&#xf1db;</span>Frontend Development</p>
								</li>
								<li>
									<p><span>&#xf1db;</span>Marketing</p>
								</li>
								<li>
									<p><span>&#xf1db;</span>On Demand Design</p>
								</li>
								<li>
									<p><span>&#xf1db;</span>Branding and Identity</p>
								</li>
							</ul>
							<div class="social-team">
								<ul class="list-social-team">
									<li class="icon-soc-team">
										<a href="https://www.facebook.com/SufiAhmedHamim">&#xf09a;</a>
									</li>
									<li class="icon-soc-team">
										<a href="https://twitter.com/sufiahmed71">&#xf099;</a>
									</li>
									<li class="icon-soc-team">
										<a href="https://github.com/SufiAhmedHamim">&#xf09b;</a>
									</li>
									<li class="icon-soc-team">
										<a href="https://plus.google.com/u/0/+SufiAhmedHamim">&#xf0d5;</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>

		</div>
	</section>

	<section class="section white-background padding-bottom hidden-sec">
		<div class="container">
			<div class="sixteen columns">
				<div class="section-header-text-left">
					<h4>Our services<span>.</span></h4>
					<p>Our passion for perfection.</p>
					<div class="line-header"></div>
				</div>
			</div>
			<div class="four columns">
				<div class="services-box">
					<h6><span>&#xf109;</span> Design</h6>
					<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation.</p>
				</div>
			</div>
			<div class="four columns">
				<div class="services-box">
					<h6><span>&#xf121;</span> Development</h6>
					<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation.</p>
				</div>
			</div>
			<div class="four columns">
				<div class="services-box">
					<h6><span>&#xf03e;</span> Photography</h6>
					<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation.</p>
				</div>
			</div>
			<div class="four columns">
				<div class="services-box">
					<h6><span>&#xf0c3;</span> Branding</h6>
					<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation.</p>
				</div>
			</div>
			<div class="clear"></div>
			<div class="four columns">
				<div class="services-box">
					<h6><span>&#xf008;</span> Motion</h6>
					<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation.</p>
				</div>
			</div>
			<div class="four columns">
				<div class="services-box">
					<h6><span>&#xf08e;</span> UX / UI</h6>
					<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation.</p>
				</div>
			</div>
			<div class="four columns">
				<div class="services-box">
					<h6><span>&#xf0a1;</span> Marketing</h6>
					<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation.</p>
				</div>
			</div>
			<div class="four columns">
				<div class="services-box">
					<h6><span>&#xf086;</span> 24/7 Support</h6>
					<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation.</p>
				</div>
			</div>
		</div>
	</section>

	<section class="section white-background padding-bottom">
		<div class="container">
			<div class="eight columns">
				<div class="skills-name">photoshop <span><span class="counter-skills">70</span>%</span></div>
				<div class="pro-bar-container pro-bar-margin">
					<div class="pro-bar bar-70" data-pro-bar-percent="70"></div>
				</div>

				<div class="skills-name">html5 <span><span class="counter-skills">90</span>%</span></div>
				<div class="pro-bar-container pro-bar-margin">
					<div class="pro-bar bar-87" data-pro-bar-percent="87" data-pro-bar-delay="100"></div>
				</div>

				<div class="skills-name">wordpress <span><span class="counter-skills">83</span>%</span></div>
				<div class="pro-bar-container">
					<div class="pro-bar bar-64" data-pro-bar-percent="64" data-pro-bar-delay="200"></div>
				</div>
			</div>
			<div class="eight columns">
				<div class="skills-name">css3 <span><span class="counter-skills">93</span>%</span></div>
				<div class="pro-bar-container pro-bar-margin">
					<div class="pro-bar bar-93" data-pro-bar-percent="93"></div>
				</div>

				<div class="skills-name">javascript <span><span class="counter-skills">82</span>%</span></div>
				<div class="pro-bar-container pro-bar-margin">
					<div class="pro-bar bar-82" data-pro-bar-percent="82" data-pro-bar-delay="100"></div>
				</div>

				<div class="skills-name">SEO <span><span class="counter-skills">95</span>%</span></div>
				<div class="pro-bar-container">
					<div class="pro-bar bar-78" data-pro-bar-percent="78" data-pro-bar-delay="200"></div>
				</div>
			</div>
		</div>
	</section>
	<footer class="footer no-shadow">
		<div class="container">
			<div class="sixteen columns">
				<div class="footer-social">
					<a href="https://twitter.com/XpertStack">twitter</a>
					<a href="https://github.com/XpertStack">github</a>
					<a href="https://www.facebook.com/XpertStack/">facebook</a>
					<a href="https://plus.google.com/u/0/114716719578841858509">google +</a>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="sixteen columns">
				<div class="footer-copy-text">
					<p>© All rights reserved. 2018</p>
					<p> Built with <span class="love">❤</span> by <a href="https://xpertstack.com/" target="_blank"><b> Xpert Stack</b></a></p>
				</div>
			</div>
		</div>
	</footer>
	</div>


	<!-- JAVASCRIPT -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/jquery.animsition.min.js"></script>
<script type="text/javascript">
(function($) { "use strict";
	$(document).ready(function() {

	  $(".animsition").animsition({

		inClass               :   'zoom-in-sm',
		outClass              :   'zoom-out-sm',
		inDuration            :    800,
		outDuration           :    800,
		linkElement           :   '.animsition-link',
		// e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
		loading               :    true,
		loadingParentElement  :   'body', //animsition wrapper element
		loadingClass          :   'animsition-loading',
		unSupportCss          : [ 'animation-duration',
								  '-webkit-animation-duration',
								  '-o-animation-duration'
								],
		//"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
		//The default setting is to disable the "animsition" in a browser that does not support "animation-duration".

		overlay               :   false,

		overlayClass          :   'animsition-overlay-slide',
		overlayParentElement  :   'body'
	  });
	});
})(jQuery);
</script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/retina-1.1.0.min.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/cbpAnimatedHeader.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript" src="js/custom-about.js"></script>
</body>
</html>