API tools faq
paste
Advertisement
dylanohelps

Para Thread Page #1

dylanohelps
Jun 19th, 2013
3,628
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.00 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: #303030; }
  44.  
  45. ::-webkit-scrollbar-thumb:horizontal {
  46. height:30px;
  47. background-color: #303030; }
  48.  
  49. ::-webkit-scrollbar {
  50. height: 10px;
  51. width: 4px;
  52. background-color: #505050; }
  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: #0195ab;
  117. border: 1px solid #0195FF;
  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: #0195FF;
  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: #0195ab;
  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: #0195ab;
  172. border: 1px solid #0195FF;
  173. }
  174.  
  175. </style>
  176. <body>
  177. <div id="olympus">
  178. <div class="title">Para Threads</div>
  179. <div class="description">
  180. 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.
  181. </div>
  182. <div class="navigation">
  183. <a href="#">Home <div style="float: right; padding-right: 10px;">></div></a>
  184. <a href="#">Message <div style="float: right; padding-right: 10px;">></div></a>
  185. <a href="#">Link 1 <div style="float: right; padding-right: 10px;">></div></a>
  186. <a href="#">Link 2 <div style="float: right; padding-right: 10px;">></div></a>
  187. <a href="http://jakehelps.tumblr.com">&copy; Credit <div style="float: right; padding-right: 10px;">></div></a>
  188. </div>
  189. </div>
  190.  
  191. <div id="rome">
  192. <!- SECTION ->
  193. <div class="section">
  194. <div class="crown">Linger On</div>
  195. <div class="pdescription">
  196. 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.
  197. </div>
  198. <div class="plink"><a href="#">Thread<div style="float: right; padding-right: 10px;">></div></a></div>
  199. </div>
  200. <!- SECTION ->
  201. <div class="section">
  202. <div class="crown">Tell Me That You Love Me</div>
  203. <div class="pdescription">
  204. 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.
  205. </div>
  206. <div class="plink"><a href="#">Thread<div style="float: right; padding-right: 10px;">></div></a></div>
  207. </div>
  208. <!- SECTION ->
  209. <div class="section">
  210. <div class="crown">Baking My Way Into Your Heart</div>
  211. <div class="pdescription">
  212. 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.
  213. </div>
  214. <div class="plink"><a href="#">Thread<div style="float: right; padding-right: 10px;">></div></a></div>
  215. </div>
  216. <!- SECTION ->
  217. <div class="section">
  218. <div class="crown">Countless Ways</div>
  219. <div class="pdescription">
  220. 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.
  221. </div>
  222. <div class="plink"><a href="#">Thread<div style="float: right; padding-right: 10px;">></div></a></div>
  223. </div>
  224. <!- SECTION ->
  225. <div class="section">
  226. <div class="crown">Ballpark Date</div>
  227. <div class="pdescription">
  228. 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.
  229. </div>
  230. <div class="plink"><a href="#">Thread<div style="float: right; padding-right: 10px;">></div></a></div>
  231. </div>
  232. <!- SECTION ->
  233. <div class="section">
  234. <div class="crown">Bellemont Grove</div>
  235. <div class="pdescription">
  236. 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.
  237. </div>
  238. <div class="plink"><a href="#">Thread<div style="float: right; padding-right: 10px;">></div></a></div>
  239. </div>
  240. <!- SECTION ->
  241. <div class="section">
  242. <div class="crown">Take Me Out</div>
  243. <div class="pdescription">
  244. 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.
  245. </div>
  246. <div class="plink"><a href="#">Thread<div style="float: right; padding-right: 10px;">></div></a></div>
  247. </div>
  248. <!- SECTION ->
  249. <div class="section">
  250. <div class="crown">Lovestruck</div>
  251. <div class="pdescription">
  252. 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.
  253. </div>
  254. <div class="plink"><a href="#">Thread<div style="float: right; padding-right: 10px;">></div></a></div>
  255. </div>
  256. <!- SECTION ->
  257. <div class="section">
  258. <div class="crown">Lights, Camera, and Paparazzi</div>
  259. <div class="pdescription">
  260. 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.
  261. </div>
  262. <div class="plink"><a href="#">Thread<div style="float: right; padding-right: 10px;">></div></a></div>
  263. </div>
  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!