Untitled

dabblet.css

a {
  color: #9b4849;
  text-decoration: none;
  display: block; }

a:hover {
  color: #783839; }

#lid a {
  width: 100%;
  text-align: center;
  margin-top: 50px; }

#top a {
  padding: 160px 20px 0 0; }

.front a {
  margin-top: 10px; }

#letter a {
  position: absolute;
  bottom: 20px;
  right: 40px; }

section.container {
  position: relative;
  width: 600px;
  height: 300px;
  margin: 280px auto 0;
  perspective: 1000px; }

section.container > form.flip {
  width: 100%;
  height: 100%; 
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  transition: transform 0.7s 0s;
  transform-origin: center center; }
  
section.container > form.flip > div {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; }
  
section.container > form.flip > .back {
  transform: rotateY(180deg); }
  

section.container:target > form.flip {
 transform: rotateY(0deg); }

#content {
  background: #837362; }

.container#lid {
  position: relative;
  width: 100%;
  height: 50%;
  perspective: 800px;
  z-index: 2;
  transition: z-index 0s 1s; }


#content:target .container#lid {
  z-index: -1;
  transition: z-index 0s .5s; }

#lid .flip {
  width: 100%;
  height: 100%; 
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 0.5s 1s;
  transform-origin: left top; }
  
#lid .flip > div {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; }
  
#lid .flip > .back {
  transform: rotateX(180deg); }
  
#content:target #lid .flip {
  transform: rotateX(180deg);
  transition: transform 0.5s 0s; }

#letter .flip > div, #lid .flip > div, section.container > form.flip > div {
  box-sizing: border-box; }

#lid .flip .front, section.container > form.flip .front {
  background: Beige ;
  border: 1px #eae1d5 solid;
  box-shadow: inset 0 0 10px 1px rgba(255, 255, 255, 0.6), 0 2px 3px -2px rgba(0, 0, 0, 0.6);
  padding: 20px 30px;
  color: #837362; }

section.container > form.flip > .front {
  font-size: 1.25em;
  background: Beige ;
  padding: 120px 20px 20px 40%; }

#lid .flip .front {
  border-radius: 0 0 40px 40px;
  font-size: 1.25em; }

#lid .flip .back {
  background: #837362;
  border-radius: 40px 40px 0 0;
  border: 35px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  box-shadow: inset 0 10px 30px 10px rgba(0, 0, 0, 0.1); }

#top {
  text-align: right;
  background: Beige;
  border: 1px #eae1d5 solid;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 65%;
  box-sizing: border-box;
  z-index: 1; }

#letter {
  background: #fafafa;
  position: absolute;
  width: 90%;
  height: 95%;
  left: 5%;
  top: 5%;
  z-index: 0;
  transition: .5s .5s;
  -o-transition: 0s 0s; }

#content:target #letter {
  top: -40%;
  -o-transition: .5s .5s; }

#letter .container {
  position: absolute;
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;
  perspective: 800px;
  transition: 0s 0s;
  z-index: 1; }

#letter .flip {
  width: 100%;
  height: 100%; 
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 0.5s 0s;
  transform-origin: left top; }

#letter .flip > .front, #letter .flip > .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; }
  
#letter .flip > .back {
  transform: rotateX(180deg); }
  
#content:target #letter .flip {
   transform: rotateX(180deg);
   transition: transform 0.5s 1s; }

#content:target #letter .container {
  z-index: -1;
  transition: z-index 0s 1.5s; }

#letter .flip .front {
  background: #fafafa;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2); }

#letter .flip .back {
  background: #fafafa;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding: 40px 40px 0;
  font-size: 18px;
  line-height: 1.4;
  box-shadow: 0 -5px 8px -4px rgba(0, 0, 0, 0.15); }

input[type="text"] {
  background: transparent;
  border: none;
  border-bottom: 1px dotted #837362;
  width: 50%;
  -webkit-appearance: none; }

input[type="text"]:focus {
  outline: none;
  border-bottom: 1px solid #837362;
  -webkit-appearance: none; }

textarea {
  margin: 10px auto 0;
  display: block;
  box-sizing: border-box;
  width: 90%;
  padding: 10px;
  background: transparent;
  border: 1px dashed #c8bfb6; }
textarea:focus {
  outline: none;
  border-color: #837362; }

textarea {
  height: 160px; }

.textarea {
  position: relative; }

.textarea label {
  position: absolute;
  width: 100%;
  }

input[type="submit"] {
  cursor: pointer;
  display: block;
  margin: 10px auto;
  -webkit-appearance: none;
  font-size: .9em;
  background: #9b4849;
  color: #fff;
  padding: 5px 20px;
  border-radius: 3px;
  border: 1px solid #9b4849;
 }

input[type="submit"]:hover {
  background: #783839; }

dabblet.html

<section class="container" id="contact">
		<form class="flip">
			<div class="front">
				<h2>Contact info</h2>
				<a href="#">Drop me a line !</a>
			</div>
			<div id="content" class="back">
				<div id="letter">
					<div class="container">
						<div class="flip">
			  				<div class="front"></div>
			  				<div class="back">
								You'd like us to work for you or you're here to say hello ? Don't hesitate - just drop us a line. You'll hear back from us soon. Thanks. 
								<a href="#">Close</a>
							</div>
						</div>
					</div>
					<textarea  class="textarea required" id="message" name="message" placeholder="Your message"></textarea>	
					<input type="submit" class="submit" value="Send" >
				</div>
				<div id="top">
					<a href="#contact">Flip</a>
				</div>
				<div id="lid" class="container">
  					<div class="flip">    
  						<div class="front">
							<div>
								<label for="name">Your name :</label>
								<input type="text"  id="name" name="name">
							</div>
							<div>
								<label for="mail">Your email :</label>
								<input type="text" id="mail" name="mail" >
							</div>
							<a href="#content">Open</a>
						</div>
						<div class="back"></div>
					</div>
				</div>
			</div>
		</form>
	</section>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}