<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
</style>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 120,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
</script>
<script>
$(document).ready(function() {
$(window).on("scroll", function() {
if ($(window).scrollTop() >= 20) {
$(".navbar").addClass("compressed");
} else {
$(".navbar").removeClass("compressed");
}
});
});
</script>
</head>
<body>
<header>
<div class="container clearfix">
<div class="row">
<div class="col-4"> <h1 id="logo"><a><img class="img-responsive img-fluid" src="http://www.sangampatel.com/assets/img/logo2-big.png"></a></h1>
</div>
<div class="col-2"></div>
<div class="col-6">
<div class="tcb-quote-carousel">
<div class="carousel slide carousel-fade" id="fade-quote-carousel" data-ride="carousel" data-interval="3000">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#fade-quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#fade-quote-carousel" data-slide-to="1"></li>
<li data-target="#fade-quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<blockquote>It is not the strongest of the species that survive, nor the most intelligent, but the ones that adapt best in response to change.<br><small class="text-center quoter"> Charles Darwin</small></blockquote>
</div>
<div class="item">
<blockquote>The world is changing very fast. Big will not beat small anymore. Instead, it's fast beating slow.<br><small class="pull-right"> Rupert Murdoch</small></blockquote>
</div>
<div class="item">
<blockquote>Failure is not fatal, but failure to change might be.<br><small class="pull-right"> John Wooden </small></blockquote>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#transition-timer-carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#transition-timer-carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div><!-- tcb-quote-carousel -->
</div>
</div>
<div class="clearfix"></div>
<div class="navbar">
<div class="row">
<div class="col-4">
<p><span class="subtext"><strong class="logo-title logo-subtitle">Ace-Level Marketing Talent</strong></span></p>
</div>
<div class="col-7 d-flex justify-content-between">
<nav><a href="http://sangampatel.com/heading1/index.html">Home</a><a href="http://sangampatel.com/heading1/resume/index.html">Resume</a><a href="http://sangampatel.com/heading1/services/index.html">Services</a><a href="http://sangampatel.com/heading1/B2B/index.html">B2B Sphere</a><a href="http://sangampatel.com/heading1/aboutsangam/index.html">About Sangam</a></nav>
</div>
</div>
</div>
</header><!-- end header -->
<div id="main">
<div id="content">
<section>
<div class="container">
<h1>Header Resize On Scroll with Animations</h1>
<p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
<p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
<p>
<a href="https://www.facebook.com/pratik.chauhan.cp">« Connect With Me | Chauhan PRatik</a><br>
<a href="http://bootsnipp.com/cppratikcp">« Go back to all tutorials?</a>
</p>
</div>
</section>
<section class="color">
<div class="container">
<h1>Cupcakes for the people!</h1>
<p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
<p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
</div>
</section>
<section>
<div class="container">
<h1>Chocolate, vanilla, and red velvet</h1>
<p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
<p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
</div>
</section>
<section class="color">
<div class="container">
<h1>Come to me!</h1>
<p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
<p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
</div>
</section>
<section>
<div class="container">
<h1>Sugar rush, oh my...</h1>
<p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
<p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
</div>
</section>
</div>
</div><!-- #main -->
<script>
/*! classie v1.0.0*/
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)");}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {hasClass = function( elem, c ) { return elem.classList.contains( c ); };
addClass = function( elem, c ) {elem.classList.add( c ); };
removeClass = function( elem, c ) { elem.classList.remove( c ); }; }
else {hasClass = function( elem, c ) { return classReg( c ).test( elem.className ); };
addClass = function( elem, c ) { if ( !hasClass( elem, c ) ) { elem.className = elem.className + ' ' + c; } };
removeClass = function( elem, c ) {elem.className = elem.className.replace( classReg( c ), ' ' ); };}
function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c );}
var classie = {
// full names
hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass,
// short names
has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;}
})( window );
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
/* =Header------------------------------ */
header {width: 100%; height: 150px; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 999; background-color: #0683c9; -webkit-transition: height 0.3s; transition: height 0.3s; }
header h1#logo {display: inline-block; height: 150px; line-height: 150px; float: left; font-family: "Oswald", sans-serif;font-size: 60px;color: white; font-weight: 400; -webkit-transition: all 0.3s; transition: all 0.3s; }
header nav {display: inline-block;float: right; }
header nav a { line-height: 150px; margin-left: 20px; color: #9fdbfc; font-weight: 700; font-size: 18px; -webkit-transition: all 0.3s; transition: all 0.3s; }
header nav a:hover {color: white; }
header.smaller {height: 75px; }
header.smaller h1#logo {width: 150px; height: 75px; line-height: 75px; font-size: 30px; }
header.smaller nav a {line-height: 75px; }
.clearfix:after {visibility: hidden; display: block; content: ""; clear: both; height: 0; }
/* =Media Queries-------------------------------------------------- */
@media all and (max-width: 660px) {
/* =Header--------------------------------------- */
header h1#logo { display: block; float: none; margin: 0 auto; height: 100px; line-height: 100px; text-align: center; }
header nav { display: block; float: none; height: 50px; text-align: center; margin: 0 auto; }
header nav a { line-height: 50px; margin: 0 10px; }
header.smaller { height: 75px; }
header.smaller h1#logo {height: 40px; line-height: 40px; font-size: 30px; }
header.smaller nav {height: 35px; }
header.smaller nav a {line-height: 35px; } }
.container {width: 100%; }
