<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.19/dist/jquery.flip.min.js"></script>
<body>
<div class="container-fluid index">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div id="card">
<div class="front"> <!-- Front of Card -->
<div id="home" class="col-md-12 main content-panel">
<h1 class="header author-header" itemprop="headline">Mike Stabile</h1>
<div class="main-text">
WEB DEVELOPER
</div>
<nav id="menu">
<div>
<ul class="menu-items list-inline">
<i class="fa fa-envelope"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-github-alt"></i>
<i class="fa fa-codepen"></i>
<i class="fa fa-stack-overflow"></i>
</ul>
<div class="flip-link">
<a id="flip-link" href="javascript:void(0)"><i class="fa fa-undo"></i> Flip Card</a>
</div>
</div>
</nav>
</div>
</div>
<div id="contentContainer">
<div class="back"> <!-- Back of Card -->
<div class="col-md-12 main content-panel">
<div id="card-back">
<div class="">
<i class="fa fa-envelope"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-github-alt"></i>
<i class="fa fa-codepen"></i>
<i class="fa fa-stack-overflow"></i>
</div>
</div>
</div>
</div>
</div>
</div> <!-- End of Card -->
</div>
<div class="col-md-4"></div>
</div>
</div>
</body>
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);
$facebook: #43609c;
$twitter: #6dabda;
$linkedin: #2b77b1;
$google-plus: #c95644;
$github: #4078c0;
$stack-overflow: #c98b3b;
$white: #FFFFFF;
$light-gray: #AFAFAF;
$gray: #565656;
body {
background-color: #D1A163;
background-image: url("http://www.transparenttextures.com/patterns/wood-pattern.png");
font-family: 'Roboto Condensed', sans-serif;
font-weight: 300;
font-size: 16px;
width: 100%;
}
ol, ul {
margin-top: 0;
margin-bottom: 5px;
}
a, a:active {
color: $light-gray;
text-decoration: none;
}
a:hover {
color: $gray !important;
text-decoration: none;
}
.content-panel {
background-color: $white;
background-image: url("http://www.transparenttextures.com/patterns/paper.png");
height: 200px;
width: 400px;
padding-top: 20px;
padding-bottom: 10px;
padding-left: 30px;
padding-right: 30px;
margin: 0 auto;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
border-radius: 1px;
}
.index {
height: 100%;
max-height: 100%;
width: 100%;
padding: 0px;
margin-top: 60px;
}
.header {
margin-top: 10px;
margin-left: 0%;
margin-bottom: 0px;
font-size: 32px;
width: 100%;
}
.resume-heading {
text-decoration: underline;
color: #AFAFAF;
}
.author-header {
color: #AFAFAF;
margin-top: 0px;
padding-top: 10px;
font-size: 50px;
text-align: center;
mix-blend-mode: multiply;
}
.main-text {
text-align: center;
margin-top: 15px;
mix-blend-mode: multiply;
}
a, a:active {
color: $light-gray;
}
a:hover {
color: $light-gray;
text-decoration: none;
}
.menu-items {
margin-top: 15px;
text-align: center;
font-size: 1.5em;
}
i {
padding-left: 5px;
padding-right: 5px;
font-size: .7em;
}
.fa {
color: $light-gray;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
mix-blend-mode: multiply;
cursor: pointer;
}
.fa-envelope:hover {
color: $gray;
}
.fa-facebook:hover {
color: $facebook;
}
.fa-twitter:hover {
color: $twitter;
}
.fa-linkedin:hover {
color: $linkedin;
}
.fa-google-plus:hover {
color: $google-plus;
}
.fa-github-alt:hover {
color: $github;
}
.fa-codepen:hover {
color: $white;
}
.fa-stack-overflow:hover {
color: $stack-overflow;
}
.flip-link {
text-align: center;
text-decoration: none;
}
View Compiled
/* Testing jQuery Flip plugin: https://nnattawat.github.io/flip/
*/
/* Set Flip Parameters */
$("#card").flip({
axis: 'y',
trigger: 'manual'
});
$("#flip-link").click(function() {
$("#card").flip(true);
$("#card-back").show();
});
$("#contentContainer").click(function() {
$("#card").flip(false);
});
