API tools faq
paste
atlasthemes

novella - theme

atlasthemes
Apr 9th, 2019
7,215
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.46 KB | None | 0 0
raw download clone embed print report
  1. <!------------------------------------------------------------------------
  2.  
  3. novella
  4. by @atlasthemes
  5. pls do not remove credit
  6. thanks!<3
  7.  
  8. all-in-one base code by
  9. neonbikethemes.tumblr.com
  10.  
  11. all credits at
  12. atlasthemes.tumblr.com/credits
  13.  
  14. ------------------------------------------------------------------------->
  15.  
  16. <html>
  17. <head>
  18. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  19. <title>{Title}</title>
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  22.  
  23. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  24. <meta name="color:link" content="#888888" />
  25. <meta name="color:text" content="#444444" />
  26. <meta name="color:accent" content="#d13854">
  27. <meta name="if:justify text" content="1"/>
  28. <meta name="text:title" content="your title here">
  29. <meta name="select:font" content="Open Sans"/>
  30. <meta name="select:font" content="Lato"/>
  31. <meta name="select:font" content="Muli"/>
  32. <meta name="select:font" content="Georgia"/>
  33. <meta name="select:font" content="Merriweather"/>
  34. <meta name="select:font" content="Lora"/>
  35. <meta name="select:font" content="Times New Roman"/>
  36. <meta name="select:letter spacing" content="0px"/>
  37. <meta name="select:letter spacing" content="0.3px"/>
  38. <meta name="select:letter spacing" content="0.5px"/>
  39. <meta name="select:letter spacing" content="0.75px"/>
  40. <meta name="select:letter spacing" content="1px"/>
  41. <meta name="select:post size" content="400px"/>
  42. <meta name="select:post size" content="450px"/>
  43. <meta name="select:post size" content="500px"/>
  44. <meta name="select:post size" content="540px"/>
  45. <meta name="select:header opacity" content="1"/>
  46. <meta name="select:header opacity" content="0.95"/>
  47. <meta name="select:header opacity" content="0.9"/>
  48. <meta name="select:header opacity" content="0.85"/>
  49. <meta name="text:font size" content="10px"/>
  50. <meta name="text:tab 1 title" content="index" />
  51. <meta name="text:tab 2 title" content="about" />
  52. <meta name="text:tab 3 title" content="contact" />
  53. <meta name="text:tab 4 title" content="projects" />
  54. <meta name="text:tab 5 title" content="explore" />
  55.  
  56. <!-- icon font -->
  57.  
  58. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  59.  
  60. <!-- google fonts -->
  61.  
  62. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Merriweather:400,400i,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700" rel="stylesheet">
  63.  
  64. <!-- scripts -->
  65.  
  66. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  67.  
  68. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  69.  
  70. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  71. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  72. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  73. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  74. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  75. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  76. </script><script src="https://static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
  77. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  78.  
  79. <script>
  80. $(document).ready(function() {
  81. $('.tabs .tab-links a').on('click', function(e) {
  82. var currentAttrValue = $(this).attr('href');
  83.  
  84. // Show/Hide Tabs
  85. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  86.  
  87. // Change/remove current tab to active
  88. $(this).parent('li').addClass('active').siblings().removeClass('active');
  89.  
  90. e.preventDefault();
  91. });
  92. });
  93. </script>
  94.  
  95. <script>
  96. $(document).ready(function() {
  97. $('#filterOptions li a').click(function() {
  98. // fetch the class of the clicked item
  99. var ourClass = $(this).attr('class');
  100.  
  101. // reset the active class on all the buttons
  102. $('#filterOptions li').removeClass('active');
  103. // update the active state on our clicked button
  104. $(this).parent().addClass('active');
  105.  
  106. if(ourClass == 'all') {
  107. // show all our items
  108. $('#ourHolder').children('div.item').show();
  109. }
  110. else {
  111. // hide all elements that don't share ourClass
  112. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  113. // show all elements that do share ourClass
  114. $('#ourHolder').children('div.' + ourClass).show();
  115. }
  116. return false;
  117. });
  118. });
  119. </script>
  120.  
  121. <script>
  122. (function($){
  123. $(document).ready(function(){
  124. $("a[title]").style_my_tooltips({
  125. tip_follows_cursor:true,
  126. tip_delay_time:90,
  127. tip_fade_speed:300,
  128. attribute:"title"
  129. });
  130. });
  131. })(jQuery);
  132. </script>
  133.  
  134. <script>
  135. $(document).ready(function(){ $('.posts').unnest({
  136. yourCaption: ".caption",
  137. wrapName: ".cap",
  138. newCaptionUsername: true,
  139. originalPostCaptionUsername: false,
  140. tumblrAvatars: false,
  141. tumblrAvatarClass: ".icon",
  142. usernameColon: false
  143. });
  144.  
  145. }); </script>
  146.  
  147. <script>
  148. $(document).ready(function(){
  149. $('.search').submit(function(event){
  150. var value = $('input:first').val();
  151. location.replace('https://{Name}.tumblr.com/tagged/' + value);
  152. });
  153. });
  154. </script>
  155.  
  156. <script>
  157. $(document).ready(function(){
  158. $('.photo-slideshow').pxuPhotoset({
  159. lightbox: true,
  160. highRes: true,
  161. gutter: '1px',
  162. borderRadius: '0px',
  163. photoset: '.photo-slideshow',
  164. photoWrap: '.photo-data',
  165. photo: '.pxu-photo'
  166. });
  167.  
  168. }); </script>
  169.  
  170.  
  171. <style type="text/css">
  172.  
  173. /* --- selection --- */
  174.  
  175. ::-moz-selection {background:#f6f6f6;color:{color:text};}
  176. ::selection {background:#f6f6f6;color:{color:text};}
  177.  
  178.  
  179. /* --- fade in --- */
  180.  
  181. @-webkit-keyframes fadein {
  182. 0% {opacity: 0;}
  183. 100% { opacity: 1; } }
  184.  
  185. @-moz-keyframes fadein {
  186. 0% { opacity: 0; }
  187. 100% { opacity: 1; } }
  188.  
  189. @keyframes fadein {
  190. 0% { opacity: 0; }
  191. 100% { opacity: 1; } }
  192.  
  193.  
  194. #s-m-t-tooltip {max-width:300px;margin-top:-40px;margin-left:-18px;font-size:10px;text-align:center;text-transform:lowercase;padding:3px 5px;color:{color:link};background-color:#fff;z-index:999999;box-shadow:1px 1px 3px #eee;border-radius:3px;}
  195. body {background:#ffffff;color: {color:text};font-family: {select:font};font-size: {text:font size};letter-spacing:{select:letter spacing};{block:ifjustifytext} text-align:justify;{/block:ifjustifytext} {block:ifnotjustifytext} text-align:left;{/block:ifnotjustifytext} line-height:185%;word-wrap: break-word;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;-webkit-animation: fadein 1s;-moz-animation:fadein 1s;animation:fadein 1s;}
  196. a {color: {color:link};text-decoration: none;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
  197. a:hover{color:{color:accent};-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
  198. h1 {font-size:16px;font-weight:400;line-height:18px;margin:5px 0px;} h2, h3, h4, h5, h6 {font-size:14px;font-weight:400;margin:0px 0px 7px 0px;} small {font-size:10px!important;} big {font-size:12px!important;} hr {width:100%;margin:15px auto;border-width: 1px 0px 0px 0px;border-style: solid;border-color:#eee;} pre {font-size: {text:font size};font-family: {select:font};width:{select:post size};text-align: left;word-break: break-all;color:{color:Text};}
  199. .tumblr_blog {display:inline-block;font-family:{select:font};font-size:{text:font size};color:{color:text};text-transform:lowercase;margin-top:5px;border-radius:2px;letter-spacing:0.5px;font-weight:700;border-bottom:0px!important;}
  200. .cap {margin:0px;padding-top:0px;position:relative;} .cap a {border-bottom:1px dotted {color:accent};} .cap blockquote {width:calc(100% - 40px);margin-left:10px;padding-left:15px;border-left:1px solid {color:accent};font-style:italic;}
  201. .like-b {position:relative;display:inline-block;height:1em;line-height:1em;overflow:hidden;margin-bottom:-2px;} .like-b .like_button iframe {position:absolute;top:0;left:0;bottom:0;right:0;z-index:2;opacity:0;} .like-b .liked + .b {color:{color:Text};} .like-b .liked + .b:after {content:'d';}
  202. #header {display:block;position:fixed;background-color:#fff;opacity:{select:header opacity};text-align:center;top:0px;left:0px;width:100%;padding:0px;z-index:999999;} article {width:{select:post size};text-align:left;margin:0px auto;padding:50px 5px 20px 5px;border-bottom:1px solid #f1f1f1;} .title {display:block;position: relative;font-size:18px;margin-bottom:8px;} .title a {color:{color:text};} .title a:hover {color:{color:accent};} #description {display:block;color: {color:text};font-style:italic;}
  203.  
  204. /* --- tab styles --- */
  205. .linkbox {width:115%;display:grid;grid-template-columns:33.3% 33.3% 33.3%;margin-bottom:20px;} .linkbox a {display:block;color:{color:link};} .linkbox a:hover {color:{color:accent};} .aboutbox {width:100%;margin:auto;} .about-thumb img {border-radius:100%;margin-bottom:10px;} .askbox span {display:block;margin-bottom:10px;} .askbox span b {display:block;font-weight:700;} .project {display:block;position:relative;width:300px;height:70px;text-align:left;margin-top:10px;margin-bottom:0px;} .project span b {width:30%;display:inline-block;font-size:8.5px;text-transform:uppercase;letter-spacing:1px;} .meter {height: 5px;width: 50%;position: relative;background:#eeeeee;-moz-border-radius: 25px;-webkit-border-radius: 25px;border-radius: 25px;padding: 1px;margin:5px 0px 25px 0px;} .meter > span {display: block;height: 100%;border-top-right-radius: 8px;border-bottom-right-radius: 8px;border-top-left-radius: 20px;border-bottom-left-radius: 20px;background-color:{color:accent};position: relative;overflow: hidden;} .explore {width:100%;margin:auto;display: grid;grid-template-columns: 33.3% 33.3% 33.3%;padding-top:5px;padding-bottom:10px;}
  206.  
  207. .search .query {border-top:0;border-left:0;border-right:0;outline:0;margin-top:5px;font-family: inherit;font-size:{text:font size}!important;color:{color:link};background-color:transparent;width:50%;text-align:left;font-style:italic;border-bottom:1px dotted #eee;letter-spacing:0.2px;}
  208. ::-webkit-input-placeholder {color: inherit;}
  209. :-moz-placeholder {color:inherit; opacity:0.5;}
  210. ::-moz-placeholder {color:inherit; opacity:0.5;}
  211. :-ms-input-placeholder {color:inherit;}
  212. input:focus::-webkit-input-placeholder {color:transparent;}
  213. input:focus:-moz-placeholder {color:transparent;}
  214. input:focus::-moz-placeholder {color:transparent;}
  215. input:focus:-ms-input-placeholder {color:transparent;}
  216.  
  217. #tab-bar {display:block;width:{select:post size};margin-top:-5px;}
  218. .tabcontent {position:static;width:{select:post size};margin:200px auto 0px auto;text-align:left;}
  219. .tabs {width:100%;display:inline-block;}
  220. .tab-links {padding-left:0px;margin-left:0px;}
  221. .tab-links:after {display:block;clear:both;content:'';}
  222. .tab-links li {display:inline-block;list-style:none;margin:0px;padding:0px;text-transform:lowercase;}
  223. .tab-links a {padding-right:10px;margin-left:0px;display:inline-block;color:{color:text};transition:all linear 0.15s;}
  224. .tab-links a:hover {color:{color:accent};}
  225. li.active a, li.active a:hover {background:transparent;color:{color:link};-webkit-transition: all .3s;-moz-transition: all .3s;-o-transition: all .3s;-ms-transition: all .3s; transition: all .3s;}
  226. .tab-content {
  227. }
  228. .tab {display:none;} .tab.active {display:block;}
  229.  
  230. .pagination {width:100%;text-align:center;font-size:{text:font size};margin-bottom:75px;} .pagination a {color:{color:link};margin-right:8px;} .pagination a:hover {color:{color:accent};} .current-page {color:{color:link};font-size:{text:font size};margin-right:8px;font-weight:700;} .postscontainer {display:block;position:relative;width:{select:post size};} .posts {display:block;width:{select:post size};font-size:{text:font size};font-family: {select:font};margin:0px auto 125px auto;{block:ifjustifytext}text-align:justify;{/block:ifjustifytext}{block:ifnotjustifytext}text-align:left;{/block:ifnotjustifytext}} .posts img {max-width:100%;height:auto;} ul li {list-style:circle;margin-left:-10px;margin-bottom:5px;}
  231. .info {width:100%;margin-top:10px;text-align:left;text-transform:lowercase;color:{color:accent};font-size:calc({text:font size} - 1.5px);} .info a {color:{color:accent};margin-right:10px;font-size:{text:font size};} .info a:hover {text-decoration:none;color:{color:text};} .tags {width:100%;margin-top:8px;font-family:{select:font};text-align:left;font-size:{text:font size};word-break:break-word;color:{color:link};} .tags a {margin-right:10px;color:{color:link};} .tags a:hover {color:{color:text};}
  232. .postsnote {min-height:50px;max-height:242px;overflow-y:scroll;overflow-x:hidden;margin-top:40px;margin-bottom:50px;} .postsnote ol, .notes-bottom ul {margin:0px;padding:0;list-style:none;} .postsnote li {width:100%;float:left;text-align:left;} .postsnote li img.avatar {width:12px;height:12px;border-radius:100%;margin-right:8px;margin-bottom:-2px;} .more_notes_link {list-style:none;text-transform:lowercase;margin-top:10px;float:left;}
  233.  
  234. .photo-slideshow {visibility: hidden;} .photo-slideshow.processed {visibility: visible;} .photo-slideshow .row {clear: both;width: 100%;} .photo-slideshow .pxu-photo {display: block;float: clear;width: 100%;overflow: hidden;} .photo-slideshow .pxu-photo img {display: block;} .photo-slideshow.processed .pxu-photo img {width:100%;height: auto;} .photo-slideshow .pxu-photo:first-child img {margin:auto;} .photo-slideshow .count-1 {max-width:100%;height: auto;} .set {margin-left:10px;} .photo-slideshow .count-2 {width:50%;height: auto;} .photo-slideshow .count-3 {width:33.33%;height: auto;}
  235. .playerbuttonbg {position: absolute;left: 20px;top: 20px;width: 19px;height: 19px;background-color: #f2f2f2;padding: 10px;-webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px;opacity: .4;filter: alpha(opacity=40);-moz-opacity: 0.4;-khtml-opacity: 0.4; transition: opacity .7s ease-in-out;-moz-transition: opacity .7s ease-in-out;-webkit-transition: opacity .7s ease-in-out;} .playerbuttonbg:hover {opacity: 1;filter: alpha(opacity=100);-moz-opacity: 1;-khtml-opacity: 1; } .newplayerbutton {position: relative;width: 19px;height: 19px;overflow: hidden;} .playerbuttonhug {position: absolute;top: 0px;left: 0px;} .tumblr_audio_player {-moz-transform: scale(0.60, 0.60);-webkit-transform: scale(0.60, 0.60);-o-transform: scale(0.60, 0.60);-ms-transform: scale(0.60, 0.60);transform: scale(0.60, 0.60); -moz-transform-origin: top left;-webkit-transform-origin: top left;-o-transform-origin: top left;-ms-transform-origin: top left;transform-origin: top left;} .audioimgwrapper {position:absolute;left:0px;top:0px;overflow:hidden;width:79px;height: 79px;padding-left:3px;} .audioimgwrapper img {margin-top:3px;width:100%;height:auto;} .trackdetails {width:auto;font-size: 9px;line-height:14px;display:inline-block;margin-left:95px;margin-top:20px;padding:5px;max-height:80px;} .audiowrapper {background-color:#fafafa;position:relative;display:inline-block;width:{select:post size};height:82px;border:1px solid #f1f1f1;}
  236. iframe#youtube_iframe {width: {select:post size}!important;height: auto;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;} .atlas {position:fixed;right:20px;bottom:20px;} .atlas a {color:#a1a1a1;background:transparent;font-family:times new roman;font-size:14px;} .atlas a:hover {color:{color:accent};}
  237. .quote {font-size:14px;font-style:italic;line-height:20px;letter-spacing:-0.2px;} .source {font-family:{select:font};color:{color:link};margin-top:5px;} .chat {margin-top:5px;font-size: {text:font size};} .chatlabel {font-family:{select:font};text-transform:lowercase;display:inline-block;margin-right:1px;font-weight:600;} .chat .lines {margin-left:0; } .chat .lines span {font-weight: bold;} .linktitle {font-size:14px;line-height:20px;margin:10px 0px;font-family:{select:font};} .asker {display:block;color:{color:text};font-weight:700;text-transform:lowercase;} .asker a {display:inline-block;} .question {padding:15px;background-color:#fafafa;border-bottom:1px solid #f1f1f1;margin-bottom:5px;} .answer {display:block;position:relative;background-color:#fff;margin:15px 0px;}
  238. iframe.tmblr-iframe {z-index:99999999999999!important;top:0!important;right:0!important;opacity:0.4;filter:invert(1) contrast(150%);-webkit-filter:invert(1) contrast(150%);-o-filter:invert(1) contrast(150%);-moz-filter:invert(1) contrast(150%);-ms-filter:invert(1) contrast(150%);transform:scale(0.65);transform-origin:100% 0;-webkit-transform:scale(0.65);-webkit-transform-origin:100% 0;-o-transform:scale(0.65);-o-transform-origin:100% 0;-moz-transform:scale(0.65);-moz-transform-origin:100% 0;-ms-transform:scale(0.65);-ms-transform-origin:100% 0;-moz-transition-duration: 0.3s;-o-transition-duration: 0.3s;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;}
  239. iframe.tmblr-iframe:hover {opacity:0.6!important;-moz-transition-duration: 0.3s;-o-transition-duration: 0.3s;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;}
  240. </style>
  241. </head>
  242. <body>
  243.  
  244. <!----------------------------------------------------------------------->
  245. <!----------------------------------------------------------------------->
  246. <!----------------------------------------------------------------------->
  247. <!----------------------------------------------------------------------->
  248. <!----------------------------------------------------------------------->
  249.  
  250. <div id="header">
  251.  
  252. <article>
  253. <div class="title"><a href="/">{text:title}</a></div>
  254. <div id="description">{Description}</div>
  255.  
  256. <!--- tab titles --->
  257. <div id="tab-bar">
  258. <div class="tabs">
  259. <ul class="tab-links">
  260. <li class="active"><a href="#tab1">{text:Tab 1 Title}</a></li>
  261. <li><a href="#tab2">{text:Tab 2 Title}</a></li>
  262. <li><a href="#tab3">{text:Tab 3 Title}</a></li>
  263. <li><a href="#tab4">{text:Tab 4 Title}</a></li>
  264. <li><a href="#tab5">{text:Tab 5 Title}</a></li>
  265. </ul>
  266. </div>
  267. </div>
  268.  
  269. </article>
  270. </div><!--- end header --->
  271.  
  272. <!-------------------------------- TABS --------------------------------->
  273.  
  274. <div class="tabs">
  275. <div class="tab-content">
  276.  
  277. <!--------------------------- INDEX/POSTS TAB --------------------------->
  278.  
  279. <div id="tab1" class="tab active">
  280. <div class="tabcontent">
  281.  
  282. <div class="postscontainer" id="{PostID}">
  283.  
  284. {block:Posts}<div class="posts" id="{PostID}">{block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}<div class="caption">{Body}</div>
  285. {/block:Text}
  286.  
  287. {block:Quote}<div class="caption"><div class="quote">&#8220;{Quote}&#8221;</div><div class="source">{block:Source}{Source}{/block:Source}</div></div>{/block:Quote}
  288.  
  289. {block:Link}<div class="linktitle"><a href="{URL}">{Name}</a></div>{block:Description}<div class="caption">{Description}</div>{/block:Description}{/block:Link}
  290.  
  291. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:lines}<div class="chat"><div class="lines">{block:label}<div class="chatlabel">{label}</div>{/block:label} {line}</br></div></div>{/block:lines}{/block:Chat}
  292. {block:Answer}
  293. <div class="question"><div class="asker">{Asker} said:&nbsp;</div>{Question}</div>
  294. <div class="caption"><div class="answer">{Answer}</div></div>
  295. {/block:Answer}
  296.  
  297. <div class="ph">{block:Photo}{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">{LinkCloseTag}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Photo}</div>
  298.  
  299. {block:Photoset}
  300. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  301. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  302. {/block:Photoset}
  303.  
  304. {block:Audio}{block:AudioPlayer}<div class="audiowrapper">{block:AlbumArt}<div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}<div class="playerbuttonbg"><div class="newplayerbutton"><div class="playerbuttonhug">{AudioPlayerWhite}</div></div></div><div class="trackdetails">{block:TrackName}{TrackName}{/block:TrackName}<br/>{block:Artist}<i>{Artist}</i>{/block:Artist}</div></div>{/block:AudioPlayer}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Audio}
  305.  
  306. {block:Video}<div class="video">{Video-500}</div>{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Video}
  307.  
  308. {block:Date}<div class="info"><i class="fas fa-clock"></i> <a title="{timeago}" href="{Permalink}">{DayOfWeek}</a> {block:NoteCount}<i class="fas fa-bookmark"></i> <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}<i class="fas fa-heart"></i> <a class="like-b" href="#">{LikeButton}<span class="b">like</span></a></span><i class="fas fa-retweet"></i> <a href="{ReblogURL}" target="_blank" class="details">reblog</a>
  309.  
  310. {block:PermalinkPage}{block:RebloggedFrom}<br/><i class="fas fa-location-arrow"></i> <a href="{ReblogParentURL}">{ReblogParentName}</a>{block:ContentSource} <i class="fas fa-map-marker-alt"></i> <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}{/block:RebloggedFrom}{/block:PermalinkPage}</div>{/block:Date}
  311.  
  312. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  313.  
  314. {block:PostNotes}<div class="postsnote">{PostNotes}</div>{/block:PostNotes}
  315.  
  316. </div><!--end posts-->
  317. {/block:Posts}
  318. </div><!--end post container-->
  319.  
  320. <div class="pagination">
  321. {block:Pagination}{block:PreviousPage}
  322. <a href="{PreviousPage}">prev</a>
  323. {/block:PreviousPage}{block:JumpPagination length="5"}{block:CurrentPage}
  324. <span class="current-page">{PageNumber}</span>
  325. {/block:CurrentPage}{block:JumpPage}
  326. <a class="jump_page" href="{URL}">{PageNumber}</a>
  327. {/block:JumpPage}{/block:JumpPagination}{block:NextPage}
  328. <a href="{NextPage}">next</a>
  329. {/block:NextPage}{/block:Pagination}
  330. </div>
  331.  
  332. </div>
  333. </div> <!--end tab1-->
  334.  
  335. <!------------------------------ ABOUT TAB ------------------------------>
  336.  
  337. <div id="tab2" class="tab">
  338. <div class="tabcontent">
  339.  
  340. <!--- about tab --->
  341. <div class="aboutbox">
  342. <div class="about-thumb"><img src="{PortraitURL-64}" /></div>
  343.  
  344. <!-- write some stuff about yourself here! h1 is the big heading, h2 is a smaller heading. -->
  345.  
  346. <h2>about the author</h2>
  347. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis.
  348. </div>
  349.  
  350. </div>
  351. </div> <!--end tab2-->
  352.  
  353.  
  354. <!---------------------------- CONTACT TAB ------------------------------>
  355.  
  356. <div id="tab3" class="tab">
  357. <div class="tabcontent">
  358. <div class="askbox">
  359.  
  360. <!-- if you want some text above the ask box, add it here. you can copy and paste the q&a however many times you want. -->
  361.  
  362. <span><b><i class="fas fa-question"></i> 
  363. this is a question. <!-- question -->
  364. </b><i class="far fa-comment"></i> 
  365. this is the answer. <!-- answer -->
  366. </span>
  367.  
  368.  
  369. <span><b><i class="fas fa-question"></i> 
  370. this is another question. <!-- question -->
  371. </b><i class="far fa-comment"></i> 
  372. this is another answer. <!-- answer -->
  373. </span>
  374.  
  375.  
  376. <!-- ask box, don't edit -->
  377.  
  378. <iframe frameborder="0" scrolling="no" width="100%" height="200" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="overflow: hidden; width: {select:post size}; background-color: transparent; margin-top:10px;" id="ask_form"></iframe></div>
  379.  
  380. </div>
  381. </div><!--end tab3-->
  382.  
  383.  
  384. <!--------------------------- PROJECTS TAB ------------------------------>
  385.  
  386. <div id="tab4" class="tab">
  387. <div class="tabcontent">
  388.  
  389. <!-- project description -->
  390.  
  391. <h2>project title</h2>
  392. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis.
  393.  
  394. <!-- progress details : optional, you can delete this section -->
  395.  
  396. <div class="project">
  397. <span><b>content:</b> write some info here </span> <br/>
  398. <span><b>content:</b> write some info here </span> <br/>
  399. <span><b>content:</b> write some info here </span>
  400. </div>
  401.  
  402. <!-- progress bar : also optional, adjust the percentage to change the progress amount -->
  403.  
  404. <div class="meter">
  405. <span style="width: 68%"></span>
  406. </div>
  407.  
  408. </div>
  409. </div><!--end tab4-->
  410.  
  411.  
  412. <!------------------------------ LINKS TAB ------------------------------>
  413.  
  414. <div id="tab5" class="tab">
  415. <div class="tabcontent">
  416.  
  417. <!-- links : add or remove however many links or sections you want! -->
  418.  
  419. <div class="linkbox">
  420. <b>my tags</b>
  421. <a href="/">personal</a>
  422. <a href="/">icons</a>
  423. <a href="/">creations</a>
  424. <a href="/">aesthetics</a>
  425. <a href="/">photography</a>
  426. <a href="/">art</a>
  427. <a href="/">audio</a>
  428. <a href="/">video</a>
  429. </div>
  430.  
  431. <div class="linkbox">
  432. <b>elsewhere</b>
  433. <a href="/">twitter</a>
  434. <a href="/">facebook</a>
  435. <a href="/">instagram</a>
  436. <a href="/">pinterest</a>
  437. <a href="/">snapchat</a>
  438. <a href="/">youtube</a>
  439. <a href="/">wordpress</a>
  440. <a href="/">website</a>
  441. </div>
  442.  
  443. <!-- search box, don't edit -->
  444.  
  445. <b>search</b>
  446. <form class="search" action="javascript:return false">
  447. <input type="text" class="query" placeholder="looking for something?">
  448. </form>
  449.  
  450. </div>
  451. </div><!--end tab5-->
  452.  
  453. <!-- END OF TABS -->
  454. </div></div>
  455.  
  456. <!-- don't edit -->
  457. <div class="atlas"><a href="https://www.atlasthemes.tumblr.com" target="_blank">a</a></div>
  458. </body>
  459. </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!