A Pen by Xinrui Yang

Thumbnail
This awesome code was written by shinreey, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright shinreey ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Xinrui Yang</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--A Design by W3layouts
Author: W3layout
Author URL: https://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>The Notebook Website Template | Home :: w3layouts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/slimmenu.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
<script src="js/jquery.min.js"></script>
</head>
<body>

<div class="content" id="home">
	<div class="header">
		<div class="wrap">
		      <header id="topnav">
			        <nav>
			        		 <ul>
			        		 	<li class="active"><a href="#home" class="scroll">Home</a></li>
								<li><a href="#team" class="scroll">Team</a></li>
								<li><a href="#ourstory" class="scroll">Our story</a></li>
								<li><a href="#blog" class="scroll">Blog</a></li>
								<li><a href="#contact" class="scroll">Contact</a></li>								
								<div class="clear"> </div>
							</ul>
		        	</nav>
			         <h1><a href="index.html">Notebook</a></h1>
			        	<a href="#" id="navbtn">Nav Menu</a>
			        <div class="clear"> </div>
		        </header>
		    </div>
		</div>
		<!-----script------------->
		<script type="text/javascript"  src="js/menu.js"></script>

	<div class="slider" id="home"> 	
		<div class="wrap">
				<!---start-da-slider----->
			<div id="da-slider" class="da-slider">
				<div class="da-slide">
					<h2>Best Ideas Start On Paper</h2>
					<p>Revolvationary notebook with eco-friendly paper,advanced surface technology and degital sharing integration.</p>
					<a href="#" class="da-link">Order Now</a>
				</div>
				<div class="da-slide">
					<h2>Best Ideas Start On Paper</h2>
					<p>Revolvationary notebook with eco-friendly paper,advanced surface technology and degital sharing integration.</p>
					<a href="#" class="da-link">Order Now</a>
				</div>
				<div class="da-slide">
					<h2>Best Ideas Start On Paper</h2>
					<p>Revolvationary notebook with eco-friendly paper,advanced surface technology and degital sharing integration.</p>
					<a href="#" class="da-link">Order Now</a>
				
				</div>
				<div class="da-slide">
					<h2>Best Ideas Start On Paper</h2>
					<p>Revolvationary notebook with eco-friendly paper,advanced surface technology and degital sharing integration.</p>
						<a href="#" class="da-link">Order Now</a>
				
				</div>
			</div>
		
			<script type="text/javascript" src="js/jquery.cslider.js"></script>
					 <!---strat-slider---->
				    <link rel="stylesheet" type="text/css" href="css/slider.css" />
					<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
						<script type="text/javascript">
							$(function() {
							
								$('#da-slider').cslider({
									autoplay	: true,
									bgincrement	: 450
								});
							
							});
					</script>
					<!---//End-da-slider----->
			
		</div>
	</div>
</div>
<!---start-team----->
	<div  class="team" id="team">
		<div class="wrap">
			<div class="section group">
				<div class="col_1_of_1 span_1_of_1">
				   <h3>Start proto typing your next project </h3>
				  <p>Terry Rechardson cardigan whatever gentrify Tumblr,gluten-free shorts craysechlitz solvage DIY sutainable Helvetila sriracha.Benh mi ethical.put abird on it VHS irony bisicle rights slow-card iterally retro-sktebord ugh 90'Helvetic hash tag.Next ketfiyeah cornhole park belly,slow-card schilitz.</p>
				</div>
				<div class="pen">
					<img src="images/pen.png">
				</div>
		 </div>
		</div>
	</div>
