home.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Single Page Site with Smooth Scrolling and Fixed Navigation</title>
    
    <meta name="description" content="In this lab, I'm going to demonstrate how to create a fixed navigation, single page site with smooth scrolling, and highlighting the navigation link depending on which section is currently being viewed. This technique is great for single page sites that want to pack in lots of goodies on one page, but use a navigation with cool scrolling to section it off." />
    
    <link href='http://fonts.googleapis.com/css?family=Quattrocento:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src='js/jquery.scrollto.js'></script>
</head>
<body>

<div id="wrapper">
<header>
    <div class="container clearfix">
            <section id="home">
        				<div class="banner">
					<div class="banner-label">
						<p class="banner-title"><a href="/home.html">Sofycomps India</a></p>
						<p class="banner-sub">World's best company...</p>
					</div>
				</div>
            </section>
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
					<li><a href="#about">About Us</a></li>
					<li><a href="#careers">Careers</a></li>
					<li><a href="#contact">Contact</a></li>
                </ul>
            </nav>


    </div>
</header>



<div id="main">
    <div class="container clearfix">
    <div id="content">
        
            <section id="services">
	<div class="section-wrapper">
		<div class="heading">
			<h2>Our Services</h2>
			<p>The services we provide</p>
		</div>
		 <div class="services-body">
		 	<a href="service-rd.html"><div class="services-part">
		 	<div class="circle"><img src="images/pp.jpg" /></div>
				<h3>Research and Development</h3>
				<p>Sofycomps India Research Software development team has great experiences in works with business analysts across the globe to ensure we retains the highest standards of excellent in developement research. We develop, ...</p>
			</div></a>
			<a href="service-pe.html"><div class="services-part">
			<div class="circle"><img src="images/pp.jpg" /></div>
				<h3>Product Engineering</h3>
				<p>Experiencing amazing products requires leading-edge technology skills, highly managed efficient software programs, and a concentrated perspective to achieve the goal. We have deep philosophy approach to product engineering services....</p>
			</div></a>
			<a href="service-rms.html"><div class="services-part">
			<div class="circle"><img src="images/pp.jpg" /></div>
				<h3>Rich media services</h3>
				<p >Our reach media products involves Multimedia, e-Learning softwares, Corporate presentations. Powerful media library provides schools, higher educational institutions and businesses with the way to share and manage their educational content...</p>
			</div></a>
			
			<a href="service-ecms.html"><div class="services-part">
			<div class="circle"><img src="images/pp.jpg" /></div>
				<h3>E-commerce and CMS</h3>
				<p >We developers delivering web development in e-Commerce and CMS services to our customers situated across the globe. We eCommerce experts maintain our heights in the ecommerce technolgy. Our easy, robust, secure APIs along with fully customised powerful...</p>
			</div></a>
			<a href="service-mas.html"><div class="services-part">
			<div class="circle"><img src="images/pp.jpg" /></div>
				<h3>Mobile Application Services</h3>
				<p >Sofycomps India a leading mobile technology solution provider. We build robust, award-winning web and mobile solutions for iOS, Android, Windows 8, HTML5. Our development team is specialized in Mobile apps development for outsource by Offshore clients.</p>
			</div></a>
			<a href="service-wgd.html"><div class="services-part">
			<div class="circle"><img src="images/pp.jpg" /></div>
				<h3>Web Graphics and design</h3>
				<p >We are designers with strong interests and capabilities in both the design of engaging user experiences. As a UX Designer, we are working on cutting edge applications and technologies for our products. We provide flash advertisements, graphics logos, images etc</p>
			</div></a>
		</div>
	</div>
            </section>

