API tools faq
paste
Theoxaris-Malowitzz

sea-glass-mermaid

Theoxaris-Malowitzz
May 13th, 2016
112
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.69 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!---------------
  4.  
  5.  
  6.  
  7.  
  8. 2-3 "London Lights" by DOMINICWRITES
  9. Rules and Regulations:
  10. #1: Please DO NOT commit thievery and steal this theme/page. I've worked hard on in so I'd appreciate if you didn't.
  11.  
  12. #2: DO NOT redistribute this theme/page,
  13.  
  14. #3: You can customize to your liking, just make sure that your theme/page is readable and credible for your viewers.
  15.  
  16.  
  17. CREDITS:
  18. Masonry code - Manatopia's Tutorial on Masonry
  19. Header background - Google Images
  20. Oranienbaum & Source Sans Pro - Google Fonts
  21.  
  22.  
  23. ---------------->
  24.  
  25. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  26. <head>
  27. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  28.  
  29. <title>{Title}</title>
  30.  
  31. <meta charset="utf-8">
  32.  
  33. <meta name="description" content="{MetaDescription}" />
  34.  
  35. <link rel="shortcut icon" href="{Favicon}" />
  36. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  37.  
  38. <!-- FONT SCRIPT CODES -->
  39.  
  40. <link href='http://fonts.googleapis.com/css?family=Oranienbaum' rel='stylesheet' type='text/css'>
  41. <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>
  42. <link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic' rel='stylesheet' type='text/css'>
  43.  
  44.  
  45. <!-- JAVASCRIPT CODES -->
  46.  
  47. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  48. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  49.  
  50. <script type="text/javascript">
  51. $(function(){
  52. var $container = $('#navigation');
  53. $container.imagesLoaded(function(){
  54. $container.masonry({
  55. itemSelector: '#navbox',
  56. });
  57. });
  58. $container.infinitescroll({
  59. itemSelector : "#navbox",
  60. navSelector : "div.pagination",
  61. nextSelector : ".pagination a#next",
  62. loadingImg : "",
  63. loadingText : "<em></em>",
  64. bufferPx : 10000,
  65. extraScrollPx: 12000,
  66. },
  67. // trigger Masonry as a callback
  68. function( newElements ) {
  69. var $newElems = $( newElements ).css({ opacity: 0 });
  70. // ensure that images load before adding to masonry layout
  71. $newElems.imagesLoaded(function(){
  72. $newElems.animate({ opacity: 1 });
  73. $container.masonry( 'appended', $newElems, true );
  74. });
  75. }
  76. );
  77. });
  78. </script>
  79.  
  80.  
  81. </head>
  82. <style type="text/css">
  83. body {
  84. margin: 0px;
  85. padding: 0px;
  86. width: 100%;
  87. height: 100%;
  88. list-style: none;
  89. background-color: #FFFFFF;
  90. background-image:url('');
  91. background-attachment: fixed;
  92.  
  93.  
  94. }
  95.  
  96. a {
  97. text-decoration: none;
  98. color: #0195ab;
  99. }
  100.  
  101. b,i,strong,em {
  102. color: #cbd165;
  103. }
  104.  
  105. ::-webkit-scrollbar-thumb:vertical {
  106. background-color: #e1a5a3;
  107. height: 10px;
  108. }
  109. ::-webkit-scrollbar-thumb:horizontal {
  110. background-color: #e1a5a3;
  111. height: 7px!important;
  112. }
  113. ::-webkit-scrollbar {
  114. background-color: transparent;
  115. height: px;
  116. width: 2px;
  117. }
  118.  
  119. #content {
  120. width: 750px;
  121. height: auto;
  122. margin: 0px auto 100px auto;
  123. padding: 40px;
  124. display: block;
  125. margin-top: 100px;
  126. }
  127.  
  128. header {
  129. display: block;
  130. width: 670px;
  131. height: auto;
  132. padding: 40px;
  133. background-color: #FFFFFF;
  134. }
  135.  
  136. header img {
  137. width: 670px;
  138. height: auto;
  139. }
  140.  
  141. .title {
  142. display: block;
  143. padding: 15px 0px;
  144. background-color: #7bd4e7;
  145. font-family: 'Oranienbaum', Arial, sans-serif;
  146. font-size: 16px;
  147. color: #FFFFFF;
  148. text-transform: uppercase;
  149. text-align: center;
  150. letter-spacing: 2px;
  151. width: 100%;
  152. margin-bottom: 10px;
  153. }
  154.  
  155. #about {
  156. display: block;
  157. margin-bottom: 10px;
  158. background-color: #EEEEEE;
  159. padding: 60px;
  160. text-align: justify;
  161. font-family: 'Libre Baskerville', 'Oranienbaum', 'Source Sans Pro', Arial, sans-serif;
  162. font-style: italic;
  163. font-size: 10px;
  164. color: #202020;
  165. width: 630px;
  166. height: auto;
  167. }
  168.  
  169. #navigation {
  170. width: 720px;
  171. height: auto;
  172. padding: 15px;
  173. background-color: #EEEEEE;
  174. margin-bottom: 10px;
  175. }
  176.  
  177. #navbox {
  178. width: 185px;
  179. height: auto;
  180. background-color: #FFFFFF;
  181. margin: 17px;
  182. padding: 10px;
  183. }
  184.  
  185. .portrait {
  186. display: table;
  187. width: 185px;
  188. height: 145px;
  189. background-color: #DDDDDD;
  190. margin-bottom: 10px;
  191. }
  192.  
  193. .portrait .navt {
  194. display: table-cell;
  195. text-align: center;
  196. vertical-align: middle;
  197. font-family: 'Oranienbaum', 'Source Sans Pro', Arial, sans-serif;
  198. font-size: 12px;
  199. color: #FFFFFF;
  200. text-transform: uppercase;
  201. letter-spacing: 2px;
  202. text-shadow: 0px 0px 10px #202020;
  203. }
  204.  
  205. .links {
  206. display: block;
  207. }
  208.  
  209. .links a {
  210. font-family: 'Source Sans Pro', Arial, sans-serif;
  211. font-size: 8px;
  212. text-align: center;
  213. text-transform: uppercase;
  214. letter-spacing: 2px;
  215. color: #FFFFFF;
  216. background-color: #7bd4e7;
  217. padding: 7px;
  218. display: block;
  219. margin-bottom: 4px;
  220. -webkit-transition: all 0.2s ease-in-out;
  221. -moz-transition: all 0.2s ease-in-out;
  222. -o-transition: all 0.2s ease-in-out;
  223. -ms-transition: all 0.2s ease-in-out;
  224. transition: all 0.2s ease-in-out;
  225. }
  226.  
  227. .links a:hover {
  228. color: #7bd4e7;
  229. background-color: #FFFFFF;
  230. }
  231.  
  232. #current {
  233. display: block;
  234. width: 750px;
  235. background-color: #EEEEEE;
  236. display: flex;
  237. display: -webkit-flex;
  238. flex-direction: row;
  239. -webkit-flex-direction: row;
  240. }
  241.  
  242. #curbox {
  243. width: 335px;
  244. height: auto;
  245. padding: 20px;
  246. background-color: #FFFFFF;
  247. display: inline-block;
  248.  
  249. }
  250.  
  251. .curtitle {
  252. display: block;
  253. font-family: 'Oranienbaum', Arial, sans-serif;
  254. font-size: 14px;
  255. color: #FFFFFF;
  256. background-color: #7bd4e7;
  257. letter-spacing: 2px;
  258. text-align: center;
  259. text-transform: uppercase;
  260. padding: 10px;
  261. width: 315px;
  262. margin-bottom: 10px;
  263. }
  264.  
  265. .currentpic {
  266. display: block;
  267. width: 335px;
  268. height: 125px;
  269. margin-bottom: 5px;
  270. }
  271.  
  272. .currentpic img {
  273. width: 335px;
  274. height: 125px;
  275. background-color: #202020;
  276. }
  277.  
  278. .event {
  279. font-family: 'Oranienbaum', Arial, sans-serif;
  280. font-size: 14px;
  281. text-transform: uppercase;
  282. text-align: left;
  283. color: #e1a5a3;
  284. padding: 5px 0px;
  285. border-bottom: 1px solid #DDDDDD;
  286. margin-bottom: 10px;
  287. }
  288.  
  289. .evdesc {
  290. font-family: 'Libre Baskerville', Arial, sans-serif;
  291. font-size: 10px;
  292. text-align: justify;
  293. font-style: italic;
  294. padding: 20px;
  295. color: #202020;
  296. overflow: auto;
  297. max-height: 125px;
  298. margin-bottom: 15px;
  299. }
  300.  
  301. .search{ margin-top:20px;}
  302.  
  303.  
  304. .search input[type="text"]{ width:400px;
  305. font:12px 'Montserrat';
  306. letter-spacing:2px;
  307. color:#444;
  308. border:1px solid #fff;
  309. background:#fff url("http://static.tumblr.com/camqjbz/jztng9056/search.png") no-repeat 10px center;
  310. padding:15px 20px 15px 35px;
  311. text-transform:uppercase;}
  312.  
  313.  
  314. .search input[type="submit"]{ cursor:pointer;
  315. text-transform:uppercase;
  316. text-align:center;
  317. margin-left:1px;
  318. padding:15px 20px;
  319. font:12px 'Montserrat';
  320. border:1px solid #fff;
  321. color:#111;
  322. background:#fff;}
  323.  
  324.  
  325. </style>
  326. <body>
  327.  
  328.  
  329. <div id="content">
  330. <header>
  331. <img src="LARGE HEADER URL HERE" />
  332. </header>
  333. <div class="title">TITLE HERE</div>
  334.  
  335. <div id="about">
  336. <div class="search">
  337. <form action="/search" method="get" class="sfm">
  338. <input type="text" name="q" value="write a tag" /><input type="submit" value="enter" />
  339. </form>
  340. </div>
  341. </div>
  342.  
  343.  
  344. <div id="navigation">
  345. <!-- NAV BOX START -->
  346. <div id="navbox" style="float: left;"> <!-- ONLY THIS BOX SHOULD HAVE THE FLOAT:LEFT FEATURE! -->
  347. <div class="portrait" style=" background-image:url('http://static.tumblr.com/kamm2qy/I7qnjjgxv/greg-vaughan-for-made-in-brazil_fy23-460x613.png');"> <!-- SMALL PIC URL HERE -->
  348. <div class="navt">General<br />Navigation</div>
  349. </div>
  350. <div class="links">
  351. <a href="http://sea-glass-mermaid.tumblr.com/">Home</a>
  352. <a href="/tagged/.Verse">Verse</a>
  353. <a href="/【░☾.Guidelines">Rules & Guidelines</a>
  354. <a href="http://dominicwrites.tumblr.com">THEME CREDIT</a>
  355. </div>
  356.  
  357. </div>
  358. <!-- NAV BOX END -->
  359.  
  360. <!-- NAV BOX START -->
  361. <div id="navbox">
  362. <div class="portrait" style=" background-image:url('http://static.tumblr.com/kamm2qy/QKwnjjhgz/chloe_moretz_best_coast_our_deal_51.png');">
  363. <div class="navt">Muse<br />Navigation</div>
  364. </div>
  365. <div class="links">
  366. <a href="/【░☾.Characters">Muse Masterlist</a>
  367. <a href="/【░☾.About">Current Face Claims</a>
  368. <a href="http://cinderella-elvesden.tumblr.com/">Cinderella Elvesden</a>
  369. <a href="/【░☾.Rowan Delacour">Rowan Delacour</a>
  370. <a href="/【░☾.Shock Skellington">Shock Skellington</a>
  371. <a href="/【░☾.Sylvia Weald">Sylvia Weald</a>
  372. <a href="/【░☾.Thea Harman">Thea Harman</a>
  373. <a href="/【░☾.Theoxaris">Theoxaris Von Malowitz</a>
  374. <a href="/【░☾.">Thessalonike of Macedon</a>
  375. </div>
  376.  
  377. </div>
  378. <!-- NAV BOX END -->
  379.  
  380. <!-- NAV BOX START -->
  381. <div id="navbox">
  382. <div class="portrait" style=" background-image:url('http://static.tumblr.com/kamm2qy/ruAnjjhsf/the-london-eye_www.fullhdwpp.png');">
  383. <div class="navt">Exploration,<br />Let's set sail</div>
  384. </div>
  385. <div class="links">
  386. <a href="#">Settings</a>
  387. <a href="#">Landmarks</a>
  388. <a href="#">Popular Spots</a>
  389. <a href="#">Borders & Territories</a>
  390. <a href="#">Exclusive Places</a>
  391. <a href="#">Off Limits Areas</a>
  392. <a href="#">The Map</a>
  393. </div>
  394.  
  395. </div>
  396. <!-- NAV BOX END -->
  397.  
  398. <!-- NAV BOX START -->
  399. <div id="navbox">
  400. <div class="portrait" style=" background-image:url('http://static.tumblr.com/kamm2qy/QSSnjji3r/tumblr_myrqd1gdf51qh8obpo1_1280.png');">
  401. <div class="navt">Applicable<br />Qualifications<br /></div>
  402. </div>
  403. <div class="links">
  404. <a href="#">Understanding the Rules</a>
  405. <a href="#">Reading Character Bios</a>
  406. <a href="#">Warnings & Strikes</a>
  407. <a href="#">Very Important Messages</a>
  408. <a href="#">Reserved Roles</a>
  409. <a href="#">Application Counter</a>
  410. <a href="#">Apply Here</a>
  411. </div>
  412.  
  413. </div>
  414. <!-- NAV BOX END -->
  415.  
  416. <!-- NAV BOX START -->
  417. <div id="navbox">
  418. <div class="portrait" style=" background-image:url('http://static.tumblr.com/kamm2qy/QSSnjji3r/tumblr_myrqd1gdf51qh8obpo1_1280.png');">
  419. <div class="navt">Welcome to<br />Nightvale</div>
  420. </div>
  421. <div class="links">
  422. <a href="#">After Acceptance</a>
  423. <a href="#">Tags to Follow</a>
  424. <a href="#">Administrative Updates</a>
  425. <a href="#">The OOC Blog</a>
  426. <a href="#">The Blog Reel</a>
  427. <a href="#">Non-Playable Characters</a>
  428. </div>
  429.  
  430. </div>
  431. <!-- NAV BOX END -->
  432.  
  433. <!-- NAV BOX START -->
  434. <div id="navbox">
  435. <div class="portrait" style=" background-image:url('http://static.tumblr.com/kamm2qy/QSSnjji3r/tumblr_myrqd1gdf51qh8obpo1_1280.png');">
  436. <div class="navt">Extracurricular<br />Activities</div>
  437. </div>
  438. <div class="links">
  439. <a href="#">Writing Prompts & Exercises</a>
  440. <a href="#">Plot Twists & Plot Drops</a>
  441. <a href="#">Special Events</a>
  442. <a href="#">Challenges & Competitions</a>
  443. </div>
  444.  
  445. </div>
  446. <!-- NAV BOX END -->
  447.  
  448. <!-- PASTE ALL NAV BOX CODES BEFORE THIS </DIV> -->
  449.  
  450. </div>
  451.  
  452.  
  453. <!-- PASTE ALL NAV BOX CODES BEFORE THIS </DIV> -->
  454.  
  455. </div>
  456.  
  457. <!-- CURRENT EVENTS / ADMIN UPDATES SECTION -->
  458. <div id="current">
  459.  
  460. <div id="curbox">
  461. <div class="curtitle">Current Events</div>
  462.  
  463. <!-- EVENT SECTION START -->
  464. <div class="currentpic">
  465. <img src="EVENT PIC URL HERE" />
  466. </div>
  467. <div class="event">EVENT TITLE</div>
  468. <div class="evdesc">
  469. DESCRIPTION ABOUT EVENT.
  470. </div>
  471. <!-- EVENT SECTION END -->
  472.  
  473. <!-- PASTE ALL EVENT CODES BEFORE THIS </DIV> -->
  474.  
  475. </div>
  476.  
  477. <div id="curbox">
  478. <div class="curtitle">Administrative Updates</div>
  479.  
  480. <!-- UPDATE SECTION START -->
  481. <div class="event">DATE OF UPDATE</div>
  482. <div class="evdesc">
  483. DESCRIPTION OF UPDATE.
  484. </div>
  485. <!-- UPDATE SECTION END -->
  486.  
  487. <!-- PAST ALL UPDATE CODES BEFORE THIS </DIV> -->
  488.  
  489.  
  490.  
  491. </div>
  492. </div>
  493.  
  494.  
  495.  
  496. </div>
  497. </body>
  498. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!