<!---//end-team----->
	
	<!---start-our story----->
		<div  class="ourstory" id="ourstory">
				<div class="our-story">
					<h3>Works in any browser </h3>
					<p>Revolvationary notebook with eco-friendly paper,advanced surface technology and degital sharing integration.</p>
				</div>	
			<div class="group_2" id="Portfolio">
				<div class="group_2_items">
						<div class="wrap">
					<div id="owl-demo1" class="owl-carousel">
						
						<div class="item">
							<div class="carousel">
						  	   <div class="group_2_img1">
									<img src="images/slider2.jpg" alt="">
								</div>
							 </div>
						</div>	
					<div class="item">
						<div class="carousel">
					  	    <div class="group_2_img1">
								<img src="images/slider3.jpg" alt="">
							</div>
						 </div>
					</div>	
					<div class="item">
						<div class="carousel">
					  	    <div class="group_2_img1">
								<img src="images/slider1.jpg" alt="">
							</div>
						 </div>
					</div>
					<div class="item">
						<div class="carousel">
					  	    <div class="group_2_img1">
								<img src="images/slider4.jpg" alt="">
							</div>
						 </div>
					</div>
					<div class="item">
						<div class="carousel">
					  	    <div class="group_2_img1">
								<img src="images/slider5.jpg" alt="">
							</div>
						 </div>
					</div>		
				</div>
			</div>
		</div>
	</div>
