Advertisement
kingslionhearts

Primavera // All-In-One

Mar 31st, 2015
25
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.25 KB | None | 0 0
  1. <!doctype html>
  2. <html><head>
  3. <!--
  4. Page // Primavera (c) Kristen Thomas/juliannos.tumblr.com
  5.  
  6. icon credits:
  7. http://mortgraphics.livejournal.com/32899.html
  8. http://petitetresors.livejournal.com/3796.html
  9. http://puka-pudge.livejournal.com/105127.html
  10.  
  11. credit/help with code:
  12. http://stackoverflow.com/questions/20128515/javascript-toggle-visibility-of-multiple-divs
  13.  
  14. -->
  15.  
  16. <meta charset="utf-8">
  17. <link href='http://fonts.googleapis.com/css?family=Stalemate' rel='stylesheet' type='text/css'>
  18. <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
  19. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  20.  
  21. <script>
  22. var divs = ["tags", "about", "blogroll"];
  23. var visibleDivId = null;
  24.  
  25. function toggleVisibility(divId) {
  26. if(visibleDivId === divId) {
  27. visibleDivId = null;
  28. } else {
  29. visibleDivId = divId;
  30. }
  31.  
  32. hideNonVisibleDivs();
  33. }
  34.  
  35. function hideNonVisibleDivs() {
  36. var i, divId, div;
  37.  
  38. for(i = 0; i < divs.length; i++) {
  39. divId = divs[i];
  40. div = document.getElementById(divId);
  41.  
  42. if(visibleDivId === divId) {
  43. div.style.display = "block";
  44. } else {
  45. div.style.display = "none";
  46. }
  47. }
  48. }
  49. </script>
  50.  
  51. <style>
  52.  
  53. /*color scheme
  54. #014948 -- dark
  55. #8eb5b5 -- mid
  56. #ffaeb0-- light */
  57.  
  58. /* Scrollbar */
  59.  
  60. ::-webkit-scrollbar{width: 8px;}
  61.  
  62. ::-webkit-scrollbar-thumb{background-color:rgb(142, 181, 181); border-radius: 0;}
  63. ::-webkit-scrollbar-thumb:hover{background-color:rgb(142, 181, 181);}
  64.  
  65. ::-webkit-scrollbar-track{background-color:rgb(237, 237, 237);}
  66.  
  67.  
  68. /* End Scrollbar */
  69.  
  70. body {
  71. background-color: ;
  72. }
  73.  
  74. p {
  75. color: #666666;
  76. font-family: 'Dosis', sans-serif;
  77. }
  78.  
  79. h2 {
  80. color: #268A88;
  81. font-family: 'Stalemate', cursive;
  82. text-align: center;
  83. margin: 0px;
  84. padding: 0px;
  85. border: 0px;
  86. }
  87.  
  88. a {
  89. font-family: 'Dosis', sans-serif;
  90. color: #268A88;
  91. transition: color 0.2s linear;
  92. -o-transition: color 0.2s linear;
  93. -moz-transition: color 0.2s linear;
  94. -webkit-transition: color 0.2s linear;
  95. }
  96.  
  97. /* unvisited link */
  98. a:link {
  99. text-decoration:none;
  100. }
  101.  
  102. /* visited link */
  103. a:visited {
  104. text-decoration:none;
  105. }
  106.  
  107. /* mouse over link */
  108. a:hover {
  109. color: #ffaeb0;
  110. text-decoration:none;
  111. }
  112.  
  113. /* selected link */
  114. a:active {
  115. text-decoration:none;
  116. }
  117.  
  118. #nav a {
  119. font-size:10px;
  120. }
  121.  
  122. img {
  123. padding-right: 10px;
  124. }
  125.  
  126. #about {
  127. height: 500px;
  128. width: 600px;
  129. margin-top: 100px;
  130. margin-left: 100px;
  131. padding: 20px;
  132. float: left;
  133. border-color: #FFDDDE;
  134. border-style: double;
  135. }
  136.  
  137. #tags {
  138. height: 500px;
  139. width: 600px;
  140. margin-top: 100px;
  141. margin-left: 100px;
  142. padding: 20px;
  143. float: left;
  144. border-color: #FFDDDE;
  145. border-style: double;
  146. }
  147.  
  148. #blogroll {
  149. height: 500px;
  150. width: 600px;
  151. margin-top: 100px;
  152. margin-left: 100px;
  153. padding: 20px;
  154. float: left;
  155. border-color: #FFDDDE;
  156. border-style: double;
  157. overflow: auto;
  158. }
  159.  
  160. #blogroll img {
  161. padding: 5px;
  162. }
  163.  
  164. #nav {
  165. position: absolute;
  166. height: 500px;
  167. width: 250px;
  168. margin-top: 100px;
  169. margin-right: 500px;
  170. float: right;
  171. left: 765px;
  172. }
  173.  
  174. #tag1 {
  175. float: left;
  176. margin-left: 120px;
  177. }
  178.  
  179. #tag2 {
  180. margin:auto;
  181. }
  182.  
  183.  
  184. table {
  185. text-align:center;
  186. font-size:12px;
  187. }
  188.  
  189. th {
  190. color: #268A88;
  191. font-family: 'Dosis', sans-serif;
  192. }
  193.  
  194.  
  195.  
  196. </style>
  197.  
  198. <title>{Title}</title>
  199.  
  200. <link rel="shortcut icon" href="{Favicon}">
  201. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  202. {block:Description}
  203. <meta name="description" content="{MetaDescription}" />
  204. {/block:Description}
  205. </head>
  206.  
  207. <body>
  208.  
  209. <!-- About -->
  210. <!-- to add more headings:
  211. <h2>Heading Title Here</h2>
  212. <p>Use this tag for more text</p>
  213. <img src="image-name-here.png">
  214. -->
  215.  
  216. <div id="about" style="display:normal">
  217. <h2>________ v. Primavera ________</h2>
  218. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et auctor nulla, sed egestas metus. Pellentesque eget dapibus massa. Sed ultricies leo ante, vitae iaculis justo fermentum eget. Nam odio nisl, ultrices nec scelerisque et, condimentum vitae ligula. Praesent viverra vulputate sodales. Nam pellentesque lacinia lacinia. Nunc elementum accumsan mi, quis ultrices leo imperdiet vel. Etiam id quam vulputate, fringilla nulla ac, auctor neque.</p>
  219. <h2>________ All In One Page ________</h2>
  220. <p>This is an all in one page, designed to house your about me, tags, and blogroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et auctor nulla, sed egestas metus.</p>
  221. </div>
  222.  
  223.  
  224. <!-- tags -->
  225. <!-- TO CREATE MORE TAG HEADINGS:
  226. <table>
  227. <th>sdasda</th>
  228. <tr><td><a href="/tag">Title</a></td></tr>
  229. <tr><td><a href="/tag">Title</a></td></tr>
  230. <tr><td><a href="/tag">Title</a></td></tr>
  231. <tr><td><a href="/tag">Title</a></td></tr>
  232. </table>
  233.  
  234. Be careful adding more as the container it's in **IS NOT FLEXIBLE** and you may go over it's boundaries.-->
  235.  
  236.  
  237. <div id="tags" style="display:none">
  238. <h2>________ Tag List ________</h2>
  239. <br><br>
  240. <center>
  241. <div id="tag1">
  242. <table>
  243. <th>Movies</th>
  244. <tr><td><a href="/tag">Home (2015)</a></td></tr>
  245. <tr><td><a href="/tag">Insurgent</a></td></tr>
  246. <tr><td><a href="/tag">Cinderella (2015)</a></td></tr>
  247. <tr><td><a href="/tag">Interstellar</a></td></tr>
  248. <tr><td><a href="/tag">Woman in Gold</a></td></tr>
  249. </table>
  250.  
  251. <table>
  252. <th>Tv Shows</th>
  253. <tr><td><a href="/tag">The Walking Dead</a></td></tr>
  254. <tr><td><a href="/tag">Teen Wolf</a></td></tr>
  255. <tr><td><a href="/tag">Arrow</a></td></tr>
  256. <tr><td><a href="/tag">The Musketeers</a></td></tr>
  257. <tr><td><a href="/tag">Agent of Shield</a></td></tr>
  258. </table>
  259.  
  260. <table>
  261. <th>Video Games</th>
  262. <tr><td><a href="/tag">Bloodborne</a></td></tr>
  263. <tr><td><a href="/tag">The Order 1886</a></td></tr>
  264. <tr><td><a href="/tag">The Elder Scrolls Online</a></td></tr>
  265. <tr><td><a href="/tag">Remember Me</a></td></tr>
  266. </table>
  267. </div>
  268.  
  269. <div id="tag2">
  270. <table>
  271. <th>Photography</th>
  272. <tr><td><a href="/tag">Landscape</a></td></tr>
  273. <tr><td><a href="/tag">Portrait</a></td></tr>
  274. <tr><td><a href="/tag">Mirco-Photography</a></td></tr>
  275. </table>
  276.  
  277. <table>
  278. <th>Writing</th>
  279. <tr><td><a href="/tag">Prompts</a></td></tr>
  280. <tr><td><a href="/tag">Inspiration</a></td></tr>
  281. <tr><td><a href="/tag">Golden AUs</a></td></tr>
  282. <tr><td><a href="/tag">Music for Writing</a></td></tr>
  283. <tr><td><a href="/tag">Writing by Me</a></td></tr>
  284. </table>
  285.  
  286. <table>
  287. <th>Art &amp; Architecture</th>
  288. <tr><td><a href="/tag">Ancient Art</a></td></tr>
  289. <tr><td><a href="/tag">Renaissance</a></td></tr>
  290. <tr><td><a href="/tag">Pre-Raphaelite Art</a></td></tr>
  291. <tr><td><a href="/tag">American Art</a></td></tr>
  292. <tr><td><a href="/tag">Modern Art</a></td></tr>
  293. </table>
  294.  
  295. </div>
  296. </center>
  297. </div>
  298.  
  299. <!-- Blogroll -->
  300. <!-- DO NOT EDIT -->
  301. <div id="blogroll" style="display:none">
  302. <h2>________ Blogroll ________</h2>
  303. <center>
  304. {block:Following}{block:Followed}
  305. <a target='_blank' href='{FollowedURL}'>
  306. <img border='0' src='{FollowedPortraitURL-40}' /></a>
  307. {/block:Followed}{/block:Following}
  308. </center>
  309. </div>
  310.  
  311. <!-- Sidebar -->
  312. <div id="nav"><br>
  313. <img src="https://41.media.tumblr.com/bdfe550be5a1cee013f94fca6753f92f/tumblr_nm1lujC4dQ1rkewvxo2_r1_250.jpg" height="150px" width="150px" align="left">
  314. <a href="/">home</a><br>
  315. <a href="/ask">ask</a><br>
  316. <a href="#" onclick="toggleVisibility('tags');" class="toggleone">tags</a><br>
  317. <a href="#" onclick="toggleVisibility('about');" class="toggleone">about</a><br>
  318. <a href="#" onclick="toggleVisibility('blogroll');" class="toggleone">blogroll</a><br>
  319. <a href="http://your-link-address.here/">custom</a><br>
  320. <a href="http://www.tumblr.com/">dash</a><br>
  321. <br><br>
  322. <h2 style="text-align: left;">___ Quick Facts</h2></span>
  323. <span style="font-size: 12px;">
  324. <p><em>Name:</em> Primavera</p>
  325. <p><em>Age:</em> 24</p>
  326. <p><em>Location:</em> United States</p>
  327. <p><em>Hobbies:</em> Web Design, fangirling</p>
  328.  
  329. </div>
  330.  
  331. </body>
  332. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement