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">
        <label class="card" for="switch">
          <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>
      </label>
    </div>
    <button class="btn btn-default switch" name="switch">Rückseite</button>
  </body>
</html>
Output

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

Dismiss x
public
Bin info
janpro
0viewers