</div>
	<!-- Owl Carousel Assets -->
		<link href="css/owl.carousel.css" rel="stylesheet">
		     <!-- Owl Carousel Assets -->
		    <!-- Prettify -->
		    <script src="js/owl.carousel.js"></script>
		        <script>
		    $(document).ready(function() {
		
		      $("#owl-demo").owlCarousel({
		        items : 1,
		        lazyLoad : true,
		        autoPlay : true,
		        navigation : true,
			    navigationText : ["",""],
			    rewindNav :true,
			    scrollPerPage :true,
			    pagination : true,
    			paginationNumbers: false,
		      });
		
		    });
		    $(document).ready(function() {
		
		      $("#owl-demo1").owlCarousel({
		        items : 1,
		        lazyLoad : true,
		        autoPlay : true,
		        navigation : true,
			    navigationText : ["",""],
			    rewindNav : true,
			    scrollPerPage :true,
			    pagination : false,
    			paginationNumbers: false,
		      });
		
		    });
		   
		    </script>
		    	<!----start-pricingplans---->
	 <div  class="blog" id="blog">	  
		<div class="wrap">
		<div class="pricing-plans">
			<h5>Flexible pricing plans to fulfill your needs and solve your problems</h5>
			<p>Revolvationary notebook with eco-friendly paper,advanced surface technology and degital sharing integration.</p>
				<div class="pricing-grids">
						<div class="pricing-grid black">
							<h3><a href="#">Forever Free</a></h3>
							<div class="price-value">
								<a href="#">$0/month</a>
							</div>
							<ul>
								<li><a href="#">1 Notebook</a></li>
								<li><a href="#">3 Users</a></li>
								<li><a href="#">100 Shares</a></li>
							</ul>
							<div class="cart">
								<a class="popup-with-zoom-anim" href="#small-dialog">Sign Up</a>
							</div>
						</div>
						<div class="pricing-grid green">
							<h3><a href="#">Profesional<h4>Most Popular </h4></a></h3>
									
							<div class="price-value">
								<a href="#">$20/1month</a>
							</div>
							<ul>
								<li><a href="#">20 Notebook</a></li>
								<li><a href="#">100 Users</a></li>
								<li><a href="#">Unlimited Shares</a></li>
							</ul>
							<div class="cart">
								<a class="popup-with-zoom-anim" href="#small-dialog">Buy Now</a>
							</div>
						</div>
						<div class="pricing-grid blue">
							<h3><a href="#">Enterprise</a></h3>
							<div class="price-value">
								<a href="#">$100/month</a>
							</div>
							<ul>
								<li><a href="#">100 Notebook</a></li>
								<li><a href="#">Unlimited Users</a></li>
								<li><a href="#">Ulimited Shares</a></li>
							</ul>
							<div class="cart">
								<a class="popup-with-zoom-anim" href="#small-dialog">Buy Now</a>
							</div>
						</div>
							<div class="clear"> </div>
							<!-----pop-up-grid---->
								 <div id="small-dialog" class="mfp-hide">
									<div class="pop_up">
									 	<div class="payment-online-form-left">
											<form>
												<h4><span class="shipping"> </span>Shipping</h4>
												<ul>
													<li><input class="text-box-dark" type="text" value="Frist Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Frist Name';}"></li>
													<li><input class="text-box-dark" type="text" value="Last Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Last Name';}"></li>
												</ul>
												<ul>
													<li><input class="text-box-dark" type="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}"></li>
													<li><input class="text-box-dark" type="text" value="Company Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Company Name';}"></li>
												</ul>
												<ul>
													<li><input class="text-box-dark" type="text" value="Phone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone';}"></li>
													<li><input class="text-box-dark" type="text" value="Address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Address';}"></li>
													<div class="clear"> </div>
												</ul>
												<div class="clear"> </div>
											<ul class="payment-type">
												<h4><span class="payment"> </span> Payments</h4>
												<li><span class="col_checkbox">
													<input id="3" class="css-checkbox1" type="checkbox">
													<label for="3" name="demo_lbl_1" class="css-label1"> </label>
													<a class="visa" href="#"> </a>
													</span>
													
												</li>
												<li>
													<span class="col_checkbox">
														<input id="4" class="css-checkbox2" type="checkbox">
														<label for="4" name="demo_lbl_2" class="css-label2"> </label>
														<a class="paypal" href="#"> </a>
													</span>
												</li>
												<div class="clear"> </div>
											</ul>
												<ul>
													<li><input class="text-box-dark" type="text" value="Card Number" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Card Number';}"></li>
													<li><input class="text-box-dark" type="text" value="Name on card" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name on card';}"></li>
													<div class="clear"> </div>
												</ul>
												<ul>
													<li><input class="text-box-light hasDatepicker" type="text" id="datepicker" value="Expiration Date" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Expiration Date';}"><em class="pay-date"> </em></li>
													<li><input class="text-box-dark" type="text" value="Security Code" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Security Code';}"></li>
													<div class="clear"> </div>
												</ul>
												<ul class="payment-sendbtns">
													<li><input type="reset" value="Cancel"></li>
													<li><input type="submit" value="Process order"></li>
												</ul>
												<div class="clear"> </div>
											</form>
										</div>
						  			</div>
								</div>
								<!-----pop-up-grid---->
							</div>
							<div class="clear"> </div>
							<h6>If you have got any quations related to pricing please get, in touch with us using the form bellow.</h6>
					</div>
				</div>
			</div>
			<!-- Add fancyBox light-box -->
				<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>

				<script>
					$(document).ready(function() {
						$('.popup-with-zoom-anim').magnificPopup({
							type: 'inline',
							fixedContentPos: false,
							fixedBgPos: true,
							overflowY: 'auto',
							closeBtnInside: true,
							preloader: false,
							midClick: true,
							removalDelay: 300,
							mainClass: 'my-mfp-zoom-in'
					});
				});
		</script>
		<!----End-pricingplans---->
		<!----start-contact---->
		 <div  class="contact" id="contact">
		 	<div class="contact">
		 		<h3>Get in touch</h3>
		 		<p>Got any questions?to feel free to get in touch with us .we would love to hear from you.</p>
		 		<div class="wrap">
		 			<div class="con">
				  			<form method="post" action="#">
				  					<input type="text"  placeholder="Name" required/> 
							    	<input type="text"   placeholder="Email " required/>
										<div class="clear"> </div>
								    <div>
								    	<textarea value="Message:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = ' Message';}">Message</textarea>
								    </div>
									 <div class="con-button">
											<input type="submit" value="Send" >
									</div>
							</form>
						</div>
						 <div class="clear"> </div>
					 <div class="social_icon">	
					           <ul>	
								    
								    <li class="twitter"><a href="#"><span> </span></a></li>
								    <li class="facebook"><a href="#"><span> </span></a></li>	 	
									<li class="google"><a href="#"><span> </span></a></li>
							  </ul>
		 	  		</div>
				</div>
		 	</div>
		 </div>
		<!----//End-contact---->
				<div class="footer">
					<div class="wrap">
						 <div class="footer-con">

								<div class="footer-right">
									<ul>
										<li class="active"><a href="#home" class="scroll">Home</a></li>
										<li><a href="#team" class="scroll">Team</a></li>
										<li><a href="#ourstory" class="scroll">Our story</a></li>
										<li><a href="#blog" class="scroll">Blog</a></li>
										<li><a href="#contact" class="scroll">Contact</a></li>								
										<div class="clear"> </div>
									</ul>
								</div>
									<div class="footer-left">
										<p> 2014 &#169; Template by <a href="#">W3layouts</a></p>

									</div>								
								<div class="clear"> </div>
						</div>
						
					</div>
				
				</div>
			  <!-- scroll_top_btn -->
					<script type="text/javascript" src="js/move-top.js"></script>
					<script type="text/javascript" src="js/easing.js"></script>
				    <script type="text/javascript">
						$(document).ready(function() {
						
							var defaults = {
					  			containerID: 'toTop', // fading element id
								containerHoverID: 'toTopHover', // fading element hover id
								scrollSpeed: 1200,
								easingType: 'linear' 
					 		};
							
							
							$().UItoTop({ easingType: 'easeOutQuart' });
							
						});
					</script>
					
					<!---smoth-scrlling---->
				<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
				});
			});
		</script>
		
					<a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
		  
	 </body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/shinreey/a-pen-by-xinrui-yang-bNqXgP */

/*--
Author: W3layouts
Author URL: https://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/

/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,top-nav,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, top-nav, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{	vertical-align:baseline;}/* vertical align baseline */
.vertical-top{	vertical-align:top;}/* vertical align top */
nav.vertical ul li{	display:block;}/* vertical top-nav */
nav.horizontal ul li{	display: inline-block;}/* horizontal top-nav */
img{max-width:100%;}
/*end reset*/
body{
  font-family: 'Open Sans', sans-serif;
  background: #fff;
}
.wrap{
	margin:0 auto;
	width:80%;
}
/*---start-top-header----*/
.content
{
	background: url(../images/sliderbg.jpg) no-repeat;
	background-size: 100%;
	background-size:cover;
}
.logo{
	float:left;
	margin:2.2em 1.3em;
}
.logo a{
	margin:0 auto;
	font-size:2em;
	font-weight:600;
	color:#fff;
}
/*****/
/* start header */

::selection { background: #b9e9b9; color: #555; }
::-moz-selection { background: #b9e9b9; color: #555; }
::-webkit-selection { background: #b9e9b9; color: #555; }

br { display: block; line-height: 2.2em; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
img { border: 0; max-width: 100%; }



#w {
  max-width:70%%;
  margin: 0 auto;
}

#content {
  margin: 0 0em;
  background: #fff;
}

#pagebody {
  padding: 15px 25px;
}

/* navigation bar */
#topnav {
  display: block;
  width: 100%;
  position: relative;
}

#topnav h1 {
  float: left;
  padding: 2.2em 0em;
}
#topnav h1 a {
  text-decoration: none;
  	padding: 1px 7px;
	display: block;
	color: #fff;
	font-size: 2.5em;
	font-weight:400;
}

#topnav #navbtn {
  display: none;
  float: right;
  top: 0;
  width: 20px;
  padding: 2.5em 0em;
  background: url('../images/nav-icon.png') center no-repeat;
  text-indent: -99999px;
  overflow: hidden;
}

#topnav nav {
  position: absolute;
  top: 0; 
  right: -10px;
  padding: 2.2em 0em;
}

#topnav nav ul {
  list-style: none;
}
#topnav nav ul li {
  display: block;
  float: left;
  margin:0em 0.5em;
}

#topnav nav ul li a {
  display: block;
  font-size: 1.2em;
  color: #fff;
  padding: 0.7em 1em;
  font-weight: 400;
 -webkit-transition: all 0.3s ease-out;
 -moz-transition: all 0.3s ease-out;
 -ms-transition: all 0.3s ease-out;
 -o-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}
#topnav nav ul li a:hover {
  color:#64939E;
  background: #393B3A; 
}
#topnav nav ul li.active>a {
  color:#64939E;
  background: #393B3A; 
}
/* footer block */
#btmnav {
  display: block;
  padding: 5px 0;
  border-top: 1px solid #cfcfcf;
  font-size: 1.1em;
  font-weight: normal;
}

