API tools faq
paste
Advertisement
luciam

All in one #2

luciam
Dec 12th, 2014
3,614
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.36 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <!-------------------------------------------------
  3. ALL IN ONE PAGE #02 BY:
  4.  
  5. http://phoenixthemes.tumblr.com
  6. http://robbarya.tumblr.com (INSTRUCTIONS IN CODE)
  7. ...................................................
  8. ...................................................
  9.  
  10. TERMS OF USE:
  11. - DON'T CLAIM AS YOUR OWN
  12. - DON'T REMOVE OR MOVE THE CREDIT
  13. - DON'T REDISTRIBUTE
  14. - DON'T USE AS A BASE. YOU CAN EDIT IT AS MUCH AS YOU LIKE AS LONG AS THE CREDIT IS STILL IN ITS ORIGINAL PLACE- Thank you
  15. --------------------------------------------->
  16.  
  17.  
  18. <!--- Instructions here: These are very detailed instructions so if you are familiar with html and css you may skip them.
  19. Press ctrl+f (cmd+f in mac) and in the searchbox that appears type:
  20. Color: to get to the spots to change all the colors
  21. Title: to change the titles
  22. Image: to change the images
  23. Links: to change the links
  24. Content box: to go to the start of each box (about, ask, etc). Type First Content box to get to the first one, Second Content box to the second one and so on
  25. ----->
  26.  
  27. <html>
  28. <meta charset="utf-8">
  29. <link rel="shortcut icon" href="{Favicon}" />
  30. <head>
  31. <title>Explore</title> <!--- Title: Browser title--->
  32.  
  33. <style type="text/css">
  34.  
  35. ::-webkit-scrollbar-thumb:vertical {
  36. background-color: #464646;/*Color: scrollbar*/
  37. height:6px;
  38. }
  39.  
  40. ::-webkit-scrollbar-thumb:horizontal {
  41. background-color: #464646;/*Color: scrollbar*/
  42. height:3px;
  43. }
  44.  
  45. ::-webkit-scrollbar-corner {
  46. background-color: transparent;
  47. }
  48.  
  49. ::-webkit-scrollbar {
  50. margin-left: 5px;
  51. height:5px;
  52. width:5px;
  53. }
  54.  
  55.  
  56. body {
  57. background-color: #fff;/*Color: background*/
  58. color:#333; /*Color: text*/
  59. font-family: consolas;
  60. font-size: 10px;
  61. background-image: url('http://static.tumblr.com/6419fd2b152496da71fe9254c59fde53/d4tdea8/DB8n9eunk/tumblr_static_1v94d1b0x6bogog0k8cocskow.png');
  62. /*Image: backgorund*/
  63.  
  64. }
  65.  
  66. html, body {
  67. width: 100%;
  68. margin: 0;
  69. }
  70.  
  71.  
  72. body,ul,ol,li {
  73. margin:0;
  74. padding:0;
  75. }
  76.  
  77. * {
  78. -moz-box-sizing: border-box;
  79. box-sizing: border-box;
  80. -webkit-transition: all 0.6s ease-in-out;
  81. -moz-transition: all 0.6s ease-in-out;
  82. -ms-transition: all 0.6s ease-in-out;
  83. -o-transition: all 0.6s ease-in-out;
  84. transition: all 0.6s ease-in-out;
  85. }
  86.  
  87. ol,ul {
  88. list-style:none;
  89. }
  90.  
  91. img {
  92. border:none;
  93. }
  94.  
  95. strong {
  96. font-weight: bold;
  97. letter-spacing: 0.2em;
  98. }
  99.  
  100. a {
  101. color: #999;/*Color: links*/
  102. text-decoration: none;
  103. }
  104.  
  105. a:hover {
  106. text-decoration: underline;
  107. color: #000;/*Color: links on hover*/
  108. }
  109.  
  110. header {
  111. background-color: #fff; /*Color: header background*/
  112. width: 50%;
  113. margin: 25px auto;
  114. height: 50px;
  115. min-width: 400px;
  116. }
  117.  
  118. .triangle {
  119. width: 0;
  120. height: 0;
  121. border-style: solid;
  122. border-width: 10px 10px 0 10px;
  123. border-color: #fff transparent transparent transparent; /*Color: header arrow*/
  124. }
  125.  
  126. .title {
  127. color: #464646;/*Color: main title*/
  128. text-align: left;
  129. font-family: Consolas;
  130. font-weight: 800;
  131. text-transform: uppercase;
  132. letter-spacing: 4px;
  133. line-height: 50px;
  134. margin-left: 15px;
  135. font-size: 18px;
  136. }
  137.  
  138. .links {
  139. padding: 10px 0px;
  140. float: right;
  141. margin: 0px auto 10px auto;
  142. font-family: Consolas;
  143. font-weight: 800;
  144. text-transform: uppercase;
  145. letter-spacing: 2px;
  146. font-size: 8px;
  147. }
  148.  
  149. .links a {
  150. color: #464646; /*Color: main links*/
  151. margin-left: 10px;
  152. }
  153.  
  154. .links a:hover {
  155. text-decoration: underline;
  156. color:#464646;/*Color: main links on hover*/
  157. }
  158.  
  159.  
  160. header .triangle {
  161. margin-left: 40px;
  162. }
  163.  
  164. #todo {
  165. width: 50%;
  166. height: 300px;
  167. margin: 50px auto;
  168. min-width: 400px;
  169. overflow:hidden;
  170. }
  171.  
  172. #todo .sidebar {
  173. width: 70px;
  174. float:left;
  175. height: 50%;
  176. position: absolute;
  177. }
  178. #todo .sidebar img.imagen {
  179. height: 70px;
  180. width: 70px;
  181. border: solid 10px #999fb2; /*Color: sidebar image border*/
  182. }
  183.  
  184. .sidebar .triangle {
  185. border-color: #999fb2 transparent transparent transparent; /*Color: sidebar image arrow*/
  186. margin-left: 25px;
  187. margin-top: -5px;
  188. }
  189.  
  190. .sidebar ul {
  191. margin-top: 10px;
  192. }
  193.  
  194. .sidebar ul a li {
  195. background-color: #999fb2; /*Color: sidebar links background*/
  196. text-transform: uppercase;
  197. text-align:center;
  198. font-size: 8px;
  199. padding: 10px;
  200. letter-spacing: 0.2em;
  201. margin-bottom: 1em;
  202. color: #fff; /*Color: sidebar links*/
  203. display: block;
  204. }
  205.  
  206. .sidebar ul a li:hover {
  207. color: #464646; /*Color: sidebar links on hover*/
  208. background-color: #fff; /*Color: sidebar links background on hover*/
  209. }
  210.  
  211. .sidebar a:hover {
  212. text-decoration:none;
  213. }
  214. /*----------Start of content styling----------*/
  215.  
  216.  
  217. div.box {
  218. width:auto;
  219. overflow:scroll;
  220. background-color: #fff; /*Color: main content background*/
  221. margin-left: 80px;
  222. height: 100%;
  223. padding: 20px;
  224. }
  225.  
  226.  
  227. .contenido {
  228. line-height: 1.3em;
  229. padding: 15px;
  230. }
  231. .contenido h1 {
  232. color: #333; /*Color: content titles*/
  233. text-transform: uppercase;
  234. font-size: 16px;
  235. letter-spacing: 0.4em;
  236. text-align:center;
  237. border-bottom: 1px solid #333; /*Color: content titles bottom border*/
  238. padding-bottom: 10px;
  239. }
  240.  
  241. .contenido h2 {
  242. color: #999fb2; /*Color: content subtitles*/
  243. text-transform: uppercase;
  244. font-family: calibri;
  245. letter-spacing: 0.2em;
  246. font-size: 9px;
  247. line-height: 2em;
  248. padding: 5px 0px;
  249. margin: 0;
  250. }
  251.  
  252. .contenido h2:before {
  253. content: '>'; /*Here you can change the symbol before the subtitles*/
  254. padding: 5px;
  255. }
  256.  
  257. /*------------------BLOGROLL--------------------*/
  258.  
  259. .blogroll {
  260. width: 100%;
  261. text-align: center;
  262. }
  263.  
  264. .blog {
  265. margin:10px;
  266. float:left;
  267. }
  268.  
  269. .blog img {
  270. opacity: 1;
  271. height: 30px;
  272. width: 30px;
  273. }
  274. .blog img:hover {
  275. opacity: .7;
  276. -webkit-transform: scale(1.05,1.07);
  277. -webkit-transition-timing-function: ease-out;
  278. -webkit-transition-duration: 600ms;
  279. -moz-transform: scale(1.05,1.07);
  280. -moz-transition-timing-function: ease-out;
  281. -moz-transition-duration: 600ms;
  282. }
  283.  
  284. /*-----------------FAQ------------------------*/
  285.  
  286. #three .head, li, h2 {
  287. margin-bottom:15px;
  288. }
  289. #three.head {
  290. display:block;
  291. }
  292. #three .content {
  293. display:none;
  294. padding-left:10px;
  295. }
  296. #three li {
  297. position:relative;
  298. overflow:hidden;
  299. padding: 0;
  300. margin: 0;
  301. }
  302.  
  303. #three h2 {
  304. padding: 5px;
  305. margin: 0;
  306. }
  307.  
  308. #three h2 a {
  309. color: #999fb2; /*Color: faq questions*/
  310. }
  311.  
  312. #three h2 a:hover {
  313. text-decoration:none;
  314. }
  315.  
  316. /*-------------------------TAGS----------------------*/
  317.  
  318. #four a {
  319.  
  320. font-weight: 800;
  321. text-transform: uppercase;
  322. letter-spacing: 2px;
  323. font-size: 8px;
  324. }
  325.  
  326. #four a:before {
  327. content:'+'; /*Here you can change the symbol before the tags*/
  328. }
  329.  
  330. #s-m-t-tooltip{
  331. font-family: calibri;
  332. letter-spacing:1px;
  333. max-width:150px;
  334. font-size: 8px;
  335. margin:0px 20px;
  336. padding:3px 5px;
  337. line-height: 18px;
  338. background:#999fb2; /*Color: tooltip background*/
  339. color: #fff; /*Color: tooltip*/
  340. opacity: .8;
  341. z-index:999;
  342. position:fixed;
  343. text-transform:uppercase;
  344. }
  345.  
  346. #s-m-t-tooltip:before {
  347. float: left;
  348. margin: 5px -12px;
  349. content:'';
  350. width: 0;
  351. height: 0;
  352. border-style: solid;
  353. border-width: 5px 7px 5px 0;
  354. border-color: transparent #999fb2 transparent transparent; /*Color: tooltip arrow*/
  355. }
  356. </style>
  357. </head>
  358. <body>
  359.  
  360. <header>
  361. <div class="title">Explore</div> <!--- Title: Main title--->
  362. <div class="triangle"></div>
  363. <div class="links">
  364. <!--- Links: These are external links, you can change both the link and the name---->
  365. <a href="/">Home</a>
  366. <a href="http://tumblr.com/dashboard">dash</a>
  367. <a href="/">link 1</a>
  368. <a href="/">link 2</a>
  369. <a href="">link 3</a>
  370. <!---You can add more links, just copy from <a> to </a> ---->
  371. <a href="http://robbarya.tumblr.com">credit</a>
  372.  
  373. </div>
  374. </header>
  375.  
  376. <div id="todo">
  377. <div class="sidebar">
  378. <!--- Image: replace the url below with the url of your image. To get one, go to http://tumblr.com/themes/upload_static_file and upload your picture. Make it 70 x 70px
  379. If you don't want an image, just delete the three next lines--->
  380. <img class="imagen" src="http://static.tumblr.com/d4tdea8/I9Fngi6g5/allinone2.jpg">
  381. <div class="triangle"></div>
  382.  
  383.  
  384.  
  385.  
  386. <!--- Links: each box of content is linked with each of the links below. The box #one is linked to the first link named "about". You can change the name of all of them, but don't change the number of the content---->
  387. <ul>
  388. <a href="#one"><li>about</li></a>
  389. <a href="#two"><li>ask</li></a>
  390. <a href="#three"><li>faq</li></a>
  391. <a href="#four"><li>tags</li></a>
  392. <a href="#five"><li>blogroll</li></a>
  393. <a href="#six"><li>more</li></a>
  394. <!---If you want to add another link change the #six to #seven and add a new box as explained below--->
  395.  
  396. </ul>
  397. </div><!---end sidebar---->
  398.  
  399. <!--- Content box: You can easily delete any extra box you don't want. All the boxes start with a <div class="box" id="#number"> and end with a </div>. The last </div> is marked with a 'End box #number' so that's the one you want to delete------>
  400.  
  401. <!---- First content box: #one
  402. The following instructions apply to all boxes---------------------------->
  403. <div class="box" id="one">
  404.  
  405. <div class="contenido">
  406. <h1>About</h1> <!--- Title: Here change the title----->
  407.  
  408. <h2>First subtitle</h2> <!--- Subtitle: Change the subtitles. All of them are between <h2></h2> ----->
  409.  
  410. Short description of yourself or whatever you want to appear here
  411.  
  412. <h2>Second subtitle</h2>
  413.  
  414. Remember you can <u>underline text</u>, <strong>bold it</strong> or <strike> cross it</strike>. You can also create a <a href="">link</a>
  415.  
  416. <h2>Third subtitle</h2>
  417.  
  418. If you want a line jump, add a <br>
  419. See?
  420.  
  421. <h2>You can add a lot of subtitles!</h2>
  422.  
  423. More content here
  424.  
  425. </div>
  426. </div><!---End box #one ----->
  427.  
  428. <!----- Second Content box: #two - ASK ------------------------------------->
  429. <div class="box" id="two">
  430. <div class="contenido">
  431. <h1>Ask</h1><!--- Title: ---->
  432. <h2>First Subtitle</h2> <!--- Subtitle: ---->
  433. You can write something here too
  434.  
  435. <br><br>
  436. <!--- Ask:
  437. SUPER IMPORTANT
  438. Below where it says YOURURLHERE you have to write your username, NOT your complete url ---->
  439.  
  440. <iframe frameborder="0" scrolling="yes" width="100%" height="200px" src="http://www.tumblr.com/ask_form/YOURURLHERE.tumblr.com"></iframe>
  441. </div>
  442.  
  443.  
  444. </div> <!--- End box #two ----->
  445.  
  446.  
  447.  
  448. <!------- Third Content box: #three - FAQ------------------------------------>
  449.  
  450.  
  451. <div class="box" id="three">
  452. <div class="contenido">
  453. <h1>Faq</h1> <!--- Title: --->
  454.  
  455. <ul>
  456. <!--- Question: Each question in the faq starts here in the <li> and ends in the next </li>. Feel free to add or delete as many as you want---->
  457. <li>
  458. <h2><a href='#' class='head'> Question 1 </a></h2>
  459. <div class='content'>
  460. Answer. Cras porttitor ac massa eget aliquet. Donec pulvinar malesuada mauris, eget pellentesque massa pulvinar sed.
  461. </div>
  462. </li> <!---End Question--->
  463.  
  464. <li>
  465. <h2><a href='#' class='head'> Question 2 </a></h2>
  466. <div class='content'>
  467. Answer. Cras porttitor ac massa eget aliquet. Donec pulvinar malesuada mauris, eget pellentesque massa pulvinar sed.
  468. </div>
  469. </li> <!---End Question--->
  470.  
  471. <li>
  472. <h2><a href='#' class='head'> Question 3 </a></h2>
  473. <div class='content'>
  474. Answer. Cras porttitor ac massa eget aliquet. Donec pulvinar malesuada mauris, eget pellentesque massa pulvinar sed.
  475. </div>
  476. </li> <!---End Question--->
  477.  
  478. <li>
  479. <h2><a href='#' class='head'> Question 4 </a></h2>
  480. <div class='content'>
  481. Answer. Cras porttitor ac massa eget aliquet. Donec pulvinar malesuada mauris, eget pellentesque massa pulvinar sed.
  482. </div>
  483. </li> <!---End Question--->
  484.  
  485. <li>
  486. <h2><a href='#' class='head'> Question 5 </a></h2>
  487. <div class='content'>
  488. Answer. Cras porttitor ac massa eget aliquet. Donec pulvinar malesuada mauris, eget pellentesque massa pulvinar sed.
  489. </div>
  490. </li> <!---End Question--->
  491. </ul>
  492.  
  493. </div>
  494.  
  495. </div> <!---End box #three---->
  496.  
  497.  
  498. <!-------Fourth Content box #four - TAGS ---------------------------------->
  499. <div class="box" id="four">
  500. <div class="contenido">
  501. <h1>Tags</h1> <!--- Title: --->
  502.  
  503. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et lorem facilisis, volutpat leo at, varius felis. Integer eu tortor at justo hendrerit posuere a nec lectus. Nam eu tempus purus.
  504.  
  505. <h2>Subtitle 1</h2> <!--- Subtitle: ---->
  506.  
  507. <a href="/tagged/LINKURL" target="_blank">link</a>
  508. <a href="/tagged/LINKURL" target="_blank">link</a>
  509. <a href="/tagged/LINKURL" target="_blank">link</a>
  510. <a href="/tagged/LINKURL" target="_blank">link</a>
  511. <a href="/tagged/LINKURL" target="_blank">link</a>
  512. <a href="/tagged/LINKURL" target="_blank">link</a>
  513. <a href="/tagged/LINKURL" target="_blank">link</a>
  514. <a href="/tagged/LINKURL" target="_blank">link</a>
  515. <a href="/tagged/LINKURL" target="_blank">link</a>
  516. <a href="/tagged/LINKURL" target="_blank">link</a>
  517. <a href="/tagged/LINKURL" target="_blank">link</a>
  518. <!---Add as many as you want--->
  519.  
  520. <h2>Subtitle 2</h2> <!--- Subtitle: ---->
  521.  
  522.  
  523. <a href="/tagged/LINKURL" target="_blank">link</a>
  524. <a href="/tagged/LINKURL" target="_blank">link</a>
  525. <a href="/tagged/LINKURL" target="_blank">link</a>
  526. <a href="/tagged/LINKURL" target="_blank">link</a>
  527. <a href="/tagged/LINKURL" target="_blank">link</a>
  528. <a href="/tagged/LINKURL" target="_blank">link</a>
  529. <a href="/tagged/LINKURL" target="_blank">link</a>
  530. <a href="/tagged/LINKURL" target="_blank">link</a>
  531. <a href="/tagged/LINKURL" target="_blank">link</a>
  532. <a href="/tagged/LINKURL" target="_blank">link</a>
  533. <a href="/tagged/LINKURL" target="_blank">link</a>
  534. <!---Add as many as you want--->
  535.  
  536. </div>
  537. </div><!---End box #four---->
  538.  
  539. <!-------- Fifth Content box #five - Blogroll---------------->
  540.  
  541. <div class="box" id="five">
  542. <div class="contenido">
  543. <h1>Blogroll</h1> <!--- Title: --->
  544.  
  545. <div class="blogroll">
  546. {block:Following}{block:Followed}
  547. <div class="blog">
  548. <a target="_blank" title="{FollowedName}" href="{FollowedURL}"> <img border: "0" src="{FollowedPortraitURL-40}"/>
  549. </a>
  550. </div>
  551. {/block:Followed}{/block:Following}
  552. </div>
  553. </div>
  554. </div><!---End box #five---->
  555.  
  556. <!-------- Sixth Content box #six - Whatever you want (delete from here if you don't want it---------------->
  557. <div class="box" id="six">
  558. <div class="contenido">
  559. <h1>Extra content</h1> <!--- Title: --->
  560.  
  561. <h2>Subtitle</h2> <!--- Subtitle: ---->
  562.  
  563. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et lorem facilisis, volutpat leo at, varius felis. Integer eu tortor at justo hendrerit posuere a nec lectus. Nam eu tempus purus.
  564.  
  565. </div>
  566. </div><!---End box #six---->
  567.  
  568.  
  569. <!---If you want to add another box (having previously added the link in the sidebar) do it with this code:
  570. from here
  571.  
  572. <div class="box" id="seven">
  573. <div class="contenido">
  574. <h1>Title</h1>
  575. here you write your new content
  576. </div>
  577. </div>
  578.  
  579. to here
  580. ------>
  581.  
  582.  
  583.  
  584.  
  585.  
  586. </div>
  587. </div>
  588.  
  589. </div><!---->
  590.  
  591.  
  592.  
  593. <!----------------------------------------------------------------->
  594. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  595. <script>
  596. $(document).ready(function(){
  597. $('.head').click(function(e){
  598. e.preventDefault();
  599. $(this).closest('li').find('.content').slideToggle();
  600. $('.head').click(function(e){
  601. e.preventDefault();
  602. $(this).closest('li').find('.content').not(':animated').slideToggle();
  603. });
  604. });
  605. });
  606. </script>
  607.  
  608. <!----------------------------------------------------------------->
  609.  
  610. <!----TOOLTIP------------------>
  611.  
  612. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  613. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  614. <script>
  615. (function($){
  616. $(document).ready(function(){
  617. $("[title]").style_my_tooltips({
  618. tip_follows_cursor:true,
  619. tip_delay_time:0,
  620. tip_fade_speed:400,
  621. attribute:"title"
  622. });
  623. });
  624. })(jQuery);
  625. </script>
  626.  
  627.  
  628. </body>
  629. </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!