<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>
</head>
<body>
  <body class='bg-dark'>
    <div id='shelf'>
      <div class='book-bg graphic'>
        <div class='book flex-column'>
          <div id='book-shading'></div>
          <h5 style='margin-left: 0px; line-height:10%'>Fundamentals of</h5>
          <h1 style='margin-left: 45px; line-height: 1%'>Graphic Design</h1>
          <div class='contents'>
            <div id='back'>
              <svg viewBox="0 0 512 512" width="100" title="chevron-circle-left">
                <path d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zM142.1 273l135.5 135.5c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L226.9 256l101.6-101.6c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L142.1 239c-9.4 9.4-9.4 24.6 0 34z" />
              </svg>
            </div>
            <div class='page'>
              <div>
                <h1>Graphic Design</h1>
                <p class='text'>&emsp;Primitivism gothic art situationist international neoclassicism neo-impressionism multiculturalism postmodernism primitivism, postmodern art dada hyperrealism existentialism neue slowenische kunst renaissance.</p>
              </div>
              <div class='illus' style='background-image: url(https://images.unsplash.com/photo-1618004912476-29818d81ae2e?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE1NTI1MjY&ixlib=rb-1.2.1&q=80)'>
              </div>
            </div>
            <div class='page'>
              <div class='illus' style='background-image: url(https://images.unsplash.com/photo-1659034638032-3a0e9b7ac8d0?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE0NTUzMjM&ixlib=rb-1.2.1&q=80)'>
              </div>
              <div>
                <p class='text'>&emsp;Modernipsum dolor sit amet renaissance situationist international metaphysical art, deformalism manierism op art social realism neo-minimalism. Post-painterly abstraction socialist realism cloisonnism impressionism pop art illusionism, dada cloisonnism biedermeier.</p>
              </div>
            </div>
            <div id='page-shading'></div>
          </div>
        </div>
      </div>
      <div class='book-bg data'>
        <div class='book'>
          <div id='book-shading'></div>
          <h1>Data Visualization, a Primer</h1>
          <div class='contents'>
            <div id='back'><svg viewBox="0 0 512 512" width="100" title="chevron-circle-left">
                <path d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zM142.1 273l135.5 135.5c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L226.9 256l101.6-101.6c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L142.1 239c-9.4 9.4-9.4 24.6 0 34z" />
              </svg></div>
            <div class='page'>
              <div class='illus' style='background-image: url(https://images.unsplash.com/photo-1642516303080-431f6681f864?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE3MDU5MzU&ixlib=rb-1.2.1&q=80)'>
              </div>
              <div>
                <h1 style='margin-top: 1rem'>Data Visualization</h1>
                <p class='text'>&emsp;Rig Veda qui dolorem ipsum quia dolor sit amet vanquish the impossible shores of the cosmic ocean Rig Veda venture?</p>
              </div>
            </div>
            <div class='page'>
              <div>
                <p class='text'>&emsp;Two ghostly white figures in coveralls and helmets are softly dancing emerged into consciousness are creatures of the cosmos white dwarf as a patch of light muse about? Intelligent beings the only home we've ever known explorations.</p>
              </div>
              <div class='illus' style='background-image: url(https://images.unsplash.com/photo-1584291527935-456e8e2dd734?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE3MDQyMTY&ixlib=rb-1.2.1&q=80)'>
              </div>
            </div>
            <div id='page-shading'></div>
          </div>
        </div>
      </div>
      <div class='book-bg photo'>
        <div class='book'>
          <div id='book-shading'></div>
          <h3>Photography 101</h3>
          <div class='contents'>
            <div id='back'><svg viewBox="0 0 512 512" width="100" title="chevron-circle-left">
                <path d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zM142.1 273l135.5 135.5c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L226.9 256l101.6-101.6c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L142.1 239c-9.4 9.4-9.4 24.6 0 34z" />
              </svg></div>
            <div class='page is-grid'>
              <div class='illus' style='background-image: url(https://images.unsplash.com/photo-1659974751348-81f2acd062cc?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE3MzAxNTU&ixlib=rb-1.2.1&q=80); grid-column: 1 / 4'></div>
              <div class='illus' style='background-image: url(https://images.unsplash.com/photo-1659256955381-4e6636e3aa56?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE3MzAxMzI&ixlib=rb-1.2.1&q=80); grid-row: 2 / 4'></div>
              <div class='illus' style='background-image: url(https://images.unsplash.com/photo-1542382156909-9ae37b3f56fd?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE3MzA3NTU&ixlib=rb-1.2.1&q=80); grid-column: 2 / 4; grid-row: 2 / 4'></div>
            </div>
            <div class='page is-grid'>
              <div class='illus' style='background-image: url(https://images.unsplash.com/photo-1649554007580-aeba20951028?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE3MzA1NjU&ixlib=rb-1.2.1&q=80); grid-column: 1 / 3; grid-row: 1 / 3'></div>
              <div class='illus' style='background-image: url(https://images.unsplash.com/photo-1661546135630-bae33b1bf310?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE3MzA1NjU&ixlib=rb-1.2.1&q=80); grid-row: 1 / 3'></div>
              <div class='illus' style='background-image: url(https://images.unsplash.com/photo-1660296444901-253891bb61c0?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE3MzA4Mjc&ixlib=rb-1.2.1&q=80); grid-column: 1 / 3'></div>
              <div class='illus' style='background-image: url(https://images.unsplash.com/photo-1660219927145-40fb8403995b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE3MzAxNTU&ixlib=rb-1.2.1&q=80)'></div>
            </div>
            <div id='page-shading'></div>
          </div>
        </div>
      </div>
      <div class='book-bg landscape'>
        <div class='book flex-column'>
          <div id='book-shading'></div>
          <h5 style='margin-left: 0px; margin-top: -27%; line-height:10%'>An Introduction to</h5>
          <h1 style='margin-left: 45px; line-height: 1%'>Landscape Design</h1>
          <div class='contents'>
            <div id='back'>
              <svg viewBox="0 0 512 512" width="100" title="chevron-circle-left">
                <path d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zM142.1 273l135.5 135.5c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L226.9 256l101.6-101.6c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L142.1 239c-9.4 9.4-9.4 24.6 0 34z" />
              </svg>
            </div>
            <div class='page'>
              <div class='illus' style='background-image: url(https://images.unsplash.com/photo-1610989653808-2303456a25e6?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE3MDYxNzU&ixlib=rb-1.2.1&q=80)'>
              </div>
            </div>
            <div class='page'>
              <div>
                <h1>Landscape Design</h1>
                <p class='text'>&emsp;Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt made in the interiors of collapsing stars paroxysm of global death star stuff harvesting star light extraplanetary hearts of the stars. Kindling the energy hidden in matter vanquish the impossible rogue white dwarf rogue descended from astronomers. Not a sunrise but a galaxyrise hydrogen atoms kindling the energy hidden in matter qui dolorem ipsum quia dolor sit amet citizens of distant epochs a still more glorious dawn awaits. Rich in heavy atoms emerged into consciousness circumnavigated as a patch of light.</p>
              </div>
            </div>
            <div id='page-shading'></div>
          </div>
        </div>
      </div>
      <div class='book-bg writing'>
        <div class='book'>
          <div id='book-shading'></div>
          <h3>Creative Writing,</h3>
          <h4> for Dummies</h4>
          <div class='contents'>
            <div id='back'><svg viewBox="0 0 512 512" width="100" title="chevron-circle-left">
                <path d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zM142.1 273l135.5 135.5c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L226.9 256l101.6-101.6c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L142.1 239c-9.4 9.4-9.4 24.6 0 34z" />
              </svg></div>
            <div class='page'>
              <div>
                <h3 style='text-align: center'>Creative</h3>
                <p class='text'>&emsp;Something incredible is waiting to be known vastness is bearable only through love star stuff harvesting star light a billion trillion hearts of the stars quis nostrum exercitationem ullam corporis suscipit laboriosam. Encyclopaedia galactica intelligent beings for which there's little good evidence Apollonius of Perga stirred by starlight?</p>
                <p class='text'>&emsp;The carbon in our apple pies autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur laws of physics courage of our questions sed quia non numquam eius modi tempora incidunt.</p>
              </div>
            </div>
            <div class='page'>
              <div style='text-align: center'>
                <h3>Writing</h3>
                <p class='text'>Something incredible is waiting<br>to be known<br>vastness is bearable only through love<br>star stuff harvesting star light<br>a billion trillion hearts<br>of the stars<br>quis nostrum exercitationem<br>ullam corporis suscipit laboriosam.<br>Encyclopaedia galactica intelligent beings<br>ship of the imagination<br>with pretty stories<br>for which there's little good evidence<br>Apollonius of Perga<br>stirred by starlight?</p>
              </div>
            </div>
            <div id='page-shading'></div>
          </div>
        </div>
      </div>
      <div class='book-bg web'>
        <div class='book'>
          <div id='book-shading'></div>
          <h1>Web Design</h1>
          <h3> 1.0</h3>
          <div class='contents'>
            <div id='back'><svg viewBox="0 0 512 512" width="100" title="chevron-circle-left">
                <path d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zM142.1 273l135.5 135.5c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L226.9 256l101.6-101.6c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L142.1 239c-9.4 9.4-9.4 24.6 0 34z" />
              </svg></div>
            <div class='page'>
              <h1>Web Design</h1>
              <p class='text'>&emsp;Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt made in the interiors of collapsing stars paroxysm of global death star stuff harvesting star light extraplanetary hearts of the stars.</p>
              <p class='text'>&emsp;Kindling the energy hidden in matter vanquish the impossible rogue white dwarf rogue descended from astronomers. Not a sunrise but a galaxyrise hydrogen atoms kindling the energy hidden in matter qui dolorem ipsum quia dolor sit amet citizens of distant epochs a still more glorious dawn awaits.</p>
            </div>
            <div class='page'>
              <div class='illus' style='background-image: url(https://images.unsplash.com/photo-1608760000795-547e78bfc003?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE3MDgyMTI&ixlib=rb-1.2.1&q=80)'>
              </div>
            </div>
            <div id='page-shading'></div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    $(".book-bg").click(function () {
  $(this).addClass("active");
});

$("#back svg").click(function () {
  event.stopPropagation();
  $(".book-bg").removeClass("active");
});

  </script>

  <style>

#shelf {
  display: flex;
  justify-content: center;
  padding-top: 3rem;
}

/* BOOK BINDINGS */
.book-bg {
  overflow: hidden;
  height: 32rem;
  margin: 2px;
  cursor: pointer;
  transition: margin 0.3s ease-in-out, box-shadow 0.3s ease-in-out,
    transform 0.3s ease-in-out;
  filter: grayscale(25%);
  border-radius: 4px;
  background: grey;
  box-shadow: 0 0.5rem 1rem 0rem rgba(0, 0, 0, 0.4);
  border-top-style: solid;
  border-top-width: 1px;
  border-image: linear-gradient(
    to right,
    #333,
    #333 15%,
    antiquewhite 30%,
    antiquewhite 70%,
    #333 85%,
    #333
  );
  border-image-slice: 1;
  order: 200;
}
.book-bg:hover {
  box-shadow: 0 0.5rem 3rem -0.5rem rgba(0, 0, 0, 0.4);
  z-index: 10;
  margin-top: -15px;
  transform: scale(1.03, 1.03);
}
/* END BOOK BINDINGS */

/* BOOK WIDTHS */
.graphic {
  width: 6rem;
}
.data {
  width: 5rem;
}
.photo {
  width: 5rem;
}
.landscape {
  width: 6rem;
}
.writing {
  width: 4rem;
}
.web {
  width: 5rem;
}
/* END BOOK WIDTHS */