#btmnav .credits { 
  color: #999;
  line-height: 1.45em;
}
#btmnav nav { padding: 9px 0; padding-bottom: 15px; }
#btmnav nav ul li { display: inline; }
#btmnav nav ul li a { font-weight: bold; }


/* responsive styles */
@media screen and (max-width: 800px) {
  h2 { font-size: 2.2em; }
  p { font-size: 1.45em; line-height: 1.55em; }
  #topnav h1 {
	padding: 1.4em 0em;
	}
	#topnav #navbtn {
	padding:0.5em 0em;
	}
  #topnav { height: auto; }
  #topnav nav { 
    display: none; 
    position: static;
    width: 100%;
    padding:0;
    top: auto;
    right: auto;
  }
  #topnav nav ul li { float: none; margin: 0;  background: #f0f0f0;}
  #topnav nav ul li a {
    display: block;
    width: 100%;
    line-height:1.9em;
    border: 0;
    border-radius:0px;
    padding: 9px 9px;
    color:#303030;
    border-bottom: 1px solid rgba(90, 85, 73, 0.17);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	background: none;
  }
  #topnav nav ul li a.sel {
    color: #6f8767;
    background: #cbdcc5;
  }
  
  #topnav #navbtn {
    display: block;
     padding:0.5em 0;
  }
}
/*---End-top-header----*/
/*  GRID OF One   =========================================== */
#team {
	background: #fff;
	padding:2em 0;
}
.col_1_of_1{
	display: block;
	text-align: center;
	width:100%;
	margin: 0.5em auto;
}
.span_1_of_1  h3{
	color:#535A5E;
	margin-bottom:0.5em;
	font-size:2.3em;
	line-height: 1.2em;
	font-weight:600;
	margin-top: 0px;
	letter-spacing: -1px;
	text-align: center;
}
.span_1_of_1  p{
	font-size:1.2em;
	padding:0.5em  0;
	color:#A7AAAC;
	line-height: 1.9em;
	text-align: center;
	width: 100%;
}
.pen{
	text-align: center;	
}
/********/
div#ourstory {
	background:#73A1AD;
	padding:2em 0;
}
.our-story h3{
	text-align:center;
	font-size:2.3em;
	font-weight:600;
	color:#fff;
	margin-bottom: 0.3em;
	
}
.our-story p{
	font-size:1.2em;
	color:#fff;
	text-align: center;
	line-height: 1.9em;
	margin:0 auto;
	width: 46%;
	
}
 /*** move top **/
#toTop {
	display: none;
	text-decoration: none;
	position: fixed;
	bottom: 0px;
	right: 10px;
	overflow: hidden;
	width:48px;
	height:48px;
	border: none;
	text-indent: 100%;
	background: url(../images/arrow_up1.png) no-repeat center;
}
#toTop:active, #toTop:focus {
	outline: none;
}
/*******************/
#contact {
	background:#2D3035;
	padding:1.5em 0;
}

.contact-form {
	padding: 2em 0 1em;
}
.contact h3{
	color:#F2F2F2;
	font-size:2.5em;
	padding: 1em 0em 0.3em 0em;
	text-align: center;
	font-weight: 600;
}
.contact  p{
	font-size: 1.3em;
	color: #ACB7B9;
	line-height: 1.9em;
	text-align: center;
	margin: 0 auto;
	width: 31%;
	margin-bottom: 1.5em;
}
.con input[type="text"],.con textarea{
	padding:0.9em;
	width: 30%;
	margin: 1% 33%;
	background:#2D3035;
	outline: none;
	color: #fff;
	font-size: 1.2em;
	-webkit-appearance: none;
    font-family: 'Open Sans', sans-serif;
	border: 2px solid #fff;
	border-radius:4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius:4px;
}
.con input[type="text"]:nth-child(2)
{
	margin-right: 0em;
}
.con form textarea{
	padding: 0.9em;
	display: block;
	width: 30%;
	background:#2D3035;
	border: none;
	outline: none;
	color: #fff;
	font-size:1.2em;
	-webkit-appearance: none;
	margin-top: 1em;
	border:2px solid #fff;
	border-radius:4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius:4px;
}
.con form textarea{
	resize:none;
	height:100px;		
}
.con-button {
	text-align:center;
	padding: 0.4em 0.3em;
	margin-right:7px;
}
form input[type="submit"]{ 
	padding: 0.6em 7.6em;
	font-size: 1.5em;
	background: #A4B9BE;
	color: #2D3035;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
   font-family: 'Open Sans', sans-serif;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	text-align:center;
	outline:none;
	border:none;
	cursor:pointer;
}
form input[type="submit"]:hover{
	text-decoration:none; 
	  background:#fff;
}

