API tools faq
paste
Advertisement
hunterthemes

Page #18 - Portfolio (bright)

hunterthemes
Nov 10th, 2018
806
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.46 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <!----
  4.  
  5. © hunterthemes.tumblr.com | Page #18 - Portfolio (bright)
  6.  
  7. * Do not redistribute this page and claim it as your own.
  8. * Do not remove the credit or move it to another page.
  9. * Minor changes to this page are allowed.
  10.  
  11. ---->
  12.  
  13. <!-- GOOGLE FONTS -->
  14.  
  15. <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Lato|Open+Sans|Inconsolata|Lora" rel="stylesheet">
  16.  
  17. <style type="text/css">
  18.  
  19. /* CSS */
  20.  
  21. /*-- GENERAL --*/
  22.  
  23. body {
  24. margin: 0;
  25. padding: 0;
  26. width: 100%;
  27. height: 100%;
  28. color: #222222;
  29. font-family:Helvetica, Arial, sans-serif;
  30. font-size: 12px;
  31. line-height: 18px;
  32. background-color: #f6f6f6;
  33. background-image:url();
  34. background-attachment: fixed;
  35. background-repeat: no-repeat;
  36. background-size:cover;
  37. }
  38.  
  39. /* Style of the headings (titles) */
  40.  
  41. h1{
  42. font-family:"Lora";
  43. }
  44.  
  45. h2{
  46. font-family:"Lora";
  47. }
  48.  
  49. a {
  50. text-decoration: none;
  51. }
  52.  
  53. a:hover {
  54. text-decoration: none;
  55. transition:all .3s linear;
  56. -webkit-transition:all .3s linear;
  57. -o-transition:all .3s linear;
  58. -moz-transition:all .3s linear;
  59. }
  60.  
  61. /* Tumblr controls */
  62.  
  63. iframe.tmblr-iframe {
  64. top:2px!important;
  65. right:40px!important;
  66. opacity:0.8;
  67. transform:scale(0.6);
  68. transform-origin:100% 0;
  69. -webkit-transform:scale(0.8);
  70. -webkit-transform-origin:100% 0;
  71. -o-transform:scale(0.8);
  72. -o-transform-origin:100% 0;
  73. -moz-transform:scale(0.8);
  74. -moz-transform-origin:100% 0;
  75. -ms-transform:scale(0.8);
  76. -ms-transform-origin:100% 0;
  77. z-index:100000!important;
  78. filter:invert(100%) hue-rotate(180deg);
  79. -webkit-filter:invert(100%) hue-rotate(180deg);
  80. -moz-filter:invert(100%) hue-rotate(180deg);
  81. -o-filter:invert(100%) hue-rotate(180deg);
  82. -ms-filter:invert(100%) hue-rotate(180deg);
  83. }
  84.  
  85. iframe.tmblr-iframe:hover {
  86. opacity:1!important;}
  87.  
  88. /*-- Webkit scrollbar --*/
  89.  
  90. ::-webkit-scrollbar {
  91. width: 9px;
  92. height: 0px;
  93. }
  94.  
  95. ::-webkit-scrollbar-button:start:decrement,
  96. ::-webkit-scrollbar-button:end:increment {
  97. height: 0px;
  98. display: block;
  99. background-color: #ffffff;
  100. }
  101.  
  102. ::-webkit-scrollbar-track-piece {
  103. background-color: #ffffff;
  104. }
  105.  
  106. ::-webkit-scrollbar-thumb:vertical {
  107. height: 0px;
  108. background-color: #CB2102;
  109. border: 4px solid #ffffff;
  110. }
  111.  
  112. /*-- TOOLTIPS --*/
  113.  
  114. #s-m-t-tooltip {
  115. margin:24px 14px 7px 12px;
  116. padding: 5px;
  117. max-width: 250px;
  118. color: #222222;
  119. background: #ffffff;
  120. border: 1px solid #cccccc;
  121. font-size: 12px;
  122. line-height: 15px;
  123. z-index: 100000;
  124. }
  125.  
  126. /* Fix */
  127.  
  128. iframe, img, embed, object, video {
  129. max-width: 100%;
  130. border: none;
  131. }
  132.  
  133. input, textarea, select, a { outline: none; }
  134.  
  135. /*------ CONTAINER -----*/
  136.  
  137. #container {
  138. position:fixed;
  139. top:0;
  140. left:50%;
  141. top:50%;
  142. width:870px;
  143. height:90vh;
  144. z-index:100;
  145. overflow:hidden;
  146. /* Container background */
  147. background:#ffffff;
  148. -webkit-transform: translateX(-50%) translateY(-50%);
  149. -moz-transform: translateX(-50%) translateY(-50%);
  150. -ms-transform: translateX(-50%) translateY(-50%);
  151. transform: translateX(-50%) translateY(-50%);
  152. border-radius:5px;
  153. }
  154.  
  155. /*-- MENU --*/
  156.  
  157. #menu {
  158. margin:0;
  159. width:80px;
  160. height:calc(100% - 20px);
  161. padding:10px;
  162. font-size:20px;
  163. line-height:30px;
  164. color:#ffffff;
  165. background:#CB2102;
  166. z-index:100000;
  167. }
  168.  
  169. /* Avatar */
  170.  
  171. #avatar {
  172. margin:10px auto;
  173. width:45px;
  174. height:45px;
  175. border-radius:100%;
  176. }
  177.  
  178. #avatar img {
  179. margin:0;
  180. width:100%;
  181. height:100%;
  182. border-radius:100%;
  183. }
  184.  
  185. /*-- Main links --*/
  186.  
  187. #main-links {
  188. margin:25px auto;
  189. width:45px;
  190. text-align:center;
  191. }
  192.  
  193. /* Icons style */
  194.  
  195. #main-links .th {
  196. display:block;
  197. margin:17px 0;
  198. font-size:15px;
  199. overflow:hidden;
  200. color:#cccccc;
  201. }
  202.  
  203. #main-links .th:hover {
  204. color:#ffffff;
  205. }
  206.  
  207. /* Open button */
  208.  
  209. #open {
  210. position:fixed;
  211. margin-left:0;
  212. bottom:10px;
  213. width:80px;
  214. height:40px;
  215. text-align:center;
  216. cursor:pointer;
  217. }
  218.  
  219. #open .th {
  220. font-size:20px;
  221. color:#cccccc;
  222. }
  223.  
  224. #open .th:hover {
  225. color:#ffffff;
  226. }
  227.  
  228. /* Close button */
  229.  
  230. #close {
  231. position:fixed;
  232. margin-left:0;
  233. bottom:10px;
  234. width:80px;
  235. height:40px;
  236. text-align:center;
  237. cursor:pointer;
  238. display:none;
  239. }
  240.  
  241. #close .th{
  242. font-size:20px;
  243. color:#cccccc;
  244. }
  245.  
  246. #close .th:hover {
  247. color:#ffffff;
  248. }
  249.  
  250. /*-- LEFT SIDE --*/
  251.  
  252. #left {
  253. position:absolute;
  254. top:0;
  255. margin-left:100px;
  256. width:300px;
  257. height:calc(100% - 50px);
  258. padding:25px 50px;
  259. font-size:12px;
  260. line-height:18px;
  261. text-align:justify;
  262. overflow-y:auto;
  263. color:#222222;
  264. z-index:100;
  265. transition:all .3s linear;
  266. -webkit-transition:all .3s linear;
  267. -o-transition:all .3s linear;
  268. -moz-transition:all .3s linear;
  269. }
  270.  
  271. /*-- DESCRIPTION --*/
  272.  
  273. #description {
  274. width:300px;
  275. }
  276.  
  277. /* Description title */
  278.  
  279. #description h2 {
  280. margin:0;
  281. font-size:12px;
  282. letter-spacing:1px;
  283. }
  284.  
  285. /* Description link */
  286.  
  287. #otherin a {
  288. color:#CB2102;
  289. }
  290.  
  291. /* Info */
  292.  
  293. #info {
  294. margin:0;
  295. width:200px;
  296. height:auto;
  297. line-height:20px;
  298. font-size:12px;
  299. color:#222222;
  300. }
  301.  
  302. /* Info subtitle */
  303.  
  304. #info span {
  305. color:#222222;
  306. }
  307.  
  308. /* Details */
  309.  
  310. #details {
  311. margin:10px 0;
  312. width:200px;
  313. height:35px;
  314. line-height:20px;
  315. }
  316.  
  317. /* Info label */
  318.  
  319. .detail {
  320. float:left;
  321. margin-right:15px;
  322. font-size:12px;
  323. color:#222222;
  324. }
  325.  
  326. /* Info numbers */
  327.  
  328. .detail big {
  329. font-size:18px;
  330. color:#CB2102
  331. }
  332.  
  333. .desc {
  334. margin-bottom:20px;
  335. width:290px;
  336. height:calc(60vh - 195px);
  337. padding-top:5px;
  338. padding-right:10px;
  339. font-size:12px;
  340. line-height:18px;
  341. text-align:justify;
  342. overflow-y:auto;
  343. color:#222222;
  344. }
  345.  
  346. /*-- PROGRESS --*/
  347.  
  348. /* Left title */
  349.  
  350. #left h1 {
  351. padding:0;
  352. font-size:20px;
  353. line-height:20px;
  354. letter-spacing:1px;
  355. }
  356.  
  357. #left h1:after {
  358. content: "";
  359. display: inline-block;
  360. vertical-align: middle;
  361. margin-left:10px;
  362. margin-top:-3px;
  363. width:25px;
  364. height:1px;
  365. background-color:#ccc;
  366. }
  367.  
  368. .progress-line{
  369. width:290px;
  370. height:18px;
  371. line-height:18px;
  372. margin-top:8px;
  373. overflow:hidden;
  374. }
  375.  
  376. /* Progress label */
  377.  
  378. .progress-label{
  379. float:left;
  380. margin:0;
  381. width:130px;
  382. height:18px;
  383. line-height:18px;
  384. font-size:12px;
  385. color:#222222;
  386. }
  387.  
  388. /* Progress bar */
  389.  
  390. .progress-bar{
  391. margin-left:134px;
  392. margin-top:0;
  393. width:150px;
  394. height:12px;
  395. padding:2px;
  396. border:1px solid #cccccc;
  397. border-radius:10px;
  398. }
  399.  
  400. .progress-bar1, .progress-bar2, .progress-bar3, .progress-bar4, .progress-bar5, .progress-bar6{
  401. height:12px;
  402. border-radius:10px;
  403. text-align:center;
  404. font-size:10px;
  405. line-height:12px;
  406. color:#ffffff;
  407. }
  408.  
  409. /* First bar */
  410.  
  411. .progress-bar1{
  412. background:#FE9B0F;
  413. width:20%;
  414. }
  415.  
  416. .progress-bar1:after {
  417. content:'20%';
  418. text-align:center;
  419. }
  420.  
  421. /* Second bar */
  422.  
  423. .progress-bar2{
  424. background:#FE750B;
  425. width:40%;
  426. }
  427.  
  428. .progress-bar2:after {
  429. content:'40%';
  430. text-align:center;
  431. }
  432.  
  433. /* Third bar */
  434.  
  435. .progress-bar3{
  436. background:#E14704;
  437. width:60%;
  438. }
  439.  
  440. .progress-bar3:after {
  441. content:'60%';
  442. text-align:center;
  443. }
  444.  
  445. /* Fourth bar */
  446.  
  447. .progress-bar4{
  448. background:#CB2102;
  449. width:80%;
  450. }
  451.  
  452. .progress-bar4:after {
  453. content:'80%';
  454. text-align:center;
  455. }
  456.  
  457. /* Fifth bar */
  458.  
  459. .progress-bar5{
  460. background:#850300;
  461. width:100%;
  462. }
  463.  
  464. .progress-bar5:after {
  465. content:'100%';
  466. text-align:center;
  467. }
  468.  
  469. /*-- RIGHT SIDE --*/
  470.  
  471. #right {
  472. position:absolute;
  473. top:0;
  474. margin-left:470px;
  475. width:300px;
  476. height:calc(100% - 50px);
  477. padding:25px 50px;
  478. font-size:12px;
  479. line-height:18px;
  480. text-align:justify;
  481. overflow-y:auto;
  482. color:#222222;
  483. z-index:100;
  484. transition:all .3s linear;
  485. -webkit-transition:all .3s linear;
  486. -o-transition:all .3s linear;
  487. -moz-transition:all .3s linear;
  488. }
  489.  
  490. /* Right title */
  491.  
  492. #right h1 {
  493. padding:0;
  494. font-size:20px;
  495. line-height:20px;
  496. letter-spacing:1px;
  497. }
  498.  
  499. #right h1:after {
  500. content: "";
  501. display: inline-block;
  502. vertical-align: middle;
  503. margin-left:10px;
  504. margin-top:-3px;
  505. width:25px;
  506. height:1px;
  507. background-color:#ccc;
  508. }
  509.  
  510. .stats-line{
  511. width:200px;
  512. height:18px;
  513. line-height:18px;
  514. margin-top:8px;
  515. overflow:hidden;
  516. }
  517.  
  518. /* Stats label */
  519.  
  520. .stats-label {
  521. float:left;
  522. margin:0;
  523. width:130px;
  524. height:18px;
  525. font-size:12px;
  526. color:#222222;
  527. }
  528.  
  529. /* Stats yes (green toggle) */
  530.  
  531. .stats-yes {
  532. margin-left:134px;
  533. margin-top:0;
  534. width:35px;
  535. height:12px;
  536. padding:2px;
  537. border:1px solid #cccccc;
  538. border-radius:10px;
  539. }
  540.  
  541. .stats-yes .circ {
  542. float:right;
  543. width:12px;
  544. height:12px;
  545. border-radius:100%;
  546. background:#B3E45C;
  547. }
  548.  
  549. /* Stats no (white toggle) */
  550.  
  551. .stats-no {
  552. margin-left:134px;
  553. margin-top:0;
  554. width:35px;
  555. height:12px;
  556. padding:2px;
  557. border:1px solid #cccccc;
  558. border-radius:10px;
  559. }
  560.  
  561. .stats-no .circ {
  562. width:12px;
  563. height:12px;
  564. border-radius:100%;
  565. background:#ddd;
  566. }
  567.  
  568. /*-- OTHER --*/
  569.  
  570. #other {
  571. width:310px;
  572. height:calc(40vh - 30px);
  573. overflow-y:auto;
  574. text-align:justify;
  575. font-size:12px;
  576. color:#222222;
  577. }
  578.  
  579. /* Other subtitle */
  580.  
  581. #other h2 {
  582. font-size:12px;
  583. letter-spacing:1px;
  584. }
  585.  
  586. /* Other text */
  587.  
  588. #otherin {
  589. max-height:calc(100% - 35px);
  590. padding-right:10px;
  591. overflow-y:auto;
  592. }
  593.  
  594. /* Other link */
  595.  
  596. #otherin a {
  597. color:#CB2102;
  598. }
  599.  
  600. /* Label */
  601.  
  602. #label {
  603. margin-top:10px;
  604. color:#CB2102;
  605. height:20px;
  606. }
  607.  
  608. /*-- SOCIAL ICONS --*/
  609.  
  610. #social-icons {
  611. width:310px;
  612. margin-top:20px;
  613. max-height:100px;
  614. overflow-y:auto;
  615. text-align:justify;
  616. }
  617.  
  618. /* Icons style */
  619.  
  620. #social-icons .th {
  621. margin:8px;
  622. font-size:25px;
  623. color:#CB2102;
  624. }
  625.  
  626. #social-icons .th:hover {
  627. color:#222222;
  628. }
  629.  
  630. /*-- PANEL --*/
  631.  
  632. #panel {
  633. position:fixed;
  634. top:0;
  635. left:100px;
  636. width:calc(100% - 100px);
  637. height:calc(100% - 60px);
  638. padding:30px 0;
  639. /* Panel background */
  640. background:#ffffff;
  641. border-top-right-radius:10px;
  642. border-bottom-right-radius:10px;
  643. overflow-y:auto;
  644. z-index:1000;
  645. display:none;
  646. transition:all .3s linear;
  647. -webkit-transition:all .3s linear;
  648. -o-transition:all .3s linear;
  649. -moz-transition:all .3s linear;
  650. }
  651.  
  652. /* Panel section */
  653.  
  654. .panel-section {
  655. float:left;
  656. margin-left:50px;
  657. margin-right:30px;
  658. margin-bottom:10px;
  659. height:auto;
  660. width:290px;
  661. padding-bottom:12px;
  662. border-bottom:1px solid #cccccc;
  663. }
  664.  
  665. /* Panel title */
  666.  
  667. .panel-section h1 {
  668. padding:0;
  669. font-size:20px;
  670. line-height:20px;
  671. letter-spacing:1px;
  672. }
  673.  
  674. .panel-section h1:after {
  675. content: "";
  676. display: inline-block;
  677. vertical-align: middle;
  678. margin-left:10px;
  679. margin-top:-3px;
  680. width:25px;
  681. height:1px;
  682. background-color:#cccccc;
  683. }
  684.  
  685. /* Panel link */
  686.  
  687. .panel-section a {
  688. display:inline-block;
  689. margin-top:5px;
  690. margin-right:5px;
  691. color:#222222;
  692. padding:2px 0px;
  693. border-bottom:2px solid #CB2102;
  694. }
  695.  
  696. .panel-section a:hover {
  697. color:#CB2102;
  698. }
  699.  
  700. .panel-section img {
  701. width:300px;
  702. margin-bottom:10px;
  703. border:1px solid #cccccc;
  704. }
  705.  
  706. /*-- PAGE CREDIT --*/
  707.  
  708. #credit {
  709. position:fixed;
  710. right:10px;
  711. top:10px;
  712. width:30px;
  713. }
  714.  
  715. /* END CSS */
  716.  
  717. {CustomCSS}
  718.  
  719. </style>
  720.  
  721. <!-- Honeybee script-->
  722.  
  723. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  724.  
  725. <!-- Style my tooltips script -->
  726.  
  727. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  728.  
  729. <script src="jquery.style-my-tooltips.js"></script>
  730.  
  731. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  732.  
  733. <script>
  734. (function($){
  735. $(document).ready(function(){
  736. $("[title]").style_my_tooltips({
  737. tip_follows_cursor:true,
  738. tip_delay_time:200,
  739. tip_fade_speed: 300
  740. }
  741. );
  742. });
  743. })(jQuery);
  744. </script>
  745.  
  746. </head>
  747.  
  748. <meta charset="utf-8">
  749. <title>{Title}</title>
  750. <link rel="shortcut icon" href="{Favicon}">
  751. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  752. <meta name="viewport" content="width=device-width, initial-scale=1">
  753.  
  754. <!-- HTML -->
  755.  
  756. <body>
  757.  
  758. <!---------- MAIN CONTAINER ---------->
  759. <div id="container">
  760.  
  761. <!-- MENU -->
  762. <div id="menu">
  763.  
  764. <!-- Avatar -->
  765. <div id="avatar">
  766. <img src="https://static.tumblr.com/a134320be8c640fa109d305c337700f6/6dvmes1/zEAo4588f/tumblr_static_7e8y794w4jk0040gow8ssgs4k.jpg">
  767. </div>
  768. <!-- End avatar -->
  769.  
  770. <!-- Main links -->
  771. <div id="main-links">
  772.  
  773. <a href="/" title="Index"><span class="th th-house-1-o"></span></a>
  774. <a href="/ask" title="Ask"><span class="th th-envelope-o"></span></a>
  775. <a href="/submit" title="Submit"><span class="th th-paper-clip-o"></span></a>
  776.  
  777. <!-- Add custom link here -->
  778. <a href="/" title=""><span class="th th-heart-1-o"></span></a>
  779.  
  780. </div>
  781. <!--End main-links-->
  782.  
  783. <!-- Open button -->
  784. <div id="open">
  785. <span class="th th-plus-3-o"></span>
  786. </div>
  787. <!--End open -->
  788.  
  789. <!-- Close button -->
  790. <div id="close">
  791. <span class="th th-cancel-o"></span>
  792. </div>
  793. <!--End open -->
  794.  
  795. </div>
  796. <!-- End menu -->
  797.  
  798.  
  799. <!-- LEFT PANEL -->
  800. <div id="left">
  801.  
  802. <!-- Description -->
  803. <div id="description">
  804.  
  805. <!-- Info -->
  806. <div id="info">
  807.  
  808. <h1> ABOUT </h1>
  809.  
  810. <h2> JANE DOE </h2>
  811.  
  812. <span> Subtitle </span>
  813.  
  814. </div>
  815. <!--End info-->
  816.  
  817. <!-- Details -->
  818. <div id="details">
  819.  
  820. <div class="detail">
  821.  
  822. <big> 097 </big><br>
  823. label
  824.  
  825. </div>
  826. <!--End detail-->
  827.  
  828. <div class="detail">
  829.  
  830. <big> 098 </big><br>
  831. label
  832.  
  833. </div>
  834. <!--End detail-->
  835.  
  836. <div class="detail">
  837.  
  838. <big> 099 </big><br>
  839. label
  840.  
  841. </div>
  842. <!--End detail-->
  843.  
  844. </div>
  845. <!--End details-->
  846.  
  847. <!-- Desc -->
  848. <div class="desc">
  849.  
  850. Lorem ipsum dolor sit <b>amet</b>, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, <i>mauris</i>. Aliquam mattis porta urna. Curabitur sit amet quam id libero suscipit venenatis. <br> <br>
  851.  
  852. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.
  853.  
  854. </div>
  855. <!-- End desc -->
  856.  
  857. </div>
  858. <!-- End description -->
  859.  
  860. <!-------------------------------------------------------------------------->
  861.  
  862. <h1> PROGRESS </h2>
  863.  
  864. <div class="progress-line">
  865. <div class="progress-label"> Label one </div>
  866. <div class="progress-bar"><div class="progress-bar1"></div></div>
  867. </div>
  868. <!-- End progress-line-->
  869.  
  870. <div class="progress-line">
  871. <div class="progress-label"> Label two </div>
  872. <div class="progress-bar"><div class="progress-bar2"></div></div>
  873. </div>
  874. <!-- End progress-line-->
  875.  
  876. <div class="progress-line">
  877. <div class="progress-label"> Label three </div>
  878. <div class="progress-bar"><div class="progress-bar3"></div></div>
  879. </div>
  880. <!-- End progress-line-->
  881.  
  882. <div class="progress-line">
  883. <div class="progress-label"> Label four </div>
  884. <div class="progress-bar"><div class="progress-bar4"></div></div>
  885. </div>
  886. <!-- End progress-line-->
  887.  
  888. <div class="progress-line">
  889. <div class="progress-label"> Label five </div>
  890. <div class="progress-bar"><div class="progress-bar5"></div></div>
  891. </div>
  892. <!-- End progress-line-->
  893.  
  894. </div>
  895. <!-- End left -->
  896.  
  897.  
  898. <!-- RIGHT PANEL -->
  899. <div id="right">
  900.  
  901. <h1> STATS </h2>
  902.  
  903. <div class="stats-line">
  904. <div class="stats-label"> Label one </div>
  905. <div class="stats-yes"><div class="circ"></div></div>
  906. </div>
  907. <!-- End stats-line-->
  908.  
  909. <div class="stats-line">
  910. <div class="stats-label"> Label two </div>
  911. <div class="stats-no"><div class="circ"></div></div>
  912. </div>
  913. <!-- End stats-line-->
  914.  
  915. <div class="stats-line">
  916. <div class="stats-label"> Label three </div>
  917. <div class="stats-yes"><div class="circ"></div></div>
  918. </div>
  919. <!-- End stats-line-->
  920.  
  921. <div class="stats-line">
  922. <div class="stats-label"> Label four </div>
  923. <div class="stats-no"><div class="circ"></div></div>
  924. </div>
  925. <!-- End stats-line-->
  926.  
  927. <div class="stats-line">
  928. <div class="stats-label"> Label five </div>
  929. <div class="stats-yes"><div class="circ"></div></div>
  930. </div>
  931. <!-- End stats-line-->
  932.  
  933. <br>
  934.  
  935. <!-------------------------------------------------------------------------->
  936.  
  937. <!-- OTHER -->
  938. <div id="other">
  939.  
  940. <div id="otherin">
  941.  
  942. <h1> OTHER </h1>
  943.  
  944. <h2> SUBTITLE</h2>
  945.  
  946. Lorem ipsum dolor sit <b>amet</b>, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, <i>mauris</i>. Aliquam mattis porta urna. Curabitur sit amet quam id libero suscipit venenatis.
  947. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  948.  
  949. </div>
  950. <!--End otherin -->
  951.  
  952. <div id="label"> LABEL, LABEL </div>
  953.  
  954. </div>
  955. <!--End other-->
  956.  
  957.  
  958. <!-- Social icons -->
  959. <div id="social-icons">
  960.  
  961. <a href="http://" title="Facebook"><span class="th th-facebook"></span></a>
  962. <a href="http://" title="Twitter"><span class="th th-twitter"></span></a>
  963. <a href="http://" title="Pinterest"><span class="th th-pinterest"></span></a>
  964. <a href="http://" title="Instagram"><span class="th th-instagram"></span></a>
  965. <a href="http://" title="Flickr"><span class="th th-flickr"></span></a>
  966. <a href="http://" title="Deviantart"><span class="th th-deviantart"></span></a>
  967. <a href="http://" title="Behance"><span class="th th-behance"></span></a>
  968. <a href="http://" title="Dribbble"><span class="th th-dribbble"></span></a>
  969. <a href="http://" title="YouTube"><span class="th th-youtube"></span></a>
  970. <a href="http://" title="FanFiction.Net"><span class="th th-fanfiction-net"></span></a>
  971. <a href="http://" title="Skype"><span class="th th-skype"></span></a>
  972. <a href="http://" title="Whatsapp"><span class="th th-whatsapp"></span></a>
  973. <a href="http://" title="Ko-fi"><span class="th th-ko-fi"></span></a>
  974. <a href="http://" title="Paypal"><span class="th th-paypal"></span></a>
  975.  
  976. </div>
  977. <!-- End social icons -->
  978.  
  979. </div>
  980. <!-- End right -->
  981.  
  982.  
  983. <!-- PANEL -->
  984. <div id="panel">
  985.  
  986. <div class="panel-section">
  987.  
  988. <h1> TITLE </h1>
  989.  
  990. <img src="https://66.media.tumblr.com/bf8d9ae607e0d704261ea71edef501c3/tumblr_phzasy4eyd1uo5urho2_400.jpg">
  991.  
  992. <div class="panel-desc">
  993. Lorem ipsum dolor sit <b>amet</b>, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, <i>mauris</i>. <br>
  994. <a href="http://"> LINK </a>
  995.  
  996. </div>
  997. <!-- End panel-desc -->
  998.  
  999. </div>
  1000. <!-- End panel-section-->
  1001.  
  1002.  
  1003. <div class="panel-section">
  1004.  
  1005. <h1> TITLE </h1>
  1006.  
  1007. <img src="https://66.media.tumblr.com/bf8d9ae607e0d704261ea71edef501c3/tumblr_phzasy4eyd1uo5urho2_400.jpg">
  1008.  
  1009. <div class="panel-desc">
  1010. Lorem ipsum dolor sit <b>amet</b>, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, <i>mauris</i>. <br>
  1011. <a href="http://"> LINK </a>
  1012.  
  1013. </div>
  1014. <!-- End panel-desc -->
  1015.  
  1016. </div>
  1017. <!-- End panel-section-->
  1018.  
  1019.  
  1020. <div class="panel-section">
  1021.  
  1022. <h1> TITLE </h1>
  1023.  
  1024. <img src="https://66.media.tumblr.com/bf8d9ae607e0d704261ea71edef501c3/tumblr_phzasy4eyd1uo5urho2_400.jpg">
  1025.  
  1026. <div class="panel-desc">
  1027. Lorem ipsum dolor sit <b>amet</b>, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, <i>mauris</i>. <br>
  1028. <a href="http://"> LINK </a>
  1029.  
  1030. </div>
  1031. <!-- End panel-desc -->
  1032.  
  1033. </div>
  1034. <!-- End panel-section-->
  1035.  
  1036.  
  1037. <div class="panel-section">
  1038.  
  1039. <h1> TITLE </h1>
  1040.  
  1041. <img src="https://66.media.tumblr.com/bf8d9ae607e0d704261ea71edef501c3/tumblr_phzasy4eyd1uo5urho2_400.jpg">
  1042.  
  1043. <div class="panel-desc">
  1044. Lorem ipsum dolor sit <b>amet</b>, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, <i>mauris</i>. <br>
  1045. <a href="http://"> LINK </a>
  1046.  
  1047. </div>
  1048. <!-- End panel-desc -->
  1049.  
  1050. </div>
  1051. <!-- End panel-section-->
  1052.  
  1053.  
  1054. <div class="panel-section">
  1055.  
  1056. <h1> TITLE </h1>
  1057.  
  1058. <img src="https://66.media.tumblr.com/bf8d9ae607e0d704261ea71edef501c3/tumblr_phzasy4eyd1uo5urho2_400.jpg">
  1059.  
  1060. <div class="panel-desc">
  1061. Lorem ipsum dolor sit <b>amet</b>, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, <i>mauris</i>. <br>
  1062. <a href="http://"> LINK </a>
  1063.  
  1064. </div>
  1065. <!-- End panel-desc -->
  1066.  
  1067. </div>
  1068. <!-- End panel-section-->
  1069.  
  1070.  
  1071. <div class="panel-section">
  1072.  
  1073. <h1> TITLE </h1>
  1074.  
  1075. <img src="https://66.media.tumblr.com/bf8d9ae607e0d704261ea71edef501c3/tumblr_phzasy4eyd1uo5urho2_400.jpg">
  1076.  
  1077. <div class="panel-desc">
  1078. Lorem ipsum dolor sit <b>amet</b>, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, <i>mauris</i>. <br>
  1079. <a href="http://"> LINK </a>
  1080.  
  1081. </div>
  1082. <!-- End panel-desc -->
  1083.  
  1084. </div>
  1085. <!-- End panel-section-->
  1086.  
  1087.  
  1088. <!--------------------------------- To add more panel sections copy and paste
  1089.  
  1090. <div class="panel-section">
  1091.  
  1092. <h1> TITLE </h1>
  1093.  
  1094. <img src="https://66.media.tumblr.com/bf8d9ae607e0d704261ea71edef501c3/tumblr_phzasy4eyd1uo5urho2_400.jpg">
  1095.  
  1096. <div class="panel-desc">
  1097. Lorem ipsum dolor sit <b>amet</b>, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, <i>mauris</i>. <br>
  1098. <a href="http://"> LINK </a>
  1099.  
  1100. </div>
  1101. </div>
  1102.  
  1103. before this comment ------------------------------------------------------->
  1104.  
  1105. </div>
  1106. <!-- End panel -->
  1107.  
  1108. </div>
  1109. <!--End container-->
  1110.  
  1111. <!-- CREDIT (DO NOT REMOVE) -->
  1112. <div id="credit"><a href="http://www.hunterthemes.tumblr.com">
  1113. <img src="https://66.media.tumblr.com/33275ea6e024c68d6a75331fe09cc29a/tumblr_pm5sqzvnJE1uo5urho1_75sq.png" title="page by hunter themes"></div></a>
  1114.  
  1115. </body>
  1116. </html>
  1117.  
  1118. <!-- END 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!