<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 ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/SimplicityGB/pen/oLgexw?depth=everything&limit=all&order=popularity&page=92&q=material+&show_forks=false" />
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Exo+2:400,300,700);
body {
background-color: silver;
background-image: url("http://www.simplicity.lt/images/sandbox/hd-images/mountains3.jpg");
background-size: cover;
background-repeat: no-repeat;
color: #52616D;
font-family: 'Exo 2', Arial, sans-serif;
}
.btn:focus,
.btn:active {
outline: none !important;
}
.card {
position: relative;
z-index: 1;
max-width: 450px;
margin: 5% auto 0;
text-align: center;
color: #FFF;
}
.card .main {
text-shadow: -1px 1px 2px rgba(0, 0, 0, 0.5);
position: relative;
z-index: 2;
background-color: #FFF;
background-size: cover;
background-repeat: no-repeat;
background-image: url("http://www.simplicity.lt/images/sandbox/hd-images/bridge1.jpg");
-webkit-box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.6);
box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.6);
}
.card .header {
padding: 20px;
}
.card .header h1 {
margin-bottom: 50px;
font-weight: 700;
}
.card .header .plan {
display: block;
position: relative;
}
.card .header .plan .date {
position: relative;
width: 150px;
height: 150px;
right: 0;
top: 0;
background: #C44741;
border-radius: 100%;
margin: 25px auto;
overflow: hidden;
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.card .header .plan .date h4 {
margin-top: 0;
}
.card .header .plan .date img {
width: 80px;
}
.card .header .plan .poi {
position: relative;
cursor: pointer;
z-index: 5;
width: 50px;
height: 50px;
top: -50px;
right: 0;
background-color: #2C343B;
border-radius: 100%;
margin: 0 auto -25px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-webkit-transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
}
.card .header .plan .poi:hover {
background-color: #161a1e;
}
.card .header .plan .poi .bar {
position: absolute;
width: 2px;
height: 24px;
background-color: #FFF;
top: 12px;
left: 24px;
-webkit-transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card .header .plan .poi .bar#hor {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.card .header .plan .poi-connector {
position: relative;
margin-top: -80px;
z-index: 3;
}
.card .header .plan .poi-connector .line {
position: relative;
width: 2px;
height: 0;
margin: 0 auto;
background-color: #C44741;
-webkit-transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
}
.card .header .plan .poi-connector .con-point {
position: relative;
width: 50px;
height: 50px;
margin: 0 auto;
padding: 3px;
background: transparent;
border: 2px solid #C44741;
border-radius: 100%;
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
-webkit-transition: all 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.card .header .plan .poi-connector .con-point .inner-point {
width: 40px;
height: 40px;
background-color: #C44741;
border: 4px solid transparent;
border-radius: 100%;
}
.card .header .plan .details {
width: 100%;
margin-top: -25px;
opacity: 0;
padding: 0 20px 20px;
position: relative;
box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.5);
background-color: rgba(82, 97, 109, 0.4);
transform: scale(0, 0);
transform-origin: center top;
-webkit-transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card .header .plan .details .more {
background-color: #FFF;
width: 100%;
border-radius: 0;
text-shadow: none;
}
.card .header .plan .details .project,
.card .header .plan .details .client {
text-align: center;
}
.card .header .plan .details .project h4,
.card .header .plan .details .client h4,
.card .header .plan .details .project h5,
.card .header .plan .details .client h5 {
font-weight: 700;
}
.card .content {
padding: 20px;
color: #FFF;
}
.card .content .visitlink {
animation-delay: .2s;
border-radius: 0;
background-color: #2C343B;
border: none;
color: #FFF;
width: 100%;
padding: 15px 0;
font-size: 16px;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
.card .content .visitlink:hover {
background-color: #161a1e;
}
.card .content .btn.contact-details {
position: relative;
width: 50px;
height: 50px;
padding: 10px 5px;
background-color: #C44741;
border-radius: 100%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
margin-bottom: -55px;
-webkit-transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card .content .btn.contact-details .bar {
position: absolute;
display: block;
height: 24px;
width: 2px;
background: #FFF;
-webkit-transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card .content .btn.contact-details .bar#left {
top: 12px;
left: 15px;
transform: rotate(-45deg);
}
.card .content .btn.contact-details .bar#right {
top: 12px;
right: 15px;
transform: rotate(45deg);
}
.contact-box {
position: relative;
z-index: 1;
background-color: rgba(255, 255, 255, 0.5);
max-width: 450px;
margin: 0 auto 50px;
padding: 20px;
color: #2C343B;
text-align: center;
-webkit-transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate(0, -100%);
}
.contact-box h3 {
margin: 0 auto 25px;
}
.contact-box input[type="text"],
.contact-box input[type="email"],
.contact-box textarea {
border-radius: 0;
padding: 10px;
}
.contact-box .submit {
padding: 10px;
width: 100%;
border: none;
background-color: #C44741;
color: #FFF;
font-size: 16px;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
.contact-box .submit:hover {
background-color: #a03732;
}
/* animations */
.show-details .card .header .plan .poi {
-webkit-transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
transform: rotate(-90deg);
transform-origin: 25px -50px;
}
.show-details .card .header .plan .bar#hor {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
.show-details .card .header .plan .bar#ver {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.show-details .card .header .plan .poi-connector .line {
-webkit-transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
height: 80px;
}
.show-details .card .header .plan .poi-connector .con-point {
-webkit-transition: all 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s;
transition: all 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.show-details .card .header .plan .details {
opacity: 1;
transform: scale(1, 1);
-webkit-transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s;
transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s;
}
.show-contacts .contact-box {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.show-contacts #down {
-webkit-transform: translate(300%, 0) rotate(180deg);
transform: translate(300%, 0) rotate(180deg);
}
.show-contacts .card .content .btn.contact-details .bar#left {
top: 13px;
left: 23px;
}
.show-contacts .card .content .btn.contact-details .bar#right {
top: 13px;
right: 23px;
}
/* added info */
.color-pallete ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
text-align: center;
}
.color-pallete ul li {
display: inline-block;
max-width: 85px;
width: 100%;
height: 25px;
}
.color-pallete ul li#white {
background-color: #FFF;
}
.color-pallete ul li#dark-sand {
background-color: #E5E1D1;
}
.color-pallete ul li#deep-gray {
background-color: #52616D;
}
.color-pallete ul li#dark-gray {
background-color: #2C343B;
}
.color-pallete ul li#deep-red {
background-color: #C44741;
}
.copyright {
text-align: center;
font-size: 14px;
}
</style></head><body>
<div class="container">
<div class="card">
<div class="main">
<div class="header">
<h1>
COMING SOON
</h1>
<div class="plan">
<div class="intro">
<h3 class="animated fadeIn">
Estimated completion in
</h3>
</div>
<div class="date">
<img src="https://cdn2.hubspot.net/hub/121314/file-2194336369-png/ICONS_key-date-management.png?t=1464725616708&width=284" />
<h4>
2016.07.31
</h4>
<h5>
Find more
</h5>
</div>
<div class="poi" id="extender">
<div class="bar" id="hor"></div>
<div class="bar" id="ver"></div>
</div>
<div class="poi-connector">
<div class="line"></div>
<div class="con-point">
<div class="inner-point"></div>
</div>
</div>
<div class="details">
<div class="row">
<div class="col-xs-6 project">
<h4>
Project
</h4>
<h5>
Website name
</h5>
<p>
One page website design project from a mockup to coding.
</p>
<a class="btn btn-default more">Learn more</a>
</div>
<div class="col-xs-6 client">
<h4>
Client
</h4>
<h5>
Company name
</h5>
<p>
Company offering high quality services in various areas.
</p>
<a class="btn btn-default more">Learn more</a>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<h4>
In the meantime, check my other activities and projects.
</h4>
<a class="btn btn-default visitlink" href="http://simplicity.lt" target="_blank">Go to main page</a>
<h5 class="animated fadeInDown">
Have questions? Leave a message below.
</h5>
<div class="btn contact-details" id="down">
<div class="bar" id="left"></div>
<div class="bar" id="right"></div>
</div>
</div>
</div>
<div class="contact-box">
<h3>
Send me a message
</h3>
<form>
<div class="form-group">
<input class="form-control" placeholder="Your name" type="text" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Your email" type="email" />
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Drop your message here"></textarea>
</div>
<button class="submit" type="submit">Send a message</button>
</form>
</div>
</div>
</div>
<div class="container">
<div class="color-pallete">
<ul>
<li id="white"></li>
<li id="dark-sand"></li>
<li id="deep-gray"></li>
<li id="dark-gray"></li>
<li id="deep-red"></li>
</ul>
</div>
<div class="copyright">
<p>
<span>Designed by </span><a href="http://simplicity.lt" target="_blank">Simplicity.lt</a><span> 2016. All rights reserved.</span>
</p>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script >var container = document.querySelector('.container');
function toggleDetails(){
isShowingDetails() ? hideDetails() : showDetails();
}
function showDetails(){
container.classList.add('show-details');
}
function hideDetails(){
container.classList.remove('show-details');
}
function isShowingDetails(){
return container.classList.contains('show-details');
}
document.querySelector('#extender').addEventListener('click', toggleDetails, false);
function toggleContacts(){
isShowingContacts() ? hideContacts() : showContacts();
}
function showContacts(){
container.classList.add('show-contacts');
}
function hideContacts(){
container.classList.remove('show-contacts');
}
function isShowingContacts(){
return container.classList.contains('show-contacts');
}
document.querySelector('#down').addEventListener('click', toggleContacts, false);
//# sourceURL=pen.js
</script>
</body></html>
