API tools faq
paste
thanksamber

Page 001 without colors

thanksamber
Jun 20th, 2015
7,182
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.51 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='http://fonts.googleapis.com/css?family=Roboto+Condensed' 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" src="http://static.tumblr.com/01wstkc/7Kvnq7h6j/jquery.fullpage.js"></script>
  25. <script type="text/javascript">
  26. $(document).ready(function() {
  27. $('#fullpage').fullpage({
  28. anchors: ['c1', 'c2', 'c3', 'c4', 'c5', 'c6', 'c7', 'c8', 'c9', 'c10', 'c11', 'c12', 'c13', 'c14', 'c15'],
  29. menu: '#menu',
  30. scrollingSpeed: 1000
  31. });
  32.  
  33. });
  34. </script>
  35.  
  36. <style>
  37.  
  38. body {
  39. background-repeat: repeat;
  40. font-size: 11px;
  41. font-family: 'Calibri', sans-serif;
  42. line-height: 18px;
  43. background-color: #fff;
  44. }
  45.  
  46. a {
  47. color: #717171;
  48. text-decoration: none;
  49. -moz-transition: all 0.5s ease;
  50. -o-transition: all 0.5s ease;
  51. -webkit-transition: all 0.5s ease;
  52. transition: all 0.5s ease;
  53. }
  54.  
  55. a:hover {
  56. color: #0a0a0a;
  57. }
  58.  
  59. /** HEADER **/
  60.  
  61. #header {
  62. position: fixed;
  63. width: 100%;
  64. height: 75px;
  65. top: 0;
  66. z-index: 999;
  67. text-align: left;
  68. background-color: #f3f3f3;
  69. border-bottom: 15px solid #d5d5d5;
  70. }
  71.  
  72. h1 {
  73. float: left;
  74. margin: 30px 20px 0 20px;
  75. font-family: 'Roboto Condensed', sans-serif;
  76. font-weight: normal;
  77. text-transform: uppercase;
  78. letter-spacing: 5px;
  79. font-size: 28px;
  80. color: #0a0a0a;
  81. }
  82.  
  83. #links {
  84. margin-top: 32px;
  85. text-transform: lowercase;
  86. letter-spacing: 2px;
  87. }
  88.  
  89. /** MENU **/
  90.  
  91. ul#menu {
  92. position: fixed;
  93. z-index: 9999;
  94. width: 220px;
  95. top: 28.5%;
  96. left: 10%;
  97. }
  98.  
  99. ul#menu li {
  100. display: inline-block;
  101. list-style-type: none;
  102. width: 50px;
  103. height: 50px;
  104. margin: 0 10px 10px 0;
  105. padding: 5px;
  106. opacity: 0.4;
  107. }
  108.  
  109. ul#menu li.active {
  110. margin: 0 10px 10px 0;
  111. border: 1px solid #d5d5d5;
  112. opacity: 0.6;
  113. }
  114.  
  115. ul#menu li.active a:hover{
  116. border: none;
  117. }
  118.  
  119. ul#menu li img {
  120. width: 50px;
  121. height: 50px;
  122. }
  123.  
  124. .scrollheader {
  125. position: fixed;
  126. width: 240px;
  127. top: 27.5%;
  128. left: 12%;
  129. text-align: center;
  130. font-family: 'Roboto Condensed', sans-serif;
  131. text-transform: uppercase;
  132. letter-spacing: 6px;
  133. }
  134.  
  135. /** CONTENT **/
  136.  
  137. #content {
  138. position: absolute;
  139. left: 40%;
  140. top: 20%;
  141. width: 670px;
  142. height: 350px;
  143. padding: 10px 20px;
  144. background-color: #f3f3f3;
  145. border: 20px solid #d5d5d5;
  146. }
  147.  
  148.  
  149. .text {
  150. float: left;
  151. width: 280px;
  152. height: 320px;
  153. padding: 10px;
  154. overflow: auto;
  155. text-align: justify;
  156. margin-right: 20px;
  157. }
  158.  
  159. .text::-webkit-scrollbar-track
  160. {
  161. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  162. border-radius: 10px;
  163. background-color: #F5F5F5;
  164. }
  165.  
  166. .text::-webkit-scrollbar
  167. {
  168. width: 6px;
  169. background-color: #F5F5F5;
  170. }
  171.  
  172. .text::-webkit-scrollbar-thumb
  173. {
  174. border-radius: 10px;
  175. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  176. background-color: #d5d5d5;
  177. }
  178.  
  179. h2 {
  180. font-family: 'Roboto Condensed', sans-serif;
  181. font-weight: normal;
  182. text-transform: uppercase;
  183. letter-spacing: 5px;
  184. font-size: 24px;
  185. color: #0a0a0a;
  186. text-align: center;
  187. }
  188.  
  189. h3 {
  190. text-align: center;
  191. font-weight: normal;
  192. font-size: 11px;
  193. text-transform: uppercase;
  194. letter-spacing: 2px;
  195. }
  196.  
  197. h3 span {
  198. font-size: 20px;
  199. }
  200.  
  201. .mainimage {
  202. width: 250px;
  203. height: 322px;
  204. float: left;
  205. margin-top: 15px;
  206. }
  207.  
  208. .mainimage img {
  209. width: 100%;
  210. height: 100%;
  211. }
  212.  
  213. .sideimageholder {
  214. float: right;
  215. margin-top: 15px;
  216. }
  217.  
  218. .sideimg {
  219. width: 73px;
  220. height: 73px;
  221. margin-bottom: 10px;
  222. }
  223.  
  224. .sideimg img {
  225. width: 100%;
  226. height: 100%;
  227. }
  228.  
  229. </style>
  230. </head>
  231. <body>
  232. <div id="header">
  233. <h1>Your Header Here</h1>
  234. <div id="links">
  235. <a href="/">Index</a> |
  236. <a href="/ask">Message</a> |
  237. <a href="/">Link 1</a> |
  238. <a href="/">Link 2</a> |
  239. <a href="/">Link 3</a> |
  240. <a href="http://macfustythemes.tumblr.com/">Theme</a>
  241. </div>
  242. </div>
  243.  
  244. <!-- ICON NAVIGATION -->
  245. <div class="scrollheader">Scroll to navigate</div>
  246. <ul id="menu">
  247. <li data-menuanchor="c1"><a href="#c1"><img src="http://placehold.it/50x50"></a></li>
  248. <li data-menuanchor="c2"><a href="#c2"><img src="http://placehold.it/50x50"></a></li>
  249. <li data-menuanchor="c3"><a href="#c3"><img src="http://placehold.it/50x50"></a></li>
  250. <li data-menuanchor="c4"><a href="#c4"><img src="http://placehold.it/50x50"></a></li>
  251. <li data-menuanchor="c5"><a href="#c5"><img src="http://placehold.it/50x50"></a></li>
  252. <li data-menuanchor="c6"><a href="#c6"><img src="http://placehold.it/50x50"></a></li>
  253.  
  254. <!-- COPY AND PASTE TO ADD MORE ICONS HERE. DON'T FORGET TO AMEND THE 'C1' NUMBERS TO FOLLOW CHRONOLOGICALLY. YOU CAN HAVE UP TO FIFTEEN ICONS AND PAGES. -->
  255. </ul>
  256.  
  257. <div id="fullpage">
  258.  
  259. <!-- PAGE 1 -->
  260. <div class="section" id="section0">
  261. <div id="content">
  262. <div class="text">
  263. <h2>Content Header 1</h2>
  264. <h3><a href="/">Link</a> | <a href="/">Link</a>
  265. <p><span>&ldquo;</span> Include a quotation here! <span>&rdquo;</span>
  266. </h3>
  267.  
  268. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet sem id orci porta commodo. Cras a lectus id nisl posuere pretium eget a nisl. Integer ac lacus non sem vestibulum mollis quis ut urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at ultricies arcu. Vivamus convallis in mi feugiat molestie. Pellentesque lacinia pretium imperdiet. Vestibulum sit amet leo dictum, fringilla arcu vel, malesuada metus.
  269. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  270.  
  271. </div>
  272. <div class="mainimage">
  273. <img src="http://placehold.it/250x250">
  274. </div>
  275. <div class="sideimageholder">
  276. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  277. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  278. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  279. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  280. </div>
  281. </div>
  282. </div>
  283. <!-- END OF PAGE 1 -->
  284.  
  285. <!-- PAGE 2 -->
  286. <div class="section" id="section1">
  287. <div id="content">
  288. <div class="text">
  289. <h2>Content Header 2</h2>
  290. <h3><a href="/">Link</a> | <a href="/">Link</a>
  291. <p><span>&ldquo;</span> Include a quotation here! <span>&rdquo;</span>
  292. </h3>
  293.  
  294. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet sem id orci porta commodo. Cras a lectus id nisl posuere pretium eget a nisl. Integer ac lacus non sem vestibulum mollis quis ut urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at ultricies arcu. Vivamus convallis in mi feugiat molestie. Pellentesque lacinia pretium imperdiet. Vestibulum sit amet leo dictum, fringilla arcu vel, malesuada metus.
  295. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  296.  
  297. </div>
  298. <div class="mainimage">
  299. <img src="http://placehold.it/250x250">
  300. </div>
  301. <div class="sideimageholder">
  302. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  303. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  304. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  305. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  306. </div>
  307. </div>
  308. </div>
  309. <!-- PAGE 3 -->
  310. <div class="section" id="section2">
  311. <div id="content">
  312. <div class="text">
  313. <h2>Content Header 3</h2>
  314. <h3><a href="/">Link</a> | <a href="/">Link</a>
  315. <p><span>&ldquo;</span> Include a quotation here! <span>&rdquo;</span>
  316. </h3>
  317.  
  318. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet sem id orci porta commodo. Cras a lectus id nisl posuere pretium eget a nisl. Integer ac lacus non sem vestibulum mollis quis ut urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at ultricies arcu. Vivamus convallis in mi feugiat molestie. Pellentesque lacinia pretium imperdiet. Vestibulum sit amet leo dictum, fringilla arcu vel, malesuada metus.
  319. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  320.  
  321. </div>
  322. <div class="mainimage">
  323. <img src="http://placehold.it/250x250">
  324. </div>
  325. <div class="sideimageholder">
  326. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  327. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  328. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  329. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  330. </div>
  331. </div>
  332. </div>
  333. <!-- END OF PAGE 3 -->
  334. <!-- PAGE 4 -->
  335. <div class="section" id="section4">
  336. <div id="content">
  337. <div class="text">
  338. <h2>Content Header 4</h2>
  339. <h3><a href="/">Link</a> | <a href="/">Link</a>
  340. <p><span>&ldquo;</span> Include a quotation here! <span>&rdquo;</span>
  341. </h3>
  342.  
  343. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet sem id orci porta commodo. Cras a lectus id nisl posuere pretium eget a nisl. Integer ac lacus non sem vestibulum mollis quis ut urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at ultricies arcu. Vivamus convallis in mi feugiat molestie. Pellentesque lacinia pretium imperdiet. Vestibulum sit amet leo dictum, fringilla arcu vel, malesuada metus.
  344. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  345.  
  346. </div>
  347. <div class="mainimage">
  348. <img src="http://placehold.it/250x250">
  349. </div>
  350. <div class="sideimageholder">
  351. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  352. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  353. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  354. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  355. </div>
  356. </div>
  357. </div>
  358. <!-- END OF PAGE 4 -->
  359.  
  360. <!-- PAGE 5 -->
  361. <div class="section" id="section5">
  362. <div id="content">
  363. <div class="text">
  364. <h2>Content Header 5</h2>
  365. <h3><a href="/">Link</a> | <a href="/">Link</a>
  366. <p><span>&ldquo;</span> Include a quotation here! <span>&rdquo;</span>
  367. </h3>
  368.  
  369. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet sem id orci porta commodo. Cras a lectus id nisl posuere pretium eget a nisl. Integer ac lacus non sem vestibulum mollis quis ut urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at ultricies arcu. Vivamus convallis in mi feugiat molestie. Pellentesque lacinia pretium imperdiet. Vestibulum sit amet leo dictum, fringilla arcu vel, malesuada metus.
  370. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  371.  
  372. </div>
  373. <div class="mainimage">
  374. <img src="http://placehold.it/250x250">
  375. </div>
  376. <div class="sideimageholder">
  377. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  378. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  379. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  380. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  381. </div>
  382. </div>
  383. </div>
  384. <!-- END OF PAGE 5 -->
  385.  
  386. <!-- PAGE 6 -->
  387. <div class="section" id="section6">
  388. <div id="content">
  389. <div class="text">
  390. <h2>Content Header 6</h2>
  391. <h3><a href="/">Link</a> | <a href="/">Link</a>
  392. <p><span>&ldquo;</span> Include a quotation here! <span>&rdquo;</span>
  393. </h3>
  394.  
  395. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet sem id orci porta commodo. Cras a lectus id nisl posuere pretium eget a nisl. Integer ac lacus non sem vestibulum mollis quis ut urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at ultricies arcu. Vivamus convallis in mi feugiat molestie. Pellentesque lacinia pretium imperdiet. Vestibulum sit amet leo dictum, fringilla arcu vel, malesuada metus.
  396. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  397.  
  398. </div>
  399. <div class="mainimage">
  400. <img src="http://placehold.it/250x322">
  401. </div>
  402. <div class="sideimageholder">
  403. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  404. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  405. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  406. <div class="sideimg"><img src="http://placehold.it/73x73"></div>
  407. </div>
  408. </div>
  409. </div>
  410. <!-- END OF PAGE 6 -->
  411.  
  412. <!-- COPY AND PASTE TO ADD MORE PAGES HERE -->
  413. </div>
  414.  
  415.  
  416. </body>
  417. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!