master

分支 (1)

管理

管理

master

FluteHomePage
/
index.html

<!--
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>ONE PAGE PORTFOLIO Bootstarp Website Template| Home :: w3layouts</title>
<link href="./css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="./css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- 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>
<!--webfont by 360 CDN-->
<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet'>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/move-top.js"></script>
<script type="text/javascript" src="./js/easing.js"></script>
<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
				});
			});
		</script>
</head>
<body>
  <!-- header-section-starts -->
    <div class="header">
	       <div class="header-top">
		   <div class="container">
		       <div class="logo">
			      <a href=""><img src="./images/logo.png" class="img-responsive" alt="" /></a>
			   </div>
			   <div class="top-menu">
			   <span class="menu"> </span>
			      <ul>
				      <li><a href="#aboutus" class="scroll">About Me</a></li>
					  <li><a href="#work" class="scroll">Work</a></li>
					  <li><a href="#clients" class="scroll">Clients</a></li>
					  <li><a href="#contact" class="scroll">Let's talk</a></li>
					  <div class="clearfix"></div>
				  </ul>
			   </div>
			   <!-- script-for-menu -->
		<script>
			$("span.menu").click(function(){
				$(".top-menu ul").slideToggle("slow" , function(){
				});
			});
		</script>
		<!-- script-for-menu -->

			   <div class="clearfix"></div>
		   </div>
	   </div>

	<div class="index-banner">
	  <div class="container">
       	   <div class="wmuSlider example1">
			   <div class="wmuSliderWrapper">
				   <article style="position: absolute; width: 100%; opacity: 0;">
				   	<div class="banner-wrap">
				   	       <div class="bannertop_box">
				   		 		<h1>HELLO,<span>I'M YOUR NAME</span></h1>
								<label>graphic / web / motion designer</label>
								<p>Slider for your work.pictures yours recent projects or something like that.</p>
				   		 	    <p>You can put your own stuff such as other text information, images etc. </p>
							    <p>That's absolutely <span class="bold">free</span> template. Ihope you enjoy it!<span class="bold block">Thank you.</span></p>
							</div>

				   		 	<div class="banner_right">
				   		 		<img src="./images/slider-img2.jpg" class="img-responsive" alt="" />
				   		 	</div>
				   		 	<div class="clearfix"></div>
				   	  </div>
					</article>
				 </div>

<!--
				<a class="wmuSliderPrev">Previous</a><a class="wmuSliderNext">Next</a>
                <ul class="wmuSliderPagination">
                	<li><a href="#" class="">0</a></li>
                	<li><a href="#" class="">1</a></li>
                	<li><a href="#" class="wmuActive">2</a></li>
                </ul>
-->

            </div>
            <script src="./js/jquery.wmuSlider.js"></script>
			  <script>
       			$('.example1').wmuSlider({
                    slideshow: false,
                    navigationControl: false,
                    paginationControl: false
                });
   		     </script>
      </div>
	  </div>
	  </div>
  <!-- header-section-ends -->
  <!-- content-starts -->
  <div class="content">
  <!-- about-section-starts -->
    <div class="about-section" id="aboutus">
	    <div class="about-section-head text-center">
		   <div class="container">
		      <h3>ABOUT ME</h3>
			  <p>Well, you can write something about yourself. For example, full name,  age, your geolocation and etc. And specific of your work. Maybe your work focused on UI / Web / Graphic or Motion design. I don't know :)</p>
		   </div>
		</div>
		<div class="about-section-grids">
		    <div class="about-section-top-grid">
			   <div class="container">
			       <div class="col-md-3 about-section-top-left-grid">
				      <h4>Software</h4>
				   </div>
				   <div class="col-md-9 about-section-top-right-grid">
				      <p>Ps | Ai | Id | Ae | Mu | Cinema4d | 3dsMax + Vray</p>
				   </div>
				   <div class="clearfix"></div>
			   </div>
			</div>
			<div class="about-section-middle-grid">
			   <div class="container">
			       <div class="col-md-3 about-section-middle-left-grid">
				      <h4>Skills</h4>
				   </div>
				   <div class="col-md-9 about-section-middle-right-grid">
				      <p>Conceptual thinking | Web | Illustration | Identity | Team work</p>
				   </div>
				   <div class="clearfix"></div>
			   </div>
			</div>
			<div class="about-section-bottom-grid">
			   <div class="container">
			       <div class="col-md-3 about-section-bottom-left-grid">
				      <h4>Hobby</h4>
				   </div>
				   <div class="col-md-9 about-section-bottom-right-grid">
				      <p>Music | Movies | Sport | Art | Photography</p>
				   </div>
				   <div class="clearfix"></div>
			   </div>
			</div>
		</div>
	</div>
	<!-- about-section-ends -->
	<!-- work-section-starts -->
	<div class="work-section" id="work">
	    <div class="container">
		  <div class="work-section-head text-center">
		     <h3>WORK</h3>
		  </div>
		  <div id="portfoliolist">
					<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
						 <div class="portfolio-wrapper">
							<a class="lightbox" href="#goofy">
								   <img src="./images/pic1.jpg" class="img-responsive" alt="" />

								</a>
								<div class="lightbox-target" id="goofy">
								<img src="./images/pic1.jpg" class="img-responsive" alt="" />
								   <a class="lightbox-close" href="#"></a>
								</div>
						 </div>

					</div>
					<div class="portfolio app mix_all" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">
							<a class="lightbox" href="#goofy">
								   <img src="./images/pic2.jpg" class="img-responsive" alt="" />

								</a>
					    </div>
					</div>
					<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">
							<a class="lightbox" href="#goofy">
								   <img src="./images/pic3.jpg" class="img-responsive" alt="" />

								</a>

					</div>
