A site that displays information about books I've read for a class assignment
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

172 lines
7.3 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>The Magic Pomegranate</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name="description" content="The Magic Pomegranate">
  7. <meta charset="UTF-8">
  8. <link rel="preconnect" href="https://fonts.gstatic.com">
  9. <link href="css/styles.css" rel="stylesheet" media="screen">
  10. <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  11. <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></noscript>
  12. <link rel="manifest" href="static/site.webmanifest">
  13. <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
  14. <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
  15. <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
  16. <!-- Begin Inlined Google Fonts -->
  17. <style>
  18. /* cyrillic-ext */
  19. @font-face {
  20. font-family: 'Roboto';
  21. font-style: normal;
  22. font-weight: 300;
  23. font-display: swap;
  24. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format('woff2');
  25. unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  26. }
  27. /* cyrillic */
  28. @font-face {
  29. font-family: 'Roboto';
  30. font-style: normal;
  31. font-weight: 300;
  32. font-display: swap;
  33. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format('woff2');
  34. unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  35. }
  36. /* greek-ext */
  37. @font-face {
  38. font-family: 'Roboto';
  39. font-style: normal;
  40. font-weight: 300;
  41. font-display: swap;
  42. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format('woff2');
  43. unicode-range: U+1F00-1FFF;
  44. }
  45. /* greek */
  46. @font-face {
  47. font-family: 'Roboto';
  48. font-style: normal;
  49. font-weight: 300;
  50. font-display: swap;
  51. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format('woff2');
  52. unicode-range: U+0370-03FF;
  53. }
  54. /* vietnamese */
  55. @font-face {
  56. font-family: 'Roboto';
  57. font-style: normal;
  58. font-weight: 300;
  59. font-display: swap;
  60. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format('woff2');
  61. unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  62. }
  63. /* latin-ext */
  64. @font-face {
  65. font-family: 'Roboto';
  66. font-style: normal;
  67. font-weight: 300;
  68. font-display: swap;
  69. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2');
  70. unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  71. }
  72. /* latin */
  73. @font-face {
  74. font-family: 'Roboto';
  75. font-style: normal;
  76. font-weight: 300;
  77. font-display: swap;
  78. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');
  79. unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  80. }
  81. </style>
  82. <!-- End Inlined Google Fonts -->
  83. <!-- Matomo -->
  84. <script type="text/javascript">
  85. var _paq = window._paq = window._paq || [];
  86. /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  87. _paq.push(['trackPageView']);
  88. _paq.push(['enableLinkTracking']);
  89. (function() {
  90. var u = "//analytics.yeetpc.com/matomo/";
  91. _paq.push(['setTrackerUrl', u + 'matomo.php']);
  92. _paq.push(['setSiteId', '4']);
  93. var d = document,
  94. g = d.createElement('script'),
  95. s = d.getElementsByTagName('script')[0];
  96. g.type = 'text/javascript';
  97. g.async = true;
  98. g.src = u + 'matomo.js';
  99. s.parentNode.insertBefore(g, s);
  100. })();
  101. </script>
  102. <!-- End Matomo Code -->
  103. </head>
  104. <body>
  105. <div class="page-container">
  106. <div class="content-wrap">
  107. <!-- Top Navbar -->
  108. <div class="Navbar">
  109. <div class="Navbar__Link Navbar__Link-brand">
  110. <h1><a href="./">Outside Reading Assignment</a></h1>
  111. </div>
  112. <div class="Navbar__Link Navbar__Link-toggle">
  113. <i class="fa fa-bars"></i>
  114. </div>
  115. <nav class="Navbar__Items Navbar__Items--right">
  116. <div class="Navbar__Link">
  117. <a href="mailto:ravi@yeetpc.com">Contact Me</a>
  118. </div>
  119. </nav>
  120. </div>
  121. <!-- End Top Navbar -->
  122. <!-- Begin Top Banner -->
  123. <div class="banner">
  124. <div class="card-top-banner">
  125. <p class="top-banner-text-medium">The Magic Pomegranate</p>
  126. <br />
  127. </div>
  128. </div>
  129. <!-- End Top Banner -->
  130. <!-- Begin Responsive Layout -->
  131. <div class="main-box">
  132. <div class="main-box-text">
  133. Type: Short Story<br />Author: Peninnah Schram<br />Publish Date: 2008<br />Publisher: Lerner Publishing Group<br />Reflection: This Jewish story really captures the true meaning of selflessness using symbolism. It uses the pomegranate as a symbol for material objects, and shows that in order for an act to be considered truly altruistic, one must be willing to give up something of their own. If nothing is given up & you're left with the same as before, it is not true giving.
  134. </div>
  135. </div>
  136. <!-- End Responsive Layout -->
  137. <!-- Begin Footer -->
  138. <div class="footer">
  139. <div class="footer-links">
  140. <p>Source code <a href="https://github.com/Rav4s/english-books-website">on GitHub</a>.</p>
  141. <p style="border-bottom: 100px;">© 2021 Ravi Shah</p>
  142. </div>
  143. </div>
  144. <!-- End Footer -->
  145. </div>
  146. </div>
  147. <script src="js/expandnavbar.js" defer></script>
  148. </body>
  149. </html>