Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta name="description" content="Flip" />
    <!-- CSS -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600,700" rel="stylesheet" type="text/css">
    <link href="https://rawgit.com/janstieler/4a9875ef67fe3aa5d7fc/raw/e4bb9aecc02de01e275fd41ca52f2f1b3b15043e/redacted.css"  rel="stylesheet" type="text/css" />
    <!-- Javascript -->
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <title></title>
  </head>
​
  <body>
    <!-- Help Area-->
    <nav class="alert navbar-default alert-dismissable highlvl">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      <ul class="list-unstyled list-inline">
        <li><strong>Help:</strong></li>
        <li><a href="http://www.getbootstrap.com" target="_blank">Bootstrap</a></li>
        <li><a href="http://fontawesome.io/icons/" target="_blank">Font Awesome</a></li>
        <li><a href="https://rawgit.com/" target="_blank">RawGit</a></li>
      </ul>
    </nav>
    
    <div class=card_container>
      <input type="checkbox" name="switch" id="switch">
        <div class="card"> 
          <div class="front face">
            <img class="logo center-block" src="http://placehold.it/150x150/FF0000/000&text=Logo">
            <output class="name text-center" for="InputName" id="OutputName"></output>
            <output for="InputSurname" id="OutputSurname"></output>
            <output class="position text-center" id="OutputPosition"></output>
          </div>
          <div class="back face">
            <output for="InputEmail" id="OutputEmail"></output>
            <output for="InputMobile" id="OutputMobile"></output>
            <output for="InputNumber" id="OutputNumber"></output>
            <output for="InputFax" id="OutputFax"></output>
            <output for="InputStreet" id="OutputStreet"></output>
            <output for="InputStreetnumber" id="OutputStreetnumber"></output>
            <output for="InputZip" id="OutputZip"></output>
            <output for="InputCity" id="OutputCity"></output>
        </div>
      </div>
    </div>
    <button class="btn btn-default switch" name="switch">Rückseite</button>
  </body>
</html>
 
html, body {
  height: 100%;
}
​
body {
  font-family: titillium;  
}
​
.highlvl {
  position: relative;
  z-index: 99999;
}
​
.show-grid [class^=col-] {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  border: 1px solid #ddd;
}
​
.redacted-regular {
    font-family: redacted-regular;
}
​
.redacted-script-bold {
    font-family: redacted-script-bold;
}
​
.redacted-script-regular {
    font-family: redacted-script-regular;
}
​
.redacted-script-light {
    font-family: redacted-script-light;
}
​
/*--------------------------------------*/
​
.form-control,
            .btn {
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                border-radius: 0;
            }
            
            .well {
                border-radius: 0;
            }
            
            form {
                margin-bottom: 15px;
            }
                        
            .aria-show {
                position:absolute;
                left:-10000px;
                top:auto;
                width:1px;
                height:1px;
                overflow:hidden;
            }           
            
            .card_container {
                position: relative;
                width: 450px;
                height: 281px;
                z-index: 1;
                margin-top: 60px;
                margin-bottom: 61px;
                -webkit-perspective: 1000px;
                -moz-perspective: 1000px;
                -o-perspective: 1000px;
                perspective: 1000px;
            }
                        
            .card {
                width:100%;
                height:100%;
                border: 1px solid #D6D6D6;
                -webkit-transform-style: preserve-3d;
                -webkit-transition: all 1.0s linear;
                -moz-transform-style: preserve-3d;
                -moz-transition: all 1.0s linear;
                -o-transform-style: preserve-3d;
                -o-transition: all 1.0s linear;
                transform-style: preserve-3d;
                transition: all 1.0s linear;
                display:block;
                color: #fff;
                -webkit-box-shadow: 2px 2px 10px 0 #aaa;
                box-shadow: 2px 2px 10px 0 #aaa;
            }
            
            .card .logo {
                padding-top: 21px;
            }
            
            .card .name {
                margin-top: 20px;
            }
            
            .card .name output {
                display: inline;
            }
            
            .card .position {
                margin-top: -9px;
            }
            
            .card .position {
                display: inline;
            }
            
            .card output {
                padding-top: 0;
                font-size: inherit;
                vertical-align: middle;
                margin-right: 5px;
                color: inherit;
            }
            
            .card #outputStreet {
                float: left;
            }
            
            .card #outputzip {
                float: left;
            }           
            
            #switch {
                display: none;
            }
                        
            input:checked + .card{
                -webkit-transform: rotateY(180deg);
                -moz-transform: rotateY(180deg);
                -o-transform: rotateY(180deg);
                transform: rotateY(180deg);
                -webkit-box-shadow: 2px 2px 10px 0 #aaa;
                box-shadow: -2px 2px 10px 0 #aaa;
            } 
            
            .face {
                position: absolute;
                width: 100%;
                height: 100%;
                -webkit-backface-visibility: hidden;
                -moz-backface-visibility: hidden;
                -o-backface-visibility: hidden;
                backface-visibility: hidden;
                color:#000;
            }
            
            .face.back {
                display: block;
                -webkit-transform: rotateY(180deg);
                -webkit-box-sizing: border-box;
                -moz-transform: rotateY(180deg);
                -moz-box-sizing: border-box;
                -o-transform: rotateY(180deg);
                -o-box-sizing: border-box;
                transform: rotateY(180deg);
                box-sizing: border-box;
                padding: 10px;
            }
 
$(function() {
  $('.switch').on('click',function () {
    var btn = $(this);
    btn.button('toggle');
            
  if(btn.hasClass('active')) {
    $('#switch').prop('checked', true);
      btn.text('Vorderseite');
    } else {
      $('#switch').removeAttr('checked');
      btn.text('Rückseite');
    }
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
janpro
0viewers