Advertisement
dimplehoe

Theme page 01

Jun 19th, 2014
516
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.67 KB | None | 0 0
  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