/*******footer***/
.footer {
	background: #fff;
}
.footer-con{
	margin: 1em auto;

}
.footer-left{
	float:left;
	text-align: center;
	padding: 0.2em 0;
}
.footer-left p{
	color:#272727;
	font-size:1em;
	font-weight:600;
}
.footer-left p a{
	font-weight:600;
	color:#17A2B8;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.footer-left a:hover{
	text-decoration:underline;
}
.footer-right{
	float:right;
	text-align: center;
}
.footer-right ul{
	list-style:none;
}
.footer-right ul li {
  display: block;
  float:left;
  margin:0em 0.5em; 
}
.footer-right ul li a {
	 display: block;
	  font-size:0.9em;
	  color:#272727;
	  padding: 0.7em 1em;
	  font-weight:600;
	 -webkit-transition: all 0.3s ease-out;
	 -moz-transition: all 0.3s ease-out;
	 -ms-transition: all 0.3s ease-out;
	 -o-transition: all 0.3s ease-out;
	 transition: all 0.3s ease-out;
}
.footer-right ul li a:hover{
	color:#73A1AD;
	background: #393B3A;
}
/*end-footer**/
/***** Media Quries *****/
@media only screen  and (max-width:1440px) {
	.wrap{
		width:80%;
	}
}
@media only screen  and (max-width:1366px) {
	.wrap{
		width:85%;
	}
	#topnav nav ul li a,.footer-right ul li a { 
	padding: 0.7em 0.85em;
	}
	.pricing-grid ul li a {
	padding: 1.1em 0em;
	}
	.span_1_of_1 p {
	width: 88%;
	}
	.contact p {
	width: 34%;
	}
	form input[type="submit"] {
	padding: 0.6em 6.85em;
	}
}
@media only screen  and (max-width:1280px) {
	.wrap{
		width:85%;
	}
	.span_1_of_1 h3,.our-story h3,.contact h3 { 
	font-size: 2.17em;
	}
	.our-story h3 {
		margin-bottom:0.3em;
	}
	.span_1_of_1 p {
	width:100%;
	margin: 0 auto;
	font-size: 1.2em;
	}
	div#ourstory {
	padding: 1.3em 0;
	}
	.our-story p {
	font-size: 1em;
	}
	form input[type="submit"] {
	padding: 0.6em 6.4em;
	}
	#contact {
	padding: 1em 0;
	}	
	.contact p {
	width: 31%;
	font-size: 1em;
	}
}
@media only screen  and (max-width:1024px) {
	.wrap{
		width:87%;
	}
	#topnav h1 {
	padding: 1.9em 0em;
	}
	#topnav nav ul li a, .footer-right ul li a {
	padding: 0.65em 0.7em;
	}
	.span_1_of_1 h3 {
	font-size: 2.1em;
	}
	.span_1_of_1 p {
	width:95%;
	}
	.our-story h3 {
	font-size: 1.9em;
	margin-bottom:0.3em;
	}
	.our-story p,.pricing-plans p { 
	margin: 0 auto;
	width: 57%;
	}
	#contact {
	padding:0.5em 0;
	}
	.contact p {
	width: 45%;
	font-size: 1.2em;
	}
	.contact h3 {
	font-size: 2.3em;
	}
	.con input[type="text"], .con textarea {
	width: 38%;
	margin: 1% 28%;
	padding: 0.75em;
	}
	.con form textarea {
	padding: 0.7em;
	width: 38%;
	}
	form input[type="submit"] {
	padding: 0.6em 6.3em;
	margin-right:19px;
	}
	
}
@media only screen  and  (max-width:768px) {
	.wrap{
	width:90%;
	}
	#topnav h1 {
	padding: 0em 0em;
	}
	#topnav #navbtn {
		padding: 1em 0;
	}
	#topnav nav ul li a, .footer-right ul li a {
	padding: 0.3em 0.4em;
	}
	.span_1_of_1 h3,.our-story h3 {
	font-size: 1.7em;
	}
	.span_1_of_1 p {
	width: 100%;
	margin: 0 auto;
	font-size: 0.98em;
	}
	#team {
	padding:1em 0;
	}
	.our-story p { 
	margin: 0 auto;
	width: 69%;
	font-size: 0.98em;
	}
	#contact {
	padding: 0.2em 0;
	}
	.contact p {
	width: 51%;
	font-size: 0.98em;
	}
	.con input[type="text"], .con textarea {
	width: 49%;
	margin: 1% 23%;
	padding: 9px 13px;	
	}
	.con form textarea {
	padding: 0.65em;
	width: 49%;
	}
	form input[type="submit"] {
	padding: 0.6em 6.45em;
	margin-right: 0px;
	}
			
}
@media only screen and (max-width:640px) {
	.wrap{
	width:90%;
	}
	.span_1_of_1 h3,.our-story h3 {
	font-size: 1.55em;
	}
	.span_1_of_1 p {
	font-size: 0.98em;
	width: 100%;
	}
	.our-story p {
	margin: 0 auto;
	width: 90%;
	}
	.contact p {
	width: 66%;
	}
	.contact h3 {
	font-size: 2em;
	}
	.con form textarea {
	padding: 0.4em;
	width: 51%;
	}
	form input[type="submit"] {
	padding: 0.5em 5.28em;
	margin-right: -11px;
	}
	.footer-left {
	float: none;
	margin: 0 auto;
	text-align: center;
	margin-top: 0.5em;
	}
	.footer-right {
	float: none;
	width: 67%;
	margin: 0 auto;
	text-align: center;
	padding: 0.4em 3px;
	}
}
@media only screen and (max-width:480px) {
	.wrap{
	width:90%;
	}
	#topnav #navbtn {
	padding: 1.2em 0;
	}
	#topnav nav ul li a, .footer-right ul li a {
	padding: 0.2em 0.4em;
	}
	.span_1_of_1 h3,.our-story h3 { 
	font-size: 1.35em;
	}
	.our-story p {
	width: 94%;
	font-size: 0.8725em;
	}
	.contact h3 {
	font-size:1.8em;
	}
	.contact p {
	width: 75%;
	font-size: 0.8725em;
	}
	.con input[type="text"], .con textarea {
	width: 75%;
	margin: 1% 8%;
	padding: 0.6em;
	font-size: 0.9em;

	}
	.con form textarea {
	padding: 0.3em;
	width: 78%;
	font-size: 0.9em;

	}
	form input[type="submit"] {
	padding: 0.5em 6em;
	margin-right:0px;
	}
	.footer-left {
	text-align:center;
	margin-top: 0.5em;
	}
	.footer-right {
	width: 90%;
	text-align: center;
	}
	
}
@media only screen and (max-width:320px) {
	.wrap{
	width:90%;
	}
	#topnav #navbtn {
	padding: 1.2em 0;
	}
	#topnav nav ul li a{
	padding: 0.1em 0.6em;
	}
	.span_1_of_1 h3,.our-story h3 {
	font-size: 1.1em;
	}
	.span_1_of_1 p {
	width: 100%;
	font-size:0.8725em;
	margin: 0 auto;
	}
	#team {
	padding: 0.5em 0;
	}
	.our-story p {
	margin: 0 auto;
	ont-size: 0.8725em;
	}
	.contact h3 {
	font-size: 1em;
	}
	.contact p {
	width: 96%;
	font-size: 0.8725em;
	}
	.con input[type="text"], .con textarea {
	width: 80%;
	margin: 2% 5%;
	padding:13px;
	font-size: 0.8725em;
	}
	.con form textarea {
	padding: 0.1em;
	width:88%;
	font-size: 0.8725em;
	}
	form input[type="submit"] {
	padding: 0.68em 6.5em;
	margin-right: -7px;
	font-size: 1em;
	}
	.footer-right {
	width: 100%;
	}
	 .footer-right ul li  {
	  margin:0em  0em;
	}
	.footer-right ul li a{
	 padding: 0.1em 4px;
	}
}
/*****//end- Media Quries *****/



