<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<!-- Header Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<Div> <video autoplay loop id="video-background" muted>
<source src="https://www.callouts.com/video/videodemo/1479-98368-sample.mp4" type="video/mp4">
</video></Div>
<header id="header">
<div class="main_nav">
<div class="container">
<div class="mobile-toggle"> <span></span> <span></span> <span></span> </div>
<nav>
<ul>
<li><a class="smoothscroll" href="#header">Home</a></li>
<li><a class="smoothscroll" href="#about">About</a></li>
<li><a class="smoothscroll" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
<div class="title">
<div><span class="typcn typcn-heart-outline icon heading"></span></div>
<div class="smallsep heading"></div>
<h1 class="heading"> pulsify</h1>
<h2 class="heading">A Virtual Microscope</h2>
<a class="smoothscroll" href="#about">
<div class="mouse">
<div class="wheel"></div>
</div>
</a> </div>
<a class="smoothscroll" href="#about">
<div class="scroll-down"></div>
</a> </header>
<!-- About Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section id="about">
<div class="container">
<div class="row">
<h1>About</h1>
<div class="block"></div>
<p>TO BE WRITTEN.</p>
</div>
<div class="row">
<div class="six columns">
<h3><span class="typcn typcn-device-desktop icon"></span>Our Process</h3>
<p> TO BE WRITTEN.</p>
</div>
<div class="six columns">
<h3><span class="typcn typcn-pen icon"></span>Our Approach</h3>
<p>Our Project aims at developing an fully functional application in the domain of Desktop, Mobile and Web, which takes advantages of the motion magnification and similar techniques</p>
</div>
<div class="row">
<div class="six columns">
<h3><span class="typcn typcn-cog-outline icon"></span>Our Goal</h3>
<p>TO BE WRIITEN</p>
</div>
<div class="six columns">
<h3><span class="typcn typcn-lightbulb icon"></span>Our Mission</h3>
<p>TO BE WRITTEN</p>
</div>
</div>
</div>
</div>
</section>
<!-- Team Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section id="team">
<div class="container">
<div class="row">
<h1>Meet the Team</h1>
<div class="block"></div>
<p>TO BE WRITTEN</p>
</div>
<div class="row">
<div class="three columns"> <img src="https://www.facebook.com/photo.php?fbid=1394059120628498&set=a.148131808554575.27123.100000732716972&type=3" width="220" height="220" alt=""/>
<h4>Avishek Arora</h4>
<p>App Developer</p>
<span class="typcn typcn-social-facebook-circular icon"></span><span class="typcn typcn-social-instagram-circular icon"></span><span class="typcn typcn-social-google-plus-circular icon"></span><span class="typcn typcn-social-linkedin-circular icon"></span> </div>
<div class="three columns"> <img src="http://placehold.it/220x220" width="220" height="220" alt=""/>
<h4>Akash Sharma</h4>
<p>Web Designer</p>
<span class="typcn typcn-social-facebook-circular icon"></span><span class="typcn typcn-social-instagram-circular icon"></span><span class="typcn typcn-social-google-plus-circular icon"></span><span class="typcn typcn-social-linkedin-circular icon"></span> </div>
<div class="three columns"> <img src="http://placehold.it/220x220" width="220" height="220" alt=""/>
<h4>Maaz Ashraf</h4>
<p>TO BE WRITTEN</p>
<span class="typcn typcn-social-facebook-circular icon"></span><span class="typcn typcn-social-instagram-circular icon"></span><span class="typcn typcn-social-google-plus-circular icon"></span><span class="typcn typcn-social-linkedin-circular icon"></span> </div>
<div class="three columns"> <img src="http://placehold.it/220x220" width="220" height="220" alt=""/>
<h4>Anuj Chauhan</h4>
<p>TO BE WRITTEN</p>
<span class="typcn typcn-social-facebook-circular icon"></span><span class="typcn typcn-social-instagram-circular icon"></span><span class="typcn typcn-social-google-plus-circular icon"></span><span class="typcn typcn-social-linkedin-circular icon"></span> </div>
</div>
</div>
</section>
</section>
<!-- Contact Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section id="contact">
<div class="container">
<h1>Contact</h1>
<div class="block"></div>
<form>
<div class="row">
<div class="six columns">
<label for="exampleRecipientInput">Name</label>
<input class="u-full-width" type="text">
</div>
<div class="six columns">
<label for="exampleEmailInput">Email</label>
<input class="u-full-width" type="email">
</div>
</div>
<div class="row">
<label for="exampleMessage">Message</label>
<textarea class="u-full-width"></textarea>
<input class="button-primary" type="submit" value="Submit">
</div>
</form>
</div>
</section>
<!-- Footer Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<footer>
<div class="container">
<div class="nine columns">
<p>Created and Designed by Akash Sharma.</p>
</div>
<div class="three columns"> <span class="typcn typcn-social-facebook-circular socialIcons"></span> <span class="typcn typcn-social-instagram-circular socialIcons"></span> <span class="typcn typcn-social-google-plus-circular socialIcons"></span> <span class="typcn typcn-social-linkedin-circular socialIcons"></span> </div>
</div>
</footer>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
<script>
/*----------------------------------------------------*/
/* Quote Loop
------------------------------------------------------ */
function fade($ele) {
$ele.fadeIn(1000).delay(3000).fadeOut(1000, function() {
var $next = $(this).next('.quote');
fade($next.length > 0 ? $next : $(this).parent().children().first());
});
}
fade($('.quoteLoop > .quote').first());
/*----------------------------------------------------*/
/* Navigation
------------------------------------------------------ */
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('.main_nav').addClass('sticky');
} else {
$('.main_nav').removeClass('sticky');
}
});
// Mobile Navigation
$('.mobile-toggle').click(function() {
if ($('.main_nav').hasClass('open-nav')) {
$('.main_nav').removeClass('open-nav');
} else {
$('.main_nav').addClass('open-nav');
}
});
$('.main_nav li a').click(function() {
if ($('.main_nav').hasClass('open-nav')) {
$('.navigation').removeClass('open-nav');
$('.main_nav').removeClass('open-nav');
}
});
/*----------------------------------------------------*/
/* Smooth Scrolling
------------------------------------------------------ */
jQuery(document).ready(function($) {
$('.smoothscroll').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 800, 'swing', function () {
window.location.hash = target;
});
});
});
TweenMax.staggerFrom(".heading", 0.8, {opacity: 0, y: 20, delay: 0.2}, 0.4);
</script>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");
/* Base Styles
********************************************************************* */
html {
font-size: 62.5%;
}
body {
font-size: 1.5em;
line-height: 1.6;
font-weight: 400;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
color: white;
}
/* Grid
********************************************************************* */
.container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.column, .columns {
width: 100%;
float: left;
box-sizing: border-box;
}
/* For devices larger than 400px */
@media (min-width: 400px) {
.container {
width: 85%;
padding: 0;
}
}
/* For devices larger than 550px */
@media (min-width: 550px) {
.container {
width: 80%;
}
.column, .columns {
margin-left: 4%;
}
.column:first-child, .columns:first-child {
margin-left: 0;
}
.one.column, .one.columns {
width: 4.66666666667%;
}
.two.columns {
width: 13.3333333333%;
}
.three.columns {
width: 22%;
}
.four.columns {
width: 30.6666666667%;
}
.five.columns {
width: 39.3333333333%;
}
.six.columns {
width: 48%;
}
.seven.columns {
width: 56.6666666667%;
}
.eight.columns {
width: 65.3333333333%;
}
.nine.columns {
width: 74.0%;
}
.ten.columns {
width: 82.6666666667%;
}
.eleven.columns {
width: 91.3333333333%;
}
.twelve.columns {
width: 100%;
margin-left: 0;
}
.one-third.column {
width: 30.6666666667%;
}
.two-thirds.column {
width: 65.3333333333%;
}
.one-half.column {
width: 48%;
}
/* Offsets */
.offset-by-one.column, .offset-by-one.columns {
margin-left: 8.66666666667%;
}
.offset-by-two.column, .offset-by-two.columns {
margin-left: 17.3333333333%;
}
.offset-by-three.column, .offset-by-three.columns {
margin-left: 26%;
}
.offset-by-four.column, .offset-by-four.columns {
margin-left: 34.6666666667%;
}
.offset-by-five.column, .offset-by-five.columns {
margin-left: 43.3333333333%;
}
.offset-by-six.column, .offset-by-six.columns {
margin-left: 52%;
}
.offset-by-seven.column, .offset-by-seven.columns {
margin-left: 60.6666666667%;
}
.offset-by-eight.column, .offset-by-eight.columns {
margin-left: 69.3333333333%;
}
.offset-by-nine.column, .offset-by-nine.columns {
margin-left: 78.0%;
}
.offset-by-ten.column, .offset-by-ten.columns {
margin-left: 86.6666666667%;
}
.offset-by-eleven.column, .offset-by-eleven.columns {
margin-left: 95.3333333333%;
}
.offset-by-one-third.column, .offset-by-one-third.columns {
margin-left: 34.6666666667%;
}
.offset-by-two-thirds.column, .offset-by-two-thirds.columns {
margin-left: 69.3333333333%;
}
.offset-by-one-half.column, .offset-by-one-half.columns {
margin-left: 52%;
}
}
/* Typography
********************************************************************* */
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 2rem;
font-weight: 300;
}
h1 {
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.1rem;
}
h2 {
font-size: 3.6rem;
line-height: 1.25;
letter-spacing: -.1rem;
}
h3 {
font-size: 3.0rem;
line-height: 1.3;
letter-spacing: -.1rem;
}
h4 {
font-size: 2.4rem;
line-height: 1.35;
letter-spacing: -.08rem;
}
h5 {
font-size: 1.8rem;
line-height: 1.5;
letter-spacing: -.05rem;
}
h6 {
font-size: 1.5rem;
line-height: 1.6;
letter-spacing: 0;
}
/* Larger than phablet */
@media (min-width: 550px) {
h1 {
font-size: 5.0rem;
}
h2 {
font-size: 4.2rem;
}
h3 {
font-size: 3.6rem;
}
h4 {
font-size: 3.0rem;
}
h5 {
font-size: 2.4rem;
}
h6 {
font-size: 1.5rem;
}
}
p {
margin-top: 0;
}
/* Links
********************************************************************* */
a {
color: #1EAEDB;
}
a:hover {
color: #0FA0CE;
}
/* Header Section
********************************************************************* */
header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%%;
height: 100vh;
progid:DXImageTransform.Microsoft.gradient( startColorstr='#e55d87', endColorstr='#5fc3e4', GradientType=1 );
}
.title {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
padding: 2rem;
max-width: 960px;
text-align: center;
}
.title .smallsep {
background: #fff;
height: 2px;
width: 70px;
margin: auto;
margin-top: 30px;
margin-bottom: 30px;
}
.title h1 {
font-size: 80px;
font-weight: 300;
text-transform: uppercase;
line-height: 0.85;
margin-bottom: 28px;
margin: 0;
padding: 0;
color: #FFFFFF;
}
.title h2 {
color: #FFFFFF;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 5px;
margin-top: 50px;
}
@media only screen and (max-height: 700px) {
.title h1 {
font-size: 80px;
}
}
.title p {
max-width: 600px;
margin: 0 auto;
line-height: 150%;
}
@media only screen and (max-width: 500px) {
.title h1 {
font-size: 65px;
}
}
.title .icon {
color: #FFFFFF;
font-size: 50px;
}
.main_nav {
position: fixed;
top: 0px;
max-height: 50px;
z-index: 999;
width: 100%;
padding-top: 17px;
background: none;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
padding-bottom: 6px;
}
@media only screen and (max-width: 766px) {
.main_nav {
padding-top: 25px;
}
}
.open-nav {
max-height: 400px !important;
}
.sticky {
background-color: #ffffff;
opacity: 1;
top: 0px;
}
nav {
width: 100%;
margin-top: 5px;
}
@media only screen and (max-width: 766px) {
nav {
width: 100%;
}
}
nav ul {
list-style: none;
overflow: hidden;
text-align: center;
}
@media only screen and (max-width: 766px) {
nav ul {
padding-top: 0px;
margin-bottom: 22px;
text-align: center;
width: 100%;
}
}
nav ul li {
display: inline-block;
margin-left: 35px;
line-height: 1.5;
letter-spacing: 1px;
}
@media only screen and (max-width: 766px) {
nav ul li {
width: 100%;
padding: 7px 0;
margin: 0;
}
nav ul li:first-child {
margin-top: 70px;
}
}
nav ul a {
text-transform: uppercase;
font-size: 12px;
text-decoration: none;
}
nav ul a:hover {
color: #CFCFCF;
}
.mobile-toggle {
display: none;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 22px;
top: 0;
width: 30px;
}
@media only screen and (max-width: 766px) {
.mobile-toggle {
display: block;
}
}
.mobile-toggle span {
width: 30px;
height: 4px;
margin-bottom: 6px;
background: #000000;
display: block;
}
.scroll-down {
position: absolute;
left: 50%;
bottom: 5vh;
display: block;
text-align: center;
font-size: 20px;
z-index: 100;
text-decoration: none;
text-shadow: 0;
width: 13px;
height: 13px;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
z-index: 9;
-webkit-transform: translate(-50%, 0%) rotate(45deg);
-moz-transform: translate(-50%, 0%) rotate(45deg);
transform: translate(-50%, 0%) rotate(45deg);
-webkit-animation: fade_move_down 2s ease-in-out infinite;
-moz-animation: fade_move_down 2s ease-in-out infinite;
animation: fade_move_down 2s ease-in-out infinite;
}
/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
0% {
-webkit-transform:translate(0, -10px) rotate(45deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform:translate(0, 10px) rotate(45deg);
opacity: 0;
}
}
@-moz-keyframes fade_move_down {
0% {
-moz-transform:translate(0, -10px) rotate(45deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-moz-transform:translate(0, 10px) rotate(45deg);
opacity: 0;
}
}
@keyframes fade_move_down {
0% {
transform:translate(0, -10px) rotate(45deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform:translate(0, 10px) rotate(45deg);
opacity: 0;
}
}
/* About Section
********************************************************************* */
#about {
padding: 100px 0 50px 0;
}
/* Team Section
********************************************************************* */
#team {
padding: 50px 0 100px 0;
}
#team .icon {
font-size: 26px;
}
}
/* Contact Section
********************************************************************* */
#contact {
padding: 100px 0 100px 0;
}
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
height: 38px;
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #F5F5F5;
border: none;
box-shadow: none;
box-sizing: border-box;
border-radius: 0;
outline: none;
}
textarea {
min-height: 250px;
}
input[type="submit"] {
display: inline-block;
height: 38px;
padding: 0 30px;
color: #fff;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background: #5fc3e4;
border-radius: 0px;
border: 0;
cursor: pointer;
box-sizing: border-box;
}
input[type="submit"]:hover {
background: #e55d87;
text-decoration: none;
}
/* Footer Section
********************************************************************* */
footer {
min-height: 120px;
padding: 40px 0 40px 0;
progid:DXImageTransform.Microsoft.gradient( startColorstr='#e55d87', endColorstr='#5fc3e4', GradientType=1 );
box-sizing: border-box;
}
footer p {
color: #FFFFFF;
margin: 20px 0 0 0;
}
.socialIcons {
font-size: 34px;
color: rgba(255, 255, 255, 0.7);
}
/* Lists
********************************************************************* */
ul {
list-style: circle inside;
}
ol {
list-style: decimal inside;
}
ol, ul {
padding-left: 0;
margin-top: 0;
}
ul ul, ul ol, ol ol, ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%;
}
li {
margin-bottom: 1rem;
}
/* Spacing
********************************************************************* */
button, .button {
margin-bottom: 1rem;
}
input, textarea, select, fieldset {
margin-bottom: 1.5rem;
}
pre, blockquote, dl, figure, table, p, ul, ol, form {
margin-bottom: 2.5rem;
}
/* Utilities
********************************************************************* */
.u-full-width {
width: 100%;
box-sizing: border-box;
}
.u-max-full-width {
max-width: 100%;
box-sizing: border-box;
}
.u-pull-right {
float: right;
}
.u-pull-left {
float: left;
}
/* Clearing
********************************************************************* */
.container:after, .row:after, .u-cf {
content: "";
display: table;
clear: both;
}
/* Misc
********************************************************************* */
.icon {
padding-right: 10px;
color: #e55d87;
}
.block {
width: 70px;
height: 2px;
}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
