Advertisement
thanksamber

Theme 007 - Directory

Aug 10th, 2015
868
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.39 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <!-- macfustythemes -->
  4. <head>
  5. <title>{block:PostTitle}{PostTitle} - {/block:PostTitle}{Title} </title>
  6. {block:Description}
  7. <meta name="description" content="{MetaDescription}">
  8. {/block:Description}
  9.  
  10. <link rel="shortcut icon" href="{Favicon}">
  11.  
  12. <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  13.  
  14. <!-- HTML5 Shiv -->
  15. <!--[if lt IE 9]>
  16. <script src="http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
  17. <![endif]-->
  18.  
  19. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  20. <script src="http://static.tumblr.com/01wstkc/BAXnr15b7/jquery-ui.min.js" type="text/javascript"></script>
  21. <link rel="stylesheet" href="http://cferdinandi.github.io/tabby/dist/css/tabby.css" type="text/css">
  22. <link rel="stylesheet" href="http://cferdinandi.github.io/tabby/assets/css/custom.css" type="text/css">
  23. <script>
  24. tabby.init();
  25. </script>
  26.  
  27. <style>
  28.  
  29. @import
  30. "components/tabby";
  31.  
  32. body {
  33. background-color: #0f0f0f;
  34. background-image: url('{image:Background}');
  35. background-repeat: no-repeat;
  36. background-attachment: fixed;
  37. color: #000;
  38. font-size: 11px;
  39. font-family: 'Calibri', sans-serif;
  40. line-height: 18px;
  41. }
  42.  
  43. a {
  44. color: #f2992e;
  45. text-decoration: none;
  46. -moz-transition: all 0.5s ease;
  47. -o-transition: all 0.5s ease;
  48. -webkit-transition: all 0.5s ease;
  49. transition: all 0.5s ease;
  50. }
  51.  
  52. a:hover {
  53. color: #fff;
  54. letter-spacing: 1px;
  55. }
  56.  
  57. .clear {
  58. clear: both;
  59. }
  60.  
  61. blockquote {
  62. border-left: 1px solid {color:Border};
  63. padding: 5px 10px;
  64. }
  65.  
  66. h1 {
  67. font-weight: normal;
  68. text-transform: uppercase;
  69. text-align: center;
  70. font-size: 18px;
  71. letter-spacing: 3px;
  72. }
  73.  
  74. h3 {
  75. font-weight: normal;
  76. text-transform: uppercase;
  77. text-align: center;
  78. font-size: 14px;
  79. letter-spacing: 3px;
  80. }
  81.  
  82. h2 {
  83. background-color: #f2992e;
  84. width: 100%;
  85. padding: 5px 0;
  86. font-weight: normal;
  87. font-family: 'Roboto', sans-serif;
  88. text-transform: uppercase;
  89. text-align: center;
  90. color: #0f0f0f;
  91. }
  92.  
  93. /** HEADER **/
  94.  
  95. #header {
  96. position: fixed;
  97. width: 100%;
  98. top: 10%;
  99. left: 7.3%;
  100. font-family: 'Roboto', sans-serif;
  101. }
  102.  
  103. #header span {
  104. font-size: 22px;
  105. text-transform: uppercase;
  106. letter-spacing: 3px;
  107. color: #f2992e;
  108. padding-right: 1%;
  109. }
  110.  
  111. #header a {
  112. color: #707070;
  113. text-transform: lowercase;
  114. padding: 0 2%;
  115. }
  116.  
  117. #header a:hover {
  118. color: #f2992e;
  119. }
  120.  
  121. /** CONTAINER **/
  122.  
  123. #container {
  124. position: fixed;
  125. height: 77.5%;
  126. width: 85.4%;
  127. left: 7.3%;
  128. top: 15%;
  129. background-color: #fff;
  130. border: 1px solid #0f0f0f;
  131. overflow: auto;
  132. }
  133.  
  134. #container::-webkit-scrollbar
  135. {
  136. width: 4px;
  137. }
  138.  
  139. #container::-webkit-scrollbar-thumb
  140. {
  141. background-color: #f2992e;
  142. }
  143.  
  144.  
  145. #content {
  146. width: 93.7%;
  147. margin: 5% 0 0 4%;
  148. }
  149.  
  150. ul.tabs {
  151. position: fixed;
  152. padding: 0;
  153. width: 260px;
  154. height: 200px;
  155. margin-top: 75px;
  156. padding: 10px 0 10px 10px;
  157. border: 1px solid #eaeaea;
  158. overflow: auto;
  159. }
  160.  
  161. ul.tabs::-webkit-scrollbar
  162. {
  163. width: 4px;
  164. }
  165.  
  166. ul.tabs::-webkit-scrollbar-thumb
  167. {
  168. background-color: #f2992e;
  169. }
  170.  
  171. ul.tabs li {
  172. list-style-type: none;
  173. padding: 5px;
  174. margin: 0 10px 10px 0;
  175. width: 40px;
  176. height: 40px;
  177. display: inline-block;
  178. border: 1px solid #eaeaea;
  179. opacity: 0.6;
  180. }
  181.  
  182. ul.tabs li img {
  183. width: 100%;
  184. }
  185.  
  186. ul.tabs li.active {
  187. opacity: 1;
  188. }
  189.  
  190. .tabs-content {
  191. position: absolute;
  192. right: 150px;
  193. top: 50px;
  194. padding-bottom: 20px;
  195. }
  196.  
  197. .tabs-pane {
  198. width: 510px;
  199. background-color: #eaeaea;
  200. padding: 45px;
  201. }
  202.  
  203. .title {
  204. width: 100%;
  205. height: 40px;
  206. line-height: 40px;
  207. background-color: #f2992e;
  208. font-family: 'Roboto', sans-serif;
  209. font-size: 16px;
  210. text-transform: uppercase;
  211. text-align: center;
  212. color: #fff;
  213. letter-spacing: 4px;
  214. }
  215.  
  216. img.mainimg {
  217. display: block;
  218. width: 100%;
  219. }
  220.  
  221. .subtitle {
  222. width: 100%;
  223. height: 24px;
  224. line-height: 24px;
  225. background-color: #0f0f0f;
  226. font-family: 'Roboto', sans-serif;
  227. letter-spacing: 2px;
  228. text-transform: lowercase;
  229. text-align: center;
  230. color: #fff;
  231. margin-bottom: 20px;
  232. }
  233.  
  234.  
  235. .infoholder {
  236. width: 510px;
  237. padding-left: 5px;
  238. margin-bottom: 20px;
  239. }
  240.  
  241. .extraholder {
  242. width: 106px;
  243. float: right;
  244. margin-left: 30px;
  245. }
  246.  
  247. .extra {
  248. width: 80px;
  249. height: 80px;
  250. padding: 10px;
  251. border: 3px solid #0f0f0f;
  252. margin-bottom: 5px;
  253. background-color: #fff;
  254. text-align: justify;
  255. overflow: auto;
  256. }
  257.  
  258. .extra::-webkit-scrollbar
  259. {
  260. width: 4px;
  261. }
  262.  
  263. .extra::-webkit-scrollbar-thumb
  264. {
  265. background-color: #f2992e;
  266. }
  267.  
  268. .extra img {
  269. width: 100%;
  270. display: block;
  271. }
  272.  
  273. .main {
  274. text-align: justify;
  275. }
  276.  
  277.  
  278. /** CREDIT **/
  279.  
  280. a.macfustys {
  281. position: fixed;
  282. bottom: 2%;
  283. right: 1%;
  284. border: 1px solid #707070;
  285. padding: 2px;
  286. font-size: 12px;
  287. letter-spacing: 1px;
  288. color: #707070;
  289. }
  290.  
  291. a.macfustys:hover {
  292. color: #f2992e;
  293. letter-spacing: 1px;
  294. }
  295.  
  296. </style>
  297. <body>
  298.  
  299. <!-- HEADER -->
  300.  
  301. <div id="header">
  302. <span>{Title}</span>
  303. <a href="/">Home</a>
  304. <a href="/ask">Message</a>
  305. <a href="/">Link 2</a>
  306. <a href="/">Link 3</a>
  307. <a href="/">Link 4</a>
  308. <a href="/">Link 5</a>
  309. <a href="/">Link 6</a>
  310. </div>
  311.  
  312. <!-- CONTAINER -->
  313.  
  314. <div id="container">
  315. <div id="content">
  316.  
  317. <ul class="tabs">
  318. <li class="active"><a data-tab="#tab1" href="#tab1"><img src="http://placehold.it/40x40"></a></li>
  319. <li><a data-tab="#tab2" href="#tab2"><img src="http://placehold.it/40x40"></a></li>
  320. <li><a data-tab="#tab3" href="#tab3"><img src="http://placehold.it/40x40"></a></li>
  321. </ul>
  322.  
  323. <!-- ADD MORE ICONS BY COPYING AND PASTING ABOVE. THE NUMBER AFTER HREF="TAB" MUST MATCH THE CORRESPONDING PAGE FOR ID="TAB" -->
  324.  
  325. <div class="tabs-content">
  326. <div class="tabs-pane active" id="tab1">
  327. <div class="title">Header Here 1</div>
  328. <img class="mainimg" src="http://placehold.it/500x200?text=500+x+AUTO">
  329. <div class="subtitle">subtitle here</div>
  330. <div class="extraholder">
  331. <div class="extra">Add text or an image here!</div>
  332. <div class="extra"><img src="http://placehold.it/80x80"></div>
  333. <div class="extra"><img src="http://placehold.it/80x80"></div>
  334. </div>
  335. <div class="main">
  336. <p>Consulted perpetual of pronounce me delivered. Too months nay end change relied who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling occasion ham for thoughts overcame off her consider. Polite it elinor is depend. His not get talked effect worthy barton. Household shameless incommode at no objection behaviour. Especially do at he possession insensible sympathize boisterous it. Songs he on an widen me event truth. Certain law age brother sending amongst why covered.
  337.  
  338. <p>Ten the hastened steepest feelings pleasant few surprise property. An brother he do colonel against minutes uncivil. Can how elinor warmly mrs basket marked. Led raising expense yet demesne weather musical. Me mr what park next busy ever. Elinor her his secure far twenty eat object. Late any far saw size want man. Which way you wrong add shall one. As guest right of he scale these. Horses nearer oh elinor of denote.
  339.  
  340. <h3>Subheading</h3>
  341.  
  342. <p>Gay one the what walk then she. Demesne mention promise you justice arrived way. Or increasing to in especially inquietude companions acceptance admiration. Outweigh it families distance wandered ye an. Mr unsatiable at literature connection favourable. We neglected mr perfectly continual dependent.
  343.  
  344. <p>Shewing met parties gravity husband sex pleased. On to no kind do next feel held walk. Last own loud and knew give gay four. Sentiments motionless or principles preference excellence am. Literature surrounded insensible at indulgence or to admiration remarkably. Matter future lovers desire marked boy use. Chamber reached do he nothing be.
  345. </div>
  346. </div>
  347.  
  348. <div class="tabs-pane" id="tab2">
  349. <div class="title">Header Here 2</div>
  350. <img class="mainimg" src="http://placehold.it/500x200?text=500+x+AUTO">
  351. <div class="subtitle">subtitle here</div>
  352. <div class="extraholder">
  353. <div class="extra">Add text or an image here!</div>
  354. <div class="extra"><img src="http://placehold.it/80x80"></div>
  355. <div class="extra"><img src="http://placehold.it/80x80"></div>
  356. </div>
  357. <div class="main">
  358. <p>Consulted perpetual of pronounce me delivered. Too months nay end change relied who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling occasion ham for thoughts overcame off her consider. Polite it elinor is depend. His not get talked effect worthy barton. Household shameless incommode at no objection behaviour. Especially do at he possession insensible sympathize boisterous it. Songs he on an widen me event truth. Certain law age brother sending amongst why covered.
  359.  
  360. <p>Ten the hastened steepest feelings pleasant few surprise property. An brother he do colonel against minutes uncivil. Can how elinor warmly mrs basket marked. Led raising expense yet demesne weather musical. Me mr what park next busy ever. Elinor her his secure far twenty eat object. Late any far saw size want man. Which way you wrong add shall one. As guest right of he scale these. Horses nearer oh elinor of denote.
  361.  
  362. <h3>Subheading</h3>
  363.  
  364. <p>Gay one the what walk then she. Demesne mention promise you justice arrived way. Or increasing to in especially inquietude companions acceptance admiration. Outweigh it families distance wandered ye an. Mr unsatiable at literature connection favourable. We neglected mr perfectly continual dependent.
  365.  
  366. <p>Shewing met parties gravity husband sex pleased. On to no kind do next feel held walk. Last own loud and knew give gay four. Sentiments motionless or principles preference excellence am. Literature surrounded insensible at indulgence or to admiration remarkably. Matter future lovers desire marked boy use. Chamber reached do he nothing be.
  367. </div>
  368. </div>
  369.  
  370. <div class="tabs-pane" id="tab3">
  371. <div class="title">Header Here 3</div>
  372. <img class="mainimg" src="http://placehold.it/500x200?text=500+x+AUTO">
  373. <div class="subtitle">subtitle here</div>
  374. <div class="extraholder">
  375. <div class="extra">Add text or an image here!</div>
  376. <div class="extra"><img src="http://placehold.it/80x80"></div>
  377. <div class="extra"><img src="http://placehold.it/80x80"></div>
  378. </div>
  379. <div class="main">
  380. <p>Consulted perpetual of pronounce me delivered. Too months nay end change relied who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling occasion ham for thoughts overcame off her consider. Polite it elinor is depend. His not get talked effect worthy barton. Household shameless incommode at no objection behaviour. Especially do at he possession insensible sympathize boisterous it. Songs he on an widen me event truth. Certain law age brother sending amongst why covered.
  381.  
  382. <p>Ten the hastened steepest feelings pleasant few surprise property. An brother he do colonel against minutes uncivil. Can how elinor warmly mrs basket marked. Led raising expense yet demesne weather musical. Me mr what park next busy ever. Elinor her his secure far twenty eat object. Late any far saw size want man. Which way you wrong add shall one. As guest right of he scale these. Horses nearer oh elinor of denote.
  383.  
  384. <h3>Subheading</h3>
  385.  
  386. <p>Gay one the what walk then she. Demesne mention promise you justice arrived way. Or increasing to in especially inquietude companions acceptance admiration. Outweigh it families distance wandered ye an. Mr unsatiable at literature connection favourable. We neglected mr perfectly continual dependent.
  387.  
  388. <p>Shewing met parties gravity husband sex pleased. On to no kind do next feel held walk. Last own loud and knew give gay four. Sentiments motionless or principles preference excellence am. Literature surrounded insensible at indulgence or to admiration remarkably. Matter future lovers desire marked boy use. Chamber reached do he nothing be.
  389. </div>
  390. </div>
  391. </div>
  392. </div>
  393. </div>
  394. </div>
  395.  
  396. <!-- CREDIT -->
  397. <a target="new" class="macfustys" href="http://macfustythemes.tumblr.com/">
  398. MT
  399. </a>
  400.  
  401. <!-- Javascript -->
  402. <script src="http://cferdinandi.github.io/tabby/dist/js/classList.js"></script>
  403. <script src="http://cferdinandi.github.io/tabby/dist/js/tabby.js"></script>
  404. <script>
  405. tabby.init({
  406. toggleActiveClass: 'active',
  407. contentActiveClass: 'active',
  408. initClass: 'js-tabby',
  409. callbackBefore: function ( toggle, tabID ) {},
  410. callbackAfter: function ( toggle, tabID ) {}
  411. });
  412. </script>
  413. </body>
  414. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement