API tools faq
paste
ninpen

all in one #2

ninpen
Feb 4th, 2014
10,501
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.03 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>{Title}</title>
  7.  
  8. <link rel="shortcut icon" href="{Favicon}" />
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  10.  
  11.  
  12.  
  13. <link rel="stylesheet" type="text/css" href="reset.css">
  14. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  15. <script type="text/javascript" src="http://static.tumblr.com/1f1tzta/5oun05ajn/slider.js"></script>
  16. <script type="text/javascript" src="http://static.tumblr.com/1f1tzta/8Zbn05ak5/jquery.stellar.min.js"></script>
  17. <script type="text/javascript" src="http://static.tumblr.com/1f1tzta/wR4n05ake/waypoints.min.js"></script>
  18. <script type="text/javascript" src="http://static.tumblr.com/1f1tzta/dj0n05akq/jquery.easing.1.3.js"></script>
  19. <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
  20. <script type="text/javascript" src="http://static.tumblr.com/1f1tzta/0wvmlf1xq/scripted.js"></script>
  21.  
  22.  
  23. <style type="text/css">
  24. body,html{
  25. margin:0;
  26. padding:0;
  27. width:100%;
  28. height:100%;
  29. }
  30.  
  31. body{
  32. overflow:hidden;
  33. }
  34.  
  35. ::-webkit-scrollbar {width: 3px; height: 4px; background: #333; }
  36. ::-webkit-scrollbar-thumb { background-color: #010101;}
  37.  
  38. a:link, a:active, a:visited{
  39. color:#444;
  40. text-decoration: none;
  41. }
  42.  
  43. b {
  44. font-weight: bold;
  45. letter-spacing:1px;
  46. color:{color:bold};
  47. }
  48.  
  49. i {
  50. font-style: italic;
  51. letter-spacing:1px;
  52. color:{color:italic};
  53. }
  54.  
  55. u {
  56. text-decoration:none;
  57. letter-spacing:1px;
  58. border-bottom:1px dotted {color:underlineborder};
  59. color:{color:underline};
  60. }
  61.  
  62. img{
  63. max-width:100%;
  64. }
  65.  
  66. ul{
  67. padding:0; margin:0;
  68. }
  69.  
  70. ul.navigation{
  71. position:fixed;
  72. left:50%;
  73. width:145px;
  74. margin-left:-102px;
  75. padding:10px 50px;
  76. z-index:9999;
  77. list-style-type: none;
  78. }
  79.  
  80. .navigation li{
  81. list-style-type: none;
  82. display:inline-block;
  83. color:transparent;
  84. overflow:hidden;
  85. padding:2px;
  86. height:3px;
  87. width:3px;
  88. border:3px solid #010101;
  89. margin-left:16px;
  90. border-radius:10px;
  91. background:#61d5ed;
  92. position:relative;
  93. -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  94. -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  95. transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  96. }
  97.  
  98. .navigation li:nth-child(1){
  99. margin-left:0;
  100. }
  101.  
  102. .navigation li:hover{
  103. cursor:pointer;
  104. background-color:#58c7dd;
  105. color:transparent;
  106. }
  107.  
  108. .navigation li:active{
  109. background-color:teal;
  110. color:transparent;
  111. }
  112.  
  113. .navigation a{
  114. color:#FFABAB;
  115. font-size:8px;
  116. font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  117. text-transform:uppercase;
  118. letter-spacing:1px;
  119. }
  120.  
  121. .slide{
  122. background-attachment: fixed;
  123. width:100%;
  124. height:100%;
  125. position: relative;
  126. }
  127.  
  128.  
  129. /* ABOUT ME SECTION (FIRST SLIDE) STARTS*/
  130. #slide1{
  131. background:BACKGROUND COLOR url('BACKGROUND IMAGE') repeat top center;
  132. }
  133.  
  134. .about{
  135. text-align:justify;
  136. width:200px;
  137. height:400px;
  138. position:relative;
  139. margin:50px auto 0 auto;
  140. z-index:9999;
  141. font:11px/15px 'Lato';
  142. color:TEXT COLOR;
  143. text-shadow:1px 0px 1px rgba(0,0,0,.22);
  144. }
  145.  
  146. .abtitle{
  147. top:40px;
  148. height:14px;
  149. left:40px;
  150. opacity:0;
  151. text-align:center;
  152. position:absolute;
  153. width:80px;
  154. padding:33px 0;
  155. border-radius:100px;
  156. font:italic 14px/14px 'Lato', sans-serif;
  157. letter-spacing:-1px;
  158. text-transform:lowercase;
  159. font-weight:300;
  160. background:ABOUT ME TITLE BACKGROUND;
  161. color:ABOUT ME TITLE COLOR;
  162. -webkit-transition:all .7s ease; -moz-transition:all .7s ease; -o-transition:all .7s ease;
  163. }
  164.  
  165. .about:hover .abtitle{
  166. opacity:1;
  167. }
  168.  
  169. .abtbg{
  170. padding:10px;
  171. margin-top:10px;
  172. border-radius:5px;
  173. box-shadow:1px 1px 0 0px rgba(255,255,255,.1),-1px -1px 0 0px rgba(0,0,0,.07);
  174. max-height:200px;
  175. background:rgba(0,0,0,.03);
  176. }
  177.  
  178. .abt{
  179. top:50%;
  180. left:50%;
  181. position:absolute;
  182. margin:-250px 0 0 -250px;
  183. background:url('ABOUT M DESCRIPTION BOX BACKGROUND IMAGE') no-repeat 20% 60%;
  184. width:500px;
  185. height:500px;
  186. box-shadow:0 0px 10px 2px #000;
  187. z-index:100;
  188. }
  189.  
  190. .port img{
  191. border:5px solid rgba(255,255,2255,.6);
  192. box-shadow:0 0 0 5px rgba(255,255,2255,.4);
  193. background:;
  194. width:110px;
  195. border-radius:100px;
  196. }
  197.  
  198. .port:after{
  199. position:absolute;
  200. content:'';
  201. width:145px;
  202. height:145px;
  203. top:7px;
  204. left:7px;
  205. border:1px solid rgba(255,255,2255,.5);
  206. border-radius:100px;
  207. }
  208.  
  209. .about .port{
  210. position:relative;
  211. padding:20px;
  212. height:120px;
  213. border-radius:100px;
  214. border:1px solid rgba(255,255,2255,.7);
  215. margin:0 auto;
  216. width:120px;
  217. }
  218. /* ABOUT ME SECTION (FIRST SLIDE) ENDS*/
  219.  
  220.  
  221.  
  222.  
  223.  
  224.  
  225.  
  226.  
  227.  
  228. /* FAMILY SECTION (SECOND SLIDE) STARTS*/
  229. #slide2{
  230. background:FAMILY SLIDE BACKGROUND url('FAMILY SLIDE BACKGROUND IMAGE') repeat top center;
  231. }
  232.  
  233. #family{
  234. width:815px;
  235. height:425px;
  236. position:absolute;
  237. overflow:auto;
  238. top:50%;
  239. left:50%;
  240. margin:-211px 0 0 -407px;
  241. }
  242.  
  243. #fam {
  244. display:inline-block;
  245. position:relative;
  246. overflow:hidden;
  247. background:PICTURE BACKGROUND;
  248. width:135px;
  249. height:182px;
  250. margin:10px 0 0 10px;
  251. padding:5px;
  252. border:1px solid rgba(255,255,255,.1);
  253. }
  254.  
  255. #fam img{
  256. position:relative;
  257. z-index:2;
  258. }
  259.  
  260. #fam:hover #name{
  261. opacity:1;
  262. }
  263.  
  264. #fam #name{
  265. opacity:0;
  266. z-index:999;
  267. position:Absolute;
  268. top:5px;
  269. left:5px;
  270. width:135px;
  271. height:18px;
  272. padding:17px 0;
  273. color:MAIN TITLE TEXT COLOR;
  274. background:MAIN TITLE BACKGROUND;
  275. text-align:center;
  276. text-transform:lowercase;
  277. font:italic bold 14px helvetica;
  278. transition: all .7s;
  279. -moz-transition: all .7s;
  280. -webkit-transition: all .7s;
  281. -o-transition: all .7s;
  282. }
  283.  
  284. #name:after{
  285. content:'';
  286. position:absolute;
  287. left:0;
  288. bottom:0;
  289. width:135px;
  290. height:2px;
  291. background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTAwJSIgeTE9IjEwMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzRkZTBmZiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2ZmMWFlMCIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNnMSkiIC8+PC9zdmc+);
  292. background-image: -webkit-gradient(linear, right center, left center, color-stop(0%, #4de0ff), color-stop(100%, #ff1ae0));
  293. background-image: -webkit-linear-gradient(right, #4de0ff 0%, #ff1ae0 100%);
  294. background-image: -moz-linear-gradient(right, #4de0ff 0%, #ff1ae0 100%);
  295. background-image: -ms-linear-gradient(right, #4de0ff 0%, #ff1ae0 100%);
  296. background-image: -o-linear-gradient(right, #4de0ff 0%, #ff1ae0 100%);
  297. background-image: linear-gradient(to left, #4de0ff 0%, #ff1ae0 100%);
  298. }
  299.  
  300. #box{
  301. z-index:9999;
  302. background:TEXT BOX BACKGROUND COLOR;
  303. color:TEXT BOX COLOR;
  304. position:Absolute;
  305. height:130px;
  306. overflow:hidden;
  307. bottom:5px;
  308. left:-135px;
  309. width:125px;
  310. border-bottom:1px solid BOX HEADER BOTTOM BORDER;
  311. padding:0 5px;
  312. font:italic 11px times new roman;
  313. letter-spacing:1px;
  314. opacity:1; -webkit-transition:all .8s ease; -moz-transition:all .8s ease; -o-transition:all .8s ease;
  315. }
  316.  
  317. #fam:hover #box{
  318. left:5px;
  319. -webkit-transition:all .7s ease; -moz-transition:all .7s ease; -o-transition:all .7s ease;
  320. }
  321.  
  322. #box p{
  323. font:7px trebuchet ms;
  324. display:block;
  325. letter-spacing:2px;
  326. width:130px;
  327. color:BOX HEADER TEXT COLOR;
  328. background:BOX HEADER BACKGROUND;
  329. padding:5px;
  330. margin:0 0 0 -6px;
  331. text-transform:uppercase;
  332. position:relative;
  333. }
  334.  
  335. #box p:nth-child(2){
  336. margin-bottom:10px;
  337. }
  338.  
  339. #box p:after{
  340. content:'';
  341. position:absolute;
  342. left:0;
  343. bottom:0;
  344. width:100%;
  345. height:1px;
  346. border-bottom:1px solid BOX HEADER BOTTOM BORDER;
  347. }
  348.  
  349. #box p:nth-child(2){
  350. margin-bottom:10px;
  351. }
  352. /* FAMILY SECTION (SECOND SLIDE) ENDS*/
  353.  
  354.  
  355.  
  356.  
  357.  
  358.  
  359.  
  360.  
  361.  
  362. /* SHIPS SECTION (THIRD SLIDE) STARTS*/
  363. #slide3{
  364. background:SHIPS SLIDE BAKGROUND COLOR url('SHIPS SLIDE BAKGROUND IMAGE') repeat top center;
  365. }
  366.  
  367. #shipped{
  368. width:100%;
  369. height:575px;
  370. position:absolute;
  371. top:50%;
  372. left:0;
  373. margin:-288px 0 0 0px;
  374. background:rgba(255,255,255,.4) url('SHIPS MIDDLE BACKGROUND IMAGE') repeat left center;
  375. }
  376.  
  377.  
  378. /* DO NOT TOUCH THIS PART*/
  379. #boxed{
  380. opacity:0;
  381. position:Absolute;
  382. top:5px;
  383. left:5px;
  384. width:120px;
  385. height:120px;
  386. background:rgba(255,255,255,.4) url('http://static.tumblr.com/1f1tzta/4Gen0bxw5/criss.png') no-repeat center center;
  387. transition: all .7s;
  388. -moz-transition: all .7s;
  389. -webkit-transition: all .7s;
  390. -o-transition: all .7s;
  391. }
  392. /* DO NOT TOUCH THIS PART - ENDS*/
  393.  
  394.  
  395. .ship:hover #boxed{
  396. opacity:1;
  397. }
  398.  
  399. .name{
  400. opacity:1;
  401. background:TITLE BACKGORUND COLOR;
  402. width:80px;
  403. height:10px;
  404. padding:15px 5px;
  405. text-align:center;
  406. margin:41px auto 0 auto;
  407. text-transform:uppercase;
  408. letter-spacing:1px;
  409. font:italic 10px/10px century gothic;
  410. }
  411.  
  412. .ship{
  413. width:130px;
  414. height:130px;
  415. border-radius:3px;
  416. background:PADDING COLOR;
  417. overflow:hidden;
  418. float:left;
  419. position:relative;
  420. margin:30px 0 0 30px;
  421. box-shadow:0px 0px 2px #000;
  422. }
  423.  
  424. .ship img{
  425. margin:5px 0 0 5px;
  426. }
  427.  
  428. #ships {
  429. overflow:auto;
  430. width:800px;
  431. height:510px;
  432. margin:35px auto 0 auto;
  433. opacity:1; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease;
  434. }
  435. #ships:hover a {
  436. opacity: .7;
  437. }
  438. #ships a {
  439. opacity: 1; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease;
  440. }
  441. #ships a:hover {
  442. opacity:1;
  443. }
  444. /* SHIPS SECTION (THIRD SLIDE) ENDS*/
  445.  
  446.  
  447.  
  448.  
  449.  
  450. /* TAGS SECTION (FOURTH SLIDE) STARTS*/
  451. #slide4{
  452. background:SLIDE BACKGROUND COLOR url('SLIDE BACKGORUND IMAGE') repeat top center;
  453. }
  454.  
  455. #tagsbox{
  456. width:810px;
  457. height:500px;
  458. background:BOX BACKGROUNDS COLOR;
  459. position:Absolute;
  460. left:50%;
  461. top:50%;
  462. margin:-275px 0 0 -430px;
  463. overflow:auto;
  464. border:25px solid BOX BAKGROUND COLOR;
  465. }
  466.  
  467. #tagged:nth-of-type(4){
  468. margin-right:0;
  469. }
  470.  
  471. #tagged{
  472. width:180px;
  473. height:300px;
  474. overflow:auto;
  475. position:relative;
  476. display:inline-block;
  477. vertical-align:top;
  478. margin:0 25px 25px 0;
  479. }
  480.  
  481. #tagged li{
  482. list-style-type:none;
  483. }
  484.  
  485. .tagstitle{
  486. background:TAGS TITLE BACKGROUND COLOR;
  487. border-bottom:1px dotted TAGS TITLE BOTTOM BORDER;
  488. color:TAGS TITLE TEXT COLOR;
  489. display:block;
  490. padding:20px 0;
  491. text-align:center;
  492. letter-spacing:1px;
  493. text-transform:uppercase;
  494. font:10px/10px century gothic;
  495. }
  496.  
  497. #tagged a{
  498. position:relative;
  499. background:TAGS LINKS BACKGROOUND;
  500. color:TAGS LINKS TEXT COLOR;
  501. margin-bottom:9px;
  502. font:9px/9px century gothic;
  503. border-bottom:;
  504. padding:1px 5px;
  505. text-align:Center;
  506. padding:2px;
  507. display:block;
  508. letter-spacing:1px;
  509. text-transform:uppercase;
  510. -webkit-transition:all .7s ease; -moz-transition:all .7s ease; -o-transition:all .7s ease;
  511. }
  512.  
  513. #tagged a:hover{
  514. background:TAGS LINKS BACKGROOUND HOVER;
  515. color:TAGS LINKS TEXT COLOR HOVER;
  516. margin-left:-30px;
  517. -webkit-transition:all .7s ease; -moz-transition:all .7s ease; -o-transition:all .7s ease;
  518. }
  519.  
  520. #tagged li a:before{
  521. width:5px;
  522. height:5px;
  523. top:4px;
  524. left:-20px;
  525. background:TAGS LINKS BOX ON HOVER;
  526. content:'';
  527. position:absolute;
  528. -webkit-transition:all .7s ease; -moz-transition:all .7s ease; -o-transition:all .7s ease;
  529. }
  530.  
  531. #tagged li a:hover:before{
  532. left:70px;
  533. -webkit-transition:all .7s ease; -moz-transition:all .7s ease; -o-transition:all .7s ease;
  534. }
  535.  
  536. #tagged li a:after{
  537. width:140px;
  538. height:1px;
  539. left:20px;
  540. top:17px;
  541. background:TAGS BOTTOM BORDER COLOR;
  542. content:'';
  543. position:absolute;
  544. }
  545. /* TAGS SECTION (FOURTH SLIDE) ENDS*/
  546.  
  547.  
  548.  
  549.  
  550.  
  551.  
  552.  
  553. /* BLOGROLL SECTION (FIFTH SLIDE) STARTS*/
  554. #slide5{
  555. background:SLIDE BAKGROUND COLOR url('SLIDE BACKGROUND IMAGE') repeat top center;
  556. }
  557.  
  558. #blogroll{
  559. width:750px;
  560. height:450px;
  561. position:absolute;
  562. top:50%;
  563. left:50%;
  564. margin:-225px 0 0 -350px;
  565. overflow:auto;
  566. background:BLOGROLL MAIN BACKGROUND ;
  567. }
  568.  
  569. #fol {
  570. vertical-align:top;
  571. margin:10px;
  572. display:inline-block;
  573. width:160px;
  574. height:30px;
  575. }
  576.  
  577. #fol img{
  578. background:FOLLOWER BACKGROUND COLOR;
  579. padding:7px;
  580. }
  581.  
  582. #fol a{
  583. font: italic bold 10px/10px calibri;
  584. position:absolute;
  585. color:FOLLOWER TEXT COLOR;
  586. width:130px;
  587. padding:12px 0;
  588. margin-left:2px;
  589. letter-spacing:1px;
  590. text-align:center;
  591. background:FOLLOWER TITLE BACKGROUND COLOR;
  592. }
  593.  
  594. #fol a:hover{
  595. background:FOLLOWER TITLE BACKGROUND COLOR - HOVER;
  596. color:FOLLOWER TEXT COLOR - HOVER;
  597. }
  598. /* BLOGROLL SECTION (FIFTH SLIDE) ENDS*/
  599.  
  600.  
  601.  
  602.  
  603.  
  604.  
  605. /* BOTTOM NAVIGATION STARTS*/
  606. #current{
  607. width:150px;
  608. height:20px;
  609. padding:10px 20px;
  610. background:BACKGROUND COLOR;
  611. position:absolute;
  612. bottom:0;
  613. left:50%;
  614. margin-left:-125px;
  615. }
  616.  
  617. #pnamewrap{
  618. position:relative;
  619. display:inline-block;
  620. }
  621.  
  622. #pnamewrap:hover .pgname{
  623. opacity:1;
  624. -webkit-transition:all .7s ease; -moz-transition:all .7s ease; -o-transition:all .7s ease;
  625. }
  626.  
  627. #pnamewrap:hover .pname{
  628. opacity:0;
  629. }
  630.  
  631. .pgname{
  632. color:TEXT COLOR;
  633. font:11px/11px 'Lato', sans-serif;
  634. letter-spacing:1px;
  635. text-transform:uppercase;
  636. font-weight:300;
  637. position:Relative;
  638. opacity:0;
  639. -webkit-transition:all .7s ease; -moz-transition:all .7s ease; -o-transition:all .7s ease;
  640. }
  641.  
  642. /* DO NOT EDIT*/
  643. .pname{
  644. left:50%;
  645. margin-left:-9px;
  646. top:-4px;
  647. position:absolute;
  648. width:18px;
  649. height:18px;
  650. background:url('http://static.tumblr.com/1f1tzta/tlXn08xra/x.png') repeat center center;
  651. -webkit-transition:all .7s ease; -moz-transition:all .7s ease; -o-transition:all .7s ease;
  652. }
  653.  
  654. .button{
  655. cursor:pointer;
  656. height:10px;
  657. }
  658.  
  659. #next{
  660. float:right;
  661. }
  662.  
  663. #prev{
  664. float:left;
  665. }
  666. /* BOTTOM NAVIGATION ENDS*/
  667. </style>
  668. </head>
  669. <body>
  670.  
  671.  
  672.  
  673. <ul class="navigation">
  674. <li data-slide="1">ABOUT ME</li>
  675. <li data-slide="2">FAMILY</li>
  676. <li data-slide="3">SHIPS</li>
  677. <li data-slide="4">TAGS</li>
  678. <li data-slide="5">BLOGROLL</li>
  679. </ul>
  680.  
  681.  
  682.  
  683.  
  684.  
  685.  
  686.  
  687. <!--ABOUT ME SECTION STARTS-->
  688. <div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
  689.  
  690. <div class="abt">
  691. <div class="about">
  692. <div class="port"><img src="PORTRAIT URL (120PX BY 120PX)">
  693. <div class="abtitle">TITLE GOES HERE</div>
  694. </div>
  695. <div class="abtbg">
  696. PUT YOUR ABOUT ME INFORMATION HERE
  697. </div>
  698. </div>
  699. </div>
  700.  
  701.  
  702. <div id="current">
  703. <Center>
  704. <div id="pnamewrap"><div class="pname"></div><div class="pgname">About me</div></div>
  705. <a class="button" id="next" data-slide="2" title=""><img src="http://static.tumblr.com/1f1tzta/PvXn08wtw/next.png"></a>
  706. </Center>
  707. </div>
  708.  
  709. </div>
  710. <!--ABOUT ME SECTION ENDS-->
  711.  
  712.  
  713.  
  714.  
  715.  
  716.  
  717.  
  718.  
  719. <!--family SECTION STARTS-->
  720. <div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
  721. <div id="top"></div>
  722. <div id="family">
  723.  
  724. <div id="fam">
  725. <a href="URL GOES HERE"><img src="IMAGE GOES HERE (135PX BY 182PX)"></a>
  726. <div id="name">NAME GOES HERE</div>
  727. <div id="box">
  728. <p>TITLE GOES HERE</p>
  729. <p>TITLE GOES HERE</p>
  730. QUOTE OR ABOUT CAN GO HERE
  731. </div>
  732. </div>
  733.  
  734. <div id="fam">
  735. <a href="URL GOES HERE"><img src="IMAGE GOES HERE (135PX BY 182PX)"></a>
  736. <div id="name">NAME GOES HERE</div>
  737. <div id="box">
  738. <p>TITLE GOES HERE</p>
  739. <p>TITLE GOES HERE</p>
  740. QUOTE OR ABOUT CAN GO HERE
  741. </div>
  742. </div>
  743.  
  744. <div id="fam">
  745. <a href="URL GOES HERE"><img src="IMAGE GOES HERE (135PX BY 182PX)"></a>
  746. <div id="name">NAME GOES HERE</div>
  747. <div id="box">
  748. <p>TITLE GOES HERE</p>
  749. <p>TITLE GOES HERE</p>
  750. QUOTE OR ABOUT CAN GO HERE
  751. </div>
  752. </div>
  753.  
  754.  
  755. </div>
  756.  
  757. <div id="current">
  758. <Center>
  759. <a class="button" id="prev" data-slide="1" title=""><img src="http://static.tumblr.com/1f1tzta/2rin0a0t9/back.png"></a>
  760. <div id="pnamewrap"><div class="pname"></div><div class="pgname">family</div></div>
  761. <a class="button" id="next" data-slide="3" title=""><img src="http://static.tumblr.com/1f1tzta/PvXn08wtw/next.png"></a>
  762. </Center>
  763. </div>
  764.  
  765. </div>
  766. <!--FAMILY SECTION ENDS-->
  767.  
  768.  
  769.  
  770.  
  771.  
  772.  
  773.  
  774.  
  775.  
  776.  
  777.  
  778. <!--SHIPS SECTION STARTS-->
  779. <!--this can also be turned into a character or favorite books/movies section. Or whatever you want-->
  780. <div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
  781. <div id="shipped">
  782.  
  783. <div id="ships">
  784.  
  785. <a>
  786. <div class="ship">
  787. <img src="IMAGE URL GOES HERE (120PX BY 120PX)">
  788. <div id="boxed">
  789. <div class='name'>Name</div>
  790. </div>
  791. </div>
  792. </a>
  793.  
  794.  
  795. <a>
  796. <div class="ship">
  797. <img src="IMAGE URL GOES HERE (120PX BY 120PX)">
  798. <div id="boxed">
  799. <div class='name'>Name</div>
  800. </div>
  801. </div>
  802. </a>
  803.  
  804.  
  805. <a>
  806. <div class="ship">
  807. <img src="IMAGE URL GOES HERE (120PX BY 120PX)">
  808. <div id="boxed">
  809. <div class='name'>Name</div>
  810. </div>
  811. </div>
  812. </a>
  813.  
  814. </div>
  815. </div>
  816.  
  817. <div id="current">
  818. <Center>
  819. <a class="button" id="prev" data-slide="2" title=""><img src="http://static.tumblr.com/1f1tzta/2rin0a0t9/back.png"></a>
  820. <div id="pnamewrap"><div class="pname"></div><div class="pgname">SLIDE NAME WILL GO HERE</div></div>
  821. <a class="button" id="next" data-slide="4" title=""><img src="http://static.tumblr.com/1f1tzta/PvXn08wtw/next.png"></a>
  822. </Center>
  823. </div>
  824.  
  825. </div>
  826. <!--SHIPS SECTION ENDS-->
  827.  
  828.  
  829.  
  830.  
  831.  
  832.  
  833.  
  834.  
  835.  
  836.  
  837.  
  838. <!--TAGS SECTION STARTS-->
  839. <div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0.5">
  840.  
  841. <div id="tagsbox">
  842.  
  843. <div id="tagged">
  844. <div class="tagstitle">{ TAGS SECTION TITLE GOES HERE }</div>
  845. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  846. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  847. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  848. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  849. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  850. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  851. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  852. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  853. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  854. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  855. </div>
  856.  
  857.  
  858. <div id="tagged">
  859. <div class="tagstitle">{ TAGS SECTION TITLE GOES HERE }</div>
  860. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  861. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  862. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  863. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  864. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  865. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  866. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  867. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  868. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  869. <li><a href="TAG URL GOES HERE">TAG NAME GOES HERE</a></li>
  870. </div>
  871.  
  872. </div>
  873.  
  874. <div id="current">
  875. <Center>
  876. <a class="button" id="prev" data-slide="3" title=""><img src="http://static.tumblr.com/1f1tzta/2rin0a0t9/back.png"></a>
  877. <div id="pnamewrap"><div class="pname"></div><div class="pgname">Tags</div></div>
  878. <a class="button" id="next" data-slide="5" title=""><img src="http://static.tumblr.com/1f1tzta/PvXn08wtw/next.png"></a>
  879.  
  880. </Center>
  881. </div>
  882.  
  883. </div>
  884. <!--TAGS SECTION ENDS-->
  885.  
  886.  
  887.  
  888.  
  889.  
  890.  
  891.  
  892.  
  893.  
  894.  
  895. <!--BLOGROLL SECTION STARTS-->
  896. <div class="slide" id="slide5" data-slide="5" data-stellar-background-ratio="0.5">
  897.  
  898. <div id="blogroll">
  899. {block:Following}{block:Followed}
  900. <div id="fol"><img src='{FollowedPortraitURL-16}'><a href='{FollowedURL}'>{FollowedName}</a></div>{/block:Followed}{/block:Following}
  901. </div>
  902.  
  903. <div id="current">
  904. <Center>
  905. <a class="button" id="prev" data-slide="4" title=""><img src="http://static.tumblr.com/1f1tzta/2rin0a0t9/back.png"></a>
  906. <div id="pnamewrap"><div class="pname"></div><div class="pgname">Blogroll</div></div>
  907. </Center>
  908. </div>
  909.  
  910. </div>
  911. <!--BLOGROLL SECTION ENDS-->
  912.  
  913.  
  914.  
  915.  
  916.  
  917. </body>
  918. </html>
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!