Book v2.0

In this example below you will see how to do a Book v2.0 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by s3m3nT3s, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright s3m3nT3s ©
  • HTML
  • CSS
  • JavaScript
    <meta name=viewport content="width=device-width, initial-scale=1, user-scalable=no">

<input class="book-open-close" type="checkbox" name="book" id="book" value="open-close">
<label for="book" class="book">
  <img id="book-face" src="http://novo.calhaugrande.com/img/sofia.jpg">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" rows="3" placeholder="Message"></textarea>
  <input type="submit" name="submit" value="Send">
</label>

/*Downloaded from https://www.codeseek.co/s3m3nT3s/book-v20-jyWQxG */
    body{background-color:#aaa}
.book-open-close{
  width:62px;
  height:62px;
  border-radius:31px;
  border:solid 3px #FFF;
  margin:3px;
  position: fixed;
  right:46px;
  bottom:72px;
  display:none;
}
.book{
  width:62px;
  height:62px;
  border-radius:50%;
  position: fixed;
  right:50px;
  bottom:75px;
  overflow:hidden;
  transition: 1s;
  cursor: pointer;
  display:inline-block;
}
.book img{
  width:50px;
  height:50px;
  border-radius:50%;
  border:solid 3px #FFF;
  margin:3px;
}

.book-open-close + .book{
  width:62px;
  max-width:175px;
  height:62px;
  max-height: 250px;
  border-radius:31px;
  position: fixed;
  right:50px;
  bottom:75px;
  overflow:hidden;
  transition: 1s;
  cursor: pointer;
  background-color:#fff;
}

.book-open-close:checked + .book{
  width:95%;
  height: 95%;
  border-radius:0;
  padding:5px;
  border-top: solid 4px #617558;
  cursor: auto;
}

.book:before {
  content: "";
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius:50%;
  top:0;
  left:0;
  z-index: -1;
  background: linear-gradient(#617558,#617558,#e9e4da);
  transform: rotate(0deg);
  animation: spin 2000ms infinite linear;
  transition: 1s;
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
.book-open-close:checked + .book:before{
  top:31px;
  left:31px;
  width: 0%;
  height: 0%;
}


/*Downloaded from https://www.codeseek.co/s3m3nT3s/book-v20-jyWQxG */
    

Comments