<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- css -->
<link href='https://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link href="assets/bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link href="assets/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- js -->
<script src="http://sangampatel.com/assets/js/classie.js"></script>
<!-- js -->
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
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>
<style type="text/css">
#wrap_all {background-color: white;}
</style>
</head>
<body>
<header class="header sticky-top sticky navbar navbar-default navbar-fixed-top">
<div class="container clearfix">
<h1><span id="logo"><a> <img class="img-responsive img-fluid" src="http://www.sangampatel.com/assets/img/logo2-big.png"></a></span></h1>
<nav><a href="">Lorem</a><a href="">Ipsum</a>
<a href="">Dolor</a></nav>
</div>
</header><!-- /header -->
<div id="main" class="row">
<div id="content" class="col-12">
<main class="content" role="main"
<section class="color">
<div class="jumbotron jumbotron-fluid">
<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>
</section>
<section>
<div class="container">
<h1>Sugar rush, oh my...</h1>
\ </div>
</section>
<section>
<div class="containertwo">
<h3>Enquire</h2>
</div>
</section>
</main></div>
</div><!-- #main -->
<!-- jQuery --><!--[if lt IE 9]> -->
<script src="http://sangampatel.com/assets/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="http://sangampatel.com/assets/jquery-1.11.3.min.js" crossorigin="anonymous"></script>
<script src="http://sangampatel.com/assets/bootstrap4.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script language="JavaScript" src="https://adobe.github.io/Spry/widgets/accordion/SpryAccordion.js" type="text/javascript"></script>
</body>
#wrap_all {background-color: white;}
.carousel-indicators .active{ background: #31708f; }
.content{ margin-top:20px; }
.adjust1{ float:left; width:100%; margin-bottom:0; }
.adjust2{ margin:0; } .carousel-indicators li{ border :1px solid #ccc; }
.carousel-control{ color:#31708f; width:5%; }
.carousel-control:hover, .carousel-control:focus{ color:#31708f; }
.carousel-control.left, .carousel-control.right { background-image: none; }
.media-object{ margin:auto; margin-top:15%; }
.sticky-top {position: fixed; top: 0; width: 100% ;}
.sticky { position: fixed; top: 0; width: 100% ;}
@media screen and (max-width: 768px)
{.media-object{ margin-top:0; } }
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, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline; }
body { line-height: 1; }
h1, h2, h3, h4, h5, h6 { clear: both; font-weight: normal; }
ol, ul { list-style: none; }
blockquote { quotes: none; }
blockquote:before, blockquote:after { content: ''; content: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
a img { border: none; }
*,*:before,*:after { box-sizing: border-box; }
body { background-color: #3cb5f9; color: #505050; font-family: "Ubuntu", sans-serif; font-weight: 300;font-size: 16px; line-height: 1.8; }
/* Headings */
h1, h2, h3, h4, h5, h6 { line-height: 1; font-weight: 300; }
a { text-decoration: none; color: #3cb5f9; }
a:hover { color: #0793e2; }
/* Template------------- */
#wrapper { width: 100%; margin: 0 auto; }
#main { background-color: #ffffff; padding-top: 150px; }
.container { width: 80%; margin: 0 auto; padding: 0 30px; }
.containertwo { width: 86%; margin: 0 auto; padding: 0 30px; }
.containertwo h3 { font-size: 30px; text-align: center;}
section { padding: 60px 0; }
section h1 { font-weight: 700; margin:4px; }
section p { margin: 5px; }
section p:last-child {margin-bottom: 0; }
section.color {background-color: #d51c84; color: white; }
/* Header------------ */
span#logo img {height: 100%; width:auto;}
header { width: 100%; height: 150px; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 999; background-color: #000000; -webkit-transition: height 0.3s; transition: height 0.3s; }
header span#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: #ffffff; 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 span#logo {width: 150px; height: 100%; line-height: 75px; font-size: 30px; }
header.smaller nav a {line-height: 75px; }
/* Footer------------- */
*, *:before, *:after{box-sizing: border-box; color: #242424; padding: 20; margin: 30;}
html, body{background: rgb(0, 0, 0);}
.content {margin: auto; margin-bottom: 350px; /* Same height as footer */}
.fixed_footer {width: 100%; height: 350px;background: #000000; position: fixed; left: 0; bottom: 0; z-index: -100; padding:100px 5px;}
.fixed_footer p {color: #696969; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; font-size: 1em; font-weight: 300;}
/* Extras------------- */
.clearfix:after {visibility: hidden; display: block; content: ""; clear: both; height: 0; }
/* Media Queries------------- */
@media all and (max-width: 660px)
{header span#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 span#logo {height: 40px; line-height: 40px; font-size: 30px; }
header.smaller nav {height: 35px; }
header.smaller nav a {line-height: 35px; }
.container {width: 100%; }
}
html,body {margin: 0; height: 100%;}
section {position: relative;height: 100%; background-attachment: fixed; background-size: cover !important; background-position: center; background-blend-mode: screen; /* &:nth-of-type(1) */}
section h1 {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 50px; color: #fff; width: 100%; text-align: center;}
section:nth-of-type(1) {/* .paralax-1 */}
section:nth-of-type(1) .paralax-1 {height: 100%; width: 100%; position: relative; overflow: hidden; /* .new-paralax */}
section:nth-of-type(1) .paralax-1 .new-paralax {z-index: -100000; -webkit-transform: translateZ(-8000px) scale(0.4); transform: translateZ(-8000px) scale(0.4); background-attachment: fixed; background-size: cover !important; background-position: center; background-blend-mode: screen; height: 100%; width: 100%; position: relative; -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); background-color: #ffffff; background-clip: url("http://sangampatel.com/assets/vid/SFGotham19s.mp4");}
section:nth-of-type(2) {height: 20em; background-image: url("http://sangampatel.com/assets/img/");}
section:nth-of-type(3) {background-color: white;}
section:nth-of-type(4) { background-image: url("http://sangampatel.com/assets/img/");}
section:nth-of-type(5) {background-color: white;}
.collapse {background-color: rgba(255,255,255,0); border-bottom: 1px solid #eee; cursor: pointer; color: #fff; padding: 10px; margin:0px; max-height:40px; overflow:hidden; -webkit-transition: all 0.4s; transition: all 0.4s;}
.collapse * { box-sizing: border-box;}
.collapse.active {background-color: rgba(255,255,255,0.9); box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); z-index: 200; color:#444; max-height:3000px; padding:10px 20px; margin: 10px -10px; -webkit-transition: all 0.2s,max-height 4.8s; transition: all 0.2s,max-height 4.8s;}
.collapse h2 {font-size: 18px; line-height: 20px; position:relative}
.transparent{background-color: rgba(255,255,255,0) !important; color:#fff !important; box-shadow:none !important; margin:0px !important; padding:10px !important}
.collapse h2::after{content: "+"; text-align:center; position:absolute; width:15px; height:15px; border:1px solid #ccc; border-radius:50%; font-size:12px; line-height:15px; opacity:0.5; right:0; top:0;}
.collapse:hover h2::after{opacity:1}
.collapse.active h2::after{content: "-"}
/* carousel only top one */
.tcb-quote-carousel {background: #f9f9f9; margin-top: 10px; .quote{color: rgba(0,0,0,.1); text-align: center;} carousel {padding-bottom: 5px; .carousel-indicators > li {background-color: #e84a64; border: none;} }
blockquote {margin: 15px 25px 5px 25px; text-align: center; border: none;} }
.carousel-fade {.carousel-inner {
.item {transition-property: opacity;}
.item, .active.left,.active.right {opacity: 0;}
.active,.next.left,.prev.right {opacity: 1;}
.next, .prev,.active.left,.active.right {left: 0; transform: translate3d(0, 0, 0);} } }
