API tools faq
paste
Advertisement
oftenwrongthemes

All-in-One Page 02 (1)

oftenwrongthemes
Jul 29th, 2015
1,147
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.94 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Navigation</title>
  5.  
  6. <!--jquery for tooltips-->
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  8.  
  9. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  10. <script>
  11. (function($){
  12. $(document).ready(function(){
  13. $("a[title]").style_my_tooltips({
  14. tip_follows_cursor:true,
  15. tip_delay_time:60,
  16. tip_fade_speed:600,
  17. attribute:"title"
  18. });
  19. });
  20. })(jQuery);
  21. </script>
  22.  
  23. <style type="text/css">
  24.  
  25. /*GENERAL*/
  26.  
  27. body {
  28. font-size: 12px;
  29. font-family: calibri;
  30. color: #777;
  31. }
  32.  
  33. a {
  34. text-decoration: none;
  35. color: #d6e3f8;
  36. transition: 0.5s all ease-in-out;
  37. -webkit-transition: 0.5s all ease-in-out;
  38. -moz-transition: 0.5s all ease-in-out;
  39. }
  40.  
  41. a:hover {
  42. opacity: .3;
  43. transition: 0.5s all ease-in-out;
  44. -webkit-transition: 0.5s all ease-in-out;
  45. -moz-transition: 0.5s all ease-in-out;
  46. }
  47.  
  48. #s-m-t-tooltip {
  49. max-width: 200px;
  50. padding: 5px;
  51. margin: 15px 0px 0px 15px;
  52. background: #d6e3f8;
  53. font-family: calibri;
  54. font-size: 11px;
  55. color: #fff;
  56. z-index: 999999999999999999999999999999999999;
  57. }
  58.  
  59. ::-webkit-scrollbar { width: 3px; background: #fbfbfb }
  60. ::-webkit-scrollbar-thumb { background: #d6e3f8; }
  61. ::-webkit-scrollbar-corner { background: #d6e3f8; }
  62.  
  63. .con {
  64. width: 550px;
  65. height: 350px;
  66. overflow: hidden;
  67. position: relative;
  68. }
  69.  
  70. .con .backcon {
  71. position: absolute;
  72. left: 0px;
  73. bottom: 0px;
  74. width: 550px;
  75. height: 350px;
  76. transition: 0.7s all ease-in-out;
  77. -webkit-transition: 0.7s all ease-in-out;
  78. -moz-transition: 0.7s all ease-in-out;
  79. z-index: 3;
  80. }
  81.  
  82. .con:hover .backcon {
  83. left: -550px;
  84. transition: 0.7s all ease-in-out;
  85. -webkit-transition: 0.7s all ease-in-out;
  86. -moz-transition: 0.7s all ease-in-out;
  87. }
  88.  
  89. .conb {
  90. width: 550px;
  91. height: 350px;
  92. padding: 10px;
  93. margin-top: 10%;
  94. border: 1px dashed #ccc;
  95. position: relative;
  96. }
  97.  
  98. /*TABS*/
  99.  
  100. .tab {
  101. float: left;
  102. }
  103.  
  104. .tab label {
  105. background: #d8f3fe;
  106. padding: 12px 46px 12px 46px;
  107. position: relative;
  108. z-index: 2;
  109. top: 326px;
  110. color: white;
  111. text-transform: uppercase;
  112. text-shadow: 1px 1px 1px #999;
  113. }
  114.  
  115. .tab [type=radio] {
  116. display: none;
  117. }
  118.  
  119. .content {
  120. position: absolute;
  121. top: 0px;
  122. bottom: 0px;
  123. left: 0px;
  124. right: 0px;
  125. background-color: #fbfbfb;
  126. padding: 20px;
  127. width: 520px;
  128. height: 290px;
  129. text-align: justify;
  130. line-height: 120%;
  131. }
  132.  
  133. .tab [type=radio]:checked ~ label {
  134. background: #d6e3f8;
  135. z-index: 2;
  136. }
  137.  
  138. .tab [type=radio]:checked ~ label ~ .content {
  139. z-index: 1;
  140. }
  141.  
  142. /*ABOUT SECTION*/
  143.  
  144. .aboutc {
  145. width: 100px;
  146. line-height: 100%;
  147. color: #ccc;
  148. }
  149.  
  150. .aboutc b {
  151. color: #d6e3f8;
  152. }
  153.  
  154. .aboutc img {
  155. width: 100px;
  156. height: 100px;
  157. }
  158.  
  159. .aboutb {
  160. height: 260px;
  161. width: 1px;
  162. background-color: #ededed;
  163. margin: 10px 25px 0px 25px;
  164. }
  165.  
  166. .abouta {
  167. width: 335px;
  168. overflow: auto;
  169. height: 250px;
  170. padding: 10px;
  171. }
  172.  
  173. /*FAQ SECTION*/
  174.  
  175. .faqh {
  176. width: 98%;
  177. height: 20px;
  178. padding-top: 10px;
  179. text-align: center;
  180. color: white;
  181. text-transform: uppercase;
  182. font-weight: bold;
  183. background-color: #d6e3f8;
  184. position: relative;
  185. transition: 0.7s all ease-in-out;
  186. -webkit-transition: 0.7s all ease-in-out;
  187. -moz-transition: 0.7s all ease-in-out;
  188. }
  189.  
  190. .faqc {
  191. height: 30px;
  192. overflow: hidden;
  193. padding: 0px 10px 0px 10px;
  194. background: transparent;
  195. margin-bottom: 5px;
  196. transition: 0.7s all ease-in-out;
  197. -webkit-transition: 0.7s all ease-in-out;
  198. -moz-transition: 0.7s all ease-in-out;
  199. }
  200.  
  201. .faqc b {
  202. color: #d6e3f8;
  203. }
  204.  
  205. .faqc:hover {
  206. height: 200px;
  207. overflow: auto;
  208. }
  209.  
  210. /*NAVIGATION SECTION*/
  211.  
  212. .navh {
  213. width: 250px;
  214. height: 20px;
  215. padding-top: 10px;
  216. text-transform: uppercase;
  217. color: white;
  218. text-align: center;
  219. background-color: #d6e3f8;
  220. }
  221.  
  222. .navb {
  223. padding: 5px;
  224. width: 240px;
  225. background-color: white;
  226. font-size: 11px;
  227. height: 100px;
  228. overflow: auto;
  229. }
  230.  
  231. /*BLOGROLL SECTION*/
  232.  
  233. .broll img {
  234. float: left;
  235. display: table;
  236. margin: 10px;
  237. width: 30px;
  238. height: 30px;
  239. border-radius: 50px;
  240. -webkit-border-radius: 50px;
  241. -moz-border-radius: 50px;
  242. }
  243.  
  244. .credit a {
  245. position: fixed;
  246. bottom: 10px;
  247. right: 12px;
  248. font-size: 11px;
  249. }
  250.  
  251. </style>
  252.  
  253. </head>
  254.  
  255. <body><center>
  256.  
  257. <!---CONTAINER--->
  258.  
  259. <div class="conb">
  260. <div class="con"><div class="backcon">
  261.  
  262. <img src="550x350 IMAGE URL HERE" />
  263.  
  264. </div>
  265.  
  266. <!---ABOUT SECTION--->
  267.  
  268. <div class="tab">
  269. <input type="radio" id="tab-1" name="tab-group-1" checked>
  270. <label for="tab-1">about</label>
  271. <div class="content">
  272.  
  273. <table cellpadding="0" cellspacing="0"><tr>
  274.  
  275. <td valign="top">
  276. <div class="aboutc">
  277.  
  278. <img src="100x100 IMAGE URL HERE" />
  279.  
  280. <i><br><br>
  281. <b>Name:</b> ren<p />
  282. <b>Age:</b> eighteen<p />
  283. <b>Timezone:</b> est<p />
  284. <b>Likes:</b> fall out boy, cheesy movies, and forehead kisses<p />
  285. <b>Dislikes:</b> goodbyes, when it's too hot to drink cocoa
  286. </i>
  287.  
  288. </div>
  289. </td>
  290.  
  291. <td valign="top">
  292. <div class="aboutb"></div>
  293. </td>
  294.  
  295. <td valign="top">
  296. <div class="abouta">
  297.  
  298. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="/">Fusce at arcu lacinia</a> est ullamcorper efficitur. Nam sed finibus nisi. In mattis libero egestas efficitur gravida. In ullamcorper ullamcorper justo dapibus interdum. Fusce eu sollicitudin sem. Nullam varius suscipit odio, at condimentum nunc elementum eu. Nam varius dui id aliquam vehicula.
  299. <p />
  300. Phasellus rutrum arcu ut lectus mollis, sit amet aliquet tortor mattis. Curabitur viverra aliquet nisl luctus tempor. Aenean euismod, mauris nec finibus gravida, sem odio viverra odio, at mattis nunc purus a ipsum. Donec placerat est ac semper faucibus. Vestibulum eu diam est. Ut volutpat urna sed purus laoreet, at suscipit mi rhoncus. Maecenas vitae ligula ut purus pharetra euismod. Sed id congue enim. Nunc eget velit ultrices, commodo velit id, ultrices tellus. Ut elementum semper enim, ac placerat dui. Suspendisse ut ipsum vel turpis <a href="/">pulvinar sagittis vitae at felis.</a> Mauris eleifend facilisis tincidunt. Nulla elementum sapien vel orci pellentesque lobortis. Cras et orci condimentum odio aliquet porttitor. Nulla viverra, dolor id tristique sollicitudin, sapien risus maximus enim, a tempor nisl metus et magna. Morbi ac egestas mi.
  301. <p />
  302. Sed pharetra mi ultrices, scelerisque velit nec, hendrerit enim. Sed tincidunt turpis ex, vitae aliquam dolor pretium id. Donec elit mauris, pulvinar in metus eget, vestibulum tincidunt orci. Praesent tincidunt sapien eu pharetra hendrerit. Aenean tincidunt interdum tincidunt. Nulla sem leo, convallis non suscipit at, mollis vitae purus. Curabitur nec consectetur tellus. Aenean eleifend sem eu tincidunt hendrerit. Quisque tincidunt metus pharetra lectus cursus efficitur. Phasellus ultrices vulputate mauris eget varius. Fusce lacus mauris, mattis in mi id, pellentesque faucibus erat.
  303.  
  304. </div>
  305. </td>
  306.  
  307. </tr></table>
  308.  
  309. </div>
  310. </div>
  311.  
  312. <!---FAQ SECTION--->
  313.  
  314. <div class="tab">
  315. <input type="radio" id="tab-2" name="tab-group-1">
  316. <label for="tab-2">inbox</label>
  317. <div class="content" style="overflow: auto;">
  318.  
  319. <div class="faqc"><div class="faqh">faq header one</div>
  320.  
  321. <br />
  322. <b>1. This is question one?</b><br />
  323. <span style="width: 98%;">This is answer one. I'm going to answer your question now and I'll probably write about it forever and ever because I really don't want you coming into my inbox with this question.</span>
  324. <p />
  325. <b>2. This is question two?</b><br />
  326. <span style="width: 98%;">This is answer two.</span>
  327. <p />
  328. <b>2. This is question three?</b><br />
  329. <span style="width: 98%;">This is answer three.</span>
  330. <p />
  331. <b>2. This is question four?</b><br />
  332. <span style="width: 98%;">This is answer four.</span>
  333.  
  334. </div>
  335.  
  336. <div class="faqc"><div class="faqh">faq header two</div>
  337.  
  338. <br />
  339. <b>1. This is question one?</b><br />
  340. <span style="width: 98%;">This is answer one. I'm going to answer your question now and I'll probably write about it forever and ever because I really don't want you coming into my inbox with this question.</span>
  341. <p />
  342. <b>2. This is question two?</b><br />
  343. <span style="width: 98%;">This is answer two.</span>
  344. <p />
  345. <b>2. This is question three?</b><br />
  346. <span style="width: 98%;">This is answer three.</span>
  347. <p />
  348. <b>2. This is question four?</b><br />
  349. <span style="width: 98%;">This is answer four.</span>
  350.  
  351. </div>
  352.  
  353. <div class="faqc"><div class="faqh">faq header three</div>
  354.  
  355. <br />
  356. <b>1. This is question one?</b><br />
  357. <span style="width: 98%;">This is answer one. I'm going to answer your question now and I'll probably write about it forever and ever because I really don't want you coming into my inbox with this question.</span>
  358. <p />
  359. <b>2. This is question two?</b><br />
  360. <span style="width: 98%;">This is answer two.</span>
  361. <p />
  362. <b>2. This is question three?</b><br />
  363. <span style="width: 98%;">This is answer three.</span>
  364. <p />
  365. <b>2. This is question four?</b><br />
  366. <span style="width: 98%;">This is answer four.</span>
  367.  
  368. </div>
  369.  
  370. <p><iframe frameborder="0" scrolling="no" width="95%" height="149" src="http://www.tumblr.com/ask_form/YOURURL.tumblr.com" style="background-color:transparent; overflow:hidden; margin-left: 1%;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
  371.  
  372. </div>
  373. </div>
  374.  
  375. <!---NAVIGATION SECTION--->
  376.  
  377. <div class="tab">
  378. <input type="radio" id="tab-3" name="tab-group-1">
  379. <label for="tab-3">navigation</label>
  380. <div class="content" style="overflow: auto;">
  381.  
  382. <table><tr>
  383.  
  384. <td valign="top"><div class="navh">title one</div>
  385. <div class="navb"><ol style="list-style-type: lower-roman;">
  386. <li>tag one</li>
  387. <li>tag two</li>
  388. <li>tag three</li>
  389. <li>tag four</li>
  390. <li>tag five</li>
  391. </ol></div></td>
  392.  
  393. <td valign="top"><div class="navh">title two</div>
  394. <div class="navb"><ol style="list-style-type: lower-roman;">
  395. <li>tag one</li>
  396. <li>tag two</li>
  397. <li>tag three</li>
  398. <li>tag four</li>
  399. <li>tag five</li>
  400. <li>tag six</li>
  401. <li>tag seven</li>
  402. </ol></div></td></tr>
  403.  
  404. <tr><td valign="top"><div class="navh">title three</div>
  405. <div class="navb"><ol style="list-style-type: lower-roman;">
  406. <li>tag one</li>
  407. <li>tag two</li>
  408. <li>tag three</li>
  409. <li>tag four</li>
  410. <li>tag five</li>
  411. </ol></div></td>
  412.  
  413. <td valign="top"><div class="navh">title four</div>
  414. <div class="navb"><ol style="list-style-type: lower-roman;">
  415. <li>tag one</li>
  416. <li>tag two</li>
  417. <li>tag three</li>
  418. <li>tag four</li>
  419. <li>tag five</li>
  420. </ol></div></td>
  421.  
  422. </tr></table>
  423.  
  424. </div>
  425. </div>
  426.  
  427. <!---BLOGROLL SECTION--->
  428.  
  429. <div class="tab">
  430. <input type="radio" id="tab-4" name="tab-group-1">
  431. <label for="tab-4">blogroll</label>
  432. <div class="content" style="overflow: auto;">
  433.  
  434. {block:Following}{block:Followed}
  435. <a href="{FollowedURL}" title="{FollowedName}">
  436. <div class="broll">
  437. <img src="{FollowedPortraitURL-40}"></a>
  438. </div>
  439. {/block:Following}{/block:Followed}</div>
  440.  
  441. </div>
  442.  
  443. </div>
  444. </div>
  445.  
  446. </center></body>
  447.  
  448. <div class="credit"><a href="http://bisexualamy.tumblr.com/">▲▲▲</a></div>
  449.  
  450. </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!