/*Downloaded from https://www.codeseek.co/shinreey/a-pen-by-xinrui-yang-bNqXgP */
/*
 * jQuery EasIng v1.1.2 - https://gsgd.co.uk/sandbox/jquery.easIng.php
 *
 * Uses the built In easIng capabilities added In jQuery 1.1
 * to offer multiple easIng options
 *
 * Copyright (c) 2007 George Smith
 * Licensed under the MIT License:
 *   https://www.opensource.org/licenses/mit-license.php
 */

// t: current time, b: begInnIng value, c: change In value, d: duration

jQuery.extend( jQuery.easing,
{
	easeInQuad: function (x, t, b, c, d) {
		return c*(t/=d)*t + b;
	},
	easeOutQuad: function (x, t, b, c, d) {
		return -c *(t/=d)*(t-2) + b;
	},
	easeInOutQuad: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t + b;
		return -c/2 * ((--t)*(t-2) - 1) + b;
	},
	easeInCubic: function (x, t, b, c, d) {
		return c*(t/=d)*t*t + b;
	},
	easeOutCubic: function (x, t, b, c, d) {
		return c*((t=t/d-1)*t*t + 1) + b;
	},
	easeInOutCubic: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t + b;
		return c/2*((t-=2)*t*t + 2) + b;
	},
	easeInQuart: function (x, t, b, c, d) {
		return c*(t/=d)*t*t*t + b;
	},
	easeOutQuart: function (x, t, b, c, d) {
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	},
	easeInOutQuart: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
		return -c/2 * ((t-=2)*t*t*t - 2) + b;
	},
	easeInQuint: function (x, t, b, c, d) {
		return c*(t/=d)*t*t*t*t + b;
	},
	easeOutQuint: function (x, t, b, c, d) {
		return c*((t=t/d-1)*t*t*t*t + 1) + b;
	},
	easeInOutQuint: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
		return c/2*((t-=2)*t*t*t*t + 2) + b;
	},
	easeInSine: function (x, t, b, c, d) {
		return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
	},
	easeOutSine: function (x, t, b, c, d) {
		return c * Math.sin(t/d * (Math.PI/2)) + b;
	},
	easeInOutSine: function (x, t, b, c, d) {
		return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
	},
	easeInExpo: function (x, t, b, c, d) {
		return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
	},
	easeOutExpo: function (x, t, b, c, d) {
		return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
	},
	easeInOutExpo: function (x, t, b, c, d) {
		if (t==0) return b;
		if (t==d) return b+c;
		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
	},
	easeInCirc: function (x, t, b, c, d) {
		return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
	},
	easeOutCirc: function (x, t, b, c, d) {
		return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
	},
	easeInOutCirc: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
		return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
	},
	easeInElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
	},
	easeOutElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
	},
	easeInOutElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
		return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
	},
	easeInBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*(t/=d)*t*((s+1)*t - s) + b;
	},
	easeOutBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
	},
	easeInOutBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158; 
		if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
	},
	easeInBounce: function (x, t, b, c, d) {
		return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
	},
	easeOutBounce: function (x, t, b, c, d) {
		if ((t/=d) < (1/2.75)) {
			return c*(7.5625*t*t) + b;
		} else if (t < (2/2.75)) {
			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
		} else if (t < (2.5/2.75)) {
			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
		} else {
			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
		}
	},
	easeInOutBounce: function (x, t, b, c, d) {
		if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
		return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
	}
});

Comments