HTML+CSS small project-1

 3D Book design:-

HTML Code--

<div class="book"></div>

*CSS Code--

*{

  margin: 0;

  padding: 0;

  position: absolute;

}

html,body{

  height: 100%;

  width: 100%;

  overflow: hidden;

}

body{

  background: #ffc967;

}

*, *::before, *:after {

  box-sizing: inherit;

}

*::before, *:after {

  content: "";

  position: absolute;

}

.book{

  width: 280px;

  height: 420px;

  transform: translate(-50%, -50%);

  top: 50%;

  left: 50%;

  background: #f33139;

  border-radius: 20px 16px 12px 32px;

  background-image: linear-gradient(to right,#D11f2f 48px, #ba0716 50px, transparent 50px);

}

.book:after{

  height: 52px;

  width: 274px;

  bottom: 6px;

  right: 0px;

  background: white;

  border-radius: 32px 4px 4px 32px;

  box-shadow: inset 4px 6px 0px 0px #E4E0ce;

  background-image: linear-gradient(to bottom, 

  transparent 6px, #E4E0ce 8px, transparent 8px, 

  transparent 12px, #E4E0ce 12px, transparent 14px,

  transparent 18px, #E4E0ce 18px, transparent 20px,

  transparent 24px, #E4E0ce 24px, transparent 26px,

  transparent 30px, #E4E0ce 30px, transparent 32px,

  transparent 36px, #E4E0ce 36px, transparent 38px,

  transparent 42px, #E4E0ce 42px, transparent 44px,

  transparent 48px, #E4E0ce 48px, transparent 50px);

}

.book:before{

  height: 20px;

  width: 160px;

  right: 40px;

  top: 72px;

  background: #D11f2f;

  border-radius: 20px;

  box-shadow: 0px 36px #D11f2f;

}

Output--

                                                                   *******