<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Butterfly Website template | Home :: w3layouts</title>
<link rel="shortcut icon" type="image/x-icon" href="web/images/fav-icon.png" />
<link href="web/css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="web/css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="web/js/bootstrap.min.js"></script>
<script src="web/js/jquery.min.js"></script>
<!-- Custom Theme files -->
<link href="web/css/theme-style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
</script>
<!----webfonts---->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,300,500,600,200,700,800,900' rel='stylesheet' type='text/css'>
<!----//webfonts---->
<!----script-for-smoth-scroling---->
<script type="text/javascript">
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
<!----start-top-nav-script---->
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
<!----//script-for-smoth-scroling---->
</head>
<body>
<!----start-header--->
<div id="top" class="header">
<!----start-container---->
<div class="container">
<div class="logo navbar-header">
<a href="#page-top">
<a href="#"> <img src="web/images/logo.png" title="Butterfly" /></a>
</a>
</div>
<!--top-nav-->
<nav class="top-nav">
<ul class="top-nav">
<li class="active"><a href="#home">Home</a></li>
<li class="page-scroll"><a href="#about">About</a></li>
<li class="page-scroll"><a href="#skills">Skills</a></li>
<li class="page-scroll"><a href="#port">Portfolio</a></li>
<li class="page-scroll"><a href="#team">Team</a></li>
<li class="page-scroll"><a class="subNavBtn" href="#blog">Blog</a></li>
<li class="page-scroll"><a href="#contact">Contact</a></li>
</ul>
<a href="#" id="pull"><img src="web/images/nav-icon.png" title="menu" /></a>
</nav>
<!--//top-nav-->
</div>
</div>
<!----//End-header--->
<!----start-slider---->
<!----slider-requried-files--->
<link rel="stylesheet" href="web/css/fwslider.css" media="all">
<script src="web/js/jquery-ui.min.js"></script>
<script src="web/js/css3-mediaqueries.js"></script>
<script src="web/js/fwslider.js"></script>
<!----//slider-requried-files--->
<!---start-image-slider---->
<div class="slider">
<div id="fwslider">
<div class="slider_container">
<div class="slide">
<!-- Slide image -->
<img class="slide-img " src="web/images/slider-bg.jpg" alt=""/>
<!-- /Slide image -->
<!-- Texts container -->
<div class="slide_content">
<div class="slide_content_wrap">
<h1 class="title">BUTTER FLY</h1>
<p class="description">AWESOME CREATIVE AGENCY ASINGLE PAGE template</p>
<img class="img-responsive description img1" src="web/images/slider-img.png" title="name" />
</div>
</div>
<!-- /Texts container -->
</div>
<!-- /Duplicate to create more slides -->
<div class="slide">
<img class="slide-img" src="web/images/slider-bg.jpg" alt=""/>
<div class="slide_content">
<div class="slide_content_wrap">
<h1 class="title">BUTTER FLY</h1>
<p class="description">AWESOME CREATIVE AGENCY ASINGLE PAGE template</p>
<img class="img-responsive description img1" src="web/images/slider-img.png" title="name" />
</div>
</div>
</div>
<!--/slide -->
</div>
<div class="timers"> </div>
<div class="slidePrev"><span> </span></div>
<div class="slideNext"><span> </span></div>
</div>
<!---End-image-slider---->
</div>
<!----//End-slider---->
<!----start-about-us---->
<div id="about" class="container about">
<div class="text-center div-head">
<h2>ABOUT US</h2>
<p>Butterfly is a modern psd theme made to look awesome on any size of screen. single page templet for creative agency .</p>
</div>
<div class="row about-grids text-center">
<div class="col-md-3 about-grid">
<a class="a-coin1" href="#">
<span> </span>
</a>
<a href="#"><h3>Modern</h3></a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing..</p>
</div>
<div class="col-md-3 about-grid">
<a class="a-coin2" href="#">
<span> </span>
</a>
<a href="#"><h3>Clean</h3></a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing..</p>
</div>
<div class="col-md-3 about-grid">
<a class="a-coin3" href="#">
<span> </span>
</a>
<a href="#"><h3>Responsive</h3></a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing..</p>
</div>
<div class="col-md-3 about-grid">
<a class="a-coin4" href="#">
<span> </span>
</a>
<a href="#"><h3>Simple</h3></a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing..</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!----//End-about-us---->
<!----start-skillls---->
<div id="skills" class="skills">
<div class="container">
<div class="text-center div-head skills-head">
<h2>OUR SKILLS</h2>
<p>Butterfly is a modern psd theme made to look awesome on any size of screen. single page templet for creative agency .</p>
</div>
<div class="row skills-grids">
<div class="col-md-3 skills-grid text-center">
<span class="s-icon1"><strong>80%</strong></span>
<h3>Web Design</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing..</p>
</div>
<div class="col-md-3 skills-grid text-center">
<span class="s-icon2"><strong>65%</strong></span>
<h3>WordPress</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing..</p>
</div>
<div class="col-md-3 skills-grid text-center">
<span class="s-icon3"><strong>50%</strong></span>
<h3>JQuery</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing..</p>
</div>
<div class="col-md-3 skills-grid text-center">
<span class="s-icon4"><strong>90%</strong></span>
<h3>HTML</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing..</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!----//End-skillls---->
<!----start-portfolio---->
<div id="port" class="container portfolio-main">
<div class="text-center div-head">
<h2>OUR PORTFOLIO</h2>
<p>Butterfly is a modern psd theme made to look awesome on any size of screen. single page templet for creative agency .</p>
</div>
<!---- start-portfolio-script----->
<script src="web/js/hover_pack.js"></script>
<script type="text/javascript" src="web/js/jquery.mixitup.min.js"></script>
<script type="text/javascript">
$(function () {
var filterList = {
init: function () {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
hoverEffect: function () {
// Simple parallax effect
$('#portfoliolist .portfolio').hover(
function () {
$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');
},
function () {
$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
}
);
}
};
// Run the show!
filterList.init();
});
</script>
<!----//End-portfolio-script----->
<ul id="filters" class="clearfix">
<li><span class="filter active" data-filter="app card icon logo web">All</span></li>
<li><span class="filter" data-filter="app">DESIGN</span></li>
<li><span class="filter" data-filter="card">PHOTOGRAPHY</span></li>
<li><span class="filter" data-filter="icon">VIDEO</span></li>
<li><span class="filter" data-filter="app">PRINT</span></li>
</ul>
<div id="portfoliolist">
<div class="portfolio logo1 mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go thickbox">
<img class="p-img" src="web/images/p1.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="web/images/link-ico.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go thickbox">
<img class="p-img" src="web/images/p2.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="web/images/link-ico.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go thickbox">
<img class="p-img" src="web/images/p3.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="web/images/link-ico.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go thickbox">
<img class="p-img" src="web/images/p4.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="web/images/link-ico.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go thickbox">
<img class="p-img" src="web/images/p5.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="web/images/link-ico.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go thickbox">
<img class="p-img" src="web/images/p6.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="web/images/link-ico.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="clearfix"> </div>
<a class="more-ports text-center" href="#"><span> </span></a>
</div>
</div>
<!----//End-portfolio---->
<!----start-words---->
<div class="words">
<div class="container text-center">
<h3><span class="frist-quit"> </span> Design For Life <span class="second-quit"> </span></h3>
<h4>- Ahmed Emad -</h4>
</div>
</div>
<!----//End-words---->
<!----start-our-team---->
<div id="team" class="container our-team">
<div class="text-center div-head">
<h2>OUR TEAM</h2>
<p>Butterfly is a modern psd theme made to look awesome on any size of screen. single page templet for creative agency .</p>
</div>
<!----start-team-member-script-files---->
<!----//End-team-member-script-files---->
<div class="row our-team-grids">
<div class="col-md-4 our-team-grid holder smooth">
<img src="web/images/t1.jpg" alt="">
<div class="go-top">
<ul class="team-memmber-social list-unstyled list-inline">
<li><a href="#"> <span class="facebook"> </span></a></li>
<li><a href="#"> <span class="twitter"> </span></a></li>
<li><a href="#"> <span class="chaton"> </span></a></li>
</ul>
</div>
</div>
<div class="col-md-4 our-team-grid holder smooth">
<img src="web/images/t2.jpg" alt="">
<div class="go-top">
<ul class="team-memmber-social list-unstyled list-inline">
<li><a href="#"> <span class="facebook"> </span></a></li>
<li><a href="#"> <span class="twitter"> </span></a></li>
<li><a href="#"> <span class="chaton"> </span></a></li>
</ul>
</div>
</div>
<div class="col-md-4 our-team-grid holder smooth">
<img src="web/images/t3.jpg" alt="">
<div class="go-top">
<ul class="team-memmber-social list-unstyled list-inline">
<li><a href="#"> <span class="facebook"> </span></a></li>
<li><a href="#"> <span class="twitter"> </span></a></li>
<li><a href="#"> <span class="chaton"> </span></a></li>
</ul>
</div>
</div>
<div class="clearfix"> </div>
<!----team-member-note---->
<div class="member-note text-center">
<h3>Lorem Ipsum</h3>
<p>Butterfly is a modern psd theme made to look awesome on any size of screen. single page templet for creative agency .</p>
</div>
<!----//End-member-note---->
</div>
</div>
<!----//End-our-team---->
<!-----start-blog---->
<div id="blog" class="blog">
<div class="container">
<div class="text-center div-head">
<h2>OUR BLOG</h2>
<p>Butterfly is a modern psd theme made to look awesome on any size of screen. single page templet for creative agency .</p>
</div>
<!----start-post-grids---->
<div class="col-md-12 post-grids">
<div class="col-md-6 post-grid">
<div class="col-md-5 post-pic">
<a href="#"><img src="web/images/blog-people-pic1.png" title="post-pic-name" /></a>
</div>
<div class="col-md-7 post-info">
<h3><a href="#">DESIGN</a> <span> 15 \2\2014</span></h3>
<p>Butterfly is a modern psd theme madeto look awesome on any size of screen. single page templet for creative agency</p>
<ul class="post-share list-unstyled list-inline text-right">
<li><a href="#"><span class="post-chat-icon"> </span></a></li>
<li><a href="#"><span class="post-heart-icon"> </span></a></li>
</ul>
</div>
</div>
<div class="col-md-6 post-grid">
<div class="col-md-5 post-pic">
<a href="#"><img src="web/images/blog-people-pic2.png" title="post-pic-name" /></a>
</div>
<div class="col-md-7 post-info">
<h3><a href="#">DESIGN</a> <span> 15 \2\2014</span></h3>
<p>Butterfly is a modern psd theme madeto look awesome on any size of screen. single page templet for creative agency</p>
<ul class="post-share list-unstyled list-inline text-right">
<li><a href="#"><span class="post-chat-icon"> </span></a></li>
<li><a href="#"><span class="post-heart-icon"> </span></a></li>
</ul>
<label class="post-label"> </label>
</div>
</div>
<div class="col-md-6 post-grid">
<div class="col-md-5 post-pic">
<a href="#"><img src="web/images/blog-people-pic2.png" title="post-pic-name" /></a>
</div>
<div class="col-md-7 post-info">
<h3><a href="#">DESIGN</a> <span> 15 \2\2014</span></h3>
<p>Butterfly is a modern psd theme madeto look awesome on any size of screen. single page templet for creative agency</p>
<ul class="post-share list-unstyled list-inline text-right">
<li><a href="#"><span class="post-chat-icon"> </span></a></li>
<li><a href="#"><span class="post-heart-icon"> </span></a></li>
</ul>
</div>
</div>
<div class="col-md-6 post-grid">
<div class="col-md-5 post-pic">
<a href="#"><img src="web/images/blog-people-pic1.png" title="post-pic-name" /></a>
</div>
<div class="col-md-7 post-info">
<h3><a href="#">DESIGN</a> <span> 15 \2\2014</span></h3>
<p>Butterfly is a modern psd theme madeto look awesome on any size of screen. single page templet for creative agency</p>
<ul class="post-share list-unstyled list-inline text-right">
<li><a href="#"><span class="post-chat-icon"> </span></a></li>
<li><a href="#"><span class="post-heart-icon"> </span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!----//End-post-grids---->
<!----start-get-in-touch---->
<div id="contact" class="get-in-touch">
<div class="container">
<div class="text-center div-head">
<h2>GET IN TOUCH</h2>
<p>Feel free to contact us in any time</p>
<ul class="list-unstyled list-inline get-share text-center">
<li><a href="#"><span class="face"> </span> </a></li>
<li><a href="#"><span class="twitt"> </span> </a></li>
<li><a href="#"><span class="gplus"> </span> </a></li>
<li><a href="#"><span class="you"> </span> </a></li>
<li><a href="#"><span class="in"> </span> </a></li>
<li><a href="#"><span class="be"> </span> </a></li>
<li><a href="#"><span class="ta"> </span> </a></li>
</ul>
</div>
<div class="col-md-7 text-center text-boxs">
<form>
<input type="text" placeholder="Name" required />
<input type="text" placeholder="Email" required />
<textarea>Message</textarea>
<input type="submit" value=" " />
</form>
</div>
<div class="col-md-5 address">
<h3>BUTTER FLY</h3>
<p>Aweasome creative agency asingle templet page feel free to contact us we will help you in any time.</p>
<ul class="list-unstyled list-inline">
<li><a href="#"> <span class="map-pin"> </span></a></li>
<li><p> Mansoura , Egypt . <br /> El nile st , near university .</p></li>
</ul>
<ul class="list-unstyled list-inline">
<li><a href="#"> <span class="mobile"> </span></a></li>
<li><p>+ 01012426202</p></li>
</ul>
<ul class="list-unstyled list-inline">
<li><a href="#"> <span class="msg"> </span></a></li>
<li><p> <a href="#">info@butterfly.com</a></p></li>
</ul>
</div>
</div>
</div>
<!----//End-get-in-touch---->
<!----start-copy-right--->
<div class="copy-right text-center">
<p>template By <a href="http://w3layouts.com/">W3layouts</a></p>
</div>
<a href="#top" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"> </span></a>
<!----//End-copy-right--->
<!----//End-container---->
</body>
</html>