[F2U] bookshelf (code [ only bookshelf ])

<!-- 
 > thank you for using this template ^^
 > turn off WYSIWYG and turn on code editor.
 > feel free to frankenstein / change however you like! 
 > please keep credit visible in some way.
 
 
 colours:
 > bookshelf:     #695d54,#413d3a,#302b2a,#211d17,#060504
 > book (blue):   #333159,#2f2d50,#252443,#191832
 > book (purple): #543f70,#473360,#3d2c53,#281c38
 > book (cyan):   #596f7c,#4f6774,#3d515d,#30434e
 > book (red):    #994444,#933c3c,#712c2c,#491c1c
 > book accents:  #a79576,#c4923c,#654f2a,#ebd39b
-->

<center>
	<div id="bookshelf">
	    <!-------- bookshelf -------->
	    
		<div class="card px-3 pt-3  m-5" style="background-color:#695d54;max-width:800px">
			<div class="card justify-content-end p-1" style="background-color:#413d3a;height:305px;background-image:linear-gradient(rgba(0,0,0,0), #302b2a);max-width:765px;border-color:#060504 #211d17 #413d3a #211d17;border-width:20px 45px 10px 45px;">
				<div class="row mb-n2">
					<a class="btn col justify-content-center p-2 " data-toggle="collapse" href="#bookOne" style="background-color:#333159;height:275px;max-width:65px;
            background-image:linear-gradient(to right, #252443, rgba(0,0,0,0), #2f2d50, rgba(0,0,0,0), #252443);
            border:solid #191832;border-width:2px 2px 2px 2px;overflow:hidden;">
						<span class="my-3" style="font-family:times;position:absolute;text-shadow: 0px 0px 3px #654f2a;color:#a79576;">author</span>
						<span class="my-3 align-self-center" style="transform:rotate(90deg);font-family:times;font-size:2rem;text-shadow: 0px 0px 3px #c4923c;color:#a79576"> NAME 1 </span>
					</a>
					<!-- replace [href="#bookOne"] to the corresponding number when adding books.-->
					<a class="btn col justify-content-center p-2 " data-toggle="collapse" href="#bookTwo" style="background-color:#543f70;height:275px;max-width:65px;
            background-image:linear-gradient(to right, #3d2c53, rgba(0,0,0,0), #473360, rgba(0,0,0,0), #3d2c53);
            border:solid #281c38;border-width:2px 10px 2px 2px;overflow:hidden;">
						<span class="my-3" style="font-family:times;position:absolute;text-shadow: 0px 0px 3px #654f2a;color:#a79576;">author</span>
						<span class="my-3 align-self-center" style="transform:rotate(90deg);font-family:times;font-size:2rem;text-shadow: 0px 0px 3px #c4923c;color:#a79576"> NAME 2 </span>
					</a>
					<a class="btn col justify-content-center p-2 ml-2" data-toggle="collapse" href="#bookThree" style="background-color:#596f7c;height:275px;max-width:65px;transform-origin:bottom left;transform:rotate(-7deg);
            background-image:linear-gradient(to right, #3d515d, rgba(0,0,0,0), #4f6774, rgba(0,0,0,0), #3d515d);
            border:solid #30434e;border-width:2px 10px 2px 2px;overflow:hidden;">
						<span class="my-3" style="font-family:times;position:absolute;text-shadow: 0px 0px 3px #654f2a;color:#a79576;">author</span>
						<span class="my-3 align-self-center" style="transform:rotate(90deg);font-family:times;font-size:2rem;text-shadow: 0px 0px 3px #c4923c;color:#a79576;"> NAME 3 </span>
					</a>
					<a class="btn col justify-content-center p-2 ml-auto mr-4" data-toggle="collapse" href="#bookFour" style="background-color:#994444;height:275px;max-width:65px;transform-origin:bottom right;transform:rotate(10deg);
            background-image:linear-gradient(to right, #712c2c, rgba(0,0,0,0), #933c3c, rgba(0,0,0,0), #712c2c);
            border:solid #491c1c;border-width:2px 2px 2px 10px;overflow:hidden;">
						<span class="my-3" style="font-family:times;position:absolute;text-shadow: 0px 0px 3px #654f2a;color:#a79576;">author</span>
						<span class="my-3 align-self-center" style="transform:rotate(90deg);font-family:times;font-size:2rem;text-shadow: 0px 0px 3px #c4923c;color:#a79576;"> NAME 4 </span>
					</a>
					<!-- add more books above this line -->
				</div>
			</div>
			<!-- credits: do not remove -->
			<a class="text-left tooltipster" href="https://toyhou.se/khuo" title="code by khuo" style="color:#413d3a;margin-top:-3px;"><i class="fas fa-terminal"></i></a>
		</div>
		
		
		
		<!-------- end of bookshelf -------->
		
		<!---------- books ---------->
		
		<!--book one -->
		<div>
			<div class="collapse" id="bookOne" data-parent="#bookshelf">
			</div>
		</div>
		<!-- end of book one-->
		
		<!-- book two -->
		<div>
			<div class="collapse" id="bookTwo" data-parent="#bookshelf">
			</div>
		</div>
		<!-- end of book two -->
		
		<!-- book three -->
		<div>
			<div class="collapse" id="bookThree" data-parent="#bookshelf">
			</div>
		</div>
		<!-- end of book three -->
		
		<!-- book four -->
		<div>
			<div class="collapse" id="bookFour" data-parent="#bookshelf">
			</div>
		</div>
		<!-- end of book four -->
	</div>
</center>