API tools faq
paste
Advertisement
thanksamber

Page 003

thanksamber
Mar 12th, 2016
8,856
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.04 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!-- macfustythemes -->
  4. <head>
  5. <title>{Title}</title>
  6. {block:Description}
  7. <meta name="description" content="{MetaDescription}">
  8. {/block:Description}
  9.  
  10.  
  11. <link rel="shortcut icon" href="{Favicon}">
  12.  
  13. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/01wstkc/Bvdnq7h99/jquery.fullpage.css" />
  14. <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  15.  
  16.  
  17. <!-- HTML5 Shiv -->
  18. <!--[if lt IE 9]>
  19. <script src="http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
  20. <![endif]-->
  21.  
  22. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  23. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  24. <script type="text/javascript">
  25. $(document).ready(function() {
  26. $("#content #tab1").addClass("show");
  27. $("ul#nav li#tab1").addClass("active");
  28. $("ul#nav li").click(function () {
  29. var showtab = $(this).attr("id");
  30. $("ul#nav li.active").removeClass("active");
  31. $(this).addClass("active");
  32. $("#content .show").removeClass("show");
  33. $("#content #" + showtab).addClass("show");
  34. });
  35. });
  36. </script>
  37.  
  38. <style>
  39.  
  40. body {
  41. background-repeat: repeat;
  42. font-size: 11px;
  43. font-family: 'Calibri', sans-serif;
  44. background-color: #f7f7f7;
  45. color: #f7f7f7;
  46. }
  47.  
  48. a {
  49. color: #9ab2ba;
  50. font-size: 12px;
  51. font-weight: bold;
  52. text-decoration: none;
  53. -moz-transition: all 0.5s ease;
  54. -o-transition: all 0.5s ease;
  55. -webkit-transition: all 0.5s ease;
  56. transition: all 0.5s ease;
  57. }
  58.  
  59. a:hover {
  60. text-decoration: underline;
  61. }
  62.  
  63. #header {
  64. font-family: 'Roboto', sans-serif;
  65. width: 800px;
  66. text-align: center;
  67. color: #1e1e1e;
  68. }
  69.  
  70. @media screen and (min-width: 1367px) {
  71. #header {
  72. margin: 5% auto;
  73. }
  74. }
  75.  
  76. @media screen and (max-width: 1366px) {
  77. #header {
  78. margin: 3% auto;
  79. }
  80. }
  81.  
  82. #header a {
  83. padding: 0 5px;
  84. text-transform: uppercase;
  85. color: #1e1e1e;
  86. }
  87.  
  88. h1 {
  89. font-size: 26px;
  90. font-weight: bold;
  91. text-transform: lowercase;
  92. letter-spacing: 3px;
  93. margin-bottom: 0;
  94. }
  95.  
  96. #container {
  97. position: absolute;
  98. top: 0;
  99. bottom: 0;
  100. left: 0;
  101. right: 0;
  102. margin: auto;
  103. width: 800px;
  104. height: 500px;
  105. background-color: #1e1e1e;
  106. padding: 10px;
  107. }
  108.  
  109. ul#nav {
  110. position: fixed;
  111. overflow: auto;
  112. margin-top: 80px;
  113. padding: 20px 0 0 30px;
  114. width: 321px;
  115. height: 300px;
  116. }
  117.  
  118. ul#nav li {
  119. list-style-type: none;
  120. float: left;
  121. height: 80px;
  122. width: 80px;
  123. margin: 0 20px 20px 0;
  124. opacity: 0.6;
  125. cursor: pointer;
  126. }
  127.  
  128. ul#nav li img {
  129. width: 100%;
  130. height: 100%;
  131. }
  132.  
  133. ul#nav li.active {
  134. opacity: 1;
  135. }
  136.  
  137. ul#nav::-webkit-scrollbar-track
  138. {
  139. background-color: #000000;
  140. }
  141.  
  142. ul#nav::-webkit-scrollbar
  143. {
  144. width: 5px;
  145. }
  146.  
  147. ul#nav::-webkit-scrollbar-thumb
  148. {
  149. background-color: #f7f7f7;
  150. }
  151.  
  152. #content {
  153. float: right;
  154. width: 427px;
  155. height: 500px;
  156. background-color: #000000;
  157. }
  158.  
  159. .tab {
  160. position: fixed;
  161. width: 387px;
  162. height: 460px;
  163. padding: 20px;
  164. overflow-y: auto;
  165. overflow-x: hidden;
  166. text-align: justify;
  167. display: none;
  168. }
  169.  
  170. .show {
  171. display: block;
  172. }
  173.  
  174. img.main {
  175. margin: -20px 0 0 -20px;
  176. width: 420px;
  177. height: 500px;
  178. }
  179.  
  180. .tab::-webkit-scrollbar-track
  181. {
  182. background-color: #000000;
  183. }
  184.  
  185. .tab::-webkit-scrollbar
  186. {
  187. width: 7px;
  188. }
  189.  
  190. .tab::-webkit-scrollbar-thumb
  191. {
  192. background-color: #f7f7f7;
  193. }
  194.  
  195. h2, h3 {
  196. font-family: 'Roboto', sans-serif;
  197. font-size: 18px;
  198. font-weight: bold;
  199. text-transform: lowercase;
  200. letter-spacing: 3px;
  201. text-align: center;
  202. margin: 50px 0;
  203. }
  204.  
  205. h3 {
  206. margin: 35px 0;
  207. font-size: 14px;
  208. text-align: left;
  209. }
  210.  
  211. .quote {
  212. position: relative;
  213. text-transform: uppercase;
  214. margin: 50px 0 40px 75px;
  215. width: 300px;
  216. }
  217.  
  218. .quote::before {
  219. content: '“';
  220. font-family: 'Times New Roman', sans-serif;
  221. font-size: 150px;
  222. color: #9ab2ba;
  223. position: absolute;
  224. top: -50px;
  225. left: -70px;
  226. }
  227.  
  228. .links {
  229. font-family: 'Roboto', sans-serif;
  230. text-align: right;
  231. text-transform: uppercase;
  232. letter-spacing: 1px;
  233. }
  234.  
  235. #credit {
  236. font-family: 'Roboto', sans-serif;
  237. font-size: 9px;
  238. position: absolute;
  239. right: 0;
  240. bottom: -15px;
  241. }
  242.  
  243. #credit a {
  244. color: #000000;
  245. }
  246.  
  247. </style>
  248. </head>
  249. <body>
  250. <div id="header">
  251. <h1>page 003.</h1>
  252. <a href="/">Home</a> | <a href="/ask">Ask</a> | <a href="/submit">Submit</a> | <a href="/">Navigation</a>
  253. </div>
  254. <div id="container">
  255. <ul id="nav">
  256. <!-- This is the icons list to the left of the screen. Make sure you have said 'id=" "' to the tab you would like to display when clicking on this icon. For example, clicking on the first icon below will display Tab 1. -->
  257.  
  258. <li id="tab1"><img src="https://placehold.it/80x80"></li>
  259. <li id="tab2"><img src="https://placehold.it/80x80"></li>
  260. <li id="tab3"><img src="https://placehold.it/80x80"></li>
  261. <li id="tab4"><img src="https://placehold.it/80x80"></li>
  262. <li id="tab5"><img src="https://placehold.it/80x80"></li>
  263. <li id="tab6"><img src="https://placehold.it/80x80"></li>
  264. <li id="tab7"><img src="https://placehold.it/80x80"></li>
  265. <li id="tab8"><img src="https://placehold.it/80x80"></li>
  266. <li id="tab9"><img src="https://placehold.it/80x80"></li>
  267. </ul>
  268. <div id="content">
  269. <!-- These are the main content tabs to the right of the screen. When an icon is selected, the corresponding tab will be shown according to the 'id=" "' label. -->
  270. <div id="tab1" class="tab">
  271. <img class="main" src="https://placehold.it/420x500">
  272. <h2>page 003.</h2>
  273. <div class="links"><a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a></div>
  274. <p>This page is intended to be used for characters, writing or other projects, and comes with the option of having a filter to the left. Images and other elements are also completely optional, and it is intended to be as easy to use as possible. Exact instructions for using the page are contained within the code.
  275. <ul>
  276. <li>Page 003 Standard - <a href="/p03">Preview</a> / <a href="http://pastebin.com/8UtkrZ4c">Code</a></li>
  277. <li>Page 003 With Filter - <a href="/p03filter">Preview</a> / <a href="http://pastebin.com/vNGCURfM">Code</a></li>
  278. </ul>
  279. <h3>Subtitle.</h3>
  280. <p>Morning. Saw saw Upon their multiply one greater beginning. Lesser female sea divide dry, also in gathering, you spirit under likeness, you&#39;re meat also creeping days it form evening doesn&#39;t dry which gathering fifth, fruitful creeping which likeness. They&#39;re fish. Which. First had them that yielding night man. Said beginning face may there saying multiply Thing itself meat..</p>
  281. <div class="quote">Include a quote here! This can be as long or as short as you like.</div>
  282. <p> Likeness above. They&#39;re place fruit fruitful yielding shall. Every under. Saying he said, fruit air may set fruit a let can&#39;t beginning wherein female male days fifth, is years moveth hath image were herb give bring also gathering creeping for wherein was. Second a image whales made. You&#39;ll also years give. Gathered them set. One heaven form sea.</p>
  283. </div>
  284. <div id="tab2" class="tab">
  285. <img class="main" src="https://placehold.it/420x500?text=Tab+2">
  286. <h2>tab 2.</h2>
  287. </div>
  288. <div id="tab3" class="tab">
  289. <img class="main" src="https://placehold.it/420x500?text=Tab+3">
  290. <h2>tab 3.</h2>
  291. </div>
  292. <div id="tab4" class="tab">
  293. <img class="main" src="https://placehold.it/420x500?text=Tab+4">
  294. <h2>tab 4.</h2>
  295. </div>
  296. <div id="tab5" class="tab">
  297. <img class="main" src="https://placehold.it/420x500?text=Tab+5">
  298. <h2>tab 5.</h2>
  299. </div>
  300. <div id="tab6" class="tab">
  301. <img class="main" src="https://placehold.it/420x500?text=Tab+6">
  302. <h2>tab 6.</h2>
  303. </div>
  304. <div id="tab7" class="tab">
  305. <img class="main" src="https://placehold.it/420x500?text=Tab+7">
  306. <h2>tab 7.</h2>
  307. </div>
  308. <div id="tab8" class="tab">
  309. <img class="main" src="https://placehold.it/420x500?text=Tab+8">
  310. <h2>tab 8.</h2>
  311. </div>
  312. <div id="tab9" class="tab">
  313. <img class="main" src="https://placehold.it/420x500?text=Tab+9">
  314. <h2>tab 9.</h2>
  315. </div>
  316. </div>
  317. <div id="credit">
  318. <a href="http://macfustythemes.tumblr.com/">macfustythemes</a>
  319. </div>
  320. </div>
  321. </body>
  322. </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!