Advertisement
themesbygeorgia

Page 09 -- Theme Page #1

Sep 7th, 2014
1,475
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.04 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.  
  5. <!--- Themes Page #1 by wonderfullythemes
  6.  
  7. don't remove the credit thanks :)
  8.  
  9. I didn't include any comments cept for "this ends here" stuff but I tried to make it look as simple as I could
  10. --->
  11.  
  12. <title>{Title}</title>
  13. <link rel="shortcut icon" href="{Favicon}">
  14. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15.  
  16. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  17. <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  18.  
  19. <!--SCRIPT FOR TOOLTIPS-->
  20. <stsss>
  21. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  22. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  23. <script>
  24. (function($){
  25. $(document).ready(function(){
  26. $("a[title]").style_my_tooltips({
  27. tip_follows_cursor:true,
  28. tip_delay_time:200,
  29. tip_fade_speed:300,
  30. attribute:"title"
  31. });
  32. });
  33. })(jQuery);
  34. </script>
  35.  
  36.  
  37. <!--SMOOTH SCROLL-->
  38. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  39. <script>
  40. $(document).ready(function(){
  41. $('a[href^="#"]').on('click',function (e) {
  42. e.preventDefault();
  43.  
  44. var target = this.hash,
  45. $target = $(target);
  46.  
  47. $('html, body').stop().animate({
  48. 'scrollTop': $target.offset().top
  49. }, 900, 'swing', function () {
  50. window.location.hash = target;
  51. });
  52. });
  53. });
  54. </script>
  55.  
  56. <style type="text/css">
  57.  
  58. /*----------------------------BASICS-----------------------------*/
  59. ::-webkit-scrollbar-thumb {
  60. height:auto;
  61. background-color:white;
  62. }
  63.  
  64. ::-webkit-scrollbar {
  65. height:4px;
  66. width:7px;
  67. padding-right:2px;
  68. background-color:transparent;
  69. }
  70.  
  71. ::-moz-selection {
  72. background-color:transparent;
  73. color: #000;
  74. }
  75.  
  76. ::selection {
  77. background-color:transparent;
  78. color: #000;
  79. }
  80.  
  81. #s-m-t-tooltip {
  82. max-width:200px;
  83. font-family:'consolas';
  84. font-size:9px;
  85. background-color: rgba(0,0,0,0.5);
  86. color:#fff;
  87. border:1px solid #fff;
  88. line-height:100%;
  89. display:none;
  90. position:absolute;
  91. letter-spacing:1px;
  92. text-transform:uppercase;
  93. padding:5px;
  94. margin:15px 0px 0px 15px;
  95. z-index:99999999999999;
  96. }
  97.  
  98. body {
  99. background:black;
  100. color:white;
  101. font-family:'calibri';
  102. font-size:16px;
  103. color:#fff;
  104. text-align:left;
  105. text-decoration:none;
  106. text-transform:none;
  107. margin:0px;
  108. background-image:url('http://imgur.com/DZFfZjv.png');
  109. background-attachment:fixed;
  110. background-repeat:no-repeat;
  111. background-size:cover;
  112. }
  113.  
  114. a {
  115. text-decoration:none;
  116. color:white;
  117. -moz-transition-duration:0.7s;
  118. -webkit-transition-duration:0.7s;
  119. -o-transition-duration:0.7s;
  120. }
  121.  
  122. a:hover {
  123. background-color:white;
  124. color:black;
  125. -moz-transition-duration:0.7s;
  126. -webkit-transition-duration:0.7s;
  127. -o-transition-duration:0.7s;
  128. }
  129.  
  130. h2 {
  131. color:white;
  132. }
  133.  
  134. img, blockquote, li, h2 {
  135. max-width:100%;
  136. }
  137.  
  138. li {
  139. list-style:square;
  140. }
  141.  
  142. /*--smooth scroll tabs--*/
  143.  
  144. .section{
  145. margin:0px;
  146. height:1200px;
  147. width:100%;
  148. float:left;
  149. }
  150.  
  151. .section p {
  152. margin-top:7.5%;
  153. width:auto;
  154. }
  155.  
  156. .links {
  157. padding:5px;
  158. top:220px;
  159. right:100px;
  160. width:80px;
  161. position:fixed;
  162. }
  163.  
  164. .nav {
  165. background: rgba(0,0,0,0.5);
  166. padding:10px 10px 10px 5px;
  167. font-size:12px;
  168. z-index:5000;
  169. }
  170.  
  171. .nav li {
  172. list-style:none;
  173. }
  174.  
  175. .nav a {
  176. border-left:1px solid white;
  177. padding:5px;
  178. text-transform:uppercase;
  179. border-bottom:none;
  180. color:white;
  181. }
  182.  
  183. .nav a:hover {
  184. background-color:transparent;
  185. color:white;
  186. box-shadow:none;
  187. letter-spacing:5px;
  188. }
  189.  
  190. /*--RULES--*/
  191. .rules {
  192. width:100%;
  193. height:auto;
  194. padding:50px;
  195. }
  196.  
  197. .rules h5 {
  198. width:100px;
  199. padding:5px;
  200. border:1px solid white;
  201. text-align:center;
  202. text-transform:uppercase;
  203. }
  204.  
  205. /*--THEMES AND PAGES--*/
  206.  
  207. #container {
  208. margin-left:10%;
  209. width:970px;
  210. height:440px;
  211. overflow-y:scroll;
  212. overflow-x:hidden;
  213. border:1px solid white;
  214. background-color: rgba(0, 0, 0, 0.5);
  215. }
  216.  
  217. #tagscontainer {
  218. display:table;
  219. float:center;
  220. }
  221.  
  222. #tags {
  223. float:center;
  224. width:100%;
  225. overflow:hidden;
  226. padding:5px;
  227. display:table-cell;
  228. }
  229.  
  230. .theme {
  231. display:inline-block;
  232. padding:20px;
  233. -moz-transition-duration:0.7s;
  234. -webkit-transition-duration:0.7s;
  235. -o-transition-duration:0.7s;
  236. }
  237.  
  238. .title {
  239. text-align:center;
  240. text-transform:uppercase;
  241. font-family:'consolas';
  242. letter-spacing:4px;
  243. color:#fff;
  244. border:1px solid white;
  245. margin-bottom:5px;
  246. font-size:10px;
  247. line-height:15px;
  248. height:30px;
  249. }
  250.  
  251. #image {
  252. border:1px solid white;
  253. height:135px;
  254. width:270px;
  255. }
  256.  
  257. #image img {
  258. width:100%;
  259. height:100%;
  260. }
  261.  
  262. {CustomCSS}</style></head><body>
  263.  
  264. <div class="links">
  265.  
  266. <div class="nav">
  267. <li><a href="#section1">Rules</a></li>
  268. <li><a href="#section2">Themes</a></li>
  269. <li><a href="#section3">Pages</a></li>
  270. </div>
  271.  
  272. <br><br>
  273.  
  274. <div class="nav">
  275. <li><a href="/">return</a>
  276. <li><a href="http://tumblr.com/dashboard">dash</a>
  277. <li><a href="http://wonderfullythemes.tumblr.com">credit</a>
  278. </div>
  279.  
  280. </div>
  281.  
  282.  
  283. <div class="section" id="section1">
  284.  
  285. <p>
  286. <div id="container">
  287. <div class="rules">
  288.  
  289. <h5>you can</h5>
  290. <ul>
  291. <li>do this</li>
  292. <li>and this</li>
  293. <li>and im gonna be nice and say you can do this</li>
  294. </ul>
  295.  
  296. <h5>you can't</h5>
  297. <ul>
  298. <li>you cannot under any circumstances to this</li>
  299. <li>or this (without asking me first)</li>
  300. <li>and never this ok? ok</li>
  301. </ul>
  302.  
  303. <br>
  304.  
  305. woah add a small note like thanks for reading go click themes to scroll down to themes and click pages to see my pages that's it
  306.  
  307. </div><!--end .rules-->
  308. </div><!--end #container-->
  309.  
  310. </p>
  311.  
  312. </div><!--end #section1-->
  313.  
  314.  
  315. <div class="section" id="section2">
  316.  
  317. <p>
  318.  
  319. <div id="container">
  320. <div id="tagscontainer">
  321. <div id="tags">
  322.  
  323. <!--
  324.  
  325. <div class="theme">
  326. <div class="title">
  327. <u>title here</u><br>
  328. <a href="" target="blank">preview</a>&nbsp;|&nbsp;<a href="" target="blank">info</a>&nbsp;|&nbsp;<a href="" target="blank">code</a>
  329. </div>
  330.  
  331. <div id="image">
  332. <img src="http://imgur.com/vD3ADcr.png" />
  333. </div>
  334. </div>
  335.  
  336. -->
  337.  
  338. <div class="theme">
  339. <div class="title">
  340. <u>title here</u><br>
  341. <a href="" target="blank">preview</a>&nbsp;|&nbsp;<a href="" target="blank">info</a>&nbsp;|&nbsp;<a href="" target="blank">code</a>
  342. </div>
  343.  
  344. <div id="image">
  345. <img src="http://imgur.com/vD3ADcr.png" />
  346. </div>
  347. </div>
  348.  
  349. <div class="theme">
  350. <div class="title">
  351. <u>title here</u><br>
  352. <a href="" target="blank">preview</a>&nbsp;|&nbsp;<a href="" target="blank">info</a>&nbsp;|&nbsp;<a href="" target="blank">code</a>
  353. </div>
  354.  
  355. <div id="image">
  356. <img src="http://imgur.com/vD3ADcr.png" />
  357. </div>
  358. </div>
  359.  
  360. <div class="theme">
  361. <div class="title">
  362. <u>title here</u><br>
  363. <a href="" target="blank">preview</a>&nbsp;|&nbsp;<a href="" target="blank">info</a>&nbsp;|&nbsp;<a href="" target="blank">code</a>
  364. </div>
  365.  
  366. <div id="image">
  367. <img src="http://imgur.com/vD3ADcr.png" />
  368. </div>
  369. </div>
  370.  
  371. <div class="theme">
  372. <div class="title">
  373. <u>title here</u><br>
  374. <a href="" target="blank">preview</a>&nbsp;|&nbsp;<a href="" target="blank">info</a>&nbsp;|&nbsp;<a href="" target="blank">code</a>
  375. </div>
  376.  
  377. <div id="image">
  378. <img src="http://imgur.com/vD3ADcr.png" />
  379. </div>
  380. </div>
  381.  
  382. <div class="theme">
  383. <div class="title">
  384. <u>title here</u><br>
  385. <a href="" target="blank">preview</a>&nbsp;|&nbsp;<a href="" target="blank">info</a>&nbsp;|&nbsp;<a href="" target="blank">code</a>
  386. </div>
  387.  
  388. <div id="image">
  389. <img src="http://imgur.com/vD3ADcr.png" />
  390. </div>
  391. </div>
  392.  
  393. <div class="theme">
  394. <div class="title">
  395. <u>title here</u><br>
  396. <a href="" target="blank">preview</a>&nbsp;|&nbsp;<a href="" target="blank">info</a>&nbsp;|&nbsp;<a href="" target="blank">code</a>
  397. </div>
  398.  
  399. <div id="image">
  400. <img src="http://imgur.com/vD3ADcr.png" />
  401. </div>
  402. </div>
  403.  
  404. <div class="theme">
  405. <div class="title">
  406. <u>title here</u><br>
  407. <a href="" target="blank">preview</a>&nbsp;|&nbsp;<a href="" target="blank">info</a>&nbsp;|&nbsp;<a href="" target="blank">code</a>
  408. </div>
  409.  
  410. <div id="image">
  411. <img src="http://imgur.com/vD3ADcr.png" />
  412. </div>
  413. </div>
  414.  
  415.  
  416. </div><!--end .tags--></div><!--end .tagscontainer--></div><!--end #container-->
  417.  
  418. </p>
  419.  
  420. </div><!--end #section2-->
  421.  
  422. <div class="section" id="section3">
  423.  
  424. <p>
  425.  
  426. <div id="container">
  427. <div id="tagscontainer">
  428. <div id="tags">
  429.  
  430. <!--
  431.  
  432. <div class="theme">
  433. <div class="title">
  434. <u>title here</u><br>
  435. <a href="" target="blank">preview</a>&nbsp;|&nbsp;<a href="" target="blank">info</a>&nbsp;|&nbsp;<a href="" target="blank">code</a>
  436. </div>
  437.  
  438. <div id="image">
  439. <img src="http://imgur.com/vD3ADcr.png" />
  440. </div>
  441. </div>
  442.  
  443. -->
  444.  
  445. <div class="theme">
  446. <div class="title">
  447. <u>title here</u><br>
  448. <a href="" target="blank">preview</a>&nbsp;|&nbsp;<a href="" target="blank">info</a>&nbsp;|&nbsp;<a href="" target="blank">code</a>
  449. </div>
  450.  
  451. <div id="image">
  452. <img src="http://imgur.com/vD3ADcr.png" />
  453. </div>
  454. </div>
  455.  
  456. <div class="theme">
  457. <div class="title">
  458. <u>title here</u><br>
  459. <a href="" target="blank">preview</a>&nbsp;|&nbsp;<a href="" target="blank">info</a>&nbsp;|&nbsp;<a href="" target="blank">code</a>
  460. </div>
  461.  
  462. <div id="image">
  463. <img src="http://imgur.com/vD3ADcr.png" />
  464. </div>
  465. </div>
  466.  
  467. <div class="theme">
  468. <div class="title">
  469. <u>title here</u><br>
  470. <a href="" target="blank">preview</a>&nbsp;|&nbsp;<a href="" target="blank">info</a>&nbsp;|&nbsp;<a href="" target="blank">code</a>
  471. </div>
  472.  
  473. <div id="image">
  474. <img src="http://imgur.com/vD3ADcr.png" />
  475. </div>
  476. </div>
  477.  
  478. <div class="theme">
  479. <div class="title">
  480. <u>title here</u><br>
  481. <a href="" target="blank">preview</a>&nbsp;|&nbsp;<a href="" target="blank">info</a>&nbsp;|&nbsp;<a href="" target="blank">code</a>
  482. </div>
  483.  
  484. <div id="image">
  485. <img src="http://imgur.com/vD3ADcr.png" />
  486. </div>
  487. </div>
  488.  
  489. <div class="theme">
  490. <div class="title">
  491. <u>title here</u><br>
  492. <a href="" target="blank">preview</a>&nbsp;|&nbsp;<a href="" target="blank">info</a>&nbsp;|&nbsp;<a href="" target="blank">code</a>
  493. </div>
  494.  
  495. <div id="image">
  496. <img src="http://imgur.com/vD3ADcr.png" />
  497. </div>
  498. </div>
  499.  
  500. <div class="theme">
  501. <div class="title">
  502. <u>title here</u><br>
  503. <a href="" target="blank">preview</a>&nbsp;|&nbsp;<a href="" target="blank">info</a>&nbsp;|&nbsp;<a href="" target="blank">code</a>
  504. </div>
  505.  
  506. <div id="image">
  507. <img src="http://imgur.com/vD3ADcr.png" />
  508. </div>
  509. </div>
  510.  
  511. <div class="theme">
  512. <div class="title">
  513. <u>title here</u><br>
  514. <a href="" target="blank">preview</a>&nbsp;|&nbsp;<a href="" target="blank">info</a>&nbsp;|&nbsp;<a href="" target="blank">code</a>
  515. </div>
  516.  
  517. <div id="image">
  518. <img src="http://imgur.com/vD3ADcr.png" />
  519. </div>
  520. </div>
  521.  
  522.  
  523.  
  524. </div><!--end .tags--></div><!--end .tagscontainer--></div><!--end #container-->
  525.  
  526. </p>
  527.  
  528. </div><!--end #section3-->
  529.  
  530.  
  531. </body>
  532. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement