API tools faq
paste
Advertisement
helpdesigns

Theme Tag's Juh 13/02

helpdesigns
Feb 12th, 2014
149
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.30 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <link href='http://fonts.googleapis.com/css?family=Snippet|Sue+Ellen+Francisco|Andika|Delius+Swash+Caps|Lobster|Redressed|Tangerine|Rancho|Rochester|Lobster+Two|Dancing+Script|Pacifico|Crafty+Girls|Akronim' rel='stylesheet' type='text/css'>
  4.  
  5. <link href='http://fonts.googleapis.com/css?family=Akronim' rel='stylesheet' type='text/css'>
  6.  
  7. <head>
  8.  
  9.  
  10. <meta name="color:frase" content="#499692" />
  11. <meta name="color:fundolist" content="#eee" />
  12. <meta name="color:letralist" content="#aaa" />
  13. <meta name="color:bghover" content="#499692" />
  14. <meta name="color:bg" content="#4e4441" />
  15. <meta name="color:linkbg" content="#fff" />
  16.  
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{favicon}">
  19.  
  20. <style>
  21.  
  22. a {color: #aaa; text-decoration: none; text-transform: none;}
  23. a:hover {color:#aaa; background-color: transparent; text-decoration: none;}
  24.  
  25.  
  26. body {background-color:#eee; font-family: verdana; color: {color:text}; text-align: center; font-size: 11px; background-image:url('http://static.tumblr.com/fyc2dbo/ebon0wzb6/sem_t__tulo-1.png'); background-attachment: fixed; }
  27.  
  28. /*--- Pratica base - helpdesigns ----*/
  29. #corpohd {margin-left:400px;margin-top:240px;width:500px;height:300px;position: fixed;background:#fff;border:1px solid #eee;}
  30.  
  31.  
  32. /* --- Tags - TUTORIAL por TTHY (things-to-help-you.tumblr.com) ------- */ .tabs {position: relative; width: 550px; }
  33. .tabs input {position: absolute; z-index: 1000;width: 0px;height: 0px;left: 0px;top: 0px;opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);cursor: pointer;}.tabs input#tab-2{left: 0px;}.tabs input#tab-3{left: 0px;}.tabs input#tab-4{left: 0px;}.tabs label {background: {color:bg};font-size: 9px;line-height: 22px;height: 22px;position: relative;padding: 2px;float: left;display: block;width: 94px;color:{color:linkbg};letter-spacing: 1px;text-transform: uppercase;font-weight: bold;text-align: center;margin: 1px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}.tabs label:after {content: '' color: #; background: #;position: absolute;bottom: -2px;left: 0;width: 100%;height: 2px;display: block;}.tabs input:hover + label {opacity: 0.3;}
  34. .tabs label:first-of-type {z-index: 4;color:{color:linkbg}; background: {color:bg};}
  35. .tab-label-2 {z-index: 3;}
  36. .tab-label-3 {z-index: 2;}
  37. .tab-label-4 {z-index: 1;}
  38. .tabs input:checked + label {background: {color:bghover}; z-index: 6; {color:linkbg}; }
  39. .clear-shadow {clear: both;}
  40. .content {background:{color:linkbg}; margin-bottom: 20px; margin-top: 5px; position: relative;width: 100%;z-index: 5;}
  41. .content div {position: absolute;top: 0;left: 0;padding: 1px;z-index: 1;opacity: 0;-webkit-transition: opacity linear 0.1s;-moz-transition: opacity linear 0.1s;-o-transition: opacity linear 0.1s;-ms-transition: opacity linear 0.1s;transition: opacity linear 0.1s;}
  42. .tabs input.tab-selector-1:checked ~ .content .content-1,
  43. .tabs input.tab-selector-2:checked ~ .content .content-2,
  44. .tabs input.tab-selector-3:checked ~ .content .content-3,
  45. .tabs input.tab-selector-4:checked ~ .content .content-4,
  46. .tabs input.tab-selector-5:checked ~ .content .content-5 {z-index: 100;
  47. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;-webkit-transition: opacity ease-out 0.6s 0.1s;-moz-transition: opacity ease-out 0.6s 0.1s;-o-transition: opacity ease-out 0.6s 0.1s;-ms-transition: opacity ease-out 0.6s 0.1s;transition: opacity ease-out 0.2s 0.1s;}
  48.  
  49. .content {margin-left:-22px;}
  50.  
  51. .content a {display: inline-block; width: 230px;font-weight:none; font-family: calibri; font-style: italic; margin-right: 0px;background: {color:fundolist}; padding: 3px; margin-bottom: 4px; font-size: 11px; color:{color:letralist}; }
  52.  
  53. .fs {position:fixed;width:700px;text-align:center;margin-top:175px; margin-left:430px;font-family:Million Julya;font-size:50px;color:{color:frase};overflow:hidden;-webkit-transition: all 0.8s ease-out;padding: 6px;opacity: 1;padding: 7px;background:;z-index: 999999999999;;text-shadow: 1px 1px 0px #fff;}
  54. @font-face {src: url('http://static.tumblr.com/fyc2dbo/tLimww3g1/million_julya.ttf'); font-family:Million Julya;}
  55.  
  56.  
  57. #tumblr_controls{position: fixed!important}
  58. #tumblr_controls{position: fixed!important}
  59. #tumblr_controls{position: fixed!important}
  60. #tumblr_controls{position: fixed!important}
  61.  
  62. #s-m-t-tooltip {max-width:300px; padding:3px 4px 5px 4px;margin-top:15px;background-color:#fff; font-family:calibri; font-size:9px; letter-spacing:1px; text-transform:uppercase; color:#ccc; z-index:9999999;}/*********helpdesigns******/
  63.  
  64.  
  65. /*--- Não remover os Créditos ----*/
  66. </style>
  67.  
  68. <script type="text/javascript"
  69. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  70. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  71. <script>
  72. (function($){
  73.  
  74. $(document).ready(function(){
  75. $("[title]").style_my_tooltips();
  76. });
  77. })(jQuery);
  78. </script>
  79.  
  80. <body>
  81. <div class="fs">My Tutorias</div>
  82.  
  83.  
  84. <div id="corpohd">
  85. <section class="tabs"> <!-- começo do tabs -->
  86.  
  87. <!-- menus tabs -->
  88. <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
  89. <label for="tab-1" class="tab-label-1">MENU</label>
  90. <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
  91. <label for="tab-2" class="tab-label-2">Efeitos</label>
  92. <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
  93. <label for="tab-3" class="tab-label-3">html</label>
  94. <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
  95. <label for="tab-4" class="tab-label-4">tutorias</label>
  96. <input id="tab-5" type="radio" name="radio-set" class="tab-selector-5" />
  97. <label for="tab-5" class="tab-label-5">materiais</label>
  98. <!-- fim do menus tabs -->
  99.  
  100.  
  101. <div class="clear-shadow"></div><!-- não mexa -->
  102. <div class="content"><!-- começo do content onde as coisas ficam -->
  103.  
  104. <div class="content-1">
  105.  
  106. <a href="Link">nome</a>
  107. <a href="Link">nome</a>
  108. <a href="Link">nome</a>
  109. <a href="Link">nome</a>
  110. <a href="Link">nome</a>
  111. <a href="Link">nome</a>
  112. <a href="Link">nome</a>
  113. <a href="Link">nome</a>
  114. <a href="Link">nome</a>
  115. <a href="Link">nome</a>
  116. <a href="Link">nome</a>
  117. <a href="Link">nome</a>
  118. <a href="Link">nome</a>
  119. <a href="Link">nome</a>
  120. <a href="Link">nome</a>
  121. <a href="Link">nome</a>
  122. <a href="Link">nome</a>
  123. <a href="Link">nome</a>
  124. <a href="Link">nome</a>
  125. <a href="Link">nome</a>
  126. <a href="Link">nome</a>
  127. <a href="Link">nome</a>
  128.  
  129. </div>
  130.  
  131. <div class="content-2">
  132.  
  133. <a href="Link">nome</a>
  134. <a href="Link">nome</a>
  135. <a href="Link">nome</a>
  136. <a href="Link">nome</a>
  137. <a href="Link">nome</a>
  138. <a href="Link">nome</a>
  139. <a href="Link">nome</a>
  140. <a href="Link">nome</a>
  141. <a href="Link">nome</a>
  142. <a href="Link">nome</a>
  143. <a href="Link">nome</a>
  144. <a href="Link">nome</a>
  145. <a href="Link">nome</a>
  146. <a href="Link">nome</a>
  147. <a href="Link">nome</a>
  148. <a href="Link">nome</a>
  149. <a href="Link">nome</a>
  150. <a href="Link">nome</a>
  151. <a href="Link">nome</a>
  152. <a href="Link">nome</a>
  153. <a href="Link">nome</a>
  154. <a href="Link">nome</a>
  155.  
  156. </div>
  157. <div class="content-3">
  158.  
  159. <a href="Link">nome</a>
  160. <a href="Link">nome</a>
  161. <a href="Link">nome</a>
  162. <a href="Link">nome</a>
  163. <a href="Link">nome</a>
  164. <a href="Link">nome</a>
  165. <a href="Link">nome</a>
  166. <a href="Link">nome</a>
  167. <a href="Link">nome</a>
  168. <a href="Link">nome</a>
  169. <a href="Link">nome</a>
  170. <a href="Link">nome</a>
  171. <a href="Link">nome</a>
  172. <a href="Link">nome</a>
  173. <a href="Link">nome</a>
  174. <a href="Link">nome</a>
  175. <a href="Link">nome</a>
  176. <a href="Link">nome</a>
  177. <a href="Link">nome</a>
  178. <a href="Link">nome</a>
  179. <a href="Link">nome</a>
  180. <a href="Link">nome</a>
  181.  
  182. </div>
  183. <div class="content-4">
  184.  
  185. <a href="Link">nome</a>
  186. <a href="Link">nome</a>
  187. <a href="Link">nome</a>
  188. <a href="Link">nome</a>
  189. <a href="Link">nome</a>
  190. <a href="Link">nome</a>
  191. <a href="Link">nome</a>
  192. <a href="Link">nome</a>
  193. <a href="Link">nome</a>
  194. <a href="Link">nome</a>
  195. <a href="Link">nome</a>
  196. <a href="Link">nome</a>
  197. <a href="Link">nome</a>
  198. <a href="Link">nome</a>
  199. <a href="Link">nome</a>
  200. <a href="Link">nome</a>
  201. <a href="Link">nome</a>
  202. <a href="Link">nome</a>
  203. <a href="Link">nome</a>
  204. <a href="Link">nome</a>
  205. <a href="Link">nome</a>
  206. <a href="Link">nome</a>
  207. </div>
  208. <div class="content-5">
  209.  
  210. <a href="Link">nome</a>
  211. <a href="Link">nome</a>
  212. <a href="Link">nome</a>
  213. <a href="Link">nome</a>
  214. <a href="Link">nome</a>
  215. <a href="Link">nome</a>
  216. <a href="Link">nome</a>
  217. <a href="Link">nome</a>
  218. <a href="Link">nome</a>
  219. <a href="Link">nome</a>
  220. <a href="Link">nome</a>
  221. <a href="Link">nome</a>
  222. <a href="Link">nome</a>
  223. <a href="Link">nome</a>
  224. <a href="Link">nome</a>
  225. <a href="Link">nome</a>
  226. <a href="Link">nome</a>
  227. <a href="Link">nome</a>
  228. <a href="Link">nome</a>
  229. <a href="Link">nome</a>
  230. <a href="Link">nome</a>
  231. <a href="Link">nome</a>
  232.  
  233. </div>
  234.  
  235. </div><!-- fechamento do content onde fica as coisas escritas -->
  236.  
  237. </section><!-- fechamento do tab -->
  238.  
  239.  
  240.  
  241. </div>
  242. </div>
  243.  
  244.  
  245. </div>
  246. </div>
  247.  
  248. <div style="display:block;top:5px;left:5px;font-size:8px;font-family:PF Arma Five;position:fixed;color:#aaa; padding:3px;z-index:55554235555;"><a href="http://helpdesigns.tumblr.com/" title="Theme by Helpdesigns| dts Raisa e TTHY ©">Helpdesigns ©</a>
  249. </div>
  250.  
  251. </body>
  252.  
  253. </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!