<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 ---------->
<html><head>
<link rel="alternate" type="application/json+oembed"
href="http://codepen.io/api/oembed?url=http%3A%2F%2Fcodepen.io%2Fbefamous%2Fpen%2FKIgqh&format=json"
title="TiltShift - Car" />
<link href="http://assets.cdpn.io/assets/global/global-NoMQ-ba0752896eeb4636f4bfa7df4595e755.css" media="all" rel="stylesheet" type="text/css" />
<link href="http://assets.cdpn.io/assets/editor/editor-5b4e0c360562463d9d757813cb6830dd.css" media="all" rel="stylesheet" type="text/css" />
<meta name="description" content="To produce the results in this image, depth was created by meticulously slicing and painting distinct layers that can be shifted in space to produce a ...">
<link href="http://assets.cdpn.io/assets/editor/themes/twilight-b3983cc5c27af8e8545ee07059b347e6.css" id="cm-theme" media="screen" rel="stylesheet" type="text/css" />
<link href="http://assets.cdpn.io/assets/editor/layouts/top-6b287aa9bd8940f5c0057886d853996a.css" media="screen" rel="stylesheet" type="text/css" />
<style id="cm-font-family">
.CodeMirror {
font-family: Monaco, MonoSpace;
}
</style>
<style id="cm-font-size">
.CodeMirror {
font-size: 15px;
}
</style>
<g id="icon-text">
<polygon points="44.937,10 0,10 0,55.171 24.117,90 41.296,77.165 26.218,55.171 44.937,55.171"/>
<polygon points="100,10 55.062,10 55.062,55.171 79.183,90 96.361,77.165 81.284,55.171 100,55.171"/>
</g>
<path id="icon-check" d="M34.357,91.176L0,56.604L16.687,39.81l18.157,18.264l48.954-49.25L100,25.125L34.357,91.176z"/>
<g id="icon-user">
<circle cx="50" cy="25" r="25"/>
<path d="M75,62.5H25c-6.903,0-12.5,5.597-12.5,12.5v25H25h50h12.5V75C87.5,68.097,81.903,62.5,75,62.5z"/>
</g>
<path id="icon-file" d="M56.2,0H12.5v100h75V31.2L56.2,0z M25,87.5v-75h25v25h25v50H25z"/>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="display: none;">
<defs>
<g id="icon-editor-top">
<rect x="72.521" width="27.479" height="48.365"/>
<rect y="55.952" width="100" height="44.048"/>
<rect x="36.26" width="27.479" height="48.365"/>
<rect width="27.479" height="48.365"/>
</g>
<g id="icon-editor-left">
<rect width="48.365" height="27.479"/>
<rect x="55.951" width="44.049" height="100"/>
<rect y="36.262" width="48.365" height="27.479"/>
<rect y="72.521" width="48.365" height="27.479"/>
</g>
<g id="icon-editor-right">
<rect x="51.637" y="72.521" width="48.363" height="27.479"/>
<rect width="44.048" height="100"/>
<rect x="51.637" y="36.261" width="48.363" height="27.479"/>
<rect x="51.637" width="48.363" height="27.479"/>
</g>
</defs>
</svg>
<base href="http://demo.famo.us/tiltshift-car/" />
<link media="all" rel="stylesheet" type="text/css"
href="http://demo.famo.us/torque/css/famous.css" />
<link media="all" rel="stylesheet" type="text/css"
href="http://demo.famo.us/torque/css/ui.css" />
<link media="all" rel="stylesheet" type="text/css"
href="http://demo.famo.us/torque/css/fonts.css" />
<link media="all" rel="stylesheet" type="text/css"
href="http://demo.famo.us/torque/css/famous-signup.css" />
<script src="http://demo.famo.us/tiltshift-car/famous.lib.js"></script></head>
<body>
</body></html>
/* begin styling */
html {
background-color: #ccc;
color: white;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 14px;
}
#main {
-webkit-perspective: 500px;
perspective: 500px;
}
h1, h2, h3 {
font-family: 'Avenir Next W10 Medium';
font-size: 24px;
}
p {
font-family: 'Avenir Next W01 Thin';
font-size: 18px;
line-height: 24px;
}
a {
font-family: 'Avenir Next W10 Medium';
}
.backfaceVisible {
backface-visibility: visible;
-webkit-backface-visibility: visible; /* Chrome and Safari */
-moz-backface-visibility: visible; /* Firefox */
}
.white { color: white; }
.bor_clear { border: 0; }
.bor_clear:focus { outline: 0 }
.left { float: left; }
.right { float: right; }
.inline { display: inline; }
.block { display: block; }
.clear { clear: both; }
.absolute { position: absolute }
.description-panel {
background-color: rgba(77, 77, 77, 0.5);
}
.description-closing-tab {
border: 1px solid white;
}
.no-user-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.textinput
{
height:40px;
width:100%;
padding-left: 6px;
padding-top: 0px;
color: rgba(255, 255, 255, .750);
font-size: 24px;
font-family: 'Avenir Next W10 Thin';
background-color:rgba(0, 0, 0, 0.0);
border: 1px solid rgba(255, 255, 255, .750);
outline-width: 0px;
}
.textinput:focus
{
color: rgba(255, 255, 255, 1.0);
border: 1px solid rgba(255, 255, 255, 1.0);
outline-width: 0px;
}
.submit
{
padding-top: 9px;
padding-left: 4px;
line-height: 24px;
font-size: 24px;
font-family: 'Avenir Next W10 Thin';
}
.progress-fill {
background-color: #222;
}
.progress-back {
border: 1px solid #333;
}