<!-- Portfolio block ------>
<section class="portfolio" id="portfolio">
	<div class="section-wrapper">
		<div class="heading">
			<h2>Our Portfolio</h2>
			<p>Showcase our latest works</p>
		</div>
		 <div class="portfolio-body">
		 	<div class="box">
				<img src="images/t3.jpg" />
				<div class="box-label">
					<div>
						<h3>Client Company Name</h3>
						<p>Client Company Web image</p>
					</div>
				</div>
			</div>
		 	<div class="box">
				<img src="images/t4.jpg" />
				<div class="box-label">
					<div>
						<h3>Client Company Name</h3>
						<p>Client Company Web image</p>
					</div>
				</div>
			</div>

		 	<div class="box">
				<img src="images/t6.jpg" />
				<div class="box-label">
					<div>
						<h3>Client Company Name</h3>
						<p>Client Company Web image</p>
					</div>
				</div>
			</div>
		 	<div class="box">
				<img src="images/t7.jpg" />
				<div class="box-label">
					<div>
						<h3>Client Company Name</h3>
						<p>Client Company Web image</p>
					</div>
				</div>
			</div>
		 	<div class="box">
				<img src="images/t8.jpg" />
				<div class="box-label">
					<div>
						<h3>Client Company Name</h3>
						<p>Client Company Web image</p>
					</div>
				</div>
			</div>
		 	<div class="box">
				<img src="images/t9.jpg" />
				<div class="box-label">
					<div>
						<h3>Client Company Name</h3>
						<p>Client Company Web image</p>
					</div>
				</div>
			</div>
			<div class="box">
				<img src="images/t2.jpg" />
				<div class="box-label">
					<div>
						<h3>Client Company Name</h3>
						<p>Client Company Web image</p>
					</div>
				</div>
			</div>
			<div class="box">
				<img src="images/t1.jpg" />
				<div class="box-label">
					<div>
						<h3>Client Company Name</h3>
						<p>Client Company Web image</p>
					</div>
				</div>
			</div>
			<div class="box">
				<img src="images/t5.jpg" />
				<div class="box-label">
					<div>
						<h3>Client Company Name</h3>
						<p>Client Company Web image</p>
					</div>
				</div>
			</div>
			
		 </div>
	</div>


</section>
<!-- End block -->
        
        
<!-- About us block ------>
<section class="about" id="about">
	<div class="section-wrapper">
		<div class="heading">
			<h2>About US</h2>
			<p>What we do...</p>
		</div>
		<div class="about-body">
			<div class="about-summary">
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
			</div>
			<h3>The people</h3>
			<div class="about-people">
				<div class="person-block">
					<div class="person-picture">
						<img src="images/pp.jpg" />
					</div>
					<h4>Laxikant</h4>
					<p class="person-title">Programmar</p>
					<p class="person-summary">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
				</div>
				<div class="person-block">
					<div class="person-picture">
						<img src="images/pp.jpg" />
					</div>
					<h4>Laxikant</h4>
					<p class="person-title">Programmar</p>
					<p class="person-summary">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- End block -->
<!-- Careers block ------>
<section class="careers" id="careers">
	<div class="section-wrapper">
		<div class="heading">
			<h2>Careers with us</h2>
			<p>Our activity news Careers</p>
		</div>	
<h2>Why Join Us?</h2>

<p>If you are fiercely passionate about videos, come be part of us! Unfold the most innovative content and build the most futuristic technology to create the next experience for our customers. Most of our day is spent inventing, sharing, shooting, editing, gazing at amazing videos, coding our brains out, crazy timeouts, playing pranks on each other and joining together to create something; we all believe in and are psyched about on a daily basis. So if you like doing all this stuff, VVIDIA is the place for you.</p>

<form>
<h4>Submit Profile </h4>
<p><label>Name:* </label><input type="text" name="username" id="username" required></p>
<p><label>Email ID:* </label><input type="email" name="email" id="email" required></p>
<p><label>Contact no: </label><input type="text" name="contactno" id="contactno"></p>
<p><label>Resume:* </label> <input type="file" name="resume" id="resume" required></p>
<p><label></label><button name="submit">Submit</button></p>
</form> 

<h4>Why You'll Love It Here? </h4>

<p>A work environment that's so much fun and casual we hesitate to call it "job"
Ample paid time off so you can finally take that vacation you deserve
All the usual yearly holidays, plus a few you might not expect
A practical, transparent policy framework
Flexible work arrangements to accommodate your ever-busy life
Enough free snacks and drinks
An annual company outing and parties that people actually want to attend</p>




	</div>
