<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arima+Madurai:100,200,300,400,500,700,800,900" rel="stylesheet">
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
</head>
<body>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!--BEGINNING OF HEADER CODE-->
<div class="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand text-uppercase" href="#">Workbox <span class="label label-success text-capitalize">Beta</span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"></a></li>
<li><a href="/users/signup"><button type="button" class="btn btn-success navbar-btn btn-circle">Sign Up</button></a></li>
<li><a href="/sessions/login"><button type="button" class="btn btn-danger navbar-btn btn-circle">Log in</button></a></li>
</ul>
</div>
</div>
</nav>
</div>
<!--END OF HEADER-->
<!--INDEX VIEW-->
<header class="header">
<div class="background-container">
<div class="row">
<div class="col-md-4 col-md-offset-1">
<div class="content">
<div class="pull-middle">
<h1 class="page-header">Manage your job hunt networking contacts easily and get hired.</h1>
<p class="lead">WorkBox™ keeps track of each of your encounters instantly.</p>
<div class="input-group">
<button class="btn btn-success btn-circle" type="submit">Sign up for free</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-md-offset-1 text-center mt-100 mb-100">
<div class="phone">
<img class="img-responsive img-rounded" src="https://image.freepik.com/free-vector/business-handshake_23-2147506280.jpg">
</div>
</div>
</div>
</div>
</header>
<!--END OF INDEX VIEW-->
<!-- BEGINNING OF SIGNUP VIEW-->
<!-- <div class="background-container">-->
<!--<div class="row" style="margin-bottom:50px;">-->
<!-- <div class="col-md-5 col-md-offset-7">-->
<!-- <form action="r" method="post" accept-charset="utf-8" class="form" role="form">-->
<!-- <legend style="font-family:"helvetica",sans serif;">Sign Up</legend>-->
<!-- <h4>Free yourself from data.</h4>-->
<!-- <input style="border-radius:2px;" type="text" name="email" value="" class="form-control input-lg" placeholder="Your Email" />-->
<!-- <input style="border-radius:2px;" type="password" name="password" value="" class="form-control input-lg" placeholder="Password" />-->
<!-- <input style="border-radius:2px;" type="password" name="confirm_password" value="" class="form-control input-lg" placeholder="Confirm Password" />-->
<!-- <span class="help-block">By clicking "Sign up for akaData", you agree to our Terms of Service.</span>-->
<!-- <button style="border-radius:2px;" class="btn btn-lg btn-primary btn-block signup-btn" type="submit">Sign up fo akaData</button>-->
<!-- </form> -->
<!-- </div>-->
<!-- </div> -->
<!-- </div>-->
<!-- END OF SIGNUP VIEW-->
<!--START LOGIN VIEW CODE-->
<!--<script src="https://use.typekit.net/ayg4pcz.js"></script>-->
<!--<script>try{Typekit.load({ async: true });}catch(e){}</script>-->
<!--<div class="container">-->
<!--<h1 class="welcome text-center">Welcome Back!</h1>-->
<!--<br>-->
<!-- <div class="card card-container">-->
<!-- <h2 class='login_title text-center'>Login</h2>-->
<!-- <p class="text-center">Enter your credentials below:</p>-->
<!-- <hr>-->
<!-- <form class="form-signin">-->
<!-- <span id="reauth-email" class="reauth-email"></span>-->
<!-- <p class="input_title">Email</p>-->
<!-- <input type="text" id="inputEmail" class="login_box" placeholder="email address" required autofocus>-->
<!-- <p class="input_title">Password</p>-->
<!-- <input type="password" id="inputPassword" class="login_box" placeholder="******" required>-->
<!-- <div id="remember" class="checkbox">-->
<!-- <label>-->
<!-- </label>-->
<!-- </div>-->
<!-- <button class="btn btn-lg btn-primary" type="submit">Login</button>-->
<!-- </form><!-- /form -->
<!-- </div><!-- /card-container -->
<!--</div><!-- /container -->
<!--END LOGIN VIEW CODE-->
<!-- USER PROFILE VIEW CODE-->
<!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">-->
<!--<div class="container">-->
<!-- <div class="row">-->
<!-- <div class="col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6">-->
<!-- <div class="well profile">-->
<!-- <div class="col-sm-12">-->
<!-- <div class="col-xs-12 col-sm-8">-->
<!-- <h2>Nicole Pearson</h2>-->
<!-- <p><strong>About: </strong> Web Designer / UI. </p>-->
<!-- <p><strong>Hobbies: </strong> Read, out with friends, listen to music, draw and learn new things. </p>-->
<!-- <p><strong>Skills: </strong>-->
<!-- <span class="tags">html5</span> -->
<!-- <span class="tags">css3</span>-->
<!-- <span class="tags">jquery</span>-->
<!-- <span class="tags">bootstrap3</span>-->
<!-- </p>-->
<!-- </div> -->
<!-- <div class="col-xs-12 col-sm-4 text-center">-->
<!-- <figure>-->
<!-- <img src="http://www.localcrimenews.com/wp-content/uploads/2013/07/default-user-icon-profile.png" alt="" class="img-circle img-responsive">-->
<!-- <figcaption class="ratings">-->
<!-- <p>Ratings-->
<!-- <a href="#">-->
<!-- <span class="fa fa-star"></span>-->
<!-- </a>-->
<!-- <a href="#">-->
<!-- <span class="fa fa-star"></span>-->
<!-- </a>-->
<!-- <a href="#">-->
<!-- <span class="fa fa-star"></span>-->
<!-- </a>-->
<!-- <a href="#">-->
<!-- <span class="fa fa-star"></span>-->
<!-- </a>-->
<!-- <a href="#">-->
<!-- <span class="fa fa-star-o"></span>-->
<!-- </a> -->
<!-- </p>-->
<!-- </figcaption>-->
<!-- </figure>-->
<!-- </div>-->
<!-- </div> -->
<!-- <div class="col-xs-12 divider text-center">-->
<!-- <div class="col-xs-12 col-sm-4 emphasis">-->
<!-- <h2><strong> 20,7K </strong></h2> -->
<!-- <p><small>Followers</small></p>-->
<!-- <button class="btn btn-success btn-block"><span class="fa fa-plus-circle"></span> Follow </button>-->
<!-- </div>-->
<!-- <div class="col-xs-12 col-sm-4 emphasis">-->
<!-- <h2><strong>245</strong></h2> -->
<!-- <p><small>Following</small></p>-->
<!-- <button class="btn btn-info btn-block"><span class="fa fa-user"></span> View Profile </button>-->
<!-- </div>-->
<!-- <div class="col-xs-12 col-sm-4 emphasis">-->
<!-- <h2><strong>43</strong></h2> -->
<!-- <p><small>Snippets</small></p>-->
<!-- <div class="btn-group dropup btn-block">-->
<!-- <button type="button" class="btn btn-primary"><span class="fa fa-gear"></span> Options </button>-->
<!-- <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">-->
<!-- <span class="caret"></span>-->
<!-- <span class="sr-only">Toggle Dropdown</span>-->
<!-- </button>-->
<!-- <ul class="dropdown-menu text-left" role="menu">-->
<!-- <li><a href="#"><span class="fa fa-envelope pull-right"></span> Send an email </a></li>-->
<!-- <li><a href="#"><span class="fa fa-list pull-right"></span> Add or remove from a list </a></li>-->
<!-- <li class="divider"></li>-->
<!-- <li><a href="#"><span class="fa fa-warning pull-right"></span>Report this user for spam</a></li>-->
<!-- <li class="divider"></li>-->
<!-- <li><a href="#" class="btn disabled" role="button"> Unfollow </a></li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div> -->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
<!-- END OF USER PROFILE VIEW CODE-->
<!--BEGINNING OF CARDS TO PLACE IN USER SHOW CARD DIV-->
<!-- <div class="container">-->
<!-- <div class="row">-->
<!-- <div class="col-sm-10 col-sm-offset-1">-->
<!-- <div class="col-md-4 col-sm-6">-->
<!-- <div class="card-container">-->
<!-- <div class="card">-->
<!-- <div class="front">-->
<!-- <div class="cover">-->
<!-- <img src="https://www.clipartsgram.com/image/129556292-kyz84k3.jpg"/>-->
<!-- </div>-->
<!-- <div class="user">-->
<!-- <img class="img-circle" src="https://www2.mmu.ac.uk/media/mmuacuk/style-assets/images/r-research/profile-Zeyad.jpg"/>-->
<!-- </div>-->
<!-- <div class="content">-->
<!-- <div class="main">-->
<!-- <h3 class="name">John Marvel</h3>-->
<!-- <p class="profession">CEO</p>-->
<!-- <p class="text-center">"I'm the new Sinatra, and since I made it here I can make it anywhere, yeah, they love me everywhere"</p>-->
<!-- </div>-->
<!-- <div class="footer">-->
<!-- <i class="fa fa-mail-forward"></i> Auto Rotation-->
<!-- </div>-->
<!-- </div>-->
<!-- </div> <!-- end front panel -->
<!-- <div class="back">-->
<!-- <div class="header">-->
<!-- <h5 class="motto">"To be or not to be, this is my awesome motto!"</h5>-->
<!-- </div>-->
<!-- <div class="content">-->
<!-- <div class="main">-->
<!-- <h4 class="text-center">Job Description</h4>-->
<!-- <p class="text-center">Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p>-->
<!-- <div class="stats-container">-->
<!-- <div class="stats">-->
<!-- <h4>235</h4>-->
<!-- <p>-->
<!-- Followers-->
<!-- </p>-->
<!-- </div>-->
<!-- <div class="stats">-->
<!-- <h4>114</h4>-->
<!-- <p>-->
<!-- Following-->
<!-- </p>-->
<!-- </div>-->
<!-- <div class="stats">-->
<!-- <h4>35</h4>-->
<!-- <p>-->
<!-- Projects-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="footer">-->
<!-- <div class="social-links text-center">-->
<!-- <a href="http://deepak646.blogspot.in/" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>-->
<!-- <a href="http://deepak646.blogspot.in/" class="google"><i class="fa fa-google-plus fa-fw"></i></a>-->
<!-- <a href="http://deepak646.blogspot.in/" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div> <!-- end back panel -->
<!-- </div> <!-- end card -->
<!-- </div> <!-- end card-container -->
<!-- </div> <!-- end col sm 3 -->
<!-- <div class="col-sm-1"></div> -->
<!-- <div class="col-md-4 col-sm-6">-->
<!-- <div class="card-container manual-flip">-->
<!-- <div class="card">-->
<!-- <div class="front">-->
<!-- <div class="cover">-->
<!-- <img src="https://www.clipartsgram.com/image/124089475-california-beaches-tumblr-wallpaper-3.jpg"/>-->
<!-- </div>-->
<!-- <div class="user">-->
<!-- <img class="img-circle" src="http://www.outbrain.com/risingstars/wp-content/uploads/708x708-RS-Profile-Ashley-Callahan-400x400.jpg"/>-->
<!-- </div>-->
<!-- <div class="content">-->
<!-- <div class="main">-->
<!-- <h3 class="name">Andrew Mike</h3>-->
<!-- <p class="profession">Web Developer</p>-->
<!-- <p class="text-center">"Lamborghini Mercy <br>Your chick she so thirsty <br>I'm in that two seat Lambo"</p>-->
<!-- </div>-->
<!-- <div class="footer">-->
<!-- <button class="btn btn-simple" onclick="rotateCard(this)">-->
<!-- <i class="fa fa-mail-forward"></i> Manual Rotation-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div> <!-- end front panel -->
<!-- <div class="back">-->
<!-- <div class="header">-->
<!-- <h5 class="motto">"To be or not to be, this is my awesome motto!"</h5>-->
<!-- </div>-->
<!-- <div class="content">-->
<!-- <div class="main">-->
<!-- <h4 class="text-center">Job Description</h4>-->
<!-- <p class="text-center">Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p>-->
<!-- <div class="stats-container">-->
<!-- <div class="stats">-->
<!-- <h4>235</h4>-->
<!-- <p>-->
<!-- Followers-->
<!-- </p>-->
<!-- </div>-->
<!-- <div class="stats">-->
<!-- <h4>114</h4>-->
<!-- <p>-->
<!-- Following-->
<!-- </p>-->
<!-- </div>-->
<!-- <div class="stats">-->
<!-- <h4>35</h4>-->
<!-- <p>-->
<!-- Projects-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="footer">-->
<!-- <button class="btn btn-simple" rel="tooltip" title="Flip Card" onclick="rotateCard(this)">-->
<!-- <i class="fa fa-reply"></i> Back-->
<!-- </button>-->
<!-- <div class="social-links text-center">-->
<!-- <a href="http://deepak646.blogspot.in/" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>-->
<!-- <a href="http://deepak646.blogspot.in/" class="google"><i class="fa fa-google-plus fa-fw"></i></a>-->
<!-- <a href="http://deepak646.blogspot.in/" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div> <!-- end back panel -->
<!-- </div> <!-- end card -->
<!-- </div> <!-- end card-container -->
<!-- </div> <!-- end col sm 3 -->
<!-- <div class="col-sm-1"></div> -->
<!-- <div class="col-md-4 col-sm-6">-->
<!-- <div class="card-container">-->
<!-- <div class="card">-->
<!-- <div class="front">-->
<!-- <div class="cover">-->
<!-- <img src="http://www.hdimageson.com/wp-content/uploads/2016/05/beach-images-tumblr-300x188.jpg"/>-->
<!-- </div>-->
<!-- <div class="user">-->
<!-- <img class="img-circle" src="https://1.bp.blogspot.com/-aruLLVlXyJM/V_t-TxTncZI/AAAAAAAAJ3k/hnQKKVmKuOY_awf1nHGTsukGfw4qrde-gCLcB/s400/2.jpg"/>-->
<!-- </div>-->
<!-- <div class="content">-->
<!-- <div class="main">-->
<!-- <h3 class="name">Inna Corman</h3>-->
<!-- <p class="profession">Product Manager</p>-->
<!-- <p class="text-center">"I'm the new Sinatra, and since I made it here I can make it anywhere, yeah, they love me everywhere"</p>-->
<!-- </div>-->
<!-- <div class="footer">-->
<!-- <div class="rating">-->
<!-- <i class="fa fa-mail-forward"></i> Auto Rotation-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div> <!-- end front panel -->
<!-- <div class="back">-->
<!-- <div class="header">-->
<!-- <h5 class="motto">"To be or not to be, this is my awesome motto!"</h5>-->
<!-- </div>-->
<!-- <div class="content">-->
<!-- <div class="main">-->
<!-- <h4 class="text-center">Job Description</h4>-->
<!-- <p class="text-center">Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p>-->
<!-- <div class="stats-container">-->
<!-- <div class="stats">-->
<!-- <h4>235</h4>-->
<!-- <p>-->
<!-- Followers-->
<!-- </p>-->
<!-- </div>-->
<!-- <div class="stats">-->
<!-- <h4>114</h4>-->
<!-- <p>-->
<!-- Following-->
<!-- </p>-->
<!-- </div>-->
<!-- <div class="stats">-->
<!-- <h4>35</h4>-->
<!-- <p>-->
<!-- Projects-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="footer">-->
<!-- <div class="social-links text-center">-->
<!-- <a href="http://deepak646.blogspot.in/" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>-->
<!-- <a href="http://deepak646.blogspot.in/" class="google"><i class="fa fa-google-plus fa-fw"></i></a>-->
<!-- <a href="http://deepak646.blogspot.in/" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div> <!-- end back panel -->
<!-- </div> <!-- end card -->
<!-- </div> <!-- end card-container -->
<!-- </div> <!-- end col-sm-3 -->
<!-- </div> <!-- end col-sm-10 -->
<!-- </div> <!-- end row -->
<!-- <div class="space-200"></div>-->
<!--</div>-->
<!--END OF CARDs-->
<!-- BEGINNING OF EDIT CONTACT-->
<!-- <div class="container" style="padding-top: 60px;">-->
<!-- <h1 class="page-header">Edit Profile</h1>-->
<!-- <div class="row">-->
<!-- left column -->
<!-- <div class="col-md-4 col-sm-6 col-xs-12">-->
<!-- <div class="text-center">-->
<!-- <img src="https://qph.ec.quoracdn.net/main-qimg-3b0b70b336bbae35853994ce0aa25013?convert_to_webp=true" class="avatar img-circle img-thumbnail" alt="avatar">-->
<!-- <h6>Add a photo url...</h6>-->
<!-- <label class="col-lg-3 control-label">imgUrL:</label>-->
<!-- <input type="text" class="text-center center-block well well-sm">-->
<!-- </div>-->
<!-- </div>-->
<!-- edit form column -->
<!-- <div class="col-md-8 col-sm-6 col-xs-12 personal-info">-->
<!-- <div class="alert alert-info alert-dismissable">-->
<!-- <a class="panel-close close" data-dismiss="alert">×</a> -->
<!-- <i class="fa fa-coffee"></i>-->
<!-- This is an <strong>.alert</strong>. Use this to show important messages to the user.-->
<!-- </div>-->
<!-- <h3>Edit Contact Info:</h3>-->
<!-- <form class="form-horizontal" role="form">-->
<!-- <div class="form-group">-->
<!-- <label class="col-lg-3 control-label">Job Title:</label>-->
<!-- <div class="col-lg-8">-->
<!-- <input class="form-control" value="{{contact.title}}" type="text">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="form-group">-->
<!-- <label class="col-lg-3 control-label">Company:</label>-->
<!-- <div class="col-lg-8">-->
<!-- <input class="form-control" value="{{contact.company}}" type="text">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="form-group">-->
<!-- <label class="col-lg-3 control-label">Email:</label>-->
<!-- <div class="col-lg-8">-->
<!-- <input class="form-control" value="{{contact.email}}" type="text">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="form-group">-->
<!-- <label class="col-md-3 control-label">Phone Number:</label>-->
<!-- <div class="col-md-8">-->
<!-- <input class="form-control" value="11111122333" type="text">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="form-group">-->
<!-- <label class="col-md-3 control-label">Notes:</label>-->
<!-- <div class="col-md-8">-->
<!-- <textarea class="form-control" rows="5" id="comment"></textarea>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="form-group">-->
<!-- <label class="col-md-3 control-label"></label>-->
<!-- <div class="col-md-8">-->
<!-- <input class="btn btn-primary" value="Save Changes" type="button">-->
<!-- <span></span>-->
<!-- <input class="btn btn-default" value="Cancel" type="reset">-->
<!-- </div>-->
<!-- </div>-->
<!-- </form>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
<!-- END OF EDIT CONTACT-->
<!--BEGINNING CONTACT PROFILE VIEW-->
<!-- <div class="container">-->
<!-- <div class="row">-->
<!-- <div class=" col-lg-offset-3 col-lg-6">-->
<!-- <div class="panel panel-default">-->
<!-- <div class="panel-body">-->
<!-- <div class="row">-->
<!-- <div class="col-lg-12">-->
<!-- <div class="row">-->
<!-- <div class="col-sm-offset-3 col-sm-6 col-md-offset-3 col-md-6 col-lg-offset-3 col-lg-6">-->
<!-- <img class="img-circle img-responsive" src="http://api.adorable.io/avatars/300/abott@adorable.png">-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="row">-->
<!-- <div class="col-lg-12">-->
<!-- <div class="row">-->
<!-- <div class="centered-text col-sm-offset-3 col-sm-6 col-md-offset-3 col-md-6 col-lg-offset-3 col-lg-6">-->
<!-- <div itemscope="" itemtype="http://schema.org/Person">-->
<!-- <h2> <span itemprop="name">Your Name</span></h2>-->
<!-- <p itemprop="jobTitle">Your Position</p>-->
<!-- <p><span itemprop="affiliation">Your Company</span></p>-->
<!-- <p>-->
<!-- <i class="fa fa-map-marker"></i> <span itemprop="addressRegion">Your City, Your State</span>-->
<!-- </p>-->
<!-- <p itemprop="email"> <i class="fa fa-envelope"> </i> <a href="mailto:you@somedomain.com">you@somedomain.com</a> </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-12 centered-text">-->
<!-- Your Short Bio goes here.-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="panel-footer">-->
<!-- <div class="row">-->
<!-- <div id="social-links" class=" col-lg-12">-->
<!-- <div class="row">-->
<!-- <div class="col-xs-6 col-sm-3 col-md-2 col-lg-3 social-btn-holder">-->
<!-- <a title="google" class="btn btn-social btn-block btn-google" target="_BLANK" href="http://plus.google.com/+You/">-->
<!-- <i class="fa fa-google"></i> +You-->
<!-- </a>-->
<!-- </div>-->
<!-- <div class="col-xs-6 col-sm-3 col-md-2 col-lg-3 social-btn-holder">-->
<!-- <a title="twitter" class="btn btn-social btn-block btn-twitter" target="_BLANK" href="http://twitter.com/yourid">-->
<!-- <i class="fa fa-twitter"></i> /yourid-->
<!-- </a>-->
<!-- </div>-->
<!-- <div class="col-xs-6 col-sm-3 col-md-2 col-lg-3 social-btn-holder">-->
<!-- <a title="github" class="btn btn-social btn-block btn-github" target="_BLANK" href="http://github.com/yourid">-->
<!-- <i class="fa fa-github"></i> /yourid-->
<!-- </a>-->
<!-- </div>-->
<!-- <div class="col-xs-6 col-sm-3 col-md-2 col-lg-3 social-btn-holder">-->
<!-- <a title="stackoverflow" class="btn btn-social btn-block btn-stackoverflow" target="_BLANK" href="http://stackoverflow.com/users/youruserid/yourid">-->
<!-- <i class="fa fa-stack-overflow"></i> /yourid-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
<!--END OF CONTACT PROFILE VIEW-->
<!--BEGINNING OF FOOTER-->
<section id="footer" style="background-color:#292b34;">
<div class="container">
<center style="color:#fff;">
<div class="container">
<div class="well well-sm main-footer" style="background-color:#292b34; border:0px">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
</div><!--end .col-md-4-->
<div class="col-md-4 contact-email">
<div class="col-md-12">
<ul class="social-network social-circle">
<li><a href="https://github.com/hkarambizi/" class="icoGitHub" title="GitHub"><i class="fa fa-github"></i></a></li>
<!--<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>-->
<!--<li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>-->
<!--<li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>-->
<li><a href="https://www.linkedin.com/in/harrykarambizi/" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<small>Portfolio project created at <a href="https://generalassemb.ly/education/web-development-immersive">
<img src="https://ga-shop-production-herokuapp-com.global.ssl.fastly.net/assets/images/favicon_1gyC3.ico"/></a> by Harry Karambizi, WDI 9</small>
</div><!--end .col-md-4 .contact-email-->
<div class="col-md-4">
<div class="row contact row-first">
<div class="col-md-6">
<!--<a href="skype:nico.plyley?chat" class="skype"><i class="fa fa-skype"></i>nico.plyley</a>-->
</div><!--end .col-md-6-->
<div class="col-md-6">
<!--<a href="http://instagram.com/nicoplyley" class="instagram"><i class="fa fa-instagram"></i>@nicoplyley</a>-->
</div><!--end .col-md-6-->
</div><!--end .row .contact .row-first-->
<div class="row contact">
<div class="col-md-6">
<!--<a href="http://facebook.com/nicoplyley" class="facebook"><i class="fa fa-facebook"></i>@nicoplyley</a>-->
</div><!--end .col-md-6-->
<div class="col-md-6">
<!--<a href="http://twitter.com/nicoplyley" class="twitter"><i class="fa fa-twitter"></i>@nicoplyley</a>-->
</div><!--end .col-md-6-->
</div><!--end .row .contact-->
</div><!--end .col-md-6-->
</div><!--end .row-->
</div><!--end .col-md-12-->
</div><!--end .row-->
</div><!--end .well .well-sm .main-footer-->
</div><!--end .container-->
</center>
</div><!--end .container-->
</section><!--end #footer-->
<!-- Sticky Footer -->
<script type="text/javascript" src="js/footer.js"></script>
<!-- Fade Contact Footer -->
<script type="text/javascript" src="js/contactFade.js"></script>
<!--<section class="section">-->
<!-- <div class="container">-->
<!-- <div class="row">-->
<!-- <div class="col-md-4 col-md-offset-1 text-center mt-100 mb-100">-->
<!-- <div class="phone">-->
<!-- <img class="img-responsive img-rounded" src="http://placemi.com/djlnr/263x480">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-md-5 col-md-offset-1">-->
<!-- <div class="content">-->
<!-- <div class="pull-middle">-->
<!-- <h2 class="h1 page-header">Discover more about features.</h2>-->
<!-- <ul class="media-list">-->
<!-- <li class="media">-->
<!-- <a class="media-left" href="#">-->
<!-- <span class="glyphicon glyphicon-cloud icon text-success"></span>-->
<!-- </a>-->
<!-- <div class="media-body">-->
<!-- <h3 class="media-heading">Praesent porttitor urna ut enim.</h3>-->
<!-- <p>Maecenas vitae ex iaculis, efficitur est eu, fermentum quam.</p>-->
<!-- </div>-->
<!-- </li>-->
<!-- <li class="media">-->
<!-- <a class="media-left" href="#">-->
<!-- <span class="glyphicon glyphicon-lock icon text-success"></span>-->
<!-- </a>-->
<!-- <div class="media-body">-->
<!-- <h3 class="media-heading">Cras consequat est et elit.</h3>-->
<!-- <p>Integer suscipit massa at tellus semper, at aliquam ante bibendum.</p>-->
<!-- </div>-->
<!-- </li>-->
<!-- <li class="media">-->
<!-- <a class="media-left" href="#">-->
<!-- <span class="glyphicon glyphicon-user icon text-success"></span>-->
<!-- </a>-->
<!-- <div class="media-body">-->
<!-- <h3 class="media-heading">Aenean vel enim quis dui blandit.</h3>-->
<!-- <p>Maecenas vitae ex iaculis, efficitur est eu, fermentum quam.</p>-->
<!-- </div>-->
<!-- </li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!--</section>-->
<!--<section class="section">-->
<!-- <div class="container">-->
<!-- <div class="row">-->
<!-- <div class="col-md-3 text-right">-->
<!-- <div class="content">-->
<!-- <div class="pull-middle">-->
<!-- <h4><strong>Describe your product.</strong></h4>-->
<!-- <p>Proin sapien neque, consequat ac tempus aliquam, gravida in urna. Phasellus et lectus in odio imperdiet tempus. Aenean posuere, nunc a tristique imperdiet, massa dolor dictum eros, sit amet tempor turpis turpis vel tortor.</p>-->
<!-- <small>Phasellus feugiat at lorem a tincidunt. Nam hendrerit leo vitae orci pellentesque, nec euismod dolor condimentum.</small>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-md-4 col-md-offset-1 mt-100 mb-100">-->
<!-- <div class="phone">-->
<!-- <img class="img-responsive img-rounded" src="http://placemi.com/djlnr/263x480">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-md-3 col-md-offset-1">-->
<!-- <div class="content">-->
<!-- <div class="pull-middle">-->
<!-- <h4><strong>Even more stuff.</strong></h4>-->
<!-- <p>Proin sapien neque, consequat ac tempus aliquam, gravida in urna. Phasellus et lectus in odio imperdiet tempus. Aenean posuere, nunc a tristique imperdiet, massa dolor dictum eros, sit amet tempor turpis turpis vel tortor.</p>-->
<!-- <a class="btn btn-success btn-circle" href="#">Sign up for free</a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!--</section>-->
<!--<footer class="footer text-center">-->
<!-- <div class="container">-->
<!-- <small>© Copyright 2015. Crafted with love by <a href="https://www.twitter.com/maridlcrmn">@maridlcrmn</a></small>-->
<!-- </div>-->
<!--</footer>-->
</div>
</body>
</html>
body, html {
height: 100%;
background-repeat: no-repeat;
background: rgb(185,210,224); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(185,210,224,1) 0%, rgba(187,214,228,1) 0%, rgba(186,211,225,1) 15%, rgba(186,211,225,1) 38%, rgba(169,199,215,1) 68%, rgba(169,199,215,1) 68%, rgba(169,199,215,1) 82%, rgba(158,191,208,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(185,210,224,1) 0%,rgba(187,214,228,1) 0%,rgba(186,211,225,1) 15%,rgba(186,211,225,1) 38%,rgba(169,199,215,1) 68%,rgba(169,199,215,1) 68%,rgba(169,199,215,1) 82%,rgba(158,191,208,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(185,210,224,1) 0%,rgba(187,214,228,1) 0%,rgba(186,211,225,1) 15%,rgba(186,211,225,1) 38%,rgba(169,199,215,1) 68%,rgba(169,199,215,1) 68%,rgba(169,199,215,1) 82%,rgba(158,191,208,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9d2e0', endColorstr='#9ebfd0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/*Login and Sign Up Forms*/
.background-container {
height: 100%;
background-repeat: no-repeat;
background: rgb(185,210,224); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(185,210,224,1) 0%, rgba(187,214,228,1) 0%, rgba(186,211,225,1) 15%, rgba(186,211,225,1) 38%, rgba(169,199,215,1) 68%, rgba(169,199,215,1) 68%, rgba(169,199,215,1) 82%, rgba(158,191,208,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(185,210,224,1) 0%,rgba(187,214,228,1) 0%,rgba(186,211,225,1) 15%,rgba(186,211,225,1) 38%,rgba(169,199,215,1) 68%,rgba(169,199,215,1) 68%,rgba(169,199,215,1) 82%,rgba(158,191,208,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(185,210,224,1) 0%,rgba(187,214,228,1) 0%,rgba(186,211,225,1) 15%,rgba(186,211,225,1) 38%,rgba(169,199,215,1) 68%,rgba(169,199,215,1) 68%,rgba(169,199,215,1) 82%,rgba(158,191,208,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9d2e0', endColorstr='#9ebfd0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.login_box{
background:#f7f7f7;
border:3px solid #F4F4F4;
padding-left: 15px;
margin-bottom:25px;
}
.input_title{
color:rgba(164, 164, 164, 0.9);
padding-left:3px;
margin-bottom: 2px;
}
hr{
width:100%;
}
.welcome{
font-family: "myriad-pro",sans-serif;
font-style: normal;
font-weight: 100;
color:#FFFFFF;
margin-bottom:25px;
margin-top:50px;
}
.login_title{
font-family: "myriad-pro",sans-serif;
font-style: normal;
font-weight: 100;
color:rgba(164, 164, 164, 0.44);
}
.card-container.card {
max-width: 350px;
}
/*.btn {*/
/* font-weight: 700;*/
/* height: 36px;*/
/* -moz-user-select: none;*/
/* -webkit-user-select: none;*/
/* user-select: none;*/
/* cursor: default;*/
/* border-radius:0;*/
/* background:#43A6EB;*/
/* height: 55px;*/
/* margin-bottom:10px;*/
/*}*/
/*
* Card component
*/
.card {
background-color: #FFFFFF;
/* just in case there no content*/
padding: 1px 25px 30px;
margin: 0 auto 25px;
margin-top: 15%x;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.profile-img-card {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
/*
* Form styles
*/
.profile-name-card {
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 10px 0 0;
min-height: 1em;
}
.reauth-email {
display: block;
color: #404040;
line-height: 2;
margin-bottom: 10px;
font-size: 14px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin #inputEmail,
.form-signin #inputPassword {
direction: ltr;
height: 44px;
font-size: 16px;
}
.form-signin input[type=email],
.form-signin input[type=password],
.form-signin input[type=text],
.form-signin button {
width: 100%;
display: block;
z-index: 1;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus {
border-color: rgb(104, 145, 162);
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
}
.btn.btn-signin {
/*background-color: #4d90fe; */
background-color: rgb(104, 145, 162);
/* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/
padding: 0px;
font-weight: 700;
font-size: 14px;
height: 36px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
-o-transition: all 0.218s;
-moz-transition: all 0.218s;
-webkit-transition: all 0.218s;
transition: all 0.218s;
}
.btn.btn-signin:hover,
.btn.btn-signin:active,
.btn.btn-signin:focus {
background-color: rgb(12, 97, 33);
}
.forgot-password {
color: rgb(104, 145, 162);
}
.forgot-password:hover,
.forgot-password:active,
.forgot-password:focus{
color: rgb(12, 97, 33);
}
/*
Layout Template CSS
*/
.mt-100 {
margin-top: 100px;
}
.mb-100 {
margin-bottom: 100px;
}
.icon {
width: 32px;
height: 32px;
text-align: center;
padding: 7px 8px;
border: 2px solid;
border-radius: 50%;
}
.header {
padding-top: 50px;
background-color: #eee;
overflow: hidden;
}
.footer {
color: #887;
background-color: #eee;
padding-top: 30px;
padding-bottom: 30px;
}
.content {
position: relative;
display: table;
width: 100%;
min-height: 100vh;
}
.pull-middle {
display: table-cell;
vertical-align: middle;
}
.btn {
padding-left: 25px;
padding-right: 25px;
}
.btn-circle {
border-radius: 20px;
}
.input-group input {
border: 0;
box-shadow: none;
padding-right: 30px;
}
.input-group input:focus,
.input-group input:active {
outline: 0;
box-shadow: none;
}
.input-group-btn:last-child>.btn {
z-index: 2;
margin-left: -18px;
border-radius: 20px;
}
.phone {
position: relative;
max-width: 263px;
margin: 0 auto;
padding: 65px 15px 55px;
border: 2px solid #ddd;
border-radius: 20px;
background-color: #222;
box-shadow: 20px 20px 40px #29292F;
}
/*USER PROFILE CSS*/
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
.profile
{
min-height: 355px;
display: inline-block;
}
figcaption.ratings
{
margin-top:20px;
}
figcaption.ratings a
{
color:#f1c40f;
font-size:11px;
}
figcaption.ratings a:hover
{
color:#f39c12;
text-decoration:none;
}
.divider
{
border-top:1px solid rgba(0,0,0,0.1);
}
.emphasis
{
border-top: 4px solid transparent;
}
.emphasis:hover
{
border-top: 4px solid #1abc9c;
}
.emphasis h2
{
margin-bottom:0;
}
span.tags
{
background: #1abc9c;
border-radius: 2px;
color: #f5f5f5;
font-weight: bold;
padding: 2px 4px;
}
.dropdown-menu
{
background-color: #34495e;
box-shadow: none;
-webkit-box-shadow: none;
width: 250px;
margin-left: -125px;
left: 50%;
}
.dropdown-menu .divider
{
background:none;
}
.dropdown-menu>li>a
{
color:#f5f5f5;
}
.dropup .dropdown-menu
{
margin-bottom:10px;
}
.dropup .dropdown-menu:before
{
content: "";
border-top: 10px solid #34495e;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -10px;
z-index: 10;
}
/*=========================
Icons
================= */
/* footer social icons */
ul.social-network {
list-style: none;
display: inline;
margin-left:0 !important;
padding: 0;
}
ul.social-network li {
display: inline;
margin: 0 5px;
}
/* footer social icons */
.social-network a.icoGitHub:hover {
background-color: #F56505;
}
.social-network a.icoFacebook:hover {
background-color:#3B5998;
}
.social-network a.icoTwitter:hover {
background-color:#33ccff;
}
.social-network a.icoGoogle:hover {
background-color:#BD3518;
}
.social-network a.icoVimeo:hover {
background-color:#0590B8;
}
.social-network a.icoLinkedin:hover {
background-color:#007bb7;
}
.social-network a.icoGitHub:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
color:#44BCDD;
}
.social-circle li a {
display:inline-block;
position:relative;
margin:0 auto 0 auto;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
text-align:center;
width: 50px;
height: 50px;
font-size:20px;
}
.social-circle li i {
margin:0;
line-height:50px;
text-align: center;
}
.social-circle li a:hover i, .triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.social-circle i {
color: #fff;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
/* Business Card Contacts*/
/*FONT TO IMPORT
@import url('https://fonts.googleapis.com/css?family=Arima+Madurai:100,200,300,400,500,700,800,900');*/
.btn:hover,
.btn:focus,
.btn:active{
outline: 0 !important;
}
/* entire container, keeps perspective */
.card-container {
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
margin-bottom: 30px;
}
/* flip the pane when hovered */
.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card-container.static:hover .card,
.card-container.static.hover .card {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
}
/* flip speed goes here */
.card {
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
-o-transition: -o-transform .5s;
transition: transform .5s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
background-color: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
z-index: 3;
}
.back .btn-simple{
position: absolute;
left: 0;
bottom: 4px;
}
/* Style */
.card{
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 4px;
color: #444444;
}
.card-container, .front, .back {
width: 100%;
height: 420px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.16);
-moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.16);
box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.16);
}
.card .cover{
height: 105px;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.card .cover img{
width: 100%;
}
.card .user{
border-radius: 50%;
display: block;
height: 120px;
margin: -55px auto 0;
overflow: hidden;
width: 120px;
}
.card .user img{
background: none repeat scroll 0 0 #FFFFFF;
border: 4px solid #FFFFFF;
width: 100%;
}
.card .content{
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
padding: 10px 20px 20px;
}
.card .content .main {
min-height: 160px;
}
.card .back .content .main {
height: 215px;
}
.card .name {
font-family: 'Arima Madurai', cursive;
font-size: 22px;
line-height: 28px;
margin: 10px 0 0;
text-align: center;
text-transform: capitalize;
}
.card h5{
margin: 5px 0;
font-weight: 400;
line-height: 20px;
}
.card .profession{
color: #999999;
text-align: center;
margin-bottom: 20px;
}
.card .footer {
border-top: 1px solid #EEEEEE;
color: #999999;
margin: 30px 0 0;
padding: 10px 0 0;
text-align: center;
}
.card .footer .social-links{
font-size: 18px;
}
.card .footer .social-links a{
margin: 0 7px;
}
.card .footer .btn-simple{
margin-top: -6px;
}
.card .header {
padding: 15px 20px;
height: 90px;
}
.card .motto{
font-family: 'Arima Madurai', cursive;
border-bottom: 1px solid #EEEEEE;
color: #999999;
font-size: 14px;
font-weight: 400;
padding-bottom: 10px;
text-align: center;
}
.card .stats-container{
width: 100%;
margin-top: 50px;
}
.card .stats{
display: block;
float: left;
width: 33.333333%;
text-align: center;
}
.card .stats:first-child{
border-right: 1px solid #EEEEEE;
}
.card .stats:last-child{
border-left: 1px solid #EEEEEE;
}
.card .stats h4{
font-family: 'Arima Madurai', cursive;
font-weight: 300;
margin-bottom: 5px;
}
.card .stats p{
color: #777777;
}
/* Just for presentation */
.title{
color: #506A85;
text-align: center;
font-weight: 300;
font-size: 44px;
margin-bottom: 90px;
line-height: 90%;
}
.title small{
font-size: 17px;
color: #999;
text-transform: uppercase;
margin: 0;
}
.space-30{
height: 30px;
display: block;
}
.space-50{
height: 50px;
display: block;
}
.space-200{
height: 200px;
display: block;
}
.white-board{
background-color: #FFFFFF;
min-height: 200px;
padding: 60px 60px 20px;
}
.ct-heart{
color: #F74933;
}
pre.prettyprint{
background-color: #ffffff;
border: 1px solid #999;
margin-top: 20px;
padding: 20px;
text-align: left;
}
.atv, .str{
color: #05AE0E;
}
.tag, .pln, .kwd{
color: #3472F7;
}
.atn{
color: #2C93FF;
}
.pln{
color: #333;
}
.com{
color: #999;
}
/* Fix bug for IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.front, .back{
-ms-backface-visibility: visible;
backface-visibility: visible;
}
.back {
visibility: hidden;
-ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67);
}
.front{
z-index: 4;
}
.card-container:not(.manual-flip):hover .back,
.card-container.manual-flip.hover .back{
z-index: 5;
visibility: visible;
}
}
/*a {*/
/* background-color: #D3D3D3; */
/*}*/
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $("#footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.css({
position: "static"
})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
$().ready(function(){
$('[rel="tooltip"]').tooltip();
});
function rotateCard(btn){
var $card = $(btn).closest('.card-container');
console.log($card);
if($card.hasClass('hover')){
$card.removeClass('hover');
} else {
$card.addClass('hover');
}
}
});
