<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MATT MENDI - Producer of Electronic Music </title>
<meta name="description" content="Matt Mendi - Personal vCard">
<meta name="author" content="LionCoders" />
<link rel="icon" href="images/favicon.ico" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
<link rel="stylesheet" href="css/plugins.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<div class="preloader">
<div class="anim pulse"><i class="ion-ios-bolt-outline"></i></div>
</div>
<div class="preloader-left"></div>
<div class="inline-menu-container">
<span class="status">I am an electronic music producer</span>
<ul class="inline-menu">
<li class="about menu-item">Resume</li>
<li class="portfolio menu-item">Portfolio</li>
<li class="blog menu-item">Blog</li>
<li class="contact menu-item">Contact</li>
<li id="close" class="menu-item"><i class="ion-ios-close-empty"></i></li>
</ul>
</div>
<section class="home img-bg" style="background: url(images/bg/img-bg6.jpg) 0 0; background-size: cover;">
<div class="overlay opacity5"></div>
<div class="container">
<div class="name-block">
<div class="name-block-container">
<h1><span>Hi, I'm</span>Matt Mendi</h1>
<h2 id="element"></h2>
<a target="_blank" href="https://themeforest.net/item/alpha-cv-resume-vcard-portfolio-template/20381622?s_rank=24" class="btn btn-download">Download Resume</a>
<ul class="social">
<li><a href="https://www.facebook.com/matt.mendi.official"><i class="ion-social-facebook"></i></a></li>
<li><a href=""><i class="ion-social-twitter"></i></a></li>
<li><a href=""><i class="ion-social-googleplus"></i></a></li>
</ul>
</div>
</div>
<div class="menu-blocks">
<div class="about-block menu-block">
<div class="about-block-container">
<h2 class="about menu-item">Resume</h2>
</div>
</div>
<div class="portfolio-block menu-block">
<div class="portfolio-block-container">
<h2 class="portfolio menu-item">Portfolio</h2>
</div>
</div>
<div class="blog-block menu-block">
<div class="blog-block-container">
<h2 class="blog menu-item">Blog</h2>
</div>
</div>
<div class="contact-block menu-block">
<div class="contact-block-container">
<h2 class="contact menu-item">Contact</h2>
</div>
</div>
</div>
<div class="content-blocks about">
<section class="content" id="about">
<div class="block-content">
<h3 class="block-title">Profile</h3>
<h3 class="subheading">I'm a <strong>UI/UX Designer & Frontend Developer</strong> from London, UK. I aim to make a difference through my creative solution.</h3>
<p>Worked with project teams to create user-friendly and appealing application interfaces and websites for users. Met with project manager, business analyst and architect right from beginning of project, creating rough mock-ups that were refined and extended over many iterations. Adjustments to mock-ups as necessary to address problems encountered.</p>
<div class="info-list row">
<div class="col-sm-6"><span>Name : </span> James Donnovan Bond</div>
<div class="col-sm-6"><span>Date of birth : </span> September 9, 1982 </div>
<div class="col-sm-6"><span>Address : </span> 1234 House, Large Street, Small Road, Nice City, Poor County.</div>
<div class="col-sm-6"><span>Email : </span> youremail@bond.com</div>
<div class="col-sm-6"><span>Phone : </span> + 123 456 789 456</div>
<div class="col-sm-6"><span>Skype : </span> James.Bond</div>
<div class="col-sm-6"><span>Interest : </span> freelance, full-time</div>
</div>
<img class="sign" src="images/signature.png" alt="" />
</div>
<div class="block-content">
<h3 class="block-title">Skills</h3>
<label class="progress-bar-label">Wordpress - <span>5 years experience</span></label>
<div class="progress">
<div style="width: 85%;" class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
<span>85%</span>
</div>
</div>
<label class="progress-bar-label">Photoshop - <span>7 years experience</span></label>
<div class="progress">
<div style="width: 69%;" class="progress-bar" role="progressbar" aria-valuenow="69" aria-valuemin="0" aria-valuemax="100">
<span>69%</span>
</div>
</div>
<label class="progress-bar-label">HTML&CSS - <span>7 years experience</span></label>
<div class="progress">
<div style="width: 99%;" class="progress-bar" role="progressbar" aria-valuenow="99" aria-valuemin="0" aria-valuemax="100">
<span>95%</span>
</div>
</div>
<label class="progress-bar-label">Javascript - <span>3 years experience</span></label>
<div class="progress">
<div style="width: 67%;" class="progress-bar" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100">
<span>67%</span>
</div>
</div>
</div>
<div class="block-content">
<h3 class="block-title">Experience</h3>
<div class="timeline experience">
<div class="row">
<div class="col-md-12">
<div class="exp-holder">
<div class="exp">
<div class="hgroup">
<h4><span>UX Designer</span> @ Apple Inc</h4>
<h5>Feb 2017 - <span class="current">Present</span></h5>
</div>
<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="exp">
<div class="hgroup">
<h4><span>Research Assistant</span> @ Facebook </h4>
<h5>Sept 2017 - Nov 2017</h5>
</div>
<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="exp">
<div class="hgroup">
<h4><span>Intern</span> @ Google </h4>
<h5>May 2017 - Sept 2017</h5>
</div>
<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="block-content">
<h3 class="block-title">Education</h3>
<div class="timeline education">
<div class="row">
<div class="col-md-12">
<div class="exp-holder">
<div class="exp">
<div class="hgroup">
<h4>MSc in Computer Graphics | <span>Oxford University</span></h4>
<h5>Sept 2017 - Nov 2017</h5>
</div>
<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="exp">
<div class="hgroup">
<h4>BSc(Hons) in Computer Science | <span>Cambridge University</span></h4>
<h5>Mar 2017 - May 2017</h5>
</div>
<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="exp">
<div class="hgroup">
<h4>A Levels | <span>London Public Schoo</span></h4>
<h5>May 2017 - Sept 2017</h5>
</div>
<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="block-content">
<h3 class="block-title">Services</h3>
<div class="row">
<div class="col-md-4 col-sm-6 service">
<div class="service-icon">
<i class="ion-laptop"></i>
</div>
<h4>Web Design</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p>
</div>
<div class="col-md-4 col-sm-6 service">
<div class="service-icon">
<i class="ion-pie-graph"></i>
</div>
<h4>App Development</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p>
</div>
<div class="col-md-4 col-sm-6 service">
<div class="service-icon">
<i class="ion-paintbucket"></i>
</div>
<h4>Graphic Design</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p>
</div>
<div class="col-md-4 col-sm-6 service">
<div class="service-icon">
<i class="ion-printer"></i>
</div>
<h4>Print Design</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p>
</div>
<div class="col-md-4 col-sm-6 service">
<div class="service-icon">
<i class="ion-qr-scanner"></i>
</div>
<h4>Graphic Design</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p>
</div>
<div class="col-md-4 col-sm-6 service">
<div class="service-icon">
<i class="ion-social-buffer"></i>
</div>
<h4>Print Design</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p>
</div>
</div>
</div>
<div class="block-content">
<h3 class="block-title">Awards</h3>
<div class="row">
<div class="col-md-3 col-sm-6 awards">
<img src="images/awards/1.jpg" alt="" />
</div>
<div class="col-md-3 col-sm-6 awards">
<img src="images/awards/2.jpg" alt="" />
</div>
<div class="col-md-3 col-sm-6 awards">
<img src="images/awards/3.jpg" alt="" />
</div>
<div class="col-md-3 col-sm-6 awards">
<img src="images/awards/4.jpg" alt="" />
</div>
</div>
</div>
<div class="block-content">
<h3 class="block-title">Testimonials</h3>
<div class="row">
<div id="liontestimonial" class="owl-carousel owl-theme">
<div class="item testimonials">
<img src="images/testimonials/1.jpg" alt="">
<blockquote>This template is exactly what we were looking for!
<p class="quote"><span>Brendon Rodgers</span> - CEO of xyz.com</p>
</blockquote>
</div>
<div class="item testimonials">
<img src="images/testimonials/2.jpg" alt="">
<blockquote>This template is very nice! Great work
<p class="quote"><span>Becky Allwood</span> - CEO of abc.com</p>
</blockquote>
</div>
<div class="item testimonials">
<img src="images/testimonials/3.jpg" alt="">
<blockquote>My work has been significantly simplified.
<p class="quote"><span>Elly Page</span> - CEO of nfl.com</p>
</blockquote>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-12 btn-email">
<a class="btn lowercase">shout@james.com</a>
</div>
</div>
</section>
</div>
<div class="content-blocks portfolio">
<section class="content">
<div class="block-content">
<h3 class="block-title">Portfolio</h3>
<div class="row">
<div class="col-md-12">
<div class="filters">
<span>Filters :</span>
<ul id="filters">
<li class="active" data-filter="*">All</li>
<li data-filter=".artwork">Art Work</li>
<li data-filter=".webdesign">Web Design</li>
<li data-filter=".design">Design</li>
</ul>
</div>
<div class="portfolio-container row isotope" id="portfolio-container">
<!-- WORK 1 START -->
<div class="col-md-4 col-sm-6 col-xs-12 portfolio-item artwork">
<a class="open-project" href="project-1.html">
<div class="portfolio-column">
<div class="portfolio-hover">
<div class="portfolio-content">
<h2>CEREAL</h2>
<hr>
<p>View details.</p>
</div>
<div class="portfolio-overlay"></div>
</div>
<img src="images/portfolio/masonry/001.jpg" alt="">
</div>
</a>
</div>
<!-- WORK 1 END -->
<!-- WORK 2 START -->
<div class="col-md-4 col-sm-6 col-xs-12 portfolio-item webdesign">
<a class="open-project" href="project-2.html">
<div class="portfolio-column">
<div class="portfolio-hover">
<div class="portfolio-content">
<h2>NOTES</h2>
<hr>
<p>View details.</p>
</div>
<div class="portfolio-overlay"></div>
</div>
<img src="images/portfolio/masonry/002.jpg" alt="">
</div>
</a>
</div>
<!-- WORK 2 END -->
<!-- WORK 3 START -->
<div class="col-md-4 col-sm-6 col-xs-12 portfolio-item webdesign">
<a class="open-project" href="project-3.html">
<div class="portfolio-column">
<div class="portfolio-hover">
<div class="portfolio-content">
<h2>TIMES</h2>
<hr>
<p>View details.</p>
</div>
<div class="portfolio-overlay"></div>
</div>
<img src="images/portfolio/masonry/003.jpg" alt="">
</div>
</a>
</div>
<!-- WORK 3 END -->
<!-- WORK 4 START -->
<div class="col-md-4 col-sm-6 col-xs-12 portfolio-item artwork">
<a class="open-project" href="project-4.html">
<div class="portfolio-column">
<div class="portfolio-hover">
<div class="portfolio-content">
<h2>STATIONARY</h2>
<hr>
<p>View details.</p>
</div>
<div class="portfolio-overlay"></div>
</div>
<img src="images/portfolio/masonry/004.jpg" alt="">
</div>
</a>
</div>
<!-- WORK 4 END -->
<!-- WORK 5 START -->
<div class="col-md-4 col-sm-6 col-xs-12 portfolio-item design">
<a class="open-project" href="project-5.html">
<div class="portfolio-column">
<div class="portfolio-hover">
<div class="portfolio-content">
<h2>PH.D</h2>
<hr>
<p>View details.</p>
</div>
<div class="portfolio-overlay"></div>
</div>
<img src="images/portfolio/masonry/005.jpg" alt="">
</div>
</a>
</div>
<!-- WORK 5 END -->
<!-- WORK 6 START -->
<div class="col-md-4 col-sm-6 col-xs-12 portfolio-item design">
<a class="open-project" href="project-6.html">
<div class="portfolio-column">
<div class="portfolio-hover">
<div class="portfolio-content">
<h2>WAG MAGAZINE</h2>
<hr>
<p>View details.</p>
</div>
<div class="portfolio-overlay"></div>
</div>
<img src="images/portfolio/masonry/006.jpg" alt="">
</div>
</a>
</div>
<!-- WORK 6 END -->
<!-- WORK 7 START -->
<div class="col-md-4 col-sm-6 col-xs-12 portfolio-item webdesign">
<a class="open-project" href="project-1.html">
<div class="portfolio-column">
<div class="portfolio-hover">
<div class="portfolio-content">
<h2>LOOK</h2>
<hr>
<p>View details.</p>
</div>
<div class="portfolio-overlay"></div>
</div>
<img src="images/portfolio/masonry/007.jpg" alt="">
</div>
</a>
</div>
<!-- WORK 7 END -->
<!-- WORK 8 START -->
<div class="col-md-4 col-sm-6 col-xs-12 portfolio-item artwork">
<a class="open-project" href="project-2.html">
<div class="portfolio-column">
<div class="portfolio-hover">
<div class="portfolio-content">
<h2>IPAD</h2>
<hr>
<p>View details.</p>
</div>
<div class="portfolio-overlay"></div>
</div>
<img src="images/portfolio/masonry/008.jpg" alt="">
</div>
</a>
</div>
<!-- WORK 8 END -->
<!-- WORK 9 START -->
<div class="col-md-4 col-sm-6 col-xs-12 portfolio-item design">
<a class="open-project" href="project-1.html">
<div class="portfolio-column">
<div class="portfolio-hover">
<div class="portfolio-content">
<h2>PAPER MOCKUP</h2>
<hr>
<p>View details.</p>
</div>
<div class="portfolio-overlay"></div>
</div>
<img src="images/portfolio/masonry/009.jpg" alt="">
</div>
</a>
</div>
<!-- WORK 9 END -->
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-12 btn-email">
<a class="btn lowercase">shout@james.com</a>
</div>
</div>
</section>
</div>
<div class="content-blocks blog">
<section class="content">
<div class="block-content">
<h3 class="block-title">My Blog</h3>
<div class="row">
<div class="col-md-10 mx-auto">
<div class="post">
<div class="post-thumbnail">
<a class="open-post" href="post-single.html">
<img src="images/blog/midium/4.jpg" alt="">
</a>
</div>
<div class="post-title">
<a class="open-post" href="post-single.html"><h2>Typography for web</h2></a>
<p class="post-info">
<span class="post-author">Posted by John Sparrow</span>
<span class="slash"></span>
<span class="post-date">Dec 08, 2017</span>
<span class="slash"></span>
<span class="post-catetory">Food</span>
</p>
</div>
<div class="post-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non enim ut enim fringilla adipiscing id in lorem. Quisque aliquet neque vitae lectus tempus consectetur. Aliquam erat volutpat. Nunc eu nibh nulla, id cursus arcu. </p>
<a class="btn open-post" href="post-single.html">Read More</a>
</div>
</div>
<div class="post">
<div class="post-thumbnail">
<a class="open-post" href="post-single.html">
<img src="images/blog/midium/3.jpg" alt="">
</a>
</div>
<div class="post-title">
<a class="open-post" href="post-single.html"><h2>Typography for web</h2></a>
<p class="post-info">
<span class="post-author">Posted by John Sparrow</span>
<span class="slash"></span>
<span class="post-date">Dec 08, 2017</span>
<span class="slash"></span>
<span class="post-catetory">Food</span>
</p>
</div>
<div class="post-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non enim ut enim fringilla adipiscing id in lorem. Quisque aliquet neque vitae lectus tempus consectetur. Aliquam erat volutpat. Nunc eu nibh nulla, id cursus arcu. </p>
<a class="btn open-post" href="post-single.html">Read More</a>
</div>
</div>
<div class="post">
<div class="post-thumbnail">
<a class="open-post" href="post-single.html">
<img src="images/blog/midium/2.jpg" alt="">
</a>
</div>
<div class="post-title">
<a class="open-post" href="post-single.html"><h2>Typography for web</h2></a>
<p class="post-info">
<span class="post-author">Posted by John Sparrow</span>
<span class="slash"></span>
<span class="post-date">Dec 08, 2017</span>
<span class="slash"></span>
<span class="post-catetory">Food</span>
</p>
</div>
<div class="post-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non enim ut enim fringilla adipiscing id in lorem. Quisque aliquet neque vitae lectus tempus consectetur. Aliquam erat volutpat. Nunc eu nibh nulla, id cursus arcu. </p>
<a class="btn open-post" href="post-single.html">Read More</a>
</div>
</div>
<div class="post">
<div class="post-thumbnail">
<a class="open-post" href="post-single.html">
<img src="images/blog/midium/1.jpg" alt="">
</a>
</div>
<div class="post-title">
<a class="open-post" href="post-single.html"><h2>Typography for web</h2></a>
<p class="post-info">
<span class="post-author">Posted by John Sparrow</span>
<span class="slash"></span>
<span class="post-date">Dec 08, 2017</span>
<span class="slash"></span>
<span class="post-catetory">Food</span>
</p>
</div>
<div class="post-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non enim ut enim fringilla adipiscing id in lorem. Quisque aliquet neque vitae lectus tempus consectetur. Aliquam erat volutpat. Nunc eu nibh nulla, id cursus arcu. </p>
<a class="btn open-post" href="post-single.html">Read More</a>
</div>
</div>
<div class="text-center">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="content-blocks contact">
<section class="content">
<div class="block-content">
<h3 class="block-title">Get in touch</h3>
<div class="row">
<div class="col-md-6">
<form class="contact-form" action="php/send_mail.php" method="post" id="contact_form">
<div class="form-control-wrap">
<div id="message" class="alert alert-danger alert-dismissible fade"></div>
<div class="form-group">
<input type="text" class="form-control" id="fname" placeholder="Name*" name="fname">
</div>
<div class="form-group mar-top-40">
<input type="email" class="form-control" id="email" placeholder="email*" name="email">
</div>
<div class="form-group mar-top-60">
<textarea class="form-control" rows="10" name="comment" id="comment" placeholder="Your Message"></textarea>
</div>
<div class="form-group mar-top-40">
<button type="submit" class="btn v7">Send Message</button>
</div>
</div>
</form>
</div>
<div class="col-md-5 offset-md-1">
<div class="contact-content">
<div class="contact-icon">
<i class="ion-ios-location-outline"></i>
</div>
<div class="contact-details">
<h5>Address</h5>
<p>234 House, Baker Street, London, EL10 6 BG</p>
</div>
</div>
<div class="contact-content">
<div class="contact-icon">
<i class="ion-ios-telephone-outline"></i>
</div>
<div class="contact-details">
<h5>Call Us</h5>
<p> <a href="tel:+4402920111222">+44 - 02920111222</a></p>
</div>
</div>
<div class="contact-content">
<div class="contact-icon">
<i class="ion-ios-email-outline"></i>
</div>
<div class="contact-details">
<h5>Enquiries</h5>
<p>alpha@james.com</p>
</div>
</div>
</div>
<div class="col-md-12">
<!--Google Map-->
<div id="map"></div>
<!--Google Map End-->
</div>
</div>
</div>
</section>
</div>
<div class="content-blocks pop">
<div id="close-pop" class="close-pop">Close <i class="ion-ios-close-empty"></i></div>
<section class="content"></section>
</div>
</div>
</section>
<script src="js/plugins.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
/*------------------------------------------------------------------
[Master Stylesheet]
Theme Name: Alpha | Personal vCard Template
Version: 1.0
Last change: 17/08/2017
Developer: LionCoders - http://www.lion-coders.com
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]
0. General Styles
1. Preloader
2. Home Styles
3. Menu Styles
4. Page Content
5. Name Block
6. About Block
7. Portfolio Block
8. Blog Block
9. Contact Block
10. Responsive
-------------------------------------------------------------------*/
/* -------------------------------------------------------------------
0. General Styles
-------------------------------------------------------------------*/
body {
font: 400 14px 'Poppins', sans-serif;
-webkit-font-smoothing: antialiased;
line-height: 30px;
color: #727272;
font-size: 16px;
font-weight: 300;
line-height: 2.2;
overflow-x: hidden;
}
a {
transition: all 0.3s;
}
a:hover,
a:focus {
text-decoration: none;
outline: none;
}
a[href^="tel:"] {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
transition: all 0.3s;
}
/* texts */
h1,
h2,
h3,
h4,
h5,
h6 {
text-transform: uppercase;
font-weight: 500;
color: #333;
letter-spacing: 1px;
}
h1 {
font-size: 50px;
line-height: 60px;
margin-top: 0;
margin-bottom: 0;
}
h2 {
font-size: 22px;
line-height: 26px;
margin-top: 0;
margin-bottom: 0;
}
h3 {
font-size: 20px;
line-height: 26px;
margin-top: 0;
margin-bottom: 0;
font-weight: 500;
}
h4 {
font-size: 16px;
line-height: 24px;
margin-top: 0;
margin-bottom: 0;
}
h5 {
font-size: 15px;
line-height: 32px;
margin-top: 0;
margin-bottom: 0;
}
h6 {
font-size: 14px;
line-height: 32px;
font-weight: 500;
}
p {
margin: 0;
margin-bottom: 30px;
}
ul {
list-style: none;
padding-left: 0;
}
strong,
small {
color: #333;
}
/* Buttons */
a:not([href]):not([tabindex]) {
color: #FFF;
cursor: pointer;
}
.btn {
border: 2px solid transparent;
border-radius: 0;
padding: 12px 28px;
margin: 20px 0;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
transition: all .3s;
position: relative;
color: #FFF;
background-color: #333;
z-index: 20;
letter-spacing: 2px;
overflow: hidden;
}
.btn:hover {
color: #666;
background-color: #FFF;
border: 2px solid #666;
letter-spacing: 3px;
}
.btn:focus {
box-shadow: none;
color: #FFF;
outline: none;
}
.btn-download {
border: none;
font-size: 14px;
padding: 16px 55px 16px 25px;
}
.btn-download:hover {
border: none;
color: #FFF;
background-color: #333;
letter-spacing: 2px;
}
.btn-download:before {
position: absolute;
content: '\f407';
font-family: 'Ionicons';
top: 12px;
right: 16px;
font-size: 24px;
}
.btn-download:hover:before {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
.btn-download:after {
content: "";
position: absolute;
background-color: rgba(0, 0, 0, 0.2);
right: 0;
top: 0;
height: 100%;
width: 0;
z-index: -1;
transition: all .3s;
}
.btn-download:hover:after {
width: 50px;
height: 70px;
right: -5px;
top: -5px;
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
.btn.disabled {
opacity: 1;
}
.form-control {
box-shadow: none;
-webkit-box-shadow: none;
border-radius: 0;
}
.form-control:focus {
box-shadow: none;
-webkit-box-shadow: none;
}
.hidex {
opacity: 0;
visibility: hidden;
z-index: -1
}
.display-block {
display: block;
}
.lowercase {
text-transform: lowercase;
}
/*-------------------------------------------------------------------
1. Preloader
-------------------------------------------------------------------*/
.preloader {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 999999;
background: transparent;
}
.preloader .anim {
color: #FFF;
font-size: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.preloader-left {
position: fixed;
width: 100%;
height: 100%;
background: #333;
z-index: 999;
transition: .7s .3s transform ease-in-out;
}
.slide-left {
transform: translate3d(-100%, 0, 0);
will-change: transform;
}
.preloader-right {
display: none;
position: fixed;
width: 50%;
right: 0;
height: 100%;
background: white;
z-index: 999;
transition: .7s .3s transform ease-in-out;
}
.slide-right {
transform: translate3d(100%, 0, 0);
will-change: transform;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
@keyframes pulse {
0% {
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
-ms-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
100% {
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
.pulse {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: pulse;
animation-name: pulse;
}
/*-------------------------------------------------------------------
2. Home Styles
-------------------------------------------------------------------*/
.home {
width: 100%;
height: 100vh;
position: fixed;
overflow: hidden;
background-size: cover;
z-index: 0
}
.home.img-bg {
background: url(../images/bg/demo.jpg);
background-size: cover;
}
.home .bgScroll {
animation: 40s linear 0s normal none infinite running bgScroll;
background: black url(../images/bg/scroll.jpg) repeat scroll center top;
}
.bgScroll {
height: 400%;
position: absolute;
width: 100%;
z-index: -1;
}
@-webkit-keyframes bgScroll {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-1934px);
transform: translateY(-1934px);
}
}
@keyframes bgScroll {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-1934px);
transform: translateY(-1934px);
}
}
.overlay {
background-color: rgba(0, 0, 0, 1);
height: 100%;
position: fixed;
width: 100%;
}
.overlay.light {
background-color: rgba(255, 255, 255, 1);
}
.opacity9 {
opacity: 0.9;
}
.opacity7 {
opacity: 0.7;
}
.opacity5 {
opacity: 0.5;
}
.opacity3 {
opacity: 0.3;
}
.opacity1 {
opacity: 0.1;
}
.opacity0 {
opacity: 0.0;
}
.gradient-overlay1 {
background: #EB3349;
background: -webkit-linear-gradient(to right, #F45C43, #EB3349);
background: linear-gradient(to right, #F45C43, #EB3349);
height: 100%;
position: fixed;
width: 100%;
}
.gradient-overlay2 {
background: #4568DC;
background: -webkit-linear-gradient(to right, #B06AB3, #4568DC);
background: linear-gradient(to right, #B06AB3, #4568DC);
height: 100%;
position: fixed;
width: 100%;
}
.gradient-overlay3 {
background: #556270;
background: -webkit-linear-gradient(to right, #FF6B6B, #556270);
background: linear-gradient(to right, #FF6B6B, #556270);
height: 100%;
position: fixed;
width: 100%;
}
/* HERO SLIDER*/
#lionhero {
z-index: 0;
}
#lionhero .item {
height: 100vh;
}
#lionhero .item img {
background-size: cover;
}
#lionhero .item .slide {
height: 100vh;
}
.slide.one {
background: url(../images/slider/slide1.jpg) 48% 48%;
background-size: cover;
}
.slide.two {
background: url(../images/slider/slide2.jpg) 48% 48%;
background-size: cover;
}
.slide.three {
background: url(../images/slider/slide3.jpg) 48% 48%;
background-size: cover;
}
#lionhero .owl-nav {
color: #FFF;
cursor: pointer;
font-size: 30px;
padding: 10px;
left: 42%;
position: absolute;
bottom: 10px;
z-index: 999999999;
}
#lionhero .owl-prev {
float: left;
margin: 10px
}
#lionhero .owl-next {
float: right;
margin: 10px
}
#liontextslider {
width: 400px;
}
#liontextslider .owl-item {
visibility: hidden;
}
#liontextslider .owl-item.active {
visibility: visible;
}
#video-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../images/bg/video-bg.jpg);
background-size: cover;
overflow: hidden;
}
.player {
display: none;
}
/*-------------------------------------------------------------------
3. Menu Styles
-------------------------------------------------------------------*/
.menu-blocks {
transition: all 0.5s;
}
.menu-blocks.hidex {
z-index: -999;
}
.menu-blocks.showx {
z-index: 999;
}
.menu-block {
cursor: pointer;
}
.menu-item {
cursor: pointer;
}
h2.menu-item {
position: relative;
color: #FFF;
margin: 50px;
font-size: 28px;
font-weight: 600;
transition: all 1s ease-out;
}
.dark h2.menu-item {
color: #333;
}
h2.menu-item:before {
position: absolute;
top: -40px;
left: -20px;
font-size: 14px;
transition: all 0.5s ease;
}
h2.about.menu-item:before {
content: '01';
}
h2.portfolio.menu-item:before {
content: '02';
}
h2.blog.menu-item:before {
content: '03';
}
h2.contact.menu-item:before {
content: '04';
}
.menu-block:hover h2.menu-item:before {
top: -20px;
left: -40px;
}
h2.menu-item:after {
position: absolute;
content: '';
top: -10px;
left: -20px;
width: 70px;
height: 1px;
background: rgba(255,255,255,0.3);
transition: all 0.5s ease;
}
.dark h2.menu-item:after {
background: #333;
}
.menu-block:hover h2.menu-item:after {
top: 12px;
left: -40px;
}
.menu-block:hover {
background: rgba(0, 0, 0, 0.1);
}
/* --- Inline Menu --- */
.inline-menu-container {
background: #F1F3F6;
position: fixed;
height: 40px;
width: 69%;
right: 13px;
top: -50px;
transition: all 0.5s;
z-index: 1;
}
.inline-menu-container.showx {
top: 0;
}
.status {
color: #333;
line-height: 38px;
padding-left: 45px;
}
.status:before {
position: absolute;
top: 17px;
left: 25px;
width: 7px;
height: 7px;
border-radius: 50%;
background: #4dd133;
content: '';
}
.status:after {
position: absolute;
top: 13px;
left: 21px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #4dd133;
content: '';
opacity: 0.3
}
#close i {
font-size: 30px;
vertical-align: middle
}
.inline-menu {
float: right;
margin-top: 0;
margin-bottom: 0;
margin-right: 20px;
}
.inline-menu li {
display: inline-block;
cursor: pointer;
font-weight: 600;
line-height: 40px;
margin-top: -5px;
padding: 0 15px;
color: #666;
}
.inline-menu li.active,
.inline-menu li:hover {
color: #333;
}
.inline-menu li.active {
cursor: text;
}
.inline-menu-container.style2 {
background: transparent;
}
.style2 .inline-menu li {
color: #FFF;
font-weight: 400;
line-height: 70px;
}
.style2.dark {
background-color: #F1F3F6
}
.style2.dark .inline-menu li {
color: #666;
font-size: 14px;
line-height: 40px;
}
.inline-menu-container.style3 {
background: #FFF;
border-bottom: 1px solid #eee;
height: 40px;
}
.sidebar-menu {
background: #111;
height: 100%;
left: 0;
position: fixed;
width: 20%;
}
.sidebar-menu.hidex {
opacity: 1;
visibility: visible;
z-index: 1;
}
.menu4 .inline-menu {
margin-right: 0;
position: fixed;
top: 50%;
transform: translateY(-50%);
}
.menu4 .inline-menu li {
color: #787878;
display: block;
font-size: 20px;
font-weight: 300;
line-height: 60px;
padding: 0 0 0 30px;
}
.menu4 .inline-menu li.active {
color: #FFF;
}
.close-pop {
background-color: #F1F3F6;
cursor: pointer;
line-height: 40px;
height: 40px;
position: fixed;
text-align: center;
width: 69%;
right: 13px;
top:-60px;
transition: all 0.7s;
z-index: 1;
}
.menu4 .close-pop {
width: 79%;
}
.close-pop:hover {
opacity: 0.7;
}
.content-blocks.pop.showx .close-pop {
top: 0;
}
/*-------------------------------------------------------------------
4. Page Content
-------------------------------------------------------------------*/
.content-blocks {
position: fixed;
width: 70%;
height: 100vh;
opacity: 0.5;
overflow-x: hidden;
overflow-y: scroll;
top: 100%;
left: 30%;
background: #FFF;
transition: opacity 0.7s ease-out;
z-index: 1;
-webkit-overflow-scrolling: touch;
}
.content-blocks.showx {
opacity: 1;
top: 0;
}
.home-container {
left: 20%;
position: fixed;
width: 80%;
}
.menu4 .content-blocks {
width: 80%;
left: 20%;
}
.content {
position: relative;
padding: 120px 70px 30px;
height: auto;
overflow: hidden;
}
.content-blocks.pop {
left: 100%;
opacity: 0.3;
top: 0;
transition: all 0.3s ease-out;
}
.content-blocks.pop.showx {
left: 30%;
opacity: 1;
}
.menu4 .content-blocks.pop.showx {
left: 20%;
}
.content-blocks.pop .content {
padding-top: 110px;
}
.block-content {
margin: 0 0 70px;
overflow: hidden;
}
.block-title {
font-size: 24px;
text-transform: uppercase;
color: #333;
padding-bottom: 15px;
border-bottom: 1px solid #ddd;
margin-bottom: 30px;
font-weight: 600;
}
/*-------------------------------------------------------------------
5. NAME BLOCK
-------------------------------------------------------------------*/
.name-block {
position: absolute;
width: 700px;
height: 700px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-right: none;
display: table;
transition: all 0.5s;
z-index: 1
}
.dark .name-block {
border: 1px solid rgba(51, 51, 51, 0.4);
}
.typed-cursor {
display: none;
}
.menu2 .name-block {
border: none;
padding: 0 0 0 50px;
}
.name-block.reverse {
position: absolute;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
width: 30%;
height: 100%;
left: 0;
top: 0;
border: none;
display: table;
}
.name-block-container.reverse {
display: table-cell;
height: 100%;
vertical-align: middle;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
padding: 0 30px;
}
.menu2 .name-block.reverse,
.menu4 .name-block.reverse {
width: 100%;
}
.menu4 .name-block.reverse {
padding-left: 50px;
}
.name-block-container {
display: table-cell;
vertical-align: middle;
padding-left: 240px;
-ms-transform: rotate(34deg);
-webkit-transform: rotate(34deg);
transform: rotate(34deg);
}
.name-block-container h1,
.name-block-container h2 {
text-transform: capitalize;
font-weight: 700;
color: #FFF;
margin-bottom: 10px;
text-transform: uppercase;
}
.dark .name-block-container h1,
.dark .name-block-container h2 {
color: #333;
}
.name-block-container h2 {
font-size: 26px;
min-height: 26px;
}
.name-block-container h1 span {
font-size: 26px;
font-weight: 300;
display: block;
text-transform: capitalize;
}
.social {
position: absolute;
bottom: 15%;
}
.social li {
display: inline-block;
margin-right: 2px;
text-align: center;
}
.social a {
color: #FFF;
display: inline-block;
height: 35px;
width: 35px;
transition: all 0.5s;
}
.social li i {
line-height: 32px;
font-size: 16px;
}
.social a:hover {
opacity: 0.7
}
.dark .social a {
border: 2px solid #333;
color: #333;
}
/*-------------------------------------------------------------------
6. ABOUT BLOCK
-------------------------------------------------------------------*/
.about-block {
position: absolute;
width: 430px;
height: 300px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: none;
display: table;
transition: all 0.5s;
z-index: 99;
}
.dark .about-block {
border: 1px solid rgba(51, 51, 51, 0.4);
}
.about-block:hover {
border: 15px solid rgba(255, 255, 255, 0.1);
}
.about-block-container {
display: table-cell;
vertical-align: middle;
padding: 150px 0 0 70px;
-ms-transform: rotate(34deg);
-webkit-transform: rotate(34deg);
transform: rotate(34deg);
}
.subheading {
font-size: 30px;
font-weight: 300;
line-height: 2em;
margin-bottom: 30px;
text-transform: none;
}
.link {
font-style: italic;
font-weight: bold;
padding: 0 3px;
}
.sign {
margin: 30px 0;
}
.info-list {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
padding-bottom: 20px;
padding-top: 20px;
margin: 20px 0;
overflow: auto;
}
.info-list span {
color: #333;
font-weight: 400;
margin-right: 5px;
}
.info-list div {
padding-left: 0;
padding-right: 0;
}
.progress {
height: 2px;
margin-bottom: 30px;
background-color: #ddd;
border-radius: 0;
box-shadow: none;
overflow: visible;
width: 90%;
}
.progress-bar {
height: 2px;
line-height: 8px;
background-color: #666;
box-shadow: none;
position: relative;
}
.progress-bar span {
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
color: #000;
background: #F1F3F6;
font-weight: 500;
position: absolute;
top: -16px;
right: -20px;
}
.progress-bar-label {
color: #333;
font-weight: 500;
margin-bottom: 10px;
}
.progress-bar-label span {
font-weight: 300;
}
.icon-list li {
padding-left: 25px;
}
.icon-list li:before {
position: absolute;
content: '\f3fd';
font-family: 'Ionicons';
font-size: 24px;
left: 20px;
color: #666;
}
.timeline {
position: relative;
}
.timeline:before {
background: #ddd;
bottom: 0;
content: "";
left: 18px;
position: absolute;
top: 50px;
width: 1px;
height: 75%;
}
.timeline:after {
font-family: 'Ionicons';
top: 0;
left: -5px;
width: 50px;
height: 50px;
position: absolute;
text-align: center;
color: #ddd;
font-size: 36px;
line-height: 45px;
}
.timeline.experience:after {
content: '\f356';
}
.timeline.education:after {
content: '\f349';
}
.exp {
padding: 20px 20px 0 80px;
position: relative;
}
.exp:after {
background: #FFF;
border: 2px solid #ddd;
border-radius: 50%;
content: "";
height: 20px;
left: 9px;
position: absolute;
text-align: center;
top: 24px;
width: 20px;
}
.exp-holder {
margin-top: 70px;
}
.exp .hgroup h4,
.exp .hgroup h5 {
display: table-cell;
text-transform: none;
margin-bottom: 10px;
}
.exp .hgroup {
margin-bottom: 5px;
}
.exp .hgroup h4 span {
color: #666;
}
.exp .hgroup h5 {
font-size: 14px;
font-weight: 400;
text-align: right;
color: #727272;
padding-left: 60px;
position: relative;
}
.exp .hgroup h5:before {
color: #ddd;
content: "/";
left: 0;
left: 30px;
position: absolute;
}
.exp .hgroup h5 span.current {
font-style: italic;
}
.service {
text-align: center;
padding-top: 25px;
}
.service h4 {
margin: 10px 0;
font-size: 14px;
}
.service-icon {
font-size: 30px;
margin-bottom: 10px;
color: #666;
}
.awards {
padding: 30px;
}
.awards img {
opacity: 0.7;
}
.awards:hover img {
opacity: 1;
}
.pricing-area {
margin-top: 70px;
}
.price-table {
background-color: #FFF;
border: 1px solid #ddd;
margin: 0 auto 50px;
max-width: 400px;
padding: 0 20px;
position: relative;
overflow: hidden;
text-align: center;
}
h4.package {
font-weight: 600;
padding: 30px 0;
}
.pricing-button {
border-top: 1px solid #ddd;
padding: 20px 0;
transition: all 0.5s;
}
.price {
border-bottom: 1px solid #ddd;
color: #787878;
padding: 0 0 30px;
}
.price .amount {
color: #333;
display: block;
font-size: 36px;
font-weight: 600;
}
.details {
color: #787878;
line-height: 3;
list-style-type: none;
padding: 30px 0;
text-align: center;
text-indent: 1.2px;
}
#liontestimonial.owl-carousel .owl-item img {
width: auto;
}
.testimonials {
background: #F1F3F6;
border: 1px solid #F1F3F6;
position: relative;
margin: 50px 0;
}
.testimonials img {
position: absolute;
top: -45px;
left: 50%;
transform: translateX(-50%);
width: 90px;
height: 90px;
border: 10px solid #FFF;
border-radius: 50%;
}
.testimonials:hover img {
border: 10px solid #666;
}
.testimonials blockquote {
border-left: none;
color: #333;
font-size: 20px;
margin-top: 40px;
padding: 40px 15px;
text-align: center;
}
.testimonials .quote {
display: block;
margin-top: 20px;
font-size: 14px;
color: #727272;
}
.testimonials .quote span {
font-weight: 700;
}
#liontestimonial .owl-nav {
color: #666;
cursor: pointer;
font-size: 30px;
padding: 10px;
left: 50%;
position: absolute;
bottom: -25px;
transform: translateX(-50%);
z-index: 999999999;
}
#liontestimonial .owl-prev {
float: left;
margin: 10px
}
#liontestimonial .owl-next {
float: right;
margin: 10px
}
.btn-email {
position: relative;
}
.btn-email:before {
position: absolute;
left: 0;
top: 45px;
content: '';
border-top: 1px solid #F1F3F6;
width: 100%;
}
/*-------------------------------------------------------------------
7. PORTFOLIO BLOCK
-------------------------------------------------------------------*/
.portfolio-block {
position: absolute;
width: 430px;
height: 400px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: none;
display: table;
transition: all 0.5s;
z-index: 1
}
.dark .portfolio-block {
border: 1px solid rgba(51, 51, 51, 0.4);
}
.portfolio-block:hover {
border: 15px solid rgba(255, 255, 255, 0.1);
}
.portfolio-block-container {
display: table-cell;
vertical-align: middle;
-ms-transform: rotate(34deg);
-webkit-transform: rotate(34deg);
transform: rotate(34deg);
}
/* Portfolio */
.portfolio-container {
overflow: hidden;
position: relative;
}
.filters {
padding-bottom: 30px;
}
.filters span {
display: inline-block;
margin-right: 15px
}
.filters ul {
display: inline-block;
margin: 20px 0;
}
.filters ul li {
font-weight: 500;
display: inline-block;
margin-left: 15px;
padding: 2px 10px;
cursor: pointer;
transition: all 0.3s ease;
}
.filters ul li.active,
.filters ul li:hover {
color: #333;
}
.filters ul li:first-child {
margin-left: 0;
}
.portfolio-item {
padding-bottom: 30px;
}
.portfolio-item.no-gutter {
padding: 0 0;
padding-bottom: 0;
}
.portfolio-item img {
width: 100%;
transition: all 5s;
}
.portfolio-column {
overflow: hidden;
position: relative;
width: 100%;
transition: all 1s;
}
.portfolio-column:hover {
-webkit-box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.3);
}
.portfolio-column:hover img {
transform: scale(1.1);
}
.portfolio-column:hover .portfolio-content {
opacity: 1;
cursor: pointer;
}
.portfolio-content {
position: absolute;
z-index: 201;
top: 50%;
width: 100%;
opacity: 0;
transform: translateY(-50%);
}
.portfolio-content h2 {
color: #FFF;
position: relative;
width: 100%;
padding: 0;
margin: 0;
margin-top: 30px;
text-align: center;
padding: 0 30px;
opacity: 0;
text-transform: uppercase;
transition: all 0.6s;
}
.portfolio-column:hover .portfolio-content h2 {
margin-top: 20px;
opacity: 1;
}
.portfolio-content p {
color: #FFF;
font-size: 12px;
font-weight: 400;
position: relative;
width: 100%;
padding: 0;
margin: 0;
margin-top: -30px;
text-align: center;
padding: 10px 30px;
opacity: 0;
transition: all 0.9s;
}
.portfolio-column:hover .portfolio-content p {
margin-top: 0;
opacity: 1;
}
.portfolio-content hr {
width: 40px;
height: 1px;
border: 0;
background-color: #F1F3F6;
margin: 20px 0 10px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.portfolio-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: #181818;
top: 0;
z-index: 200;
opacity: 0;
}
.portfolio-column:hover .portfolio-overlay {
opacity: 0.8;
}
.classic .portfolio-content {
background: #F1F3F6;
position: relative;
top: 0;
transform: translateY(0);
}
.classic .portfolio-content,
.classic .portfolio-content h2,
.classic .portfolio-content p {
opacity: 1;
text-align: left;
}
.classic .portfolio-content h2 {
color: #333;
padding: 20px 30px 0;
margin-top: 0;
}
.classic .portfolio-column:hover .portfolio-content h2 {
margin-top: 0;
}
.classic .portfolio-content p {
color: #666;
margin-top: 0;
}
.project-head span {
color: #333;
font-weight: 400;
margin-right: 5px;
}
.project-description {
margin: 30px 0;
}
.project-media img {
margin-bottom: 30px;
}
.video-container {
margin-bottom: 20px;
padding: 0 0 56.25%;
position: relative;
width: 100%;
}
.video-container iframe {
border: 0 none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.carousel {
position: relative;
}
.carousel-control {
font-size: 30px;
opacity: 1;
top: 50%;
transform: translateY(-20%);
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
.project-nav,
.post-nav {
margin-top: 50px;
}
.project-nav i,
.post-nav i {
font-size: 24px;
}
.project-nav a,
.post-nav a {
color: inherit;
font-weight: 500;
}
.project-nav a:hover,
.post-nav a:hover {
color: #333;
}
/*-------------------------------------------------------------------
8. BLOG BLOCK
-------------------------------------------------------------------*/
.blog-block {
position: absolute;
width: 430px;
height: 300px;
border: 1px solid rgba(255, 255, 255, 0.2);
display: table;
transition: all 0.5s;
z-index: 1
}
.dark .blog-block {
border: 1px solid rgba(51, 51, 51, 0.4);
}
.blog-block:hover {
border: 15px solid rgba(255, 255, 255, 0.1);
}
.blog-block-container {
display: table-cell;
vertical-align: middle;
padding-left: 50px;
-ms-transform: rotate(34deg);
-webkit-transform: rotate(34deg);
transform: rotate(34deg);
}
.post {
background-color: #fff;
margin: 25px 0;
}
.post:last-child {
border-bottom: 0;
}
.post-thumbnail {
text-align: center;
}
.post-title {
text-align: center;
}
.post-title h2 {
font-size: 28px;
margin-top: 50px;
margin-bottom: 20px;
}
.post-info {
font-size: 14px;
}
.post-info:after {
content: "";
display: block;
width: 40px;
height: 2px;
background: #333;
margin: 20px auto;
}
.post-info span {
padding: 0 2px;
}
.post-info .slash:before {
content: "/";
}
.post-body {
padding: 20px 0;
text-align: center;
}
.post-body p {
padding-bottom: 20px;
}
.post-body .btn {
margin-top: 0;
}
.pagination {
display: inline-flex;
margin-bottom: 0;
}
.page-link,
.page-item.disabled .page-link {
background-color: #f1f3f6;
border-color: #f1f3f6;
color: #868e96;
}
.page-link {
color: #727272;
}
.page-item.active .page-link {
background-color: #666;
border-color: #666;
}
.page-link:focus, .page-link:hover {
color: #333;
}
#blog-header {
height: 500px;
position: relative;
}
#blog-header .overlay {
position: absolute;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 500px;
top: 0;
bottom: 0;
z-index: 0;
}
.single-post-title {
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.single-post-title,
.single-post-title h1 {
color: #FFF;
}
.single-post-title h1 {
margin-bottom: 30px;
}
#single-post .post {
padding: 0;
border-bottom: 0;
margin-bottom: 50px;
}
#single-post .post-body {
text-align: left;
}
#single-post .post-body p {
padding-bottom: 0;
}
#single-post .post-body blockquote {
background-color: #F1F3F6;
border-left: 5px solid #ddd;
color: #333;
padding: 20px;
}
.author-box {
background: #F1F3F6;
overflow: auto;
padding: 30px 0 0;
margin: 30px 0 0;
}
.author-box h3 {
font-weight: 700;
font-size: 14px;
margin-bottom: 10px;
}
.author-box h3 span {
color: #727272;
}
#blog-social {
display: block;
width: 100%;
clear: both;
text-align: center;
padding: 30px 0;
margin: 0 0 70px;
border-bottom: 1px solid #F1F3F6;
}
#blog-social>li {
display: inline-block;
}
#blog-social>li>a {
display: block;
width: 40px;
height: 40px;
margin: 5px;
border: 1px solid #ddd;
font-size: 16px;
color: #ddd;
padding: 0;
line-height: 36px;
text-align: center;
transition: all .3s ease;
}
#blog-social>li>a:hover {
color: #666;
border: 1px solid #666;
}
#comments {
margin-bottom: 50px;
}
#comments h5 {
font-size: 13px;
}
.comments-list {
padding-left: 0;
list-style: none;
margin: 30px 0 0;
}
.comments-list>li {
margin-bottom: 14px;
}
.comments-list>li:before,
.comments-list>li:after {
content: " ";
display: table;
}
.comments-list>li:after {
clear: both;
}
.comments-list .children {
list-style: none;
padding-left: 60px;
}
.comments-list .children>li {
margin: 0;
}
.comments-list .children>li .comment:before {
position: absolute;
content: '\f3d6';
font-family: 'Ionicons';
font-size: 26px;
margin-top: 5%;
margin-left: -30px;
}
.comments-list .comment {
padding: 14px 0;
}
.comment:before,
.comment:after {
content: " ";
display: table;
}
.comment:after {
clear: both;
}
.comment .col-sm-2 {
padding-right: 0;
}
.comment img {
max-width: 100px;
margin-top: 10px;
width: 100%;
}
.comment-date {
color: #727272;
}
.comment-reply {
color: #333;
font-size: 12px;
font-weight: 500;
position: absolute;
right: 15px;
top: 0;
padding: 5px;
}
#respond h5 {
font-size: 14px;
}
.comment-respond {
padding: 50px 0 0;
margin-bottom: 50px;
}
.comment-respond .form-control {
border: none;
border-bottom: 1px solid #333;
font-size: 14px;
}
.comment-respond textarea {
min-height: 120px;
max-width: 100%;
resize: none;
}
.form-double:before,
.form-double:after {
content: " ";
display: table;
}
.form-double:after {
clear: both;
}
.form-double .form-group {
width: 50%;
float: left;
padding-right: 5px;
}
.form-double .form-group.last {
padding-right: 0;
padding-left: 5px;
}
.comment-respond .form-group .input-group-addon {
background: transparent;
border-radius: 0;
}
.form-submit {
text-align: right;
}
/*-------------------------------------------------------------------
9. CONTACT BLOCK
-------------------------------------------------------------------*/
.contact-block {
position: absolute;
width: 430px;
height: 400px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-left: none;
display: table;
transition: all 0.5s;
z-index: 1
}
.dark .contact-block {
border: 1px solid rgba(51, 51, 51, 0.4);
}
.contact-block:hover {
border: 15px solid rgba(255, 255, 255, 0.1);
}
.contact-block-container {
display: table-cell;
vertical-align: middle;
-ms-transform: rotate(34deg);
-webkit-transform: rotate(34deg);
transform: rotate(34deg);
}
.contact-from {
margin-top: 30px;
}
.contact-content {
display: table;
width: 100%;
margin-top: 30px;
}
.contact-icon {
width: 60px;
vertical-align: top;
font-size: 30px;
text-align: center;
color: #666;
}
.contact-details,
.contact-icon {
display: table-cell;
}
.contact-details h5,
.contact-details p {
margin-bottom: 0;
}
.error-form {
float: right;
margin: -24px 2px 0 0;
position: relative;
top: 0;
}
.error-form i:before {
color: #C33;
font-size: 100%;
vertical-align: top;
margin-right: 10px;
}
.alert-success {
text-align: left;
}
#contact_form .form-control {
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
border-bottom: 1px solid #727272;
border-radius: 0;
width: 100%;
font-size: 14px;
transition: all .3s;
}
#contact_form .form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-bottom: 1px solid #666;
}
#contact_form textarea {
resize: none;
}
#map {
height: 400px;
margin-top: 50px;
width: 100%;
}
.map-marker {
background: url('../images/map-marker.png') no-repeat;
height: 75px;
width: 80px;
}
/*-------------------------------------------------------------------
10. RESPONSIVE
-------------------------------------------------------------------*/
@media (min-width:1920px) {
.name-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 122px;
top: 90px;
}
.about-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 702px;
top: -60px;
}
.portfolio-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 897px;
top: 179px;
}
.blog-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 1092px;
top: 518px;
}
.contact-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 1386px;
top: 138px;
}
.name-block.reverse {
width: 400px;
left: 300px;
}
.content-blocks,
.content-blocks.pop.showx,
.inline-menu-container,
.close-pop {
width: 1024px;
left: auto;
right: 0;
}
}
@media (min-width:1280px) and (max-width:1919px) {
.name-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: -190px;
top: 10px;
}
.about-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 382px;
top: -151px;
}
.portfolio-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 577px;
top: 89px;
}
.blog-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 772px;
top: 428px;
}
.contact-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 1067px;
top: 48px;
}
}
@media (max-width:1280px) {
.inline-menu-container,
.close-pop {
right: 0;
width: 70%;
}
}
@media (min-width:1025px) and (max-width:1280px) {
.name-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: -200px;
top: -80px;
}
.about-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 419px;
top: -160px;
width: 350px;
height: 300px;
}
.portfolio-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 586px;
top: 88px;
width: 350px;
height: 300px;
}
.blog-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 753px;
top: 335px;
width: 350px;
height: 300px;
}
.contact-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 900px;
top: -70px;
width: 350px;
height: 300px;
}
}
@media (min-width:981px) and (max-width:1024px) {
.name-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: -190px;
top: 10px;
}
.about-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 382px;
top: -150px;
}
.portfolio-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 577px;
top: 89px;
}
.blog-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 772px;
top: 428px;
}
.contact-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 365px;
top: 538px;
}
}
@media (max-width:1024px) {
.name-block-container h1 {
font-size: 40px;
line-height: 1.1;
}
.name-block-container h1 span,
.name-block-container h2 {
font-size: 22px;
min-height: 22px;
}
.menu2 .name-block {
padding: 0 0 0 20px;
}
.menu2 .name-block-container h1 {
font-size: 50px;
}
.menu2 .name-block-container h1 span,
.menu2 .name-block-container h2 {
font-size: 26px;
min-height: 26px;
}
.inline-menu-container {
font-size: 14px;
right: 10px;
width: 69%;
}
.inline-menu li {
padding: 0 10px;
}
.content {
padding: 120px 50px 50px;
}
}
@media (min-width:768px) and (max-width:980px) {
.name-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: -190px;
top: 10px;
}
.about-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 382px;
top: -150px;
}
.portfolio-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 577px;
top: 89px;
}
.blog-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 336px;
top: 548px;
}
.contact-block {
-ms-transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
transform: rotate(-34deg);
left: 9px;
top: 780px;
}
.project {
width: 50%;
}
}
@media (max-width:980px) {
.inline-menu {
margin-top: 5px;
}
.timeline:before,
.timeline:after,
.exp:after {
display: none;
}
.exp-holder {
margin-top: 0;
}
.exp {
padding-left: 0;
}
.awards img {
opacity: 1;
}
}
@media (max-width:800px) and (orientation:landscape) {
.home {
background: url(../images/bg.jpg) #333 30% 30%;
overflow-y: scroll;
}
.name-block,
.about-block,
.portfolio-block,
.blog-block,
.contact-block {
position: relative;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
width: 100%;
height: auto;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
display: table;
left: 0;
top: 0;
}
.contact-block {
border-bottom: none;
}
.name-block-container,
.about-block-container,
.portfolio-block-container,
.blog-block-container,
.contact-block-container {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
padding: 0 0 0 0;
}
h2.menu-item {
line-height: 3em;
margin-bottom: 0;
display: block;
}
h2.menu-item:after {
position: absolute;
content: '';
top: 15px;
left: -20px;
width: 70px;
height: 1px;
background: #FFF;
transition: all 0.5s ease;
}
.social {
position: relative;
margin: 50px 0;
}
.inline-menu-container {
width: 100%;
left: 0;
}
.content-blocks {
height: 100vh;
}
}
@media (max-width:800px) {
#lionhero {
height: 100vh;
position: fixed;
}
#lionhero .owl-nav {
display: none;
}
.menu2 .social {
bottom: 0;
}
.sidebar-menu,
.home-container {
left: 0;
top: 0;
width: 100%;
}
.sidebar-menu {
height: 50px;
z-index: 1;
}
.sidebar-menu.hidex {
top: -60px;
}
.menu4 .inline-menu {
position: relative;
text-align: center;
margin-top: 0;
width: 100%;
}
.menu4 .inline-menu li {
color: #f5f5f5;
font-size: 16px;
display: inline-block;
line-height: 50px;
padding: 0 10px;
}
.name-block {
padding-top: 30px;
}
.name-block,
.about-block,
.portfolio-block,
.blog-block,
.contact-block {
position: relative;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
width: 100%;
height: auto;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
display: table;
left: 0;
top: 0;
}
.contact-block {
border-bottom: none;
}
.about-block:hover,
.portfolio-block:hover,
.blog-block:hover,
.contact-block:hover {
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.name-block-container,
.about-block-container,
.portfolio-block-container,
.blog-block-container,
.contact-block-container {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
padding: 0 0 0 0;
}
h2.menu-item {
line-height: 3em;
margin-bottom: 0;
display: block;
}
h2.menu-item:after {
position: absolute;
content: '';
top: 15px;
left: -20px;
width: 70px;
height: 1px;
background: #FFF;
transition: all 0.5s ease;
}
.menu-block:hover h2.menu-item:before {
top: -40px;
left: -20px;
}
.menu-block:hover h2.menu-item:after {
top: 15px;
left: -20px;
}
.menu-block:hover {
background: rgba(0, 0, 0, 0);
}
.social {
position: relative;
margin: 50px 0;
}
.menu4 .social {
bottom: 0;
}
.menu4 .content-blocks,
.content-blocks {
width: 100%;
left: 0;
}
.menu4 .content-blocks.pop {
left: 100%;
}
.menu4 .content-blocks.pop.showx,
.content-blocks.pop.showx {
left: 0;
}
.menu4 .close-pop,
.close-pop {
right: 0;
width: 100%;
}
.inline-menu-container {
width: 100%;
left: 0;
}
}
@media (max-width:767px) {
.home {
overflow-y: scroll;
}
.home .bgScroll {
animation: none;
height: 100%;
}
.menu2 .name-block-container h1 {
font-size: 40px;
}
.menu2 .name-block-container h1 span,
.menu2 .name-block-container h2 {
font-size: 22px;
min-height: 22px;
}
.status {
display: none;
}
.content {
padding: 100px 20px 50px;
}
.content-blocks.pop.showx {
top: 0;
}
.content-blocks.pop.showx {
height: 100vh;
}
.menu4 .name-block.reverse {
padding-left: 0;
}
.exp .hgroup h4,
.exp .hgroup h5 {
display: table;
}
.exp .hgroup h5 {
padding-left: 0;
}
.exp .hgroup h5:before {
display: none;
}
.filters span {
display: none;
}
.filters ul li {
font-size: 14px;
padding: 2px 5px 2px 0;
}
.name-block-container h1 span {
font-size: 22px;
}
.name-block-container h1 {
font-size: 36px;
}
.name-block-container h2 {
font-size: 22px;
min-height: 22px;
}
h2.menu-item {
font-size: 20px;
line-height: 2em;
margin: 25px 0 25px 40px;
}
h2.menu-item:before {
position: absolute;
top: -20px;
left: -20px;
font-size: 14px;
}
.menu-block:hover h2.menu-item:before {
top: -20px;
left: -20px;
}
h2.menu-item:after {
display: none;
}
.social {
display: none;
}
.project {
width: 100%;
}
}
@media (max-width:640px) {
.author-box .col-sm-2,
.author-box .col-sm-10 {
width: 100%;
text-align: center;
}
.author-box img {
display: block;
margin: 0 auto 30px;
width: 150px;
}
.comments-list .children {
padding-left: 0;
}
}
@media (max-width:576px) {
.menu4 .inline-menu li {
font-size: 14px;
padding: 0 7px;
}
.single-post-title h1 {
font-size: 40px;
}
.comment .col-sm-2 {
width: 16.6667%;
}
.comment .col-sm-10 {
width: 83.3333%;
}
}
@media (max-width:375px) {
.home {
position: relative;
}
.menu4 .home {
height: 100vh;
}
}
@media (max-width:360px) {
#blog-social li:first-child {
display: block;
}
.comment .col-sm-2 {
padding: 0;
}
}
@media (max-width:320px) {
.inline-menu {
margin-right: 0;
}
.inline-menu li {
padding: 0 8px;
}
.menu4 .inline-menu li {
padding: 0 5px;
}
.filters ul li {
margin-left: 5px;
}
.project-nav span {
display: block;
width: 100%;
}
}
/*-------------------------------------------------------------------
Buy Now Button
-------------------------------------------------------------------*/
.buy-now {
background-color: #82B441;
color: #FFF;
display: block;
font-size: 13px;
font-weight: 500;
left: 50px;
letter-spacing: 1.5px;
padding: 3px 15px;
position: absolute;
top: 20px;
z-index: 999
}
.buy-now:hover {
color: #f5f5f5;
}
@media (max-width: 1024px){
.buy-now {
display: none
}
}
.cursor {
background-color: transparent;
border: 2px solid #FFF;
border-radius: 50%;
display: block;
left: 10%;
position: fixed;
margin-top: -10px;
margin-left: -10px;
width: 30px;
height: 30px;
opacity: 0.5;
pointer-events: none;
top: 50px;
transition: transform .3s ease-out;
z-index: 0
}
.no-cursor .cursor {
background-color: transparent;
}
(function($) {
"use strict";
$(window).on('load', function() {
$(".preloader").fadeOut("slow", function() {
$(".preloader-left").addClass("slide-left");
});
$('#lionhero').owlCarousel({
animateOut: 'fadeOut',
nav: true,
navText: [
'<i class="ion-ios-arrow-thin-left"></i>',
'<i class="ion-ios-arrow-thin-right"></i>'
],
items: 1,
navSpeed: 400,
loop: true,
autoplay: true,
autoplayTimeout: 4000,
autoplayHoverPause: true,
});
$('#liontextslider').owlCarousel({
nav: false,
items: 1,
navSpeed: 400,
loop: true,
autoplay: true,
autoplayTimeout: 4000,
autoplayHoverPause: true,
});
$('#liontestimonial').owlCarousel({
nav: true,
navText: [
'<i class="ion-ios-arrow-thin-left"></i>',
'<i class="ion-ios-arrow-thin-right"></i>'
],
items: 1,
navSpeed: 400,
loop: true,
autoplay: true,
autoplayTimeout: 4000,
autoplayHoverPause: true,
});
});
$('.portfolio-block, .menu-item').on('click', function() {
//Portfolio masonry
var $container = $('#portfolio-container');
$container.isotope({
masonry: {
columnWidth: '.portfolio-item'
},
itemSelector: '.portfolio-item'
});
$('#filters').on('click', 'li', function() {
$('#filters li').removeClass('active');
$(this).addClass('active');
var filterValue = $(this).attr('data-filter');
$container.isotope({ filter: filterValue });
});
});
// Typing Animation (Typed.js)
$('#element').typed({
strings: ["UX, UI Designer", "Web App Developer", "Social Animal!"],
typeSpeed: -50,
loop: true,
startDelay: 500,
backDelay: 3000,
contentType: 'html',
});
//Video background
var myPlayer;
$(function() {
myPlayer = $("#bgndVideo").YTPlayer({ useOnMobile: true, mobileFallbackImage: "assets/mask-4.png" });
});
//Portfolio Modal
$(document).on('click', '.open-project', function() {
var projectUrl = $(this).attr("href");
$('.inline-menu-container').removeClass('showx');
$('.sidebar-menu').addClass('hidex');
$('.content-blocks.pop').addClass('showx');
$('.content-blocks.pop section').load(projectUrl + ' .load-data > *');
return false;
});
//Blog post Modal
$('.open-post').on('click', function() {
var postUrl = $(this).attr("href");
$('.inline-menu-container').removeClass('showx');
$('.sidebar-menu').addClass('hidex');
$('.content-blocks.pop').addClass('showx');
$('.content-blocks.pop section').load(postUrl);
return false;
});
//On Click Open Menu Items
$('.menu-block, .menu-item').on('click', function() {
$('.name-block').addClass('reverse');
$('.name-block-container').addClass('reverse');
$('.menu-blocks').addClass('hidex');
$('.inline-menu-container').addClass('showx');
$('.inline-menu-container.style2').addClass('dark');
});
//On Click Open About/Resume Block
$('.about-block, .menu-item.about').on('click', function() {
$('.content-blocks').removeClass('showx');
$('.content-blocks.about').addClass('showx');
$('.menu-item').removeClass('active');
$('.menu-item.about').addClass('active');
});
//On Click Open Portfolio Block
$('.portfolio-block, .menu-item.portfolio').on('click', function() {
$('.content-blocks').removeClass('showx');
$('.content-blocks.portfolio').addClass('showx');
$('.menu-item').removeClass('active');
$('.menu-item.portfolio').addClass('active');
});
//On Click Open Blog Block
$('.blog-block, .menu-item.blog').on('click', function() {
$('.content-blocks').removeClass('showx');
$('.content-blocks.blog').addClass('showx');
$('.menu-item').removeClass('active');
$('.menu-item.blog').addClass('active');
});
//On Click Open Contact Block
$('.contact-block, .menu-item.contact').on('click', function() {
$('.content-blocks').removeClass('showx');
$('.content-blocks.contact').addClass('showx');
$('.menu-item').removeClass('active');
$('.menu-item.contact').addClass('active');
});
//On Click Close Blocks
$('#close').on('click', function() {
$('.name-block').removeClass('reverse');
$('.name-block-container').removeClass('reverse');
$('.content-blocks').removeClass('showx');
$('.menu-blocks').removeClass('hidex');
$('.inline-menu-container').removeClass('showx');
$('.menu-item').removeClass('active');
});
//On Click Close Blog Post And Project Details
$('#close-pop').on('click', function() {
$('.content-blocks.pop').removeClass('showx');
$('.sidebar-menu').removeClass('hidex');
$('.inline-menu-container').addClass('showx');
$('.content-blocks.pop section').empty();
});
$('.menu-block, .menu-item, #close').on('click', function() {
$('.content-blocks').animate({ scrollTop: 0 }, 800);
});
//Function for 'Index-Menu2.html'
$('#home').on('click', function() {
$('.content-blocks').removeClass('showx');
$('.menu-item').removeClass('active');
$(this).addClass('active');
$('.inline-menu-container.style2').removeClass('dark');
});
//Custom Cursor
if (('.cursor').length > 0) {
var $circleCursor = $('.cursor');
function moveCursor(e) {
var t = e.clientX + "px",
n = e.clientY + "px";
TweenMax.to($circleCursor, .2, {
left: t,
top: n,
ease: 'Power1.easeOut'
});
}
$(window).on('mousemove', moveCursor);
function zoomCursor() {
TweenMax.to($circleCursor, .2, {
borderWidth: '1px',
opacity: 0.1,
scale: 2,
ease: 'Power1.easeOut'
});
}
$(document).on('mouseenter', 'a, .zoom-cursor, .menu-item', zoomCursor);
function noCursor() {
TweenMax.to($circleCursor, .2, {
opacity: 0,
ease: 'Power1.easeOut'
});
}
$(document).on('mouseenter', 'button, .btn', noCursor);
function defaultCursor() {
TweenLite.to($circleCursor, .1, {
borderWidth: '2px',
opacity: 0.5,
scale: 1,
ease: 'Power1.easeOut'
});
}
$(document).on('mouseleave', 'a, .zoom-cursor, .menu-item, button, .btn', defaultCursor);
$(document).ready(function() {
$('.cursor').css('transform', 'scale(1)');
});
}
//Leaflet Map
var mymap = L.map('map').setView([40.6700, -73.9400], 14);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: '',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
var icon = L.divIcon({
className: 'custom-div-icon',
html: "<div class='map-marker'></div>",
iconSize: [30, 30],
iconAnchor: [15, 15]
});
L.marker([40.6700, -73.9400], { icon: icon }).addTo(mymap);
})(jQuery);