</div>
					<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">
							<a class="lightbox" href="#goofy">
								   <img src="./images/pic4.jpg" class="img-responsive" alt="" /><div class="b-wrapper">
						  	</div>
								</a>
					    </div>

					</div>
					<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">
							<a class="lightbox" href="#goofy">
								   <img src="./images/pic5.jpg" class="img-responsive" alt="" />

								</a>
					    </div>

					</div>
					<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">
							<a class="lightbox" href="#goofy">
								   <img src="./images/pic6.jpg" class="img-responsive" alt=""/>
								</a>
					    </div>
					</div>
					<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">
							<a class="lightbox" href="#goofy">
								   <img src="./images/pic7.jpg" class="img-responsive" alt=""/>
								</a>
					    </div>
					</div>
					<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">
							<a class="lightbox" href="#goofy">
								   <img src="./images/pic8.jpg" class="img-responsive" alt=""/>
								</a>
					    </div>
					</div>
					<div class="portfolio icon mix_all" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">
							<a class="lightbox" href="#goofy">
								   <img src="./images/pic9.jpg" class="img-responsive" alt=""/>
								</a>
					    </div>
						</div>
<div class="clearfix"></div>
				</div>
		  <div class="clearfix"></div>
		  <span class="more">MORE ON <a href="#">BEHANCE</a></span>

		  </div>
		  </div>
		  <!-- script-for-portfolio -->
		  <script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
			});
		});
	</script>
	<!-- work-section-ends -->
	<!-- clients-section-starts -->
	   <div class="clients-section" id="clients">
	      <div class="container">
		    <div class="clients-section-head text-center">
			   <h3>CLIENTS</h3>
			</div>
			<div class="clients-section-grids text-center">
			   <div class="col-md-4 client-section-grid">
			    <img src="./images/client1.png" alt="" />
			 </div>
			 <div class="col-md-4 client-section-grid">
			    <img src="./images/client2.png" alt="" />
			 </div>
			 <div class="col-md-4 client-section-grid">
			    <img src="./images/client3.png" alt="" />
			 </div>
			 <div class="clearfix"></div>
			 <div class="col-md-4 client-section-grid">
			    <img src="./images/client2.png" alt="" />
			 </div>
			 <div class="col-md-4 client-section-grid">
			    <img src="./images/client3.png" alt="" />
			 </div>
			 <div class="col-md-4 client-section-grid">
			    <img src="./images/client1.png" alt="" />
			 </div>
			 <div class="clearfix"></div>
			 <div class="col-md-4 client-section-grid">
			    <img src="./images/client3.png" alt="" />
			 </div>
			 <div class="col-md-4 client-section-grid">
			    <img src="./images/client1.png" alt="" />
			 </div>
			 <div class="col-md-4 client-section-grid">
			    <img src="./images/client2.png" alt="" />
			 </div>
			 <div class="clearfix"></div>
			</div>
		  </div>
	   </div>
	<!-- clients-section-ends -->
	</div>
	<!-- contact-section-starts -->
	<div class="contact-section" id="contact">
	<div class="container">
	    <div class="contact-section-head text-center">
		   <h3>LET'S TALK</h3>
		</div>
		<div class="comments-area">
		    <form>
			   <p>
			   <label>YOUR NAME</label>
			   <input type="text" value="" >
			   </p>
			   <p>
			   <label>YOUR EMAIL</label>
			   <input type="text" value="" >
			   </p>
			   <p>
			   <label>YOUR MESSAGE</label>
			   <textarea></textarea>
			   </p>
			   <div class="submit">
			     <input type="submit" value="submit">
			   </div>
			</form>
		</div>
		<div class="social-icons">
		  <a href="#"><i class="behance-icon"></i></a>
		  <a href="#"><i class="dribble-icon"></i></a>
		  <a href="#"><i class="linkein-icon"></i></a>
		  <a href="#"><i class="vimeo-icon"></i></a>
		  <a href="#"><i class="twitter-icon"></i></a>
		  <a href="#"><i class="facebook-icon"></i></a>
		  <a href="#"><i class="skype-icon"></i></a>
		</div>
	</div>
	</div>
	<!-- contact-section-ends -->
  <!-- content-ends -->
     <!-- footer-->
	<div class="footer">
		<div class="container">
			<div class="copyright">
				<p>&copy; 2014 Template by <a href="http://w3layouts.com" target="target_blank">W3layouts</a></p>
			</div>
		</div>
	</div>
    <!-- footer-->
   <script type="text/javascript">
						$(document).ready(function() {
							$().UItoTop({ easingType: 'easeOutQuart' });

						});
					</script>
				<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
</body>
</html>