API tools faq
paste
Advertisement
dylanohelps

Fanfic Rec Page #1

dylanohelps
Jun 19th, 2013
3,524
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.19 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!----------------------
  4.  
  5. FANFICTION/PARA-THREAD REC #1 by JAKEHELPS
  6. #1: Do not redistribute & claim as your own.
  7. #2: Do not remove the credit.
  8.  
  9. ---------------------------->
  10.  
  11. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  12. <head>
  13. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  14.  
  15. <title>{Title}</title>
  16. <link rel="shortcut icon" href="{Favicon}" />
  17.  
  18. <link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
  19.  
  20. <link href='http://fonts.googleapis.com/css?family=Euphoria+Script' rel='stylesheet' type='text/css'>
  21.  
  22. <link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
  23.  
  24. </head>
  25. <style type="text/css">
  26. body {
  27. padding: 0;
  28. margin: 0;
  29. list-style: none;
  30. background-color: #FEFEFE;
  31. background-attachment: fixed;
  32. background-image:url('http://25.media.tumblr.com/tumblr_lsdjv9k5E21r2gm7fo4_250.jpg');
  33.  
  34. }
  35.  
  36. a {
  37. text-decoration: none;
  38. color: black;
  39. }
  40.  
  41. ::-webkit-scrollbar-thumb:vertical {
  42. height:10px;
  43. background-color: #9a0202; }
  44.  
  45. ::-webkit-scrollbar-thumb:horizontal {
  46. height:30px;
  47. background-color: #9a0202; }
  48.  
  49. ::-webkit-scrollbar {
  50. height: 10px;
  51. width: 5px;
  52. background-color: transparent; }
  53.  
  54.  
  55. #olympus {
  56. float: left;
  57. width: 380px;
  58. height: 100%;
  59. padding: 20px;
  60. position: fixed;
  61. background-color: #202020;
  62. text-align: center;
  63. background-image:url('http://i93.photobucket.com/albums/l78/andrew_jason12/black_lozenge.png');
  64. }
  65.  
  66. #rome {
  67. width: 930px;
  68. display: inline-block;
  69. position: absolute;
  70. height: auto;
  71. right: 0;
  72. margin-right: 10px;
  73. margin-top: 20px;
  74. padding-bottom: 60px;
  75. }
  76.  
  77. .title {
  78. text-align: center;
  79. display: block;
  80. margin-top: 200px;
  81. height: auto;
  82. font-family: quicksand;
  83. font-size: 30px;
  84. color: #FFFFFF;
  85. padding-bottom: 4px;
  86. border-bottom: 3px double #303030;
  87. text-transform: uppercase;
  88. letter-spacing: 5px;
  89. }
  90.  
  91. .description {
  92. margin-top: 10px;
  93. display: block;
  94. padding: 20px;
  95. font-family: cambria;
  96. font-size: 12px;
  97. color: #808080;
  98. text-align: center;
  99. }
  100.  
  101. .navigation {
  102. margin-top: 40px;
  103. }
  104.  
  105. .navigation a {
  106. display: block;
  107. padding: 5px;
  108. padding-left: 10px;
  109. margin-top: 5px;
  110. border-radius: 1px;
  111. font-family: quicksand;
  112. font-size: 16px;
  113. text-align: left;
  114. color: #FFFFFF;
  115. text-transform: uppercase;
  116. background-color: #9a0202;
  117. border: 1px solid #9e1f1f;
  118. -webkit-transition: all 0.2s ease-in-out;
  119. -moz-transition: all 0.2s ease-in-out;
  120. -o-transition: all 0.2s ease-in-out;
  121. -ms-transition: all 0.2s ease-in-out;
  122. transition: all 0.2s ease-in-out;
  123. }
  124.  
  125. .navigation a:hover {
  126. background-color: #9e1f1f;
  127. padding-left: 40px;
  128. }
  129.  
  130. .section {
  131. width: 300px;
  132. background-color: #303030;
  133. float: left;
  134. margin: 5px;
  135. }
  136.  
  137. .crown {
  138. display: block;
  139. background-color: #9a0202;
  140. font-family: fjalla one;
  141. font-size: 14px;
  142. color: #FFFFFF;
  143. text-align: left;
  144. padding: 10px;
  145. text-transform: uppercase;
  146. letter-spacing: 2px;
  147. height: auto;
  148. }
  149.  
  150. .pdescription {
  151. display: block;
  152. height: 170px;
  153. background-color: #202020;
  154. padding: 20px;
  155. font-family: cambria;
  156. font-size: 12px;
  157. color: #808080;
  158. overflow: auto;
  159. }
  160.  
  161. .plink a {
  162. display: block;
  163. padding: 5px;
  164. padding-left: 10px;
  165. border-radius: 1px;
  166. font-family: quicksand;
  167. font-size: 16px;
  168. text-align: left;
  169. color: #FFFFFF;
  170. text-transform: uppercase;
  171. background-color: #9a0202;
  172. border: 1px solid #9e1f1f;
  173. }
  174.  
  175. .information {
  176. display: block;
  177. padding: 10px;
  178. font-family: cambria;
  179. font-size: 12px;
  180. color: #808080;
  181. height: 40px;
  182. overflow: auto;
  183. }
  184.  
  185. .fsection {
  186. display: block;
  187. margin-bottom: 2px;
  188. }
  189.  
  190. .label {
  191. float: left;
  192. margin-right: 5px;
  193. border-bottom: 1px solid #505050;
  194. }
  195.  
  196. </style>
  197. <body>
  198. <div id="olympus">
  199. <div class="title">fANFICTION RECS</div>
  200. <div class="description">
  201. This is where you will insert your description about your fanfics and your para threads. Should you have any problem with sorting out how to add in a section or edit anything, you are free to contact me on my page.
  202. </div>
  203. <div class="navigation">
  204. <a href="#">Home <div style="float: right; padding-right: 10px;">></div></a>
  205. <a href="#">Message <div style="float: right; padding-right: 10px;">></div></a>
  206. <a href="#">Link 1 <div style="float: right; padding-right: 10px;">></div></a>
  207. <a href="#">Link 2 <div style="float: right; padding-right: 10px;">></div></a>
  208. <a href="http://jakehelps.tumblr.com">&copy; Credit <div style="float: right; padding-right: 10px;">></div></a>
  209. </div>
  210. </div>
  211.  
  212. <div id="rome">
  213. <!- SECTION ->
  214. <div class="section">
  215. <div class="crown">Linger On</div>
  216. <div class="information">
  217. <div class="fsection"><div class="label">Pairing:</div> Stiles Stilinski & Derek Hale</div>
  218. <div class="fsection"><div class="label">Rating:</div> Mature</div>
  219. <div class="fsection"><div class="label">Warnings:</div> Minor Character Death, Blood & Gore</div>
  220. </div>
  221. <div class="pdescription">
  222. This is the box where you add in the description of your para thread. If you are really into your organization of your paras, then this is another helpful and fun way for you and your readers to keep track about what this thread is about. Providing a summary about your thread is better to ensure that you or other readers understand what the thread is about and who the thread is being talked about.
  223. </div>
  224. <div class="plink"><a href="#">Fanfiction Link<div style="float: right; padding-right: 10px;">></div></a></div>
  225. </div>
  226. <!- SECTION ->
  227. <div class="section">
  228. <div class="crown">Online!</div>
  229. <div class="information">
  230. <div class="fsection"><div class="label">Pairing:</div> Naruto Uzumaki & Sasuka Uchiha</div>
  231. <div class="fsection"><div class="label">Rating:</div> Mature</div>
  232. </div>
  233. <div class="pdescription">
  234. This is the box where you add in the description of your para thread. If you are really into your organization of your paras, then this is another helpful and fun way for you and your readers to keep track about what this thread is about. Providing a summary about your thread is better to ensure that you or other readers understand what the thread is about and who the thread is being talked about.
  235. </div>
  236. <div class="plink"><a href="#">Fanfiction Link<div style="float: right; padding-right: 10px;">></div></a></div>
  237. </div>
  238. <!- SECTION ->
  239. <div class="section">
  240. <div class="crown">Baking My Way Into Your Heart</div>
  241. <div class="information">
  242. <div class="fsection"><div class="label">Pairing:</div> Stiles Stilinski & Derek Hale</div>
  243. <div class="fsection"><div class="label">Rating:</div> Mature</div>
  244. </div>
  245. <div class="pdescription">
  246. This is the box where you add in the description of your para thread. If you are really into your organization of your paras, then this is another helpful and fun way for you and your readers to keep track about what this thread is about. Providing a summary about your thread is better to ensure that you or other readers understand what the thread is about and who the thread is being talked about.
  247. </div>
  248. <div class="plink"><a href="#">Fanfiction Link<div style="float: right; padding-right: 10px;">></div></a></div>
  249. </div>
  250. <!- SECTION ->
  251. <div class="section">
  252. <div class="crown">Zombieland</div>
  253. <div class="information">
  254. <div class="fsection"><div class="label">Pairing:</div> Various</div>
  255. <div class="fsection"><div class="label">Rating:</div> Mature</div>
  256. <div class="fsection"><div class="label">Warnings:</div> Minor Character Death, Blood & Gore</div>
  257. </div>
  258. <div class="pdescription">
  259. This is the box where you add in the description of your para thread. If you are really into your organization of your paras, then this is another helpful and fun way for you and your readers to keep track about what this thread is about. Providing a summary about your thread is better to ensure that you or other readers understand what the thread is about and who the thread is being talked about.
  260. </div>
  261. <div class="plink"><a href="#">Fanfiction Link<div style="float: right; padding-right: 10px;">></div></a></div>
  262. </div>
  263. <!- ADD SECTION AFTER THIS LINE ->
  264. </div>
  265.  
  266.  
  267.  
  268.  
  269.  
  270.  
  271. </body>
  272. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!