</section>
<!-- End block -->
<!-- Contact us block ------>
<section class="contact" id="contact">
	<div class="section-wrapper">
		<div class="heading">
			<h2>Contact US</h2>
			<p>Keep in touch with us</p>
		</div>
		<div class="contact-body">
		<div class="contact-phone">
			<h3>Contact numbers</h3>
			<h4>Laxmikant</h4>
			<p>+91-976-754-7164</p>
			<p>+91-727-685-9578</p>
			</div>
		<div class="map_background box" style="height:150px;">
					<h6>We are here</h6>
				  <div class="map">
					<iframe width="100%" height="100" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.co.in/maps/place/15,+Vakil+Nagar,+Erandwane,+Pune,+Maharashtra+411052/@18.4994349,73.8323133,17z/data=!4m23!1m20!4m19!1m6!1m2!1s0x3bc2bff340000001:0x89785750a9af6cf7!2sDeenanath+Mangeshkar+Hospital,+B-101,+10a,+Parmar+Trade+Centre,+Connaught+Road,+Sadhu+Vaswani+Chowk,+Sadhu+Vaswani+Chowk,+Pune,+Maharashtra+411001!2m2!1d73.832232!2d18.502109!1m6!1m2!1s0x3bc2bfed915a45ed:0xdb6178bdd89c9168!2sPatwardhan+Baug,+Patwardhan+Baug,+Erandwane+Pune+411004,+Erandwane,+Pune,+Maharashtra+411004!2m2!1d73.813811!2d18.498306!1m3!2m2!1d73.8322545!2d18.4989548!3e0!3m1!1s0x3bc2bff2258390b5:0x15344b52ed41b22"></iframe>
				  </div>
		    </div>
		    <div class="social-contacts">
		 	<div class="contact-icon email">
				<a href="mailto:laxmikant.gurnalkar@gmail.com"><img src="icons/email.png" /></a>
			</div>
			
			<div class="contact-icon gplus">
				<img src="icons/googleplus.png" />
			</div>
			
			<div class="contact-icon tweeter">
				<img src="icons/twitter.png" />
			</div>
			<div class="contact-icon linkedin">
				<img src="icons/linkedin.png" />
			</div>
			<div class="contact-icon facebook">
				<img src="icons/facebook.png" />
			</div>
		</div>
	</div>
</section>
<!-- End block -->

<!-- End Content block -->

    </div>
</div>


<footer>
<!-- End  modals Block ------>
	<!----/start-footer---->
    <div class="footer">
		<div class="container">
			<div class="footer-grid">
				<h3>Explore</h3>
			    <ul class="list1">
					  <li><a href="#">Home</a></li>
					  <li><a href="#">About us</a></li>
					  <li><a href="#">Services</a></li>
					  <li><a href="#">Portfolio</a></li>
					  <li><a href="#">Blogs</a></li>
					  <li><a href="#">Contact</a></li>
			    </ul>
			</div>
			<div class="footer-grid">
				<h3>Browse</h3>
				<ul class="list1">
					  <li><a href="#">Careers</a></li>
					  <li><a href="#">News and Events</a></li>
					  <li><a href="#">Contact Us</a></li>
					  <li><a href="#">Terms of Services</a></li>
					  <li><a href="#">Privacy Policy</a></li>
				</ul>
			  </div>
			  <div class="footer-grid">
				  <h3>Contact Us</h3>
				  <p> 2321 Street name,<br> City name,Country</p>
				  <p class="f_text">Fax:00-250-2131</p>
			      <p>Phone:00-250-2258</p>
			 </div>
			 <div class="footer-grid footer-grid_last">
				<h3>contact  with  us</h3>
				 <ul class="social">	
				 	 <li><a href="#"><span class="fb-icon"> </span></a></li>
				 	  <li><a href="#"> <span class="Db-icon"> </span></a></li>	
				 	  <li><a href="#">  <span class="pin-icon"> </span></a></li><br>
				 	  <li><a href="#"><span class="in-icon"> </span></a></li>
				 	  <li><a href="#"><span class="sky-icon"> </span></a></li>	
				 	  <li><a href="#"><span class="share-icon"> </span></a></li>
			     </ul>
		     </div>
			 <div class="clearfix"> </div>
			<div class="footer-bottom">
     	  	<div class="copy">
			   <p>&copy; 2014 </p>
		    </div>
		    <!--div class="footer-logo">
		       <a href="home.html"><img src="images/logo.png" alt=""/></a>
		    </div-->
		    <div class="clearfix"> </div>
		  </div>
		</div>
	</div>	</footer>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
   $(document).ready(function(){
		$("#screen1").on("click", "li", function(){
			var navHeight = $( window ).height() - 70;
			updateClass();
		});		
	   $(window).bind('scroll', function() {
			updateClass();
		});
	});
	function updateClass(){
	   		var navHeight = $( window ).height() - 70;
			 if ($(window).scrollTop() > navHeight) {
				 $('nav').addClass('fixed');
			 }
			 else {
				 $('nav').removeClass('fixed');
			 }
	}
</script>

</body>
</html>