Last active
July 10, 2022 19:49
-
-
Save sp2hari/9194053708f61002ddea1d5f329d9bc1 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script> | |
jQuery(document).ready(function(){ | |
jQuery(".book-wrap").mouseenter(function(){ | |
jQuery(this).addClass("rotate"); | |
}); | |
jQuery(".book-wrap").mouseleave(function(){ | |
jQuery(this).removeClass("rotate"); | |
}); | |
jQuery(".book").click(function(){ | |
jQuery(".book-back").click(); | |
jQuery(this).parent(".book-wrap").addClass("flip"); | |
jQuery(this).parent(".book-wrap").children(".book-back").show(); | |
}); | |
jQuery(".book-back").click(function(){ | |
jQuery(this).parent(".book-wrap").removeClass("flip"); | |
jQuery(this).parent(".book-wrap").children(".book-back").hide(); | |
}); | |
}); | |
</script> | |
<style> | |
:root { | |
--book-width: 14.8em; | |
--book-height: 22.2em; | |
} | |
.book { | |
width: var(--book-width); | |
height: var(--book-height); | |
position: relative; | |
transform: perspective(60em) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewY(0deg); | |
box-shadow: -1.4em 1.7em 0.3em -0.3em rgba(0,0,0,0.8), -1.6em 1.8em 0.9em -0.2em rgba(0,0,0,0.5), 0.3em 1.9em 1.3em rgba(0,0,0,0.3); | |
border-top-right-radius: 0.4em; | |
} | |
.book img { | |
box-sizing: border-box; | |
width: 100%; | |
height: 100%; | |
clip: rect(0em, var(--book-width), var(--book-height), 0em); | |
display: block; | |
filter: saturate(90%); | |
border-top-right-radius: 0.4em; | |
} | |
.book:before, | |
.book:after { | |
content: ''; | |
position: absolute; | |
top: 0; | |
border-top-right-radius: 0.4em; | |
} | |
.book:before { | |
width: 105%; | |
height: 105%; | |
left: -5%; | |
z-index: -1; | |
background-repeat: no-repeat; | |
background-image: linear-gradient(115deg, transparent 2.8%, #3f3f3f 3%, #3f3f3f 16%, transparent 16%), | |
linear-gradient(125deg, transparent 10%, #3f3f3f 10%, #3f3f3f 17%, #222 51%, transparent 52%), | |
linear-gradient(125deg, transparent 46%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.25) 52%, transparent 53%), | |
linear-gradient(to right, #444, #666), | |
linear-gradient(#444, #444), | |
linear-gradient(140deg, transparent 45%, #eee 45%, #ccc 96.8%, rgba(170,170,170,0) 97%); | |
background-size: 100% 100%, 100% 100%, 100% 100%, 100% 0.4em, 94% 0.2em, 100% 100%; | |
background-position: 0 0, 0 0, 0 0, 0 95.8%, 0 100%, 0 0; | |
} | |
.book:after { | |
width: 100%; | |
height: 100%; | |
background-repeat: no-repeat; | |
background-image: linear-gradient(to right, transparent 2%, rgba(0,0,0,0.1) 3%, rgba(0,0,0,0.1) 4%, transparent 5%), linear-gradient(-50deg, rgba(0,0,0,0.1) 20%, transparent 100%), linear-gradient(-50deg, rgba(0,0,0,0.2) 20%, transparent 100%), linear-gradient(to bottom, rgba(0,0,0,0.1) 20%, transparent 100%), linear-gradient(to bottom, rgba(0,0,0,0.1) 20%, transparent 100%); | |
background-size: 100% 100%, 2% 20%, 1% 20%, 2% 20%, 1% 20%; | |
background-position: 0 0, 2.2% 100%, 3% 100%, 2.2% 0, 3% 0; | |
} | |
.book-container { | |
display: flex; | |
flex-direction: row; | |
justify-content: space-evenly; | |
align-items: center; | |
flex-wrap: wrap; | |
gap: 75px 100px; | |
margin-bottom: 150px; | |
} | |
.book-wrap { | |
cursor: pointer; | |
transition: all ease-out 0.6s; | |
} | |
.book-back { | |
width: var(--book-width); | |
height: var(--book-height); | |
background-color: #444; | |
position: absolute; | |
top: 0; | |
transform: rotate(180deg) translateZ(-30px) translateX(0px); | |
display: none; | |
} | |
.book-back .text { | |
transform: rotateX(180deg); | |
width: var(--book-width); | |
height: var(--book-height); | |
position: absolute; | |
text-align: left; | |
overflow: hidden; | |
} | |
.book-back .text h6 { | |
color: #fff; | |
overflow: hidden; | |
white-space: nowrap; | |
text-overflow: ellipsis; | |
padding: 30px 10px 0px 20px; | |
} | |
.book-back .text p { | |
display: block; | |
margin-bottom: 10px; | |
color: #fff; | |
padding: 10px 10px 0px 20px; | |
font-size: 0.75em; | |
line-height: 1.5em; | |
} | |
.rotate { | |
transform: perspective(60em) rotateX(0deg) rotateY(15deg) rotateZ(0deg) skewY(0deg) | |
} | |
.flip { | |
transform: rotateY(180deg); | |
} | |
</style> | |
<div class="book-container"> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://images-na.ssl-images-amazon.com/images/I/91+NBrXG-PL.jpg" alt="A Promised Land" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>A Promised Land</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="book-container"> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://images-na.ssl-images-amazon.com/images/I/810u9MkT3SL.jpg" alt="The Hard Thing about Hard Things: Building a Business When There are No Easy Answers" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>The Hard Thing about Hard Things: Building a Business When There are No Easy Answers</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://images-na.ssl-images-amazon.com/images/I/71LMXL8DTjL.jpg" alt="Sapiens: A Brief History of Humankind" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>Sapiens: A Brief History of Humankind</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://images-na.ssl-images-amazon.com/images/I/71SPjJ+UnLL.jpg" alt="Influence: The Psychology of Persuasion" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>Influence: The Psychology of Persuasion</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://kbimages1-a.akamaihd.net/ade838f2-4a76-4d8a-b1f8-eb86dbc63435/1200/1200/False/turn-the-ship-around.jpg" alt="Turn the Ship Around! A True Story of Turning Followers Into Leaders" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>Turn the Ship Around! A True Story of Turning Followers Into Leaders</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://images-na.ssl-images-amazon.com/images/I/91wo06zofzL.jpg" alt="Born a Crime: Stories From a South African Childhood" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>Born a Crime: Stories From a South African Childhood</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1344267716l/6828896.jpg" alt="Delivering Happiness: A Path to Profits, Passion, and Purpose" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>Delivering Happiness: A Path to Profits, Passion, and Purpose</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://images-na.ssl-images-amazon.com/images/I/71VXc6iwaoL.jpg" alt="That Will Never Work: The Birth of Netflix and the Amazing Life of an Idea" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>The Great Fall</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://images-na.ssl-images-amazon.com/images/I/71mwPqoSf8L.jpg" alt="Thinking in Bets: Making Smarter Decisions When You Don't Have All the Facts" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>Thinking in Bets: Making Smarter Decisions When You Don't Have All the Facts</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://images-na.ssl-images-amazon.com/images/I/81NMCJS9Q6L.jpg" alt="Radical Candor: Be a Kick-Ass Boss Without Losing Your Humanity" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>Radical Candor: Be a Kick-Ass Boss Without Losing Your Humanity</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://kbimages1-a.akamaihd.net/d44bbe0e-733c-4b29-9ec5-e1102f8b8687/1200/1200/False/algorithms-to-live-by-2.jpg" alt="Algorithms to Live By: The Computer Science of Human Decisions" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>Algorithms to Live By: The Computer Science of Human Decisions</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://kbimages1-a.akamaihd.net/fb86b2d2-ca25-4689-940a-c3ef96315bf6/1200/1200/False/loonshots.jpg" alt="Loonshots: How to Nurture the Crazy Ideas That Win Wars, Cure Diseases, and Transform Industries" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>Loonshots: How to Nurture the Crazy Ideas That Win Wars, Cure Diseases, and Transform Industries</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://images-na.ssl-images-amazon.com/images/I/61fV1OfurYL.jpg" alt="Why We Sleep: The New Science of Sleep and Dreams" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>Why We Sleep: The New Science of Sleep and Dreams</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://images-na.ssl-images-amazon.com/images/I/71JNZdlnhcL.jpg" alt="Build: An Unorthodox Guide to Making Things Worth Making" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>Build: An Unorthodox Guide to Making Things Worth Making</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://images-na.ssl-images-amazon.com/images/I/71QKrhhMJIL.jpg" alt="The Little Prince" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>The Little Prince</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://149664534.v2.pressablecdn.com/wp-content/uploads/2020/03/FS_Vol1_Cover_1000px-111319.jpg" alt="The Great Mental Models Volume 1: General Thinking Concepts" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>The Great Mental Models Volume 1: General Thinking Concepts</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://149664534.v2.pressablecdn.com/wp-content/uploads/2021/08/mental-model-vol2-large.png" alt="The Great Mental Models, Volume 2: Physics, Chemistry, and Biology" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>The Great Mental Models, Volume 2: Physics, Chemistry, and Biology</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://149664534.v2.pressablecdn.com/wp-content/uploads/2021/09/FS_Vol3_Amazon_1000px.jpg" alt="The Great Mental Models Volume 3: Systems and Mathematics" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>The Great Mental Models Volume 3: Systems and Mathematics</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://images-na.ssl-images-amazon.com/images/I/81wgcld4wxL.jpg" alt="Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://images-na.ssl-images-amazon.com/images/I/81ZMvLDtmIL.jpg" alt="The Phoenix Project: A Novel About IT, DevOps, and Helping Your Business Win" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>The Phoenix Project: A Novel About IT, DevOps, and Helping Your Business Win</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
<div class="book-wrap"> | |
<div class="book"> | |
<img src="https://mms.businesswire.com/media/20220119005295/en/1331995/5/Frank_Slootman_Book_-_Amp_It_Up_%281%29.jpg" alt="Amp It Up: Leading for Hypergrowth by Raising Expectations, Increasing Urgency, and Elevating Intensity" /> | |
</div> | |
<div class="book-back"> | |
<div class="text"> | |
<h6>Amp It Up: Leading for Hypergrowth by Raising Expectations, Increasing Urgency, and Elevating Intensity</h6> | |
<p>Summary in progress...</p> | |
</div> | |
</div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment