diff options
Diffstat (limited to 'bookshelf.html')
| -rw-r--r-- | bookshelf.html | 169 |
1 files changed, 167 insertions, 2 deletions
diff --git a/bookshelf.html b/bookshelf.html index 491302e..aaba135 100644 --- a/bookshelf.html +++ b/bookshelf.html @@ -6,6 +6,7 @@ <link rel="icon" type="image/jpg" href="assets/compass.jpg"/> <link rel="stylesheet" href="css/normalize.css"/> <link rel="stylesheet" href="css/style.css"/> + <link rel="stylesheet" href="css/bookshelf.css"/> </head> <body> <header> @@ -19,7 +20,171 @@ <a href="https://j-james.me/bookshelf">bookshelf</a> </nav> </header> - <br> - <span>Under Construction</span> + <main> + <h2>Philosophy</h2> + <div class="shelf" id="philosophy"> + <div> + <img src="assets/ishmael.jpg" class="cover"/> + <h3>Ishmael</h3> + <i>Daniel Quinn</i> + </div> + <div> + <img src="assets/notes-from-the-underground.jpg" class="cover"/> + <h3>Notes from the Underground</h3> + <i>Fyodor Dostoevsky</i> + </div> + <div> + <img src="assets/slaughterhouse-five.jpg" class="cover"/> + <h3>Slaughterhouse-Five</h3> + <i>Kurt Vonnegut</i> + </div> + <!-- <div> + <img src="assets/siddhartha.jpg" class="cover"/> + <h3>Siddhartha</h3> + <i>Hermann Hesse</i> + </div> --> + </div> + <hr> + <!-- To Kill a Mockingbird, And Then There Were None--> + <h2>Romantic</h2> + <div class="shelf" id="academia"> + <!-- The Scarlet Letter, The Fault in Our Stars --> + <div> + <img src="assets/twilight.jpg" class="cover"/> + <h3>Twilight</h3> + <i>Stephenie Meyer</i> + </div> + <div> + <img src="assets/the-picture-of-dorian-gray.jpg" class="cover"/> + <h3>The Picture of Dorian Gray</h3> + <i>Oscar Wilde</i> + </div> + <div> + <img src="assets/the-secret-history.jpg" class="cover"/> + <h3>The Secret History</h3> + <i>Donna Tartt</i> + </div> + </div> + <hr> + <h2>Dystopian</h2> + <div class="shelf" id="dystopia"> + <div> + <img src="assets/the-giver.jpg" class="cover"/> + <h3>The Giver</h3> + <i>Lois Lowry</i> + </div> + <div> + <img src="assets/fahrenheit-451.jpg" class="cover"/> + <h3>Fahrenheit 451</h3> + <i>Ray Bradbury</i> + </div> + <div> + <img src="assets/nineteen-eighty-four.jpeg" class="cover"/> + <h3>Nineteen Eighty-Four</h3> + <i>George Orwell</i> + </div> + </div> + <hr> + <h2>Fantasy</h2> + <div class="shelf" id="fantasy"> + <div> + <img src="assets/narnia.jpg" class="cover"/> + <h3>Narnia</h3> + <i>C.S. Lewis</i> + </div> + <div> + <img src="assets/harry-potter.jpg" class="cover"/> + <h3>Harry Potter</h3> + <i>J.K. Rowling</i> + </div> + <div> + <img src="assets/the-lord-of-the-rings.jpg" class="cover"/> + <h3>The Lord of the Rings</h3> + <i>J.R.R. Tolkin</i> + </div> + </div> + <hr> + <h2>Short Stories</h2> + <div class="shelf" id="short-stories"> + <div> + <img src="assets/the-library-of-babel.png" class="icon"/> + <h3>The Library of Babel</h3> + <i>Jorge Luis Borges</i> + </div> + <div> + <img src="assets/the-lottery.png" class="icon"/> + <h3>The Lottery</h3> + <i>Shirley Jackson</i> + </div> + <div> + <img src="assets/harrison-bergeron.jpg" style="width: 80px;" class="icon"/> + <h3>Harrison Bergeron</h3> + <i>Kurt Vonnegut</i> + </div> + </div> + <hr> + <h2>Comics</h2> + <div class="shelf" id="comics"> + <!-- Maus, March, Perseopolis, Copper --> + <div> + <img src="assets/calvin-and-hobbes.jpg" class="cover"/> + <h3>Calvin and Hobbes</h3> + <i>Bill Watterson</i> + </div> + <div> + <img src="assets/bone.jpg" class="cover"/> + <h3>BONE</h3> + <i>Jeff Smith</i> + </div> + <div> + <img src="assets/homestuck.svg" class="icon"/> + <h3><a href="https://homestuck.com">Homestuck</a></h3> + <i>Andrew Hussie</i> + </div> + <div> + <img src="assets/hark.png" class="cover"/> + <h3><a href="http://www.harkavagrant.com/">Hark! a Vagrant</a></h3> + <i>Kate Beaton</i> + </div> + <div> + <img src="assets/a-softer-world.png" class="icon"/> + <h3><a href="https://www.asofterworld.com/">a softer world</a></h3> + <i>Emily Horne and Joey Comeau</i> + </div> + <div> + <img src="assets/xkcd.png" class="icon"/> + <h3><a href="https://xkcd.org">xkcd</a></h3> + <i>Randall Munroe</i> + </div> + </div> + <hr> + <h2>Media</h2> + <div class="shelf" id="media"> + <div> + <img src="assets/2001-a-space-odyssey.jpg" class="poster"/> + <p><h3>2001: A Space Odyssey</h3></p> + </div> + <div> + <img src="assets/blade-runner.jpg" class="poster"/> + <p><h3>Blade Runner</h3></p> + </div> + <div> + <img src="assets/dr-strangelove.jpg" class="poster"/> + <p><h3>Dr. Strangelove</h3></p> + </div> + <div> + <img src="assets/avatar-the-last-airbender.jpg" class="poster"/> + <p><h3>Avatar: The Last Airbender</h3></p> + </div> + <div> + <img src="assets/my-neighbor-totoro.jpg" class="poster"/> + <p><h3>My Neighbor Totoro</h3></p> + </div> + </div> + <hr> + </main> + <footer> + <p> © 2020-2021 j-james </p> + </footer> </body> </html> |