FanFic.Text Archive Layout

Jun 13th, 2022
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.31 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Insert Your Title Here</title>
  7. </head>
  8. <style>
  9. #pagecontent {
  10. height: auto;
  11. max-width: 820px;
  12. margin: 0 auto;
  13. }
  15. #content {
  16. background: url();
  17. height: auto;
  18. max-width: 820px;
  19. background-color: #F8F5F1;
  20. font-size: 17px;
  21. letter-spacing: 1px;
  22. border: 3px solid #221E1C;
  23. border-radius: 3px;
  24. float: left;
  25. }
  27. #fictxt {
  28. padding: 0px;
  29. font-size: 17px;
  30. letter-spacing: 1px;
  31. float: left;
  32. margin-right: 2%;
  33. margin-left: 2%;
  34. }
  36. #nav {
  37. border-bottom: 1px dashed #000;
  38. font-size: 22px;
  39. text-align: center;
  40. }
  42. ul{
  43. border-bottom: 1px dashed #000;
  44. font-size: 22px;
  45. text-align: center;
  46. margin-bottom: 10px;
  47. margin-top: 1px;
  48. }
  50. body {
  51. background: url();
  52. background-color: #8D818C;
  53. color: #171412;
  54. font-size: 16px;
  55. font-family: "Georgia", serif;
  56. margin: 0 auto; /* centers the text */
  57. max-width: 1000px; /* defines the maximum width of your text */
  58. /*text-align:center;*/
  59. }
  61. hr.solid {
  62. border: 1px solid #5A5049;
  63. }
  65. p {
  66. margin-right: 5%;
  67. margin-left: 5%;
  68. }
  70. h1 {
  71. border-bottom: 1px solid #000;
  72. padding: 5px;
  73. font-size: 29px;
  74. color: #F8F5F1;
  75. font-family: "Georgia", serif;
  76. font-weight: 300;
  77. background-color: #2D434E;
  78. text-align: center;
  79. margin-top: auto;
  80. margin-bottom: auto;
  81. }
  83. li {
  84. display: inline-block;
  85. padding: 5px;
  86. font-size: 16px;
  87. }
  89. a:link {
  90. color: #CA2E55;
  91. background-color: transparent;
  92. text-decoration: none;
  93. }
  95. a:visited {
  96. color: #CA2E55;
  97. background-color: transparent;
  98. text-decoration: none;
  99. }
  101. h2{
  102. text-align: center;
  103. }
  105. h3{
  106. text-align: center;
  107. }
  109. h4{
  110. text-align: center;
  111. }
  113. a:hover {
  114. color: #6C969D;
  115. background-color: transparent;
  116. text-decoration: underline;
  117. }
  119. a:active {
  120. color: blueviolet;
  121. background-color: transparent;
  122. text-decoration: underline;
  123. }
  125. </style>
  126. <body>
  127. <div id="pagecontent">
  128. <div id="content">
  129. <h1>FanFic.Text Archive Layout</h1>
  130. <ul>
  131. <li><a href="">Link 1</a></li>
  132. <li><a href="">Link 2</a></li>
  133. <li><a href="">Link 3</a></li>
  134. <li><a href="">Link 4</a></li>
  135. <li><a href="">Link 5</a></li>
  136. </ul>
  137. <div id="fictxt">
  138. <p>This is a style I made which is inspired by old fan fic archive personal websites I've come across! Such as these two right here: <a href="">Fanworks By Kass</a> & <a href="">Speranza's Fiction</a>.</p>
  139. <p>I'm using this code right now in my Spicy Fanfic Page in The Spice Zone of the Mayalock Zone!</p>
  140. <p><i>This style is also mobile friendly/responsive as well!</i> <a href="">(Thank you Learn.Sadgrl.Online!)</a> This is my first ever responsive page I've made myself from scratch so please forgive me if there any hiccups in my code.</p>
  141. <hr class="solid">
  142. <p>While this site is inspired by personal fanfic archive sites, this style can be used for a variety of purposes. (Preferably of the text centric variety!)</p>
  143. <p>Feel free to add on to this code or edit this style as well for your own personal site if you want to add some flourishes! This layout has the spirit of transformative fandom, andI encourage transformational use of this code! Go ham!!!</p>
  144. <p>Credit/Linking back would be greatly appreciated too if you use this layout.</p>
  145. <p><a href="">You can get the code here!</a></p>
  146. <hr class="solid">
  147. <h2>Lorem Ipsum</h2>
  148. <h3>Chapter One</h3>
  149. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum ex nec turpis porttitor sagittis. Duis consequat elementum dignissim. Duis imperdiet, neque quis eleifend viverra, lectus sapien dignissim mi, sed fermentum elit velit at metus. Morbi enim ipsum, lacinia sit amet iaculis eget, semper eu erat. Quisque sollicitudin tortor at dictum imperdiet. Aliquam pulvinar arcu massa, et mattis lacus pharetra vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum condimentum tortor non nibh congue hendrerit.</p>
  151. <p>
  152. In accumsan nisi augue, quis pulvinar ligula lacinia vel. Phasellus sodales augue ac massa ornare porttitor. Sed tempor aliquet nisi. Phasellus odio ligula, pellentesque in tortor in, malesuada consectetur turpis. Proin a aliquet tellus, vestibulum facilisis risus. Nullam malesuada viverra porttitor. Fusce et purus scelerisque, pretium nisl in, ullamcorper sem. Maecenas eget blandit felis, vitae vestibulum nulla. Nunc in venenatis erat. Nam tempor et nulla pretium iaculis. Morbi laoreet, lectus vitae tempus aliquet, velit nunc dignissim nunc, non ultricies sapien odio eget tellus.</p>
  154. <p>
  155. Nam magna metus, varius non dolor nec, tincidunt eleifend massa. Nunc erat tortor, consequat at purus eget, vehicula ultricies nulla. Vivamus euismod, velit sed faucibus feugiat, eros tortor commodo eros, eu molestie risus orci pretium velit. Phasellus blandit, mi eget interdum vulputate, dolor urna ullamcorper sem, at gravida urna erat vitae sem. Etiam ornare mauris tortor, ac pellentesque mauris rutrum id. Nullam vel mauris quis nibh ullamcorper congue. Donec ex ligula, hendrerit fringilla libero in, imperdiet facilisis est. Integer ac iaculis massa, eu viverra neque. Cras nibh odio, imperdiet in metus id, pellentesque pulvinar justo. </p>
  156. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum vel orci in auctor. Etiam neque tortor, rutrum eu volutpat eget, blandit ut mi. Vestibulum ullamcorper luctus urna nec lacinia. Nullam id dapibus sapien, non hendrerit tellus. Sed non porttitor orci.</p>
  157. <p>Aenean non viverra lectus. Donec arcu ex, porttitor sed scelerisque non, ultrices a nulla. Suspendisse euismod tincidunt arcu ac congue. Cras et urna purus. Vestibulum ac nisi egestas, feugiat lorem venenatis, luctus libero. Vivamus varius maximus nunc, non ultrices nunc laoreet a. Vivamus sed orci interdum, lacinia justo sit amet, ultrices eros. Fusce ullamcorper augue auctor elit laoreet sagittis. </p>
  159. <p> Suspendisse rutrum ultricies gravida. Praesent eget auctor nisl. Nam consequat blandit placerat. Nunc eleifend, augue id lobortis sagittis, mi urna consequat orci, eget congue risus nulla ut nulla. Proin a leo ac nulla iaculis vestibulum suscipit vitae tortor. Suspendisse lacinia aliquet leo, vitae placerat libero tempor in. Nam eu mi augue. Nunc imperdiet nibh nec eros posuere, sed dapibus augue porta. Ut elementum elit enim, id mollis nisi ornare quis. Sed mollis odio odio, quis lacinia felis tempor a.</p>
  161. <p>Duis bibendum eros id lorem blandit sagittis. Vestibulum fermentum ipsum id augue consequat condimentum. Sed lorem ipsum, maximus ac porta quis, porttitor eget est. Suspendisse mattis accumsan ligula et volutpat. Vestibulum id elementum mi. Nullam ornare tristique consequat. Fusce cursus elit tellus, eu sodales lectus accumsan sit amet. </p>
  162. <p>To be continued...</p>
  163. <hr class="solid">
  164. <p><a href="#top">Back to top!</a></p>
  165. </div>
  166. </div>
  167. </div>
  168. </body>
  169. </html>
Add Comment
Please, Sign In to add comment