<div class="bg">
  <div class="book1">
    <div class="ribbon1">
    </div>
    <div class="bookCut">
    </div>
  </div>
   <div class="book2">
     <div class="ribbonCut1"></div>
     <div class="ribbonCut2"></div>
     <div class="ribbonCut3"></div>
   </div>
  
   <div class="book3">
     <div class="ribbon3">
    </div>
    <div class="bookCut3">
    </div>
  </div>
  <div class="book4">
    <div class="ribbonCut4"></div>
     <div class="ribbonCut5"></div>
     <div class="ribbonCut6"></div>
  </div>
  <div class="book5"></div>
  <div class="book6">
    <div class="ribbon6">
    </div>
    <div class="bookCut6">
    </div>
  </div>
  <div class="book7">
    <div class="ribbonCut7"></div>
     <div class="ribbonCut8"></div>
     <div class="ribbonCut9"></div>
  </div>
</div>

.bg{
  background: #a0d8ef;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-tems: center;
  margin: -8px;
}

.book1{
  position: relative;
  height:30px;
  width:140px;
  border: 5px solid #942343;
  margin-left:42vw;
  border-radius: 10px 0 0 10px;
  border-right-style: none;
  background: #fffff0;  
}

.bookCut{ 
  background: #a0d8ef;
  margin: 0 0 0 97%;
  width: 5px;
  height: 30px;
}

.ribbon1{
  height:25px;
  width:20px;
  background: #ff785b;
  position: absolute;
  margin: 12px 0 0 10px;
}

.book2{
  position: relative;
  height:40px;
  width:120px;
  margin-left:43vw;
  background: #a688bd;  
}

.ribbonCut1{
  position: absolute;
  margin: 5px 0 0 2px;
  border-left: 0px solid #ff785b;
  border-right: 10px solid transparent;
  border-top: 12px solid #ff785b;
}

.ribbonCut2{
  position: absolute;
  margin: 5px 0 0 12px;
  border-left: 10px solid transparent;
  border-right: 0px solid #ff785b;
  border-top: 12px solid #ff785b;
}

.ribbonCut3{
  position: absolute;
  margin: 0 0 0 2px;
  height: 5px;
  width: 20px;
  background: #ff785b;
}

.book2:before,
.book2:after{
  content: "";
  position: absolute;
}

.book2:before{
  height: 40px;
  width: 60px;
  left: 10px;
  border-left: 20px double #fff;
  border-right: 20px double #fff;
}

.book2:after{
  background: white;
  margin: 5% 0 0 39%;
  width: 30px;
  height: 20px;
}

.book3{
  position: relative;
  height:30px;
  width:140px;
  border: 5px solid #004d25;
  margin-left:43vw;
  border-radius: 0 10px 10px 0;
  border-left-style: none;
  background: #fffff0;
  
}

.bookCut3{ 
  background: #a0d8ef;
  width: 5px;
  height: 30px;
}

.ribbon3{
  height:25px;
  width:20px;
  position: absolute;
  background: #a4d5bd;
  margin: 10px 0 0 100px;
}

.book4{
  position: relative;
  height:35px;
  width:160px;
  margin-left:41vw;
  background: #ed6d35;  
}

.book4:before,
.book4:after{
  position: absolute;
  content: "";
}

.book4:before{
  height: 35px;
  width: 98px;
  left: 10px;
  border-left: 20px double #fff;
  border-right: 20px double #fff;
}

.book4:after{
   background: white;
  margin: 4% 0 0 37%;
  width: 40px;
  height: 20px;
}

.ribbonCut4{
  position: absolute;
  margin: 5px 0 0 127px;
  border-left: 0px solid #a4d5bd;
  border-right: 10px solid transparent;
  border-top: 12px solid #a4d5bd;
}

.ribbonCut5{
  position: absolute;
  margin: 5px 0 0 137px;
  border-left: 10px solid transparent;
  border-right: 0px solid #a4d5bd;
  border-top: 12px solid #a4d5bd;
}

.ribbonCut6{
  position: absolute;
  margin: 0 0 0 127px;
  height: 5px;
  width: 20px;
  background: #a4d5bd;
}

.book5{
  position: relative;
  height:40px;
  width:145px;
  margin-left:41.5vw;
  background: #0073a8;  
}

.book5:before,
.book5:after{
  position: absolute;
  content: '';
}

.book5:before{
  height: 40px;
  width: 80px;
  left: 12px;
  border-left: 20px double #fff;
  border-right: 20px double #fff;
}

.book5:after{
   background: white;
  margin: 5% 0 0 39%;
  width: 30px;
  height: 20px;
}

.book6{
  position: relative;
  height:30px;
  width:165px;
  border: 5px solid #622d18;
  margin-left:40.5vw;
  border-radius: 0 10px 10px 0;
  border-left-style: none;
  background: #fffff0;
  
}


.bookCut6{ 
  background: #a0d8ef;
  width: 5px;
  height: 30px;
}

.ribbon6{
  height:25px;
  width:20px;
  position: absolute;
  background: #a4d5bd;
  margin: 14px 0 0 105px;
}

.book7{
  position: relative;
  height:40px;
  width:200px;
  margin-left:39vw;
  margin-bottom: 3px;
  background: #fcc800;  
}

.book7:before,
.book7:after{
  position: absolute;
  content: "";
}

.book7:before{
  height: 40px;
  width: 98px;
  left: 10px;
  border-left: 20px double #fff;
}

.book7:after{
   background: white;
  margin: 4% 0 0 82%;
  width: 22px;
  height: 22px;
  border-radius: 12px;
}

.ribbonCut7{
  position: absolute;
  margin: 5px 0 0 125px;
  border-left: 0px solid #a4d5bd;
  border-right: 10px solid transparent;
  border-top: 12px solid #a4d5bd;
}

.ribbonCut8{
  position: absolute;
  margin: 5px 0 0 135px;
  border-left: 10px solid transparent;
  border-right: 0px solid #a4d5bd;
  border-top: 12px solid #a4d5bd;
}

.ribbonCut9{
  position: absolute;
  margin: 0 0 0 125px;
  height: 5px;
  width: 20px;
  background: #a4d5bd;
}