API tools faq
paste
Advertisement
dimplehoe

Theme page 01

dimplehoe
Jun 19th, 2014
520
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.67 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <title>{Title}</title>
  5. <link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
  6.  
  7. <link rel="shortcut icon" href="{Favicon}">
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9.  
  10.  
  11. <!-- THEME MADE BY OFMOAN DO NOT REMOVE THE CREDIT PLEASE! -->
  12.  
  13.  
  14. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  15.  
  16. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  17.  
  18. <script>
  19.  
  20. (function($){
  21.  
  22. $(document).ready(function(){
  23.  
  24. $("a[title]").style_my_tooltips({
  25.  
  26. tip_follows_cursor:true,
  27.  
  28. tip_delay_time:30,
  29.  
  30. tip_fade_speed:300,
  31.  
  32. attribute:"title"
  33.  
  34. });
  35.  
  36. });
  37.  
  38. })(jQuery);
  39.  
  40. </script>
  41. <link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
  42.  
  43. <!--CSS customization here. -->
  44.  
  45. <style type="text/css">
  46.  
  47.  
  48.  
  49.  
  50. #s-m-t-tooltip{
  51. font-size:9px;
  52. font-family:'Calibri';
  53. position:absolute;
  54. margin-top: 15px;
  55. letter-spacing:1px;
  56. z-index:9999;
  57. background:white;
  58. text-transform:uppercase;
  59. padding:2px 3px 2px 3px;
  60. border:1px solid #000;
  61. }
  62.  
  63.  
  64.  
  65. ::-webkit-scrollbar{height: 5px;
  66. width: 4px;
  67. -webkit-border-radius: 0px;
  68. background-color:white}
  69. ::-webkit-scrollbar-thumb{background-color:#fff; border:1px solid #000;}
  70. ::-webkit-scrollbar-track{background-color:#fff; border:1px solid #000;}
  71.  
  72.  
  73.  
  74. blockquote {padding:5px 0 5px 30px;
  75. border-left:1px solid #eee;
  76. margin:10px 30px;
  77. }
  78.  
  79. body {
  80. color:#333;
  81. font-family:helvetica;
  82. font-weight:100;
  83. font-size:11px;
  84. text-align:justify;
  85. margin:0;
  86. line-height:18px;
  87. background:#fff;}
  88.  
  89. a {color:black;
  90. text-decoration:none;
  91. -webkit-transition:all 0.8s;
  92. -moz-transition:all 0.8s;
  93. -ms-transition:all 0.8s;
  94. -o-transition:all 0.8s;
  95. transition:all 0.8s; }
  96.  
  97. a:hover {
  98. color:#fff;
  99. -webkit-transition:all 0.8s;
  100. -moz-transition:all 0.8s;
  101. -ms-transition:all 0.8s;
  102. -o-transition:all 0.8s;
  103. transition:all 0.8s; }
  104.  
  105. img{
  106. border:none;
  107. text-decoration:none}
  108.  
  109. p {
  110. margin-top:5px;
  111. margin-bottom:5px}
  112.  
  113.  
  114.  
  115. #con {
  116. left:50%;
  117. margin-left:-200px;
  118. position:absolute;
  119. }
  120.  
  121.  
  122. .rectangle {
  123. width:120px;
  124. margin-left:-60px;
  125. margin-top:160px;
  126. position:fixed;
  127. }
  128.  
  129. #stuffs {
  130. position:absolute;
  131. margin-top:-160px;
  132. margin-left:-50px;
  133. width:700px;
  134. height:350px;
  135. overflow-y:scroll;
  136. overflow-x:hidden;
  137. padding-bottom:13px;
  138. padding-left:1px;
  139. background:#fff;
  140. }
  141.  
  142. .cells {margin-top:-15px; margin-left:0px;}
  143.  
  144. #cell {
  145. width:230px;
  146. height:155px;
  147. margin-top:25px;
  148. margin-left:20px;
  149. display:inline-block;
  150. -webkit-transition: all 1.3s ease;
  151. -moz-transition: all 1.3s ease;
  152. -o-transition: all 1.3s ease;
  153. }
  154.  
  155. #cell:hover #info {
  156. opacity:1;
  157. -webkit-transition: all 1.3s ease;
  158. -moz-transition: all 1.3s ease;
  159. -o-transition: all 1.3s ease;
  160. }
  161.  
  162. #cell img {
  163. width:250px;
  164. height:150px;
  165. padding:0px;
  166. padding-top:10px;
  167. outline-offset:3px;
  168. -webkit-transition: all 1.3s ease;
  169. -moz-transition: all 1.3s ease;
  170. -o-transition: all 1.3s ease;
  171. }
  172.  
  173. .row {
  174. width:600px;
  175. }
  176.  
  177. #text {
  178. opacity:1;
  179. font-family:'Arvo';
  180. width:216px;
  181. text-align:center;
  182. font-style:none;
  183. letter-spacing:0px;
  184. height:2px; padding:7px;
  185. position:relative;
  186. margin-top:-175px;
  187. margin-left:15px;
  188. color:#000;
  189. -webkit-transition: all 1.3s ease;
  190. -moz-transition: all 1.3s ease;
  191. -o-transition: all 1.3s ease;
  192. }
  193.  
  194.  
  195. #title {
  196. font-size:18px;
  197. margin-top:-3px;
  198. padding-bottom:5px;
  199. font-family:'Arvo';
  200. float:center;
  201. text-transform:uppercase;
  202. }
  203.  
  204. #linksandinfo {
  205. opacity:0;
  206. text-align:center;
  207. font-family:'Arvo';
  208. font-size:12px;
  209. line-height:100%;
  210. padding-top:8px;
  211. color:#000;
  212. width:250px;
  213. height:150px;
  214. background-color:#fff;
  215. border:1px solid #000;
  216. margin-top:-6px;
  217. margin-left:-15px;
  218. -webkit-transition: all 0.5s ease;
  219. -moz-transition: all 0.5s ease;
  220. -o-transition: all 0.5s ease;
  221. }
  222.  
  223. #linksandinfo a {
  224. font-family:'Arvo';
  225. font-size:14px;
  226. padding-top:8px;
  227. color:#000;
  228. text-decoration:underline;
  229. -webkit-transition: all 0.6s ease;
  230. -moz-transition: all 0.6s ease;
  231. -o-transition: all 0.6s ease;
  232. }
  233.  
  234. #cell:hover #linksandinfo {
  235. opacity:1;
  236. -webkit-transition: all 0.5s ease;
  237. -moz-transition: all 0.5s ease;
  238. -o-transition: all 0.5s ease;
  239. }
  240.  
  241.  
  242.  
  243.  
  244. .l {
  245. background:#fff;
  246. margin-top:100px;
  247. width:400px;
  248. text-align:center;
  249. font-family:'Calibri';
  250. text-transform:uppercase;
  251. }
  252.  
  253. #blog-title {font-size:48px;
  254. margin-bottom:12px;
  255. text-align:center;
  256. letter-spacing:1px;
  257. font-family: 'Arvo';
  258. text-transform:uppercase;
  259. color:black;
  260. background:#f8f8f8;
  261. padding:15px;}
  262.  
  263. .links {padding-bottom:10px;
  264. border-bottom:1px solid #eee; font-size:24px;}
  265. .links a {margin:0 5px;
  266. padding:2px 5px;
  267. border:none;}
  268. .links a:hover {background:#f8f8f8;}
  269. .desc {
  270. text-transform:none;
  271. margin:10px 25px;
  272. font-family:helvetica;}
  273.  
  274.  
  275. </style>
  276.  
  277.  
  278.  
  279.  
  280.  
  281.  
  282.  
  283.  
  284. </head>
  285.  
  286. <body>
  287. <div id="con">
  288. <div class="l">
  289. <div id="blog-title">Themes</div>
  290. <div class="links">
  291. <a href="/" title="maker">✖</a>
  292. <a href="/ask" title="message">✖</a>
  293. <a href="/" title="link">✖</a>
  294. <a href="/" title="link">✖</a>
  295. <a href="http://ofmoan.tumblr.com" title="credit">✖</a>
  296. </div>
  297. <div class="desc">This is your description/rules. Please don't make it too long.</div>
  298. </div>
  299.  
  300.  
  301.  
  302. <div class="rectangle">
  303. <div id="stuffs">
  304. <div class="cells">
  305. <div class="row">
  306.  
  307.  
  308.  
  309.  
  310. <div id="cell">
  311.  
  312. <img src="http://lafund.org/sites/default/files/comingsoon_stamp.png">
  313.  
  314. <div id="text">
  315. <div id="title">
  316.  
  317. theme #01
  318.  
  319. </div>
  320.  
  321. <div id="linksandinfo">
  322. <p style="font-size:24px">Info</p>
  323. <br>
  324. 500px posts<br>
  325. Links<br>
  326. Sidebar 150x150<br>
  327. Customizable links<br>
  328. Hover description<br>
  329. <br>
  330. <a href="/">preview</a> | <a href="/">code</a><br>
  331.  
  332. </div>
  333.  
  334. </div>
  335.  
  336. </div>
  337.  
  338.  
  339.  
  340.  
  341. <div id="cell">
  342.  
  343. <img src="http://lafund.org/sites/default/files/comingsoon_stamp.png">
  344.  
  345. <div id="text">
  346.  
  347. <div id="title">
  348.  
  349. theme #02
  350.  
  351. </div>
  352.  
  353. <div id="linksandinfo">
  354. <p style="font-size:24px">Info</p>
  355. <br>
  356. 500px posts<br>
  357. Links<br>
  358. Sidebar 150x150<br>
  359. Customizable links<br>
  360. Hover description<br>
  361. <br>
  362. <a href="/">preview</a> | <a href="/">code</a><br>
  363.  
  364. </div>
  365.  
  366. </div>
  367.  
  368. </div>
  369.  
  370.  
  371.  
  372.  
  373. <div id="cell">
  374.  
  375. <img src="http://lafund.org/sites/default/files/comingsoon_stamp.png">
  376.  
  377. <div id="text">
  378.  
  379. <div id="title">
  380.  
  381. theme #03
  382.  
  383. </div>
  384.  
  385. <div id="linksandinfo">
  386. <p style="font-size:24px">Info</p>
  387. <br>
  388. 500px posts<br>
  389. Links<br>
  390. Sidebar 150x150<br>
  391. Customizable links<br>
  392. Hover description<br>
  393. <br>
  394. <a href="/">preview</a> | <a href="/">code</a><br>
  395.  
  396. </div>
  397.  
  398. </div>
  399.  
  400. </div>
  401.  
  402.  
  403.  
  404.  
  405. <div id="cell">
  406.  
  407. <img src="http://lafund.org/sites/default/files/comingsoon_stamp.png">
  408.  
  409. <div id="text">
  410.  
  411. <div id="title">
  412.  
  413. theme #04
  414.  
  415. </div>
  416.  
  417. <div id="linksandinfo">
  418. <p style="font-size:24px">Info</p>
  419. <br>
  420. 500px posts<br>
  421. Links<br>
  422. Sidebar 150x150<br>
  423. Customizable links<br>
  424. Hover description<br>
  425. <br>
  426. <a href="/">preview</a> | <a href="/">code</a><br>
  427.  
  428. </div>
  429.  
  430. </div>
  431.  
  432. </div>
  433.  
  434.  
  435.  
  436.  
  437. <div id="cell">
  438.  
  439. <img src="http://lafund.org/sites/default/files/comingsoon_stamp.png">
  440.  
  441. <div id="text">
  442.  
  443. <div id="title">
  444.  
  445. theme #05
  446.  
  447. </div>
  448.  
  449. <div id="linksandinfo">
  450. <p style="font-size:24px">Info</p>
  451. <br>
  452. 500px posts<br>
  453. Links<br>
  454. Sidebar 150x150<br>
  455. Customizable links<br>
  456. Hover description<br>
  457. <br>
  458. <a href="/">preview</a> | <a href="/">code</a><br>
  459.  
  460. </div>
  461.  
  462. </div>
  463.  
  464. </div>
  465.  
  466.  
  467.  
  468.  
  469. <div id="cell">
  470.  
  471. <img src="http://lafund.org/sites/default/files/comingsoon_stamp.png">
  472.  
  473. <div id="text">
  474.  
  475. <div id="title">
  476.  
  477. theme #06
  478.  
  479. </div>
  480.  
  481. <div id="linksandinfo">
  482. <p style="font-size:24px">Info</p>
  483. <br>
  484. 500px posts<br>
  485. Links<br>
  486. Sidebar 150x150<br>
  487. Customizable links<br>
  488. Hover description<br>
  489. <br>
  490. <a href="/">preview</a> | <a href="/">code</a><br>
  491.  
  492. </div>
  493.  
  494. </div>
  495.  
  496. </div>
  497.  
  498.  
  499.  
  500.  
  501. <div id="cell">
  502. <img src="http://lafund.org/sites/default/files/comingsoon_stamp.png">
  503. <div id="text">
  504. <div id="title">theme #07</div>
  505.  
  506. <div id="linksandinfo">
  507. <p style="font-size:24px">Info</p>
  508. <br>
  509. 500px posts<br>
  510. Links<br>
  511. Sidebar 150x150<br>
  512. Customizable links<br>
  513. Hover description<br>
  514. <br>
  515. <a href="/">preview</a> | <a href="/">code</a><br>
  516.  
  517. </div>
  518.  
  519. </div>
  520.  
  521. </div>
  522.  
  523.  
  524. <div id="cell">
  525.  
  526. <img src="http://lafund.org/sites/default/files/comingsoon_stamp.png">
  527.  
  528. <div id="text">
  529.  
  530. <div id="title">
  531.  
  532. theme #08
  533.  
  534. </div>
  535.  
  536. <div id="linksandinfo">
  537. <p style="font-size:24px">Info</p>
  538. <br>
  539. 500px posts<br>
  540. Links<br>
  541. Sidebar 150x150<br>
  542. Customizable links<br>
  543. Hover description<br>
  544. <br>
  545. <a href="/">preview</a> | <a href="/">code</a><br>
  546.  
  547. </div>
  548.  
  549. </div>
  550.  
  551. </div>
  552.  
  553.  
  554.  
  555.  
  556. <div id="cell">
  557.  
  558. <img src="http://lafund.org/sites/default/files/comingsoon_stamp.png">
  559.  
  560. <div id="text">
  561.  
  562. <div id="title">
  563.  
  564. theme #09
  565.  
  566. </div>
  567.  
  568. <div id="linksandinfo">
  569. <p style="font-size:24px">Info</p>
  570. <br>
  571. 500px posts<br>
  572. Links<br>
  573. Sidebar 150x150<br>
  574. Customizable links<br>
  575. Hover description<br>
  576. <br>
  577. <a href="/">preview</a> | <a href="/">code</a><br>
  578.  
  579. </div>
  580.  
  581. </div>
  582.  
  583. </div>
  584.  
  585. <!-- to add more cells just copy from <div id="cell"> to the last </div> -->
  586.  
  587. </div>
  588. </div>
  589. </div>
  590. </div>
  591.  
  592.  
  593. </body></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!