API tools faq
paste
Advertisement
faluvtha

[#1] — Rectangle [All-in-one]

faluvtha
Apr 2nd, 2014
1,677
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.07 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3.  
  4. <!--
  5.  
  6. This page is created by:
  7.  
  8. ┏━━━┓╋╋┏┓
  9. ┃┏━━┛╋╋┃┃
  10. ┃┗━━┳┓┏┫┃┏┳┓┏┳━━┓
  11. ┃┏━━┫┃┃┃┗┛┫┃┃┃┏┓┃
  12. ┃┃╋╋┃┗┛┃┏┓┫┗┛┃┗┛┃
  13. ┗┛╋╋┗━━┻┛┗┻━━┻━━┛
  14.  
  15. ʜᴛᴛᴘ://ғᴜᴋᴜᴏ.ᴄᴏ.ᴠᴜ/
  16.  
  17. -->
  18.  
  19.  
  20. <html>
  21. <head>
  22.  
  23. <!-- Google Webfonts -->
  24. <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  25. <link href='http://fonts.googleapis.com/css?family=Source Sans Pro' rel='stylesheet' type='text/css'>
  26. <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
  27.  
  28. <!-- You can edit this title by replacing 'Title' in brackets with your own -->
  29. <title>{Title}</title>
  30. <link rel="shortcut icon" href="{Favicon}">
  31.  
  32.  
  33. <!-- Style My-Tool-Tips by Malihu -->
  34. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  35. <script src="http://static.tumblr.com/5ojoydj/p9wmmzopi/jquery.style-my-tooltips.js"></script>
  36. <script src="http://static.tumblr.com/5ojoydj/En2mmzorm/style-my-tooltips.css"></script>
  37. <script>
  38. (function($){
  39. $(document).ready(function(){
  40. $("[title]").style_my_tooltips({
  41. tip_follows_cursor:true,
  42. tip_delay_time:200,
  43. tip_fade_speed:300,
  44. attribute:"title"
  45. });
  46. });
  47. })(jQuery);
  48. </script>
  49.  
  50. <style type="text/css">
  51.  
  52. /* -------- BASIC ------- */
  53.  
  54. body {
  55. background-color:#eee; /* -------- BACKGROUND COLOR ------- */
  56. background-image:url('http://24.media.tumblr.com/tumblr_m37lmqN7UD1rsx5i6o5_250.png'); /* -------- BACKGROUND IMAGE ------- */
  57. background-position: fixed;
  58. background-attachment:fixed;
  59. background-repeat:repeat;
  60. overflow:hidden;
  61. }
  62.  
  63. /* -------- HIGHLIGHT ------- */
  64.  
  65. ::selection {
  66. background: #FFFCA3;
  67. color: #111;
  68. }
  69.  
  70. ::-moz-selection {
  71. background: #FFFCA3;
  72. color: #111;
  73. }
  74.  
  75. ::-webkit-selection {
  76. background: #FFFCA3;
  77. color: #111;
  78. }
  79.  
  80.  
  81. /* -------- TOOLTIP ------- */
  82.  
  83. #s-m-t-tooltip {
  84. width:auto;
  85. z-index:10;
  86. margin:24px 14px 7px 12px;
  87. padding:8px;
  88. background:#222;
  89. font-family: 'Questrial', sans-serif;
  90. font-size:12px;
  91. line-height:24px;
  92. color:#fff;
  93. text-transform:uppercase;
  94. border:1px solid #fff;
  95. z-index:9999999;
  96. }
  97.  
  98. /* -------- SCROLLBAR ------- */
  99.  
  100. ::-webkit-scrollbar {width: 5px;}
  101.  
  102. ::-webkit-scrollbar-track-piece
  103. {background-color:#eee}
  104.  
  105. ::-webkit-scrollbar-thumb:vertical
  106. {width:5px;
  107. background-color:#111;}
  108.  
  109. /* Common styles and resets */
  110.  
  111. #circle_position {
  112. width:100%;
  113. height:30px;
  114. padding-left:30px;
  115. z-index:999999999;
  116. position:fixed;
  117. left:0;
  118. top:25px;
  119. }
  120.  
  121. .dotstyle ul {
  122. position: relative;
  123. display: inline-block;
  124. margin: 0;
  125. padding: 0;
  126. list-style: none;
  127. cursor: default;
  128. -webkit-touch-callout: none;
  129. -webkit-user-select: none;
  130. -khtml-user-select: none;
  131. -moz-user-select: none;
  132. -ms-user-select: none;
  133. user-select: none;
  134. }
  135.  
  136. .dotstyle li {
  137. position: relative;
  138. display: block;
  139. float: left;
  140. margin: 0 16px;
  141. width: 16px;
  142. height: 16px;
  143. cursor: pointer;
  144. }
  145.  
  146. .dotstyle li a {
  147. margin:0 0 0 500px;
  148. width: 100%;
  149. height: 100%;
  150. outline: none;
  151. border-radius: 50%;
  152. background-color: #fff;
  153. background-color: rgba(255, 255, 255, 0.3);
  154. text-indent: -999em; /* make the text accessible to screen readers */
  155. cursor: pointer;
  156. position: absolute;
  157. }
  158.  
  159. .dotstyle li a:focus {
  160. outline: none;
  161. }
  162.  
  163. /* Fly in */
  164.  
  165. .dotstyle-hop li a {
  166. border: 2px solid #444;
  167. background: transparent;
  168. }
  169.  
  170. .dotstyle-hop li a::after {
  171. content: '';
  172. width: 100%;
  173. height: 100%;
  174. position: absolute;
  175. left: 0;
  176. border-radius: 50%;
  177. visibility: hidden;
  178. background: #fff;
  179. opacity: 0;
  180. -webkit-transform: rotate(-100deg);
  181. transform: rotate(-100deg);
  182. -webkit-transform-origin: -200% 50%;
  183. transform-origin: -200% 50%;
  184. -webkit-transition: -webkit-transform 0.3s ease 0.3s, opacity 0.3s ease, visibility 0s 0.3s ease;
  185. transition: transform 0.3s ease 0.3s, opacity 0.3s ease, visibility 0s 0.3s ease;
  186. }
  187.  
  188. .dotstyle-hop li a:focus {
  189. background: rgba(255, 255, 255, 0.2);
  190. }
  191.  
  192. .dotstyle-hop li.current-from-right a::after {
  193. -webkit-transition: none;
  194. transition: none;
  195. -webkit-transform: rotate(100deg);
  196. transform: rotate(100deg);
  197. -webkit-transform-origin: 300% 50%;
  198. transform-origin: 300% 50%;
  199. }
  200.  
  201. .dotstyle-hop li.current a::after {
  202. visibility: visible;
  203. opacity: 1;
  204. -webkit-transform: rotate(0deg);
  205. transform: rotate(0deg);
  206. -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
  207. transition: transform 0.3s ease, opacity 0.3s ease;
  208. }
  209.  
  210. #c-f {
  211. position:fixed;
  212. right:0px;
  213. bottom:0px;
  214. text-align:center;
  215. width:20px;
  216. padding:4px;
  217. font-size:13px;
  218. background-color:#111;
  219. color:#fff;
  220. text-decoration:none;
  221. z-index:9999999999999999999999;
  222. }
  223.  
  224.  
  225. /* .. Introduction! */
  226. #introduction_p {
  227. position:absolute;
  228. left:0;
  229. top:0;
  230. width:100%;
  231. height:100%;
  232. background-color:#090909;
  233. background-image:url('http://25.media.tumblr.com/tumblr_lzvjakQDzV1qhvdofo6_250.png');
  234. background-position: fixed;
  235. background-attachment:fixed;
  236. background-repeat:repeat;
  237. z-index:99;
  238. }
  239.  
  240. .intro_p {
  241. position:absolute;
  242. left:30%;
  243. top:18%;
  244. width:500px;
  245. padding:20px;
  246. color:#f7f7f7;
  247. font-size:30px;
  248. text-align:justify;
  249. font-family:'Roboto';
  250. }
  251.  
  252. .intro_p:first-letter {
  253. font-size:78px;
  254. font-style:italic;
  255. color:#00ccaa;
  256. }
  257.  
  258. /* .. The content */
  259.  
  260. /* -------- Section 1 ------- */
  261.  
  262. #section_1 {
  263. position:absolute;
  264. left:0;
  265. top:100%;
  266. width:100%;
  267. height:100%;
  268. background-color:#eee;
  269. background-image:url('http://25.media.tumblr.com/tumblr_m8f225zCRs1rnkzl5o9_250.png');
  270. background-position: fixed;
  271. background-attachment:fixed;
  272. background-repeat:repeat;
  273. z-index:1;
  274. }
  275.  
  276. /* -------- Title ------- */
  277.  
  278. #section_1 h2 {
  279. width:400px;
  280. position:fixed;
  281. margin:-120px 0 0 80px;
  282. text-shadow:2px 1px 1px #ccc;
  283. font-family: 'Questrial', sans-serif;
  284. text-align:center;
  285. padding-bottom:50px;
  286. font-size:45px;
  287. color:#555;
  288. text-transform:uppercase;
  289. }
  290.  
  291. #section_1 h2:before {
  292. content:'';
  293. position:absolute;
  294. margin:-2px 0 0 -150px;
  295. border-radius:100%;
  296. -moz-border-radius:100%;
  297. -webkit-border-radius:100%;
  298. -o-border-radiud:100%;
  299. background-color:#111;
  300. width:30px;
  301. height:30px;
  302. -webkit-box-shadow: 57px 0px 0px 0px #8abdca;
  303. -moz-box-shadow:57px 0px 0px 0px #8abdca;
  304. box-shadow: 57px 0px 0px 0px #8abdca;
  305. }
  306.  
  307. /* -------- About content ------- */
  308.  
  309. .about_content {
  310. position:fixed;
  311. left:27.5%;
  312. top:33%;
  313. font-family:'Source Sans Pro';
  314. color:#5c5453;
  315. line-height:150%;
  316. text-align:justify;
  317. width:500px;
  318. height:320px;
  319. overflow-x:hidden;
  320. background-color:rgba(255,255,255,0.2);
  321. padding:30px;
  322. }
  323.  
  324. .about_content h1 {
  325. color:#5c5453;
  326. text-shadow:2px 1px 0px #eee;
  327. font-family:'Roboto';
  328. text-align:right;
  329. }
  330.  
  331. .about_content h1:before {
  332. content:'';
  333. position:absolute;
  334. margin:12px 0 0 -210px;
  335. width:190px;
  336. height:4px;
  337. background-color:#5c5453;
  338. }
  339.  
  340. /* -------- Section 2 ------- */
  341.  
  342. #section_2 {
  343. position:absolute;
  344. left:0;
  345. top:200%;
  346. width:100%;
  347. height:100%;
  348. background-color:#EEE;
  349. z-index:999;
  350. background-image:url('http://static.tumblr.com/5ojoydj/fQ9mmummv/textured_paper.png');
  351. background-position:fixed;
  352. background-attachment:fixed;
  353. background-repeat:repeat;
  354. overflow-x:hidden;
  355. }
  356.  
  357. .family_name {
  358. position:absolute;
  359. margin:-155px 0 0 105px;
  360. width:0px;
  361. height:0px;
  362. padding:20px;
  363. background-color:rgba(255,255,255,0.6);
  364. color:#111;
  365. font-size:0px;
  366. text-align:center;
  367. opacity:0;
  368. z-index:2;
  369. font-family: 'Questrial', sans-serif;
  370. -webkit-transition: all 0.5s ease-out;
  371. -moz-transition: all 0.5s ease-out;
  372. transition: all 0.5s ease-out;
  373. }
  374.  
  375. /* -------- X on hover ------- */
  376.  
  377. .line_1 {
  378. position:absolute;
  379. opacity:0;
  380. margin:-130px 0 0 -97px;
  381. width:365px;
  382. height:2px;
  383. background-color:#ccc;
  384. -webkit-transform: rotate(45deg);
  385. -moz-transform: rotate(45deg);
  386. transform: rotate(45deg);
  387. -webkit-transition: all 0.5s ease;
  388. -moz-transition: all 0.5s ease;
  389. transition: all 0.5s ease;
  390. }
  391.  
  392. .line_2 {
  393. position:absolute;
  394. opacity:0;
  395. margin:-130px 0 0 60px;
  396. width:365px;
  397. height:2px;
  398. background-color:#ccc;
  399. -webkit-transform: rotate(-45deg);
  400. -moz-transform: rotate(-45deg);
  401. transform: rotate(-45deg);
  402. -webkit-transition: all 0.5s ease;
  403. -moz-transition: all 0.5s ease;
  404. transition: all 0.5s ease;
  405. }
  406.  
  407.  
  408. .family_icon:hover .line_1 {
  409. margin:-130px 0 0 -57px;
  410. opacity:1;
  411. -webkit-transition: all 0.3s ease;
  412. -moz-transition: all 0.3s ease;
  413. transition: all 0.3s ease;
  414. }
  415.  
  416. .family_icon:hover .line_2 {
  417. margin:-130px 0 0 -60px;
  418. opacity:1;
  419. -webkit-transition: all 0.3s ease;
  420. -moz-transition: all 0.3s ease;
  421. transition: all 0.3s ease;
  422. }
  423.  
  424. .family_icon:hover .family_name {
  425. font-size:30px;
  426. width:100px;
  427. height:30px;
  428. opacity:1;
  429. margin:-165px 0 0 55px;
  430. -webkit-transition: all 0.3s ease;
  431. -moz-transition: all 0.3s ease;
  432. transition: all 0.3s ease;
  433. }
  434.  
  435. /* -------- Family Icons ------- */
  436.  
  437. .family_icon {
  438. display:inline-block;
  439. margin:40px 0 0 40px;
  440. overflow:hidden;
  441. border-radius:10%;
  442. -moz-border-radius:10%;
  443. -o-border-radius:10%;
  444. -webkit-border-radius:10%;
  445. max-width:250px;
  446. max-height:250px;
  447. border:20px solid #ccc;
  448. -webkit-transition: all 0.3s ease;
  449. -moz-transition: all 0.3s ease;
  450. transition: all 0.3s ease;
  451.  
  452. }
  453.  
  454. .family_icon img {
  455. border-radius:5%;
  456. -moz-border-radius:5%;
  457. -o-border-radius:5%;
  458. -webkit-border-radius:5%;
  459. max-width:250px;
  460. max-height:250px;
  461. overflow:hidden;
  462. }
  463.  
  464. .family_content {
  465. position:absolute;
  466. left:10%;
  467. top:10%;
  468. background-color:none;
  469. padding:30px 30px 110px 30px;
  470. width:1000px;
  471. height:auto;
  472. }
  473.  
  474. .family_content h1 {
  475. text-shadow:2px 1px 1px #ccc;
  476. font-family: 'Questrial', sans-serif;
  477. text-align:center;
  478. padding-bottom:50px;
  479. font-size:45px;
  480. color:#555;
  481. text-transform:uppercase;
  482. }
  483.  
  484. .family_content h1:before {
  485. content:'';
  486. position:absolute;
  487. margin:12px 0 0 -150px;
  488. border-radius:100%;
  489. -moz-border-radius:100%;
  490. -webkit-border-radius:100%;
  491. -o-border-radiud:100%;
  492. background-color:#111;
  493. width:30px;
  494. height:30px;
  495. -webkit-box-shadow: 57px 0px 0px 0px #8abdca;
  496. -moz-box-shadow:57px 0px 0px 0px #8abdca;
  497. box-shadow: 57px 0px 0px 0px #8abdca;
  498. }
  499.  
  500. /* -------- Section 3 ------- */
  501.  
  502. #section_3 {
  503. position:absolute;
  504. left:0;
  505. top:300%;
  506. width:100%;
  507. height:100%;
  508. background-color:#444;
  509. background-image:url('http://24.media.tumblr.com/tumblr_lxynxizoeZ1ql5z3qo2_250.png');
  510. background-position: fixed;
  511. background-attachment:fixed;
  512. background-repeat:repeat;
  513. z-index:1;
  514. overflow-x:hidden;
  515. }
  516.  
  517. /* -------- Blogroll ------- */
  518.  
  519. .blogroll_content {
  520. position:absolute;
  521. left:25%;
  522. top:15%;
  523. width:800px;
  524. height:400px;
  525. -webkit-transition: all 0.5s ease;
  526. -moz-transition: all 0.5s ease;
  527. transition: all 0.5s ease;
  528. }
  529.  
  530. .blogroll_content a, .blogroll_image a {
  531. color:transparent;
  532. }
  533.  
  534. .blogroll_content h1 {
  535. text-shadow:2px 1px 1px #555;
  536. font-family: 'Questrial', sans-serif;
  537. text-align:center;
  538. padding-bottom:50px;
  539. font-size:45px;
  540. color:#ccc;
  541. text-transform:uppercase;
  542. }
  543.  
  544. .blogroll_content h1:before {
  545. content:'';
  546. position:absolute;
  547. margin:12px 0 0 -150px;
  548. border-radius:100%;
  549. -moz-border-radius:100%;
  550. -webkit-border-radius:100%;
  551. -o-border-radiud:100%;
  552. background-color:#111;
  553. width:30px;
  554. height:30px;
  555. -webkit-box-shadow: 57px 0px 0px 0px #ccc;
  556. -moz-box-shadow:57px 0px 0px 0px #ccc;
  557. box-shadow: 57px 0px 0px 0px #ccc;
  558. }
  559.  
  560. .blogroll_image {
  561. display:inline-block;
  562. -webkit-transition: all 0.5s ease;
  563. -moz-transition: all 0.5s ease;
  564. transition: all 0.5s ease;
  565. }
  566.  
  567. .blogroll_image img {
  568. border:10px solid #444;
  569. margin:30px;
  570. -webkit-transition: all 0.5s ease;
  571. -moz-transition: all 0.5s ease;
  572. transition: all 0.5s ease;
  573. }
  574.  
  575. #opacity_hover {
  576. opacity: 1;
  577. -webkit-transition: all 0.5s ease;
  578. -moz-transition: all 0.5s ease;
  579. transition: all 0.5s ease;
  580. }
  581.  
  582.  
  583. #opacity_hover:hover a {
  584. -webkit-filter:blur(2px);
  585. -webkit-transition: all 0.5s ease;
  586. -moz-transition: all 0.5s ease;
  587. transition: all 0.5s ease;
  588. }
  589.  
  590. #opacity_hover a {
  591. -webkit-filter:blur(0px);
  592. opacity:1;
  593. -webkit-transition: all 0.5s ease;
  594. -moz-transition: all 0.5s ease;
  595. transition: all 0.5s ease;
  596. }
  597.  
  598.  
  599. #opacity_hover a:hover {
  600. opacity:1;
  601. -webkit-filter:blur(0px) grayscale(1);
  602. -webkit-transition: all 0.5s ease;
  603. -moz-transition: all 0.5s ease;
  604. transition: all 0.5s ease;
  605. }
  606.  
  607. /* -------- Section 4 ------- */
  608. #section_4 {
  609. position:absolute;
  610. top:400%;
  611. left:0%;
  612. width:100%;
  613. height:100%;
  614. background:#d7d7d9;
  615. z-index:99999;
  616. background-image:url('http://24.media.tumblr.com/tumblr_m37lmqN7UD1rsx5i6o5_250.png');
  617. background-attachment:fixed;
  618. background-repeat:repeat;
  619. }
  620.  
  621. /* -------- Title ------- */
  622.  
  623. #menu_content h2 {
  624. width:400px;
  625. display:block;
  626. position:absolute;
  627. margin:-100px 0 0 100px;
  628. text-shadow:2px 1px 1px #ccc;
  629. font-family: 'Questrial', sans-serif;
  630. text-align:center;
  631. padding-bottom:50px;
  632. font-size:45px;
  633. color:#555;
  634. text-transform:uppercase;
  635. z-index:999999;
  636. }
  637.  
  638. #menu_content h2:before {
  639. content:'';
  640. position:absolute;
  641. margin:9px 0 0 -150px;
  642. border-radius:100%;
  643. -moz-border-radius:100%;
  644. -webkit-border-radius:100%;
  645. -o-border-radius:100%;
  646. background-color:#111;
  647. width:30px;
  648. height:30px;
  649. -webkit-box-shadow: 57px 0px 0px 0px #6D5C54;
  650. -moz-box-shadow:57px 0px 0px 0px #6D5C54;
  651. box-shadow: 57px 0px 0px 0px #6D5C54;
  652. }
  653.  
  654. #menu_content {
  655. left:30%;
  656. top:37%;
  657. position:relative;
  658. }
  659.  
  660. #menu-a {
  661. display:block;
  662. width:600px;
  663. }
  664.  
  665. .menu-b {
  666. overflow:hidden;
  667. display:inline-block;
  668. margin:20px 20px 6px 20px;
  669. width:100px;
  670. padding:20px 20px 20px 20px;
  671. background:#6D5C54;
  672. color:#fff;
  673. font-family:century gothic;
  674. text-transform:uppercase;
  675. font-size:19px;
  676. text-decoration:none;
  677. -webkit-transition: all 0.5s ease;
  678. -moz-transition: all 0.5s ease;
  679. transition: all 0.5s ease;
  680. }
  681.  
  682. .menu-b:hover {
  683. width:80px;
  684. padding:20px 0px 20px 60px;
  685. box-shadow: inset 170px 0 0 0 #444;
  686. }
  687.  
  688. .menu-b:after {
  689. position:absolute;
  690. opacity:0;
  691. margin:4px 0 0 -90px;
  692. content:'';
  693. background-color:#CAC8AC;
  694. -webkit-box-shadow: 22px 0px 0px 0px #333;
  695. -moz-box-shadow:22px 0px 0px 0px #333;
  696. box-shadow: 22px 0px 0px 0px #333;
  697. width:15px;
  698. height:15px;
  699. border-radius:100%;
  700. -moz-border-radius:100%;
  701. -o-border-radius:100%;
  702. -webkit-transition: all 0.5s ease;
  703. -moz-transition: all 0.5s ease;
  704. transition: all 0.5s ease;
  705. }
  706.  
  707. .menu-b:hover:after {
  708. opacity:1;
  709. }
  710.  
  711.  
  712. </style>
  713.  
  714. <!-- The modernizr by Codrops -->
  715. <script src="http://static.tumblr.com/5ojoydj/4GOn2op0v/modernizr.min.js"></script>
  716.  
  717. <!-- The AnimateScroll: a jQuery plugin which enables you to scroll to any part of the page in style by Ram Swaroop -->
  718. <script src="http://static.tumblr.com/5ojoydj/DXKn11b3v/jquery-1.8.3.min.js"></script>
  719. <script src="http://static.tumblr.com/5ojoydj/ORDn2opj4/fukuo-scroll.js"></script>
  720.  
  721.  
  722. </head>
  723. <body>
  724.  
  725. <!-- The Circle Button -->
  726. <div id="circle_position">
  727. <div class="dotstyle dotstyle-hop">
  728. <!--
  729.  
  730. EDIT THIS IF YOU WANT TO CHANGE THE NAME OF BUTTON.
  731.  
  732. -->
  733. <ul>
  734. <li class="current"><a title="back to index" href="#" onclick="$('#introduction_p').animatescroll({scrollSpeed:2000,easing:'easeInOutBack'});">Home</a></li>
  735. <li><a title="about" href="#" onclick="$('#section_1').animatescroll({scrollSpeed:2000,easing:'easeOutBounce'});">About</a></li>
  736. <li><a title="family" href="#" onclick="$('#section_2').animatescroll({scrollSpeed:1800,easing:'easeOutBack'});">Family</a></li>
  737. <li><a title="blogroll" href="#" onclick="$('#section_3').animatescroll({scrollSpeed:2000,easing:'easeOutElastic'});">Blogroll</a></li>
  738. <li><a title="LINKS" href="#" onclick="$('#section_4').animatescroll({scrollSpeed:2000,easing:'easeOutElastic'});">Links</a></li>
  739. </ul>
  740. </div>
  741.  
  742. </div>
  743.  
  744.  
  745. <!-- ONE -->
  746. <div id="introduction_p">
  747. <!--
  748.  
  749. In this section, you can use this as Quote or anything you want.
  750.  
  751. -->
  752. <div class="intro_p">
  753. <!-- The title and Description: change it with your own -->
  754. <h2>Begin to explore..</h2>
  755. " I have been and still am a seeker, but I have ceased to question stars and books; I have begun to listen to the teaching my blood whispers to me. "
  756. </div>
  757. </div>
  758.  
  759. <!-- TWO -->
  760. <div id="section_1">
  761. <!-- ABOUT PAGE -->
  762. <div class="about_content">
  763. <h2>About Page</h2>
  764. <h1>Lorem Ipsum. .</h1>
  765. <!-- EDIT THIS -->
  766. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  767. </div>
  768. </div><!-- The section 01 ends -->
  769.  
  770.  
  771. <div id="section_2">
  772. <div class="family_content">
  773. <h1>Family Page</h1>
  774.  
  775. <!--
  776.  
  777. HOW TO EDIT:
  778.  
  779. ** Change the URL image with yours; I recommend you to host in www.tumblr.com/themes/upload_static_file/
  780.  
  781. ** Replace the family-name, I recommend you to keep it short, at least 3-4 character
  782.  
  783. -->
  784.  
  785. <!-- ICON: 1 -->
  786. <div class="family_icon">
  787. <img src="http://static.tumblr.com/5ojoydj/lWwn2qaf7/tumblr_mynlnazgd71qf2um7o8_r1_250__1_.jpg"/>
  788. <!-- CHANGE THE NAME -->
  789. <div class="family_name">FALL</div>
  790. <div class="line_1"></div>
  791. <div class="line_2"></div>
  792. </div>
  793.  
  794. <!-- ICON: 2 -->
  795. <div class="family_icon">
  796. <img src="http://static.tumblr.com/5ojoydj/JJgn2qd1t/tumblr_m5fn5ph09k1qd91ado1_500.jpg"/>
  797. <!-- CHANGE THE NAME -->
  798. <div class="family_name">CRY</div>
  799. <div class="line_1"></div>
  800. <div class="line_2"></div>
  801. </div>
  802.  
  803.  
  804. <!-- ICON: 3 -->
  805. <div class="family_icon">
  806. <img src="http://static.tumblr.com/5ojoydj/Vbun2qnrs/tumblr_meoyaqkabt1r4mh69o1_500.jpg"/>
  807. <!-- CHANGE THE NAME -->
  808. <div class="family_name">EYES</div>
  809. <div class="line_1"></div>
  810. <div class="line_2"></div>
  811. </div>
  812.  
  813. <!-- ICON: 4 -->
  814. <div class="family_icon">
  815. <img src="http://static.tumblr.com/5ojoydj/vPkn2qogh/tumblr_m6vv8ywtyq1rn3pzzo1_500.jpg"/>
  816. <!-- CHANGE THE NAME -->
  817. <div class="family_name">FLOW</div>
  818. <div class="line_1"></div>
  819. <div class="line_2"></div>
  820. </div>
  821.  
  822. <!-- ICON: 5 -->
  823. <div class="family_icon">
  824. <img src="http://static.tumblr.com/5ojoydj/QQ0n2qojh/tumblr_m7n0j1kpua1rpj007o1_500.jpg"/>
  825. <!-- CHANGE THE NAME -->
  826. <div class="family_name">SKY</div>
  827. <div class="line_1"></div>
  828. <div class="line_2"></div>
  829. </div>
  830.  
  831. <!-- ICON: 6 -->
  832. <div class="family_icon">
  833. <img src="http://static.tumblr.com/5ojoydj/3qdn2qoh2/tumblr_lvcm6gnhyr1qcat8ho1_500.jpg"/>
  834. <!-- CHANGE THE NAME -->
  835. <div class="family_name">RED</div>
  836. <div class="line_1"></div>
  837. <div class="line_2"></div>
  838. </div>
  839.  
  840. <!-- You can add the image as many as possible -->
  841.  
  842. </div>
  843. </div><!-- The section 02 ends -->
  844.  
  845.  
  846. <!-- THREE -->
  847. <div id="section_3">
  848. <!-- BLOGROLL PAGE -->
  849. <div class="blogroll_content">
  850. <h1>Blogroll..</h1>
  851. <div class="blogroll_image">
  852. <div id="opacity_hover">
  853. {block:Following}
  854. {block:Followed}
  855. <a title='{FollowedName}' target='_blank' href='{FollowedURL}'><img border='0' src='{FollowedPortraitURL-96}' />
  856. {/block:Followed}
  857. {/block:Following}
  858. </div>
  859. </div>
  860. </div>
  861. </div>
  862.  
  863.  
  864. <!-- FOUR -->
  865. <div id="section_4">
  866. <!--
  867.  
  868. NOTE: Just replace '#' with your URL, i.e http://yourlink.com/
  869. and replace LINK with your the name you want to add to.
  870.  
  871. -->
  872. <div id="menu_content">
  873. <h2>MORE LINKS</h2>
  874. <div id="menu-a">
  875. <a href="#" class="menu-b">LINK</a>
  876. <a href="#" class="menu-b">LINK</a>
  877. <a href="#" class="menu-b">LINK</a>
  878. <a href="#" class="menu-b">LINK</a>
  879. <a href="#" class="menu-b">LINK</a>
  880. <a href="#" class="menu-b">LINK</a>
  881. <a href="#" class="menu-b">LINK</a>
  882. <a href="#" class="menu-b">LINK</a>
  883. <a href="#" class="menu-b">LINK</a>
  884. <a href="#" class="menu-b">LINK</a>
  885. <a href="#" class="menu-b">LINK</a>
  886. <a href="#" class="menu-b">LINK</a>
  887. </div>
  888. </div>
  889. </div>
  890.  
  891. <!---------------
  892.  
  893. DO NOT EDIT THIS ONE: I HIGHLY RECOMMEND YOU TO LEAVE THIS ALONE
  894. created by: Codrops
  895. ----------------->
  896. <script src="http://static.tumblr.com/5ojoydj/onbn2ooyo/dots.js"></script>
  897. <script>
  898. [].slice.call( document.querySelectorAll( '.dotstyle > ul' ) ).forEach( function( nav ) {
  899. new DotNav( nav, {
  900. callback : function( idx ) {
  901. //console.log( idx )
  902. }
  903. } );
  904. } );
  905. </script>
  906.  
  907. <!-- DO NOT REMOVE -->
  908. <a href="http://fukuo.tumblr.com/" id="c-f">✃</a>
  909.  
  910. </body>
  911. </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!