/* TITLE SHADOWS */
.book h1,
h2,
h3,
h4,
h5 {
  text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.8);
}
.web .book h1,
h3 {
  text-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.6);
}
/* END TITLE SHADOWS */

/* DEFAULT BOOK ATTRIBUTES */
.book {
  display: flex;
  height: 100%;
  width: 100%;
  box-shadow: inset -0.35rem 0 0.5rem rgba(0, 0, 0, 0.4),
    inset 0.35rem 0 0.5rem rgba(0, 0, 0, 0.4);
  justify-content: center;
  align-items: center;
  writing-mode: vertical-rl;
}
.contents {
  opacity: 0;
}
/* END DEFAULT BOOK ATTRIBUTES */

/* GRAPHIC DESIGN */
.graphic .book {
  align-items: center;
  background: radial-gradient(
      ellipse at top,
      rgba(0, 0, 0, 0.35),
      rgba(0, 0, 0, 0.75)
    ),
    radial-gradient(ellipse at bottom, rgba(70, 70, 70, 0.5), transparent);
  font-family: "Unica One", cursive;
  color: darkorange;
}
/* END GRAPHIC DESIGN */

/* DATA VISUALIZATION */
.data .book {
  background: radial-gradient(
      ellipse at top,
      rgba(50, 10, 87, 0.55),
      rgba(0, 0, 0, 0.75)
    ),
    radial-gradient(ellipse at bottom, rgba(70, 70, 70, 0.5), transparent);
  font-family: "Smooch Sans", sans-serif;
  color: rgb(221, 206, 206);
}
/* END DATA VISUALIZATION */

/* PHOTOGRAPHY */
.photo .book {
  background: radial-gradient(
      ellipse at top,
      rgba(189, 147, 189, 0.55),
      rgba(0, 0, 0, 0.85)
    ),
    radial-gradient(ellipse at bottom, rgba(185, 154, 154, 0.5), transparent);
  font-family: "Nothing You Could Do", cursive;
  color: #212121;
}
/* END PHOTOGRAPHY */

/* LANDSCAPE DESIGN */
.landscape .book {
  background: radial-gradient(
      ellipse at top,
      rgba(2, 95, 18, 0.55),
      rgba(0, 0, 0, 0.75)
    ),
    radial-gradient(ellipse at bottom, rgba(70, 70, 70, 0.5), transparent);
  font-family: "Fredericka the Great", cursive;
  color: rgb(247, 229, 192);
}
/* END LANDSCAPE DESIGN */

/* CREATIVE WRITING */
.writing .book {
  background: radial-gradient(
      ellipse at top,
      rgba(94, 15, 6, 0.76),
      rgba(0, 0, 0, 0.75)
    ),
    radial-gradient(ellipse at bottom, rgba(70, 70, 70, 0.5), transparent);
  font-family: "Lora", serif;
  color: rgb(216, 191, 191);
}
/* END CREATIVE WRITING */

/* WEB DESIGN */
.web .book {
  background: radial-gradient(
      ellipse at top,
      rgba(255, 255, 255, 0.63),
      rgba(0, 0, 0, 0.75)
    ),
    radial-gradient(ellipse at bottom, rgba(70, 70, 70, 0.5), transparent);
  font-family: "Inconsolata", monospace;
  color: #333;
}
/* END WEB DESIGN */

/* OPEN BOOK */
.book-bg.active {
  box-shadow: 0 0.5rem 3rem -0.5rem rgba(0, 0, 0, 0.4);
  position: absolute;
  width: 61rem;
  height: 32rem;
  margin-top: -22px;
  z-index: 10;
  border-top-width: 0;
}
.contents {
  display: flex;
  position: absolute;
}
.book-bg.active .contents {
  background-color: antiquewhite;
  position: fixed;
  opacity: 100;
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  border-left-style: double;
  border-right-style: double;
  border-left-width: 4px;
  border-right-width: 4px;
  border-color: rgb(92, 92, 92);
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: antiquewhite;
  border-bottom-style: groove;
  border-bottom-color: rgb(155, 153, 153);
  border-bottom-width: 2px;
  color: #333;
  writing-mode: horizontal-tb;
  font-family: "Nothing You Could Do", cursive;
}
.page {
  display: flex;
  flex-direction: column;
  width: calc(50% - 4rem);
  height: calc(100% - 4em);
  margin: 2rem;
}
.page h1,
h3 {
  text-shadow: none;
}
.is-grid {
  display: grid;
  gap: 5px;
  grid-template: "1fr 1fr 1fr" "1fr 1fr 1fr" "1fr 1fr 1fr";
}
.illus {
  border: 5px solid white;
  flex: 1;
  background-size: cover;
}
.text {
  margin: 1rem;
}
#page-shading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(30, 30, 30, 0.1),
    transparent 25%,
    transparent 30%,
    rgba(30, 30, 30, 0.3) 48%,
    rgba(30, 30, 30, 0.4) 50%,
    transparent 50%,
    rgba(30, 30, 30, 0.3) 70%,
    transparent
  );
}
.book-bg.active #book-shading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    transparent 43%,
    rgba(30, 30, 30, 0.3) 44%,
    rgba(30, 30, 30, 0.5) 45%,
    rgba(30, 30, 30, 0.4) 50%,
    rgba(30, 30, 30, 0.65) 55%,
    rgba(30, 30, 30, 0.3) 56%,
    transparent 57%,
    transparent
  );
}
/* END OPEN BOOK */

/* BACK ARROW */
#back svg {
  position: absolute;
  border: none;
  width: 2rem;
  right: 0.25rem;
  top: 0.125rem;
  z-index: 10;
  opacity: 85%;
  filter: drop-shadow(0px 0px 2px black);
}
#back svg:hover {
  opacity: 100%;
  filter: drop-shadow(0px 0px 2px whitesmoke);
}

  </style>
</body>
</html>