|
|
| Line 1: |
Line 1: |
| − | <html>
| |
| − | <head>
| |
| − | <title>TPHS IGEM Wiki</title>
| |
| − | </head>
| |
| − | <body>
| |
| − | <style type = "text/css">
| |
| − | header{
| |
| − | width: 100vw;
| |
| − | height: 30vh;
| |
| | | | |
| − | font-size: 3em;
| |
| − | font-weight: bold;
| |
| − | font-family: Arial;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .card{
| |
| − | min-width: 300px;
| |
| − | min-height: 300px;
| |
| − | width: 30vw;
| |
| − | height: 30vw;
| |
| − |
| |
| − | perspective: 1000px;
| |
| − | -moz-perspective: 1000px;
| |
| − | -webkit-perspective: 1000px;
| |
| − | -ms-perspective: 1000px;
| |
| − | }
| |
| − |
| |
| − | .card_content_wrapper{
| |
| − | position: absolute;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | transition: all 0.5s;
| |
| − | -moz-transition: all 0.5s;
| |
| − | -o-transition: all 0.5s;
| |
| − | -webkit-transition: all 0.5s;
| |
| − | transform-style: preserve-3d;
| |
| − | -webkit-transform-style: preserve-3d;
| |
| − |
| |
| − | border-radius: 10px;
| |
| − | box-shadow: 0 5px 20px rgb(201, 201, 201);
| |
| − | }
| |
| − |
| |
| − | .card:hover .card_content_wrapper{
| |
| − | transform: rotateY(180deg);
| |
| − | -moz-transform: rotateY(180deg);
| |
| − | -ms-transform: rotateY(180deg);
| |
| − | -o-transform: rotateY(180deg);
| |
| − | -webkit-transform: rotateY(180deg);
| |
| − | }
| |
| − |
| |
| − | .front, .back{
| |
| − | position: absolute;
| |
| − | height: 100%;
| |
| − | width: 100%;
| |
| − | backface-visibility: hidden;
| |
| − | -moz-backface-visibility: hidden;
| |
| − | -webkit-backface-visibility: hidden;
| |
| − | }
| |
| − |
| |
| − | .back{
| |
| − | transform: rotateY(180deg);
| |
| − | -moz-transform: rotateY(180deg);
| |
| − | -ms-transform: rotateY(180deg);
| |
| − | -o-transform: rotateY(180deg);
| |
| − | -webkit-transform: rotateY(180deg);
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − | <header>
| |
| − | Know our members!
| |
| − | </header>
| |
| − | <section>
| |
| − | <div class = "card">
| |
| − | <div class = "card_content_wrapper">
| |
| − | <div class = "front">
| |
| − | Front
| |
| − | </div>
| |
| − | <div class = "back">
| |
| − | Back
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </section>
| |
| − | </body>
| |
| − | </html>
| |
