fantasy1x1

Network Theme 01

Dec 6th, 2013
4,130
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.03 KB | None | 0 0
  1. <!--page #01 by fantasieswriter (aka kyla). meant for locations in your roleplay-->
  2.  
  3. <head>
  4.  
  5.  
  6. <link rel="shortcut icon" href="{favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{rss}">
  8.  
  9. <style type="text/css">
  10.  
  11. body
  12. {font-family: times;
  13. font-size: 11px;
  14. color: #000;
  15. background-position: fixed;
  16. background-attachment:fixed;
  17. background-repeat:repeat;
  18. background-color:#fff;}
  19.  
  20. a:link, a:active, a:visited{
  21. color: #777777;
  22. text-decoration: none;
  23.  
  24. }  
  25.  
  26.  
  27.  
  28.  
  29.  
  30. #all {
  31.     margin:30;
  32.     margin-left:20%;
  33.     margin-top:85px;
  34. }
  35.  
  36. #row {
  37.     width:360px;
  38.     height:360px;
  39.     padding:0px;
  40.     background-color:#fff;
  41. }
  42.  
  43. #poster {
  44.     margin-top:20px;
  45.     width:360px;
  46.     margin-bottom:300px;
  47.     margin-left:-150px;
  48.     background-color:#fff;
  49.     position:float;
  50. }
  51.  
  52. #posterimage img {
  53.     width:350px;
  54.     height:350px;
  55.     border:1px solid #ddd;
  56.     padding:6px;
  57. }
  58.  
  59.  
  60. #about {
  61.     text-align:left;
  62.     margin-top:5px;
  63.     padding:10px;
  64.     padding-top:10px;
  65.     padding-left:10px;
  66.     margin-bottom:20px;
  67.     position:absolute;
  68.     width:340px;
  69.     max-height:340px;
  70.     border:2px solid #f0f0f0;
  71.     font-family: times;
  72.     opacity:0;
  73.     font-size:9px;
  74.     background:white;
  75.     color:#000;
  76. }
  77.  
  78. #about a {
  79.     color:white;
  80.     background-color:black;
  81. }
  82.  
  83. #row:hover #about {
  84.     opacity:.98;
  85.     margin-top:0px;
  86.     height:340px;
  87.     -webkit-transition: all 0.5s ease-out;
  88. -moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;
  89. }
  90.  
  91. #name {
  92.     font-family:georgia;
  93.     font-size:10px;
  94.     text-align:center;
  95.     text-transform:lowercase;
  96. }
  97.  
  98.  
  99. #top {
  100.     width:550px;
  101.     height:auto;
  102.     font-family: times new roman;
  103.     font-size:11px;
  104.     margin-left: 30.5%;
  105.     line-height:18px;
  106.     padding:2px;
  107.     margin-top: 20px;
  108.     text-align:center;
  109.     text-transform:lowercase;
  110.     background-color:#fff;
  111. }
  112.  
  113. #town {
  114.     font-size:13px;
  115.     color:white;
  116.     background-color:black;
  117.     font-family:'cambria';
  118.     letter-spacing: 1px;
  119.     text-align: center;
  120.     padding:4px;
  121.     width: 120px;
  122.     position:float;
  123.     margin-top:5px;  
  124.     margin-bottom:-12px;
  125.     font-style:italic;
  126. }
  127.  
  128. #town a {
  129.     color:white;
  130. }
  131.  
  132. .title {
  133.     height:20px;
  134.     width:110%;
  135.     color:#000;
  136.     background-color:white;
  137.     font-family:georgia;
  138.     font-size:20px;
  139.     text-align:center;
  140.     letter-spacing:1px;
  141.     text-transform:lowercase;
  142.     padding:1px;
  143.     font-weight:bold;
  144.     font-style:italic;
  145.     margin-top:-1px;
  146.     margin-left:200px;
  147.     text-shadow:2px 2px #e8e8e8;
  148.     position:fixed;
  149. }
  150.  
  151. .title a {
  152.     color:#eeeeee;
  153.     text-decoration:none;
  154. }
  155.  
  156. .description {
  157.     font-family:'cambria';
  158.     font-size:12px;
  159.     position:fixed;
  160.     background-color:white;
  161.     width:900px;
  162.     padding:20px;
  163.     max-height:300px;
  164.     margin-top:-22px;
  165.     margin-left:-275px;
  166.     border-left:70px solid white;
  167.     border-right:150px solid white;
  168. }
  169.  
  170. .links {
  171.     position:fixed;
  172.     width:100%;
  173.     background-color:black;
  174.     margin-left:-250px;
  175.     margin-top:20px;
  176.     padding:-1px;
  177.     padding-left:20px;
  178. }
  179.  
  180. .links a {
  181.     display:inline-block;
  182.     color:white;
  183.     background-color:black;
  184.     padding:6px;
  185.     font-family:'Tunga';
  186.     font-size:13px;
  187.     font-style:normal;
  188.     text-transform:uppercase;
  189.     margin-left:5px;
  190. }
  191.  
  192. .links a:hover {
  193.     color:black;
  194.     background-color:white;
  195. }
  196.  
  197. </style>
  198.  
  199.  
  200. <div id="border-top"></div>
  201.  
  202.  
  203.    
  204. </div>
  205. <div id="top">
  206.  
  207. <div class="description">your plot or whatever you want to put goes right here. i'd suggest making this long-ish, just because everything looks better with detail. but you will run out of room. however, if you want to fix the coding and make it longer just scroll up there to ".description" and find "max-height" and increase the number. but anyway, there's enough room here for quite the description. you'll also have to do just a little coding with the columns and stuff below if your description is too big. find "#all". once you get there find "margin-top" and increase that number until you get the desired spot.
  208.  
  209.  
  210. <div class="title">fantastical locations</div>
  211. <div class="links">
  212. <a href="/">home</a>
  213. <a href="/ask">ask</a>
  214. <a href="/">extra 1</a>
  215. <a href="/">extra 2</a>
  216. <a href="/">extra 3</a>
  217. <a href="/">extra 4</a>
  218. <a href="http://www.tumblr.com/">dashboard</a>
  219. </div></div>
  220. </div>
  221.  
  222.  
  223. <table id="all" border="0" cellpadding="0" cellspacing="20">
  224.  
  225.  
  226. <!-- start of first column-->
  227. <!--start first row-->
  228. <td><div id="row">
  229. <div id="poster">
  230. <div id="town"><a href="http://fantasieswriter.tumblr.com/"> NAME OF TOWN </a></div><!--name of the town, and if you want to expand it has a link if you wanna expand on it and make this just a summary-->
  231. <p>
  232. <div id="about">
  233. <span style="color:#fff; background-color:#000; padding:3px;">TOWN NAME:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Town name</span><p>
  234. <span style="color:#fff; background-color:#000; padding:3px;">LOCATION:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Country Location</span><p>
  235. <span style="color:#fff; background-color:#000; padding:3px;">TOWN AGE:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Age of the Town</span><p>
  236. <span style="color:#fff; background-color:#000; padding:3px;">KING/QUEEN OR LORD/LADY:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Ruler of the Town</span><p>
  237. <span style="color:#fff; background-color:#000; padding:3px;">INFORMATION:</span><p>
  238. <span style="font-family:georgia; font-style:italic; margin-top:11px; padding:2px;">This is where you're going to write all about your town and what might happen inside of it. This can vary from the creatures you can find outside the gates of the town to those within. Or simply the villagers there. It doesn't have to be very long, but I'd suggest making it pretty long just because it'll look a lot better with a longer description of the town. Plus you want your readers to know as much about the town as they can and you don't want them to be confused at all.
  239. <p>Also, for those who need to know and aren't "good" with coding and such, the size for these images is:
  240. <center>350 x 350 px</center>
  241. <p>Putting some random coding examples in this description to help out too. Hope y'all enjoy using the coding <3
  242. </span>
  243. <div id="name"><p>
  244.  
  245. </div>
  246. </div>
  247. <div id="posterimage"><img src="http://media.tumblr.com/530fb5208cadcf959b5b2a5f18117935/tumblr_inline_mvxidfKOMK1s8uon6.png"/></div><!--replace this url with the image url you want to use-->    
  248. </div>
  249.  
  250. </div></td>
  251.  
  252. <!--end of first row-->  
  253.  
  254. <!--start second row-->
  255. <td><div id="row">
  256. <div id="poster">
  257. <div id="town"><a href="http://fantasieswriter.tumblr.com/"> NAME OF TOWN </a></div><!--name of the town, and if you want to expand it has a link if you wanna expand on it and make this just a summary-->
  258. <p>
  259. <div id="about">
  260. <span style="color:#fff; background-color:#000; padding:3px;">TOWN NAME:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Town name</span><p>
  261. <span style="color:#fff; background-color:#000; padding:3px;">LOCATION:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Country Location</span><p>
  262. <span style="color:#fff; background-color:#000; padding:3px;">TOWN AGE:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Age of the Town</span><p>
  263. <span style="color:#fff; background-color:#000; padding:3px;">KING/QUEEN OR LORD/LADY:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Ruler of the Town</span><p>
  264. <span style="color:#fff; background-color:#000; padding:3px;">INFORMATION:</span><p>
  265. <span style="font-family:georgia; font-style:italic; margin-top:11px; padding:2px;">This is where you're going to write all about your town and what might happen inside of it. This can vary from the creatures you can find outside the gates of the town to those within. Or simply the villagers there. It doesn't have to be very long, but I'd suggest making it pretty long just because it'll look a lot better with a longer description of the town. Plus you want your readers to know as much about the town as they can and you don't want them to be confused at all.
  266. <p>Also, for those who need to know and aren't "good" with coding and such, the size for these images is:
  267. <center>350 x 350 px</center>
  268. <p>Putting some random coding examples in this description to help out too. Hope y'all enjoy using the coding <3
  269. </span>
  270. <div id="name"><p>
  271.  
  272. </div>
  273. </div>
  274. <div id="posterimage"><img src="http://media.tumblr.com/530fb5208cadcf959b5b2a5f18117935/tumblr_inline_mvxidfKOMK1s8uon6.png"/></div><!--replace this url with the image url you want to use-->    
  275. </div>
  276.  
  277. </div></td>
  278. <!--end of second row-->  
  279.  
  280. <!--start third row-->
  281. <td><div id="row">
  282. <div id="poster">
  283. <div id="town"><a href="http://fantasieswriter.tumblr.com/"> NAME OF TOWN </a></div><!--name of the town, and if you want to expand it has a link if you wanna expand on it and make this just a summary-->
  284. <p>
  285. <div id="about">
  286. <span style="color:#fff; background-color:#000; padding:3px;">TOWN NAME:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Town name</span><p>
  287. <span style="color:#fff; background-color:#000; padding:3px;">LOCATION:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Country Location</span><p>
  288. <span style="color:#fff; background-color:#000; padding:3px;">TOWN AGE:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Age of the Town</span><p>
  289. <span style="color:#fff; background-color:#000; padding:3px;">KING/QUEEN OR LORD/LADY:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Ruler of the Town</span><p>
  290. <span style="color:#fff; background-color:#000; padding:3px;">INFORMATION:</span><p>
  291. <span style="font-family:georgia; font-style:italic; margin-top:11px; padding:2px;">This is where you're going to write all about your town and what might happen inside of it. This can vary from the creatures you can find outside the gates of the town to those within. Or simply the villagers there. It doesn't have to be very long, but I'd suggest making it pretty long just because it'll look a lot better with a longer description of the town. Plus you want your readers to know as much about the town as they can and you don't want them to be confused at all.
  292. <p>Also, for those who need to know and aren't "good" with coding and such, the size for these images is:
  293. <center>350 x 350 px</center>
  294. <p>Putting some random coding examples in this description to help out too. Hope y'all enjoy using the coding <3
  295. </span>
  296. <div id="name"><p>
  297.  
  298. </div>
  299. </div>
  300. <div id="posterimage"><img src="http://media.tumblr.com/530fb5208cadcf959b5b2a5f18117935/tumblr_inline_mvxidfKOMK1s8uon6.png"/></div><!--replace this url with the image url you want to use-->    
  301. </div>
  302.  
  303. </div></td>
  304. <!--end of third row-->  
  305. <!--end first column-->
  306.  
  307. <tr> <!--each column has 3 rows -- look at the coding to understand -- whenever a column ends you must put this (<tr>)-->
  308.  
  309. <!--start second column-->
  310. <!--start first row-->
  311. <td><div id="row">
  312. <div id="poster">
  313. <div id="town"><a href="http://fantasieswriter.tumblr.com/"> NAME OF TOWN </a></div><!--name of the town, and if you want to expand it has a link if you wanna expand on it and make this just a summary-->
  314. <p>
  315. <div id="about">
  316. <span style="color:#fff; background-color:#000; padding:3px;">TOWN NAME:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Town name</span><p>
  317. <span style="color:#fff; background-color:#000; padding:3px;">LOCATION:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Country Location</span><p>
  318. <span style="color:#fff; background-color:#000; padding:3px;">TOWN AGE:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Age of the Town</span><p>
  319. <span style="color:#fff; background-color:#000; padding:3px;">KING/QUEEN OR LORD/LADY:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Ruler of the Town</span><p>
  320. <span style="color:#fff; background-color:#000; padding:3px;">INFORMATION:</span><p>
  321. <span style="font-family:georgia; font-style:italic; margin-top:11px; padding:2px;">This is where you're going to write all about your town and what might happen inside of it. This can vary from the creatures you can find outside the gates of the town to those within. Or simply the villagers there. It doesn't have to be very long, but I'd suggest making it pretty long just because it'll look a lot better with a longer description of the town. Plus you want your readers to know as much about the town as they can and you don't want them to be confused at all.
  322. <p>Also, for those who need to know and aren't "good" with coding and such, the size for these images is:
  323. <center>350 x 350 px</center>
  324. <p>Putting some random coding examples in this description to help out too. Hope y'all enjoy using the coding <3
  325. </span>
  326. <div id="name"><p>
  327.  
  328. </div>
  329. </div>
  330. <div id="posterimage"><img src="http://media.tumblr.com/530fb5208cadcf959b5b2a5f18117935/tumblr_inline_mvxidfKOMK1s8uon6.png"/></div><!--replace this url with the image url you want to use-->    
  331. </div>
  332.  
  333. </div></td>
  334. <!--end of first row-->
  335.  
  336. <!--start second row-->
  337. <td><div id="row">
  338. <div id="poster">
  339. <div id="town"><a href="http://fantasieswriter.tumblr.com/"> NAME OF TOWN </a></div><!--name of the town, and if you want to expand it has a link if you wanna expand on it and make this just a summary-->
  340. <p>
  341. <div id="about">
  342. <span style="color:#fff; background-color:#000; padding:3px;">TOWN NAME:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Town name</span><p>
  343. <span style="color:#fff; background-color:#000; padding:3px;">LOCATION:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Country Location</span><p>
  344. <span style="color:#fff; background-color:#000; padding:3px;">TOWN AGE:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Age of the Town</span><p>
  345. <span style="color:#fff; background-color:#000; padding:3px;">KING/QUEEN OR LORD/LADY:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Ruler of the Town</span><p>
  346. <span style="color:#fff; background-color:#000; padding:3px;">INFORMATION:</span><p>
  347. <span style="font-family:georgia; font-style:italic; margin-top:11px; padding:2px;">This is where you're going to write all about your town and what might happen inside of it. This can vary from the creatures you can find outside the gates of the town to those within. Or simply the villagers there. It doesn't have to be very long, but I'd suggest making it pretty long just because it'll look a lot better with a longer description of the town. Plus you want your readers to know as much about the town as they can and you don't want them to be confused at all.
  348. <p>Also, for those who need to know and aren't "good" with coding and such, the size for these images is:
  349. <center>350 x 350 px</center>
  350. <p>Putting some random coding examples in this description to help out too. Hope y'all enjoy using the coding <3
  351. </span>
  352. <div id="name"><p>
  353.  
  354. </div>
  355. </div>
  356. <div id="posterimage"><img src="http://media.tumblr.com/530fb5208cadcf959b5b2a5f18117935/tumblr_inline_mvxidfKOMK1s8uon6.png"/></div><!--replace this url with the image url you want to use-->    
  357. </div>
  358.  
  359. </div></td>
  360. <!--end of second row-->
  361.  
  362. <!--start third row-->
  363. <td><div id="row">
  364. <div id="poster">
  365. <div id="town"><a href="http://fantasieswriter.tumblr.com/"> NAME OF TOWN </a></div><!--name of the town, and if you want to expand it has a link if you wanna expand on it and make this just a summary-->
  366. <p>
  367. <div id="about">
  368. <span style="color:#fff; background-color:#000; padding:3px;">TOWN NAME:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Town name</span><p>
  369. <span style="color:#fff; background-color:#000; padding:3px;">LOCATION:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Country Location</span><p>
  370. <span style="color:#fff; background-color:#000; padding:3px;">TOWN AGE:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Age of the Town</span><p>
  371. <span style="color:#fff; background-color:#000; padding:3px;">KING/QUEEN OR LORD/LADY:</span> <span style="font-family:georgia; font-style:italic; padding:2px;">Ruler of the Town</span><p>
  372. <span style="color:#fff; background-color:#000; padding:3px;">INFORMATION:</span><p>
  373. <span style="font-family:georgia; font-style:italic; margin-top:11px; padding:2px;">This is where you're going to write all about your town and what might happen inside of it. This can vary from the creatures you can find outside the gates of the town to those within. Or simply the villagers there. It doesn't have to be very long, but I'd suggest making it pretty long just because it'll look a lot better with a longer description of the town. Plus you want your readers to know as much about the town as they can and you don't want them to be confused at all.
  374. <p>Also, for those who need to know and aren't "good" with coding and such, the size for these images is:
  375. <center>350 x 350 px</center>
  376. <p>Putting some random coding examples in this description to help out too. Hope y'all enjoy using the coding <3
  377. </span>
  378. <div id="name"><p>
  379.  
  380. </div>
  381. </div>
  382. <div id="posterimage"><img src="http://media.tumblr.com/530fb5208cadcf959b5b2a5f18117935/tumblr_inline_mvxidfKOMK1s8uon6.png"/></div><!--replace this url with the image url you want to use-->    
  383. </div>
  384.  
  385. </div></td>
  386. <!--end of third row-->
  387. <!--end of second column-->
  388.  
  389.  
  390. </table>
  391. </div>
  392.  
  393.  
  394. <div style="font-size: 8px; font-family: times new roman;  font-style:italic;letter-spacing: 1px; float: left; position: fixed; padding: 2 4 2 4; bottom: 13px; right: 14px; background: #f0f0f0; border-top:1px solid #DADADA; border-right:1px solid #DADADA; border-left:1px solid #DADADA; border-bottom:1px solid #DADADA;text-transform:lowercase;"><a href="http://fantasieswriter.tumblr.com/">fantasieswriter</a></div>
  395.  
  396. </body>
  397. </html>
Advertisement
Add Comment
Please, Sign In to add comment