API tools faq
paste
atlasthemes

untitled 4

atlasthemes
Apr 11th, 2019
216
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.18 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2.  
  3. contained all-in-one theme
  4. by @atlasthemes
  5. pls do not remove credit thanks!<3
  6.  
  7. all credits at
  8. atlasthemes.tumblr.com/credits
  9.  
  10. ------------------------------------------------------------------------>
  11.  
  12. <html>
  13. <head>
  14. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  15. <title>{Title}</title>
  16. <link rel="shortcut icon" href="{Favicon}">
  17. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  18.  
  19. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  20.  
  21. <meta name="image:background" content=""/>
  22. <meta name="image:header" content=""/>
  23.  
  24. <meta name="color:link" content="#999999" />
  25. <meta name="color:text" content="#444444" />
  26. <meta name="color:accent" content="#ffabab">
  27. <meta name="color:light accent" content="#ffefef">
  28. <meta name="color:selection" content="#ffefef" />
  29.  
  30. <meta name="if:justify text" content="1"/>
  31.  
  32. <meta name="text:title" content="your title here">
  33.  
  34. <meta name="select:font" content="Open Sans"/>
  35. <meta name="select:font" content="Fira Sans"/>
  36. <meta name="select:font" content="Source Sans Pro"/>
  37. <meta name="select:font" content="Karla"/>
  38. <meta name="select:font" content="ABeeZee"/>
  39. <meta name="select:font" content="Poppins"/>
  40.  
  41. <meta name="text:letter spacing" content="0px"/>
  42.  
  43. <meta name="text:font size" content="10px"/>
  44.  
  45. <meta name="text:tab 1 title" content="index" />
  46. <meta name="text:tab 2 title" content="about" />
  47. <meta name="text:tab 3 title" content="contact" />
  48. <meta name="text:tab 4 title" content="projects" />
  49. <meta name="text:tab 5 title" content="members" />
  50. <meta name="text:tab 6 title" content="explore" />
  51.  
  52.  
  53. <!-- icon font -->
  54.  
  55. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  56.  
  57. <!-- google fonts -->
  58.  
  59. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=ABeeZee:400,400i&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Playfair+Display:900,900i&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Poppins:400,400i,700,700i&display=swap" rel="stylesheet">
  60.  
  61. <!-- scripts -->
  62.  
  63. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  64.  
  65. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  66.  
  67. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  68. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  69. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  70. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  71. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  72. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  73. </script><script src="https://static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
  74. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  75.  
  76.  
  77. <script>
  78. $(document).ready(function() {
  79. $('.tabs .tab-links a').on('click', function(e) {
  80. var currentAttrValue = $(this).attr('href');
  81.  
  82. // Show/Hide Tabs
  83. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  84.  
  85. // Change/remove current tab to active
  86. $(this).parent('li').addClass('active').siblings().removeClass('active');
  87.  
  88. e.preventDefault();
  89. });
  90. });
  91. </script>
  92.  
  93. <script>
  94. $(document).ready(function() {
  95. $('#filterOptions li a').click(function() {
  96. // fetch the class of the clicked item
  97. var ourClass = $(this).attr('class');
  98.  
  99. // reset the active class on all the buttons
  100. $('#filterOptions li').removeClass('active');
  101. // update the active state on our clicked button
  102. $(this).parent().addClass('active');
  103.  
  104. if(ourClass == 'all') {
  105. // show all our items
  106. $('#ourHolder').children('div.item').show();
  107. }
  108. else {
  109. // hide all elements that don't share ourClass
  110. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  111. // show all elements that do share ourClass
  112. $('#ourHolder').children('div.' + ourClass).show();
  113. }
  114. return false;
  115. });
  116. });
  117. </script>
  118.  
  119. <script>
  120. (function($){
  121. $(document).ready(function(){
  122. $("a[title]").style_my_tooltips({
  123. tip_follows_cursor:true,
  124. tip_delay_time:90,
  125. tip_fade_speed:300,
  126. attribute:"title"
  127. });
  128. });
  129. })(jQuery);
  130. </script>
  131.  
  132. <script>
  133. $(document).ready(function(){ $('.posts').unnest({
  134. yourCaption: ".caption",
  135. wrapName: ".cap",
  136. newCaptionUsername: true,
  137. originalPostCaptionUsername: false,
  138. tumblrAvatars: false,
  139. tumblrAvatarClass: ".icon",
  140. usernameColon: false
  141. });
  142.  
  143. }); </script>
  144.  
  145. <script>
  146. $(document).ready(function(){
  147. $('.search').submit(function(event){
  148. var value = $('input:first').val();
  149. location.replace('https://{Name}.tumblr.com/tagged/' + value);
  150. });
  151. });
  152. </script>
  153.  
  154. <script>
  155. $(document).ready(function(){
  156. $('.photo-slideshow').pxuPhotoset({
  157. lightbox: true,
  158. highRes: true,
  159. gutter: '1px',
  160. borderRadius: '0px',
  161. photoset: '.photo-slideshow',
  162. photoWrap: '.photo-data',
  163. photo: '.pxu-photo'
  164. });
  165.  
  166. }); </script>
  167.  
  168.  
  169. <style type="text/css">
  170.  
  171. /* --- selection --- */
  172.  
  173. ::-moz-selection {background:{color:selection};color:{color:text};}
  174. ::selection {background:{color:selection};color:{color:text};}
  175.  
  176. /* --- fade in --- */
  177.  
  178. @-webkit-keyframes fadein {
  179. 0% {opacity: 0;}
  180. 100% { opacity: 1; } }
  181.  
  182. @-moz-keyframes fadein {
  183. 0% { opacity: 0; }
  184. 100% { opacity: 1; } }
  185.  
  186. @keyframes fadein {
  187. 0% { opacity: 0; }
  188. 100% { opacity: 1; } }
  189.  
  190. #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;}
  191.  
  192. body {
  193. background:url({image:background});
  194. background-color:#fff;
  195. color: {color:text};
  196. font-family: {select:font};
  197. font-size: {text:font size};
  198. letter-spacing:{text:letter spacing};
  199. {block:ifjustifytext}
  200. text-align:justify;
  201. {/block:ifjustifytext}
  202. {block:ifnotjustifytext}
  203. text-align:left;
  204. {/block:ifnotjustifytext}
  205. line-height:16px;
  206. word-wrap: break-word;
  207. -moz-osx-font-smoothing:grayscale;
  208. -webkit-font-smoothing:antialiased;
  209. font-smoothing:antialiased;
  210. -webkit-animation: fadein 1s;
  211. -moz-animation:fadein 1s;
  212. animation:fadein 1s;}
  213.  
  214. 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;}
  215.  
  216. 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;}
  217.  
  218. h1 {font-family:'Playfair Display';font-size:12px;font-weight:900;line-height:18px;margin:5px 0px;text-transform:uppercase;}
  219. h2 {font-family:'Playfair Display';font-size:12px;font-weight:900;line-height:18px;margin:5px 0px;font-style:italic;}
  220. h3, h4, h5, h6 {font-size:calc({text:font size} + 1px);font-weight:700;text-transform:uppercase;margin:15px 0px 0px 0px;letter-spacing:{text:letter spacing};} small {font-size:{text:font size}!important;} big {font-size:{text:font size}!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:400px;text-align: left;word-break: break-all;color:{color:Text};} i {letter-spacing:0.2px;}
  221.  
  222. .tumblr_blog {
  223. display:inline-block;
  224. color:{color:text};
  225. text-transform:lowercase;
  226. margin-top:5px;
  227. font-weight:700;
  228. border-bottom:0px!important;
  229. }
  230.  
  231. .cap {
  232. margin:3px 0px 0px 0px;
  233. padding:5px 15px;
  234. position:relative;
  235. border-radius:3px;
  236. background-color:#fafafa;
  237. }
  238.  
  239. .cap a {color:{color:text};border-bottom:1px solid #e7e7e7;}
  240. .cap a:hover {color:{color:accent};}
  241.  
  242. .cap blockquote {width:calc(100% - 15px);margin-left:0px;padding-left:10px;border-left:2px solid #eee;}
  243.  
  244. .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';}
  245.  
  246. #header {
  247. display:block;
  248. position:relative;
  249. top:0px;
  250. left:0px;
  251. width:100%;
  252. height:150px;
  253. background:url({image:header});
  254. background-position:center;
  255. background-size:cover;
  256. }
  257.  
  258. #sbimage {
  259. display:block;
  260. position:relative;
  261. width:70px;
  262. height:70px;
  263. margin: -35px auto 0px auto;
  264. }
  265.  
  266. #sbimage img {
  267. width:60px;
  268. height:60px;
  269. background-color:#ffffff;
  270. border-radius:100%;
  271. padding:5px;
  272. -webkit-transition: all .3s ease-in-out;
  273. -o-transition: all .3s ease-in-out;
  274. -ms-transition: all .3s ease-in-out;
  275. transition: all .3s ease-in-out;
  276. }
  277.  
  278. #sbimage img:hover {
  279. -webkit-filter: brightness(110%); /* Safari */
  280. filter: brightness(110%);
  281. -webkit-transition: all .3s ease-in-out;
  282. -o-transition: all .3s ease-in-out;
  283. -ms-transition: all .3s ease-in-out;
  284. transition: all .3s ease-in-out;
  285. }
  286.  
  287. article {margin:15px 10px;}
  288.  
  289. #sidebar {
  290. display:block;
  291. position:fixed;
  292. width:250px;
  293. height:550px;
  294. background-color:#fff;
  295. border-right:1px solid #f7f7f7;
  296. }
  297.  
  298. .title {display:block;position:relative;font-family:'Playfair Display';font-size:12px;margin-bottom:15px;text-align:left;text-transform:uppercase;font-weight:900;letter-spacing:0.75px;} .title span {float:right;font-size:10px;} .title span a {color:{color:link};margin-right:2px;} .title a {color:{color:link};} .title a:hover {color:{color:accent};}
  299.  
  300. #description {display:block;color:{color:text};text-align:justify;max-height:130px;overflow-y:scroll;overflow-x:hidden;}
  301.  
  302. /* TABS CSS */
  303.  
  304. /* --- tab pages --- */
  305. .linkbox {width:115%;display:grid;grid-template-columns:33.3% 33.3% 33.3%;margin-bottom:20px;}
  306. .linkbox a {display:block;color:{color:link};}
  307. .linkbox a:hover {color:{color:accent};}
  308.  
  309. .about {width:400px;margin:auto;}
  310. .aboutbox {display:grid;grid-template-columns:auto auto auto;grid-gap:4px;margin-bottom:25px;}
  311. .aboutbox span {background-color:#fff;border:1px solid #f7f7f7;padding:3px 5px;border-radius:3px;}
  312. .aboutbox span b {font-size:9px;text-transform:uppercase;margin-right:3px;letter-spacing:1px;}
  313.  
  314. .interests {margin:25px 0px;text-align:left;}
  315.  
  316. .button {
  317. font-family:{select:font};
  318. font-size:9px;
  319. letter-spacing:1px;
  320. text-transform:uppercase;
  321. padding:5px 8px;
  322. height:25px;
  323. background-color:#fff;
  324. border:1px solid #f7f7f7;
  325. color:{color:text};
  326. margin-right:8px;
  327. margin-bottom:6px;
  328. border-radius:3px;
  329. outline:0px;
  330. -webkit-transition: all .3s ease-in-out;
  331. -o-transition: all .3s ease-in-out;
  332. -ms-transition: all .3s ease-in-out;
  333. transition: all .3s ease-in-out;
  334. }
  335.  
  336. .button:hover {
  337. background-color:{color:light accent};
  338. border-color:{color:light accent};
  339. -webkit-transition: all .3s ease-in-out;
  340. -o-transition: all .3s ease-in-out;
  341. -ms-transition: all .3s ease-in-out;
  342. transition: all .3s ease-in-out;
  343. }
  344.  
  345. .abt-quote {font-family:'Playfair Display';font-size:14px;font-style:italic;padding:0px 15px;border-left:3px solid #eee;margin-bottom:5px;font-weight:900;line-height:18px;}
  346.  
  347. .askbox {width:400px;color:{color:link};margin:auto;}
  348. .askbox span {display:block;margin:15px 0px;} .askbox span b {display:block;font-weight:700;color:{color:text};}
  349. .askbox i {width:12px;margin-right:4px;}
  350.  
  351. .project-box {
  352. width:400px;
  353. height:auto;
  354. padding:10px 10px 15px 10px;
  355. background-color:#fff;
  356. border-radius:3px;
  357. margin-bottom:8px;
  358. }
  359.  
  360. .project-image {
  361. width:120px;
  362. height:120px;
  363. display:inline-block;
  364. overflow-y:hidden;
  365. overflow-x:hidden;
  366. float:left;
  367. border-radius:3px;
  368. }
  369.  
  370. .project-image img {
  371. width:100%;
  372. height:auto;
  373. }
  374.  
  375. .desc {width:245px;height:75px;overflow-y:scroll;overflow-x:hidden;padding:10px;background-color:#fafafa;border-radius:3px;margin-left:130px;}
  376.  
  377. .deets {display:block;margin:10px 0px;padding:0px;}
  378.  
  379. .meter {height: 5px;width:260px;position: relative;background:#fafafa;-moz-border-radius: 25px;-webkit-border-radius: 25px;border-radius: 25px;padding: 2px;margin:15px 0px 0px 130px;}
  380.  
  381. .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;}
  382.  
  383. .explore {width:100%;margin:auto;display: grid;grid-template-columns: auto auto auto;padding-top:5px;padding-bottom:10px;}
  384.  
  385. .friends {
  386. width:400px;
  387. padding:10px;
  388. height:auto;
  389. background-color:#fff;
  390. border-radius:3px;
  391. margin-bottom:8px;
  392. }
  393.  
  394. .friends img {
  395. display:inline-block;
  396. width:35px;
  397. height:35px;
  398. border-radius:100%;
  399. margin:10px 10px 10px 10px;
  400. background-color:{color:accent};
  401. }
  402.  
  403. .network {width:400px;height:200px;padding:10px;overflow-y:scroll;overflow-x:hidden;background:#fff;border-radius:3px;}
  404. .following {display:inline-block;width:55px;height:55px;padding:10px 0px;}
  405. .following img {display:block;height:35px;width:35px;margin:0px 10px 10px 10px;border-radius:100%;-webkit-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;}
  406. .following img:hover {-webkit-filter: contrast(130%);filter: contrast(130%);-webkit-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;}
  407.  
  408. .search .query {border-top:0;border-left:0;border-right:0;outline:0;margin-top:5px;color:{color:text};font-family:'Playfair Display';font-size:12px!important;font-weight:900;line-height:18px;margin:5px 0px;font-style:italic;background-color:transparent;width:50%;text-align:left;border-bottom:1px dotted #ddd;}
  409. ::-webkit-input-placeholder {color: inherit;}
  410. :-moz-placeholder {color:inherit; opacity:0.5;}
  411. ::-moz-placeholder {color:inherit; opacity:0.5;}
  412. :-ms-input-placeholder {color:inherit;}
  413. input:focus::-webkit-input-placeholder {color:transparent;}
  414. input:focus:-moz-placeholder {color:transparent;}
  415. input:focus::-moz-placeholder {color:transparent;}
  416. input:focus:-ms-input-placeholder {color:transparent;}
  417.  
  418. #tab-bar {display:block;width:250px;}
  419.  
  420. .tabcontent {
  421. display:block;
  422. position:static;
  423. width:440px;
  424. margin-top:0px;
  425. margin-bottom:0px;
  426. margin-right:0px;
  427. margin-left:265px;
  428. }
  429.  
  430. .tabs {width:100%;display:inline-block;}
  431.  
  432. .tab-links {
  433. padding-left:0px;
  434. margin-left:0px;
  435. margin:10px;
  436. display:grid;
  437. grid-template-columns: auto auto;
  438. grid-gap:2px;
  439. text-align:center;
  440. }
  441.  
  442. .tab-links:after {display:block;clear:both;content:'';}
  443. .tab-links li {display:inline-block;list-style:none;margin:0px;padding:0px;text-transform:lowercase;}
  444.  
  445. .tab-links a {
  446. padding:5px;
  447. margin-left:0px;
  448. display:block;
  449. color:{color:text};
  450. font-size:8.5px;
  451. letter-spacing:1px;
  452. text-transform:uppercase;
  453. transition:all linear 0.15s;
  454. border:1px solid #f7f7f7;
  455. border-radius:3px;
  456. -webkit-transition: all .3s ease-in-out;
  457. -o-transition: all .3s ease-in-out;
  458. -ms-transition: all .3s ease-in-out;
  459. transition: all .3s ease-in-out;
  460. }
  461.  
  462. .tab-links a:hover {
  463. color:{color:accent};
  464. background-color:#fafafa;
  465. -webkit-transition: all .3s ease-in-out;
  466. -o-transition: all .3s ease-in-out;
  467. -ms-transition: all .3s ease-in-out;
  468. transition: all .3s ease-in-out;
  469. }
  470.  
  471. li.active a, li.active a:hover {background-color:#fafafa;color:{color:link};-webkit-transition: all .3s;-moz-transition: all .3s;-o-transition: all .3s;-ms-transition: all .3s; transition: all .3s;}
  472.  
  473. .tab-content {
  474. }
  475. .tab {display:none;} .tab.active {display:block;}
  476.  
  477. /* post css */
  478.  
  479. .pagination {display:block;position:absolute;bottom:20px;width:250px;text-align:center;font-size:{text:font size};} .pagination a {color:{color:link};margin:0px 4px;padding:5px 8px;background-color:#fafafa;border-radius:3px;} .pagination a:hover {color:{color:accent};} .current-page {color:{color:text};font-size:{text:font size};margin:0px 4px;padding:5px 8px;background-color:#fafafa;border-radius:3px;}
  480.  
  481. #container {
  482. display:block;
  483. position:fixed;
  484. top:0px;
  485. bottom:0px;
  486. left:0px;
  487. right:0px;
  488. width:720px;
  489. height:550px;
  490. margin:auto;
  491. overflow-y:scroll;
  492. overflow-x:hidden;
  493. background-color:#fafafa;
  494. border-top:10px solid #fafafa;
  495. border-bottom:10px solid #fafafa;
  496. border-left:10px solid #fafafa;
  497. }
  498.  
  499. .postscontainer {display:inline-block;position:relative;width:440px;}
  500.  
  501. .posts {
  502. display:block;
  503. width:400px;
  504. background-color:#ffffff;
  505. padding:10px;
  506. border-radius:3px;
  507. font-size:{text:font size};
  508. font-family: {select:font};
  509. margin:0px auto 50px auto;
  510. {block:ifjustifytext}
  511. text-align:justify;
  512. {/block:ifjustifytext}
  513. {block:ifnotjustifytext}
  514. text-align:left;
  515. {/block:ifnotjustifytext}
  516. }
  517.  
  518. .posts img {max-width:100%;height:auto;} ul li {list-style:circle;margin-left:-10px;margin-bottom:5px;}
  519.  
  520. .poststitle {font-family:'Playfair Display';font-size:15px;font-weight:900;line-height:18px;margin:5px 0px;}
  521.  
  522. .info {width:400px;margin-top:10px;text-align:center;text-transform:lowercase;color:{color:link};font-size:calc({text:font size} - 1.5px);}
  523.  
  524. .info a {color:{color:link};margin-right:10px;font-size:{text:font size};}
  525. .info a:hover {text-decoration:none;color:{color:accent};}
  526.  
  527. .tags {width:100%;margin-top:8px;text-align:center;font-size:8.5px;text-transform:uppercase;word-break:break-word;color:{color:link};}
  528. .tags a {color:{color:link};margin:0px 4px;letter-spacing:1px;} .tags a:hover {color:{color:text};}
  529.  
  530. .postsnote {min-height:50px;max-height:242px;overflow-y:scroll;overflow-x:hidden;margin-top:40px;margin-bottom:20px;padding:0px 10px;} .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;}
  531.  
  532. .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;}
  533.  
  534. .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: .7;filter: alpha(opacity=70);-moz-opacity: 0.7;-khtml-opacity: 0.7; 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:10px;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:400px;height:82px;border:1px solid #f7f7f7;}
  535.  
  536. iframe#youtube_iframe {width:400px!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};}
  537.  
  538. .quote {font-family:'Playfair Display';font-size:14px;font-style:italic;line-height:20px;margin-top:8px;font-weight:900;} .source {font-family:{select:font};color:{color:link};margin-top:5px;} .source a {color:{color:link};} .source a:hover {color:{color:accent};} .chat {margin-top:5px;font-size: {text:font size};} .chatlabel {font-family:{select:font};display:inline-block;margin-right:1px;font-weight:700;} .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};}
  539.  
  540. /* --- answer posts --- */
  541.  
  542. .asker {display:inline-block;color:{color:text};font-weight:bold;text-transform:lowercase;}
  543.  
  544. .asker-portrait {
  545. display:inline-block;
  546. position:relative;
  547. float:left;
  548. }
  549. .asker-portrait img {
  550. width:35px;
  551. height:35px;
  552. border-radius:100%;
  553. }
  554.  
  555. .answerer-portrait {
  556. float:right;
  557. margin-top:5px;
  558. }
  559.  
  560. .answerer-portrait img {
  561. width:35px;
  562. height:35px;
  563. border-radius:100%;
  564. }
  565.  
  566. .question {
  567. padding:10px;
  568. border:1px solid #f7f7f7;
  569. background-color:#fafafa;
  570. width:calc(100% - 75px);
  571. margin-left:55px;
  572. border-radius:3px;
  573. margin-bottom:10px;
  574. }
  575.  
  576. .left-tri {
  577. width: 0;
  578. height: 0;
  579. border-top: 10px solid transparent;
  580. border-right: 10px solid #f7f7f7;
  581. border-bottom: 10px solid transparent;
  582. position:absolute;
  583. margin-left:45px;
  584. margin-top:12px;
  585. z-index:1000;
  586. }
  587.  
  588. .left-tri::after {
  589. content:"";
  590. width:0;
  591. height:0;
  592. border-top:9px solid transparent;
  593. border-right:9px solid #fafafa;
  594. border-bottom:9px solid transparent;
  595. position:absolute;
  596. margin-left:2px;
  597. margin-top:-9px;
  598. }
  599.  
  600. .answer {
  601. display:inline-block;
  602. position:relative;
  603. width:calc(100% - 75px);
  604. min-height:24px;
  605. background-color:#fafafa;
  606. padding:10px;
  607. padding:0px 10px;
  608. border-radius:3px;
  609. border:1px solid #f7f7f7;
  610. }
  611.  
  612. .right-tri {
  613. float:right;
  614. width:0;
  615. height:0;
  616. border-top:10px solid transparent;
  617. border-bottom:10px solid transparent;
  618. border-left:10px solid #f7f7f7;
  619. margin-right:8px;
  620. margin-top:15px;
  621. }
  622.  
  623. .right-tri::after {
  624. content:"";
  625. width:0;
  626. height:0;
  627. position:absolute;
  628. border-top:9px solid transparent;
  629. border-bottom:9px solid transparent;
  630. border-left:9px solid #fafafa;
  631. margin-left:-11px;
  632. margin-top:-9px;
  633. z-index:1;
  634. }
  635.  
  636. .answerer {display:inline-block;color:{color:text};font-weight:bold;text-transform:lowercase;margin-top:5px;}
  637.  
  638. 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;}
  639. 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;}
  640. </style>
  641. </head>
  642. <body>
  643.  
  644. <!----------------------------------------------------------------------->
  645. <!----------------------------------------------------------------------->
  646. <!----------------------------------------------------------------------->
  647. <!----------------------------------------------------------------------->
  648. <!----------------------------------------------------------------------->
  649.  
  650. <div id="container">
  651.  
  652. <!--sidebar-->
  653.  
  654. <div id="sidebar">
  655. <div id="header"></div>
  656. <div id="sbimage"><a href="/"><img src="{PortraitURL-64}"/></a></div>
  657. <article>
  658. <div class="title"><a href="/">{text:title}</a>
  659. <span>
  660. <a href="/" title="home"><i class="fas fa-home"></i></a>&nbsp;
  661. <a href="/ask" title="contact"><i class="fas fa-comments"></i></a>&nbsp;
  662. <a href="/archive" title="archive"><i class="fas fa-history"></i></a>&nbsp;</span>
  663. </div>
  664.  
  665. <div id="description">{description}</div>
  666. </article>
  667.  
  668. <!--- tab titles --->
  669. <div id="tab-bar">
  670. <div class="tabs">
  671. <ul class="tab-links">
  672. <li class="active"><a href="#tab1">{text:Tab 1 Title}</a></li>
  673. <li><a href="#tab2">{text:Tab 2 Title}</a></li>
  674. <li><a href="#tab3">{text:Tab 3 Title}</a></li>
  675. <li><a href="#tab4">{text:Tab 4 Title}</a></li>
  676. <li><a href="#tab5">{text:Tab 5 Title}</a></li>
  677. <li><a href="#tab6">{text:Tab 6 Title}</a></li>
  678. </ul>
  679. </div>
  680. </div>
  681.  
  682. <!-- pagination -->
  683.  
  684. <div class="pagination">
  685. {block:Pagination}{block:PreviousPage}
  686. <a href="{PreviousPage}">prev</a>
  687. {/block:PreviousPage}{block:JumpPagination length="4"}{block:CurrentPage}
  688. <span class="current-page">{PageNumber}</span>
  689. {/block:CurrentPage}{block:JumpPage}
  690. <a class="jump_page" href="{URL}">{PageNumber}</a>
  691. {/block:JumpPage}{/block:JumpPagination}{block:NextPage}
  692. <a href="{NextPage}">next</a>
  693. {/block:NextPage}{/block:Pagination}
  694. </div>
  695. </div>
  696.  
  697.  
  698. <!-------------------------------- TABS --------------------------------->
  699.  
  700. <div class="tabs">
  701. <div class="tab-content">
  702.  
  703. <!--------------------------- INDEX/POSTS TAB --------------------------->
  704.  
  705. <div id="tab1" class="tab active">
  706. <div class="tabcontent">
  707.  
  708. <!--post container-->
  709.  
  710. <div class="postscontainer" id="{PostID}">
  711.  
  712. {block:Posts}<div class="posts" id="{PostID}">{block:Text}{block:Title}<div class="poststitle">{Title}</div>{/block:Title}<div class="caption">{Body}</div>
  713. {/block:Text}
  714.  
  715. {block:Quote}<div class="caption"><div class="quote">&#8220;{Quote}&#8221;</div><div class="source">{block:Source}{Source}{/block:Source}</div></div>{/block:Quote}
  716.  
  717. {block:Link}<div class="linktitle"><a href="{URL}">{Name}</a></div>{block:Description}<div class="caption">{Description}</div>{/block:Description}{/block:Link}
  718.  
  719. {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}
  720.  
  721.  
  722. <!-- ANSWER POSTS -->
  723.  
  724. {block:Answer}
  725. <!-- question -->
  726. <div class="asker-portrait">
  727. <img src="{AskerPortraitURL-128}" /></div>
  728.  
  729. <div class="left-tri"></div>
  730. <div class="question">
  731. <div class="asker">{Asker}:</div>
  732. {Question}
  733. </div><!-- end question -->
  734.  
  735. <!-- answer -->
  736. {Block:NotReblog}
  737. <div class="answerer-portrait">
  738. <img src="{PortraitURL-96}" />
  739. </div>
  740. {/block:NotReblog}
  741.  
  742. {block:Answerer}
  743. {block:RebloggedFrom}
  744. <div class="answerer-portrait">
  745. <img src="{AnswererPortraitURL-128}" />
  746. </div>
  747. {/block:RebloggedFrom}
  748. {/block:Answerer}
  749.  
  750. <div class="right-tri"></div>
  751. <div class="answer">
  752. {block:Answerer}
  753. <div class="answerer">{Answerer}:</div>
  754. {/block:Answerer}
  755. {Answer}</div><!-- end answer -->
  756.  
  757. {/block:Answer}<!-- END ANSWER POSTS -->
  758.  
  759. <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>
  760.  
  761. {block:Photoset}
  762. <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>
  763. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  764. {/block:Photoset}
  765.  
  766. {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" style="background-color:#ffffff;">{Caption}</div>{/block:Caption}{/block:Audio}
  767.  
  768. {block:Video}<div class="video">{Video-400}</div>{block:Caption}<div class="caption" style="background-color:#fafafa;">{Caption}</div>{/block:Caption}{/block:Video}
  769.  
  770. {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>
  771.  
  772. {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}
  773.  
  774. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  775.  
  776. {block:PostNotes}<div class="postsnote">{PostNotes}</div>{/block:PostNotes}
  777.  
  778. </div><!-- end posts -->
  779. {/block:Posts}
  780.  
  781. </div><!-- end post container -->
  782.  
  783. </div>
  784. </div> <!--end tab1-->
  785.  
  786. <!------------------------------ ABOUT TAB ------------------------------>
  787.  
  788. <div id="tab2" class="tab">
  789. <div class="tabcontent">
  790.  
  791. <div class="about">
  792.  
  793. <h2>details</h2>
  794. <div class="aboutbox">
  795.  
  796. <!-- details : you can change these to whatever you want -->
  797. <span><b>name:</b> bebe</span>
  798. <span><b>age:</b> 28</span>
  799. <span><b>pronouns:</b> she/her</span>
  800. <span><b>bday:</b> october 1st</span>
  801. <span><b>location:</b> the south</span>
  802. <span><b>occupation:</b> editor</span>
  803. <span><b>sign:</b> virgo</span>
  804. <span><b>house:</b> gryffindor</span>
  805. <span><b>mbti:</b> infj</span>
  806. </div>
  807.  
  808. <!-- additional text -->
  809. <h2>about</h2>
  810. write some more about yourself here! i'm bebe:) southern person. bi and shy. i first started coding layouts on livejournal and myspace. i enjoy fantasy and sci-fi novels, superheroes, and writing fanfics. i'm a major foodie and i work for a food publication for my day job. i'm a published author and hope to write novels next! writing is, like, hard.
  811.  
  812. <div class="interests">
  813. <h2>interests</h2>
  814.  
  815. <!-- add as many interests as you want! -->
  816. <button class="button">coding</button>
  817. <button class="button">reading</button>
  818. <button class="button">netflix</button>
  819. <button class="button">sleeping</button>
  820. <button class="button">baking</button>
  821. <button class="button">cats</button>
  822. <button class="button">art</button>
  823. <button class="button">graphic design</button>
  824. <button class="button">photography</button>
  825. <button class="button">cooking</button>
  826. </div>
  827.  
  828. <!-- add a quote here or delete this section if you don't want it -->
  829. <div class="abt-quote">
  830. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.
  831. </div><!-- end quote section -->
  832.  
  833. </div></div></div>
  834. <!--end tab2-->
  835.  
  836.  
  837. <!---------------------------- CONTACT TAB ------------------------------>
  838.  
  839. <div id="tab3" class="tab">
  840. <div class="tabcontent">
  841.  
  842. <div class="askbox">
  843.  
  844. <!-- 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. -->
  845.  
  846. <span><b><i class="fas fa-question"></i>
  847. this is a question. <!-- question -->
  848. </b><i class="far fa-comment"></i>
  849. this is the answer. <!-- answer -->
  850. </span>
  851.  
  852.  
  853. <span><b><i class="fas fa-question"></i>
  854. this is another question. <!-- question -->
  855. </b><i class="far fa-comment"></i>
  856. this is another answer. <!-- answer -->
  857. </span>
  858.  
  859.  
  860. <!-- ask box, don't edit -->
  861.  
  862. <iframe frameborder="0" scrolling="no" width="100%" height="200" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="overflow: hidden; width:400px; background-color: transparent; margin-top:10px;" id="ask_form"></iframe></div>
  863.  
  864. </div>
  865. </div><!--end tab3-->
  866.  
  867.  
  868. <!--------------------------- PROJECTS TAB ------------------------------>
  869.  
  870. <div id="tab4" class="tab">
  871. <div class="tabcontent">
  872.  
  873.  
  874. <!-- project one -->
  875. <div class="project-box">
  876. <h1>project title</h1> <!-- project title -->
  877.  
  878. <div class="project-image"> <!-- project image -->
  879. <img src="https://images.unsplash.com/photo-1501556466850-7c9fa1fccb4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" class="section" />
  880. </div>
  881.  
  882. <div class="desc"> <!-- project description -->
  883. 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.
  884. </div>
  885.  
  886. <div class="meter">
  887. <span style="width: 68%"></span> <!-- progress bar percentage -->
  888. </div>
  889. </div>
  890. <!-- end project one -->
  891.  
  892.  
  893. <!-- project two -->
  894. <div class="project-box">
  895. <h1>project title</h1> <!-- project title -->
  896.  
  897. <div class="project-image"> <!-- project image -->
  898. <img src="https://images.unsplash.com/photo-1501556424050-d4816356b73e?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" class="section" />
  899. </div>
  900.  
  901. <div class="desc"> <!-- project description -->
  902. 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.
  903. </div>
  904.  
  905. <div class="meter">
  906. <span style="width: 35%"></span> <!-- progress bar percentage -->
  907. </div>
  908. </div>
  909. <!-- end project two -->
  910.  
  911. </div>
  912. </div><!--end tab4-->
  913.  
  914.  
  915. <!------------------------------ LINKS TAB ------------------------------>
  916.  
  917. <div id="tab5" class="tab">
  918. <div class="tabcontent">
  919.  
  920. content goes here
  921.  
  922. <!--
  923.  
  924. <div class="network">
  925. <h2>blogroll</h2>
  926.  
  927. {block:Following}{block:Followed}
  928. <div class="following">
  929. <a href="{FollowedURL}" title="{FollowedName}">
  930. <img src="{FollowedPortraitURL-64}">
  931. </a></div>
  932. {/block:Followed}{/block:Following}
  933. </div>
  934.  
  935. -->
  936.  
  937. </div>
  938. </div><!--end tab5-->
  939.  
  940. <!------------------------------ EXPLORE TAB ------------------------------>
  941.  
  942. <div id="tab6" class="tab">
  943. <div class="tabcontent">
  944.  
  945. <!-- links : add or remove however many links or sections you want! -->
  946.  
  947. <h2>heading</h2>
  948. <div class="linkbox">
  949. <a href="/">one</a>
  950. <a href="/">two</a>
  951. <a href="/">three</a>
  952. <a href="/">four</a>
  953. <a href="/">five</a>
  954. <a href="/">six</a>
  955. <a href="/">seven</a>
  956. <a href="/">eight</a>
  957. <a href="/">nine</a>
  958. </div>
  959.  
  960. <h2>heading</h2>
  961. <div class="linkbox">
  962. <a href="/">ten</a>
  963. <a href="/">eleven</a>
  964. <a href="/">twelve</a>
  965. <a href="/">thirteen</a>
  966. <a href="/">fourteen</a>
  967. <a href="/">fifteen</a>
  968. <a href="/">sixteen</a>
  969. <a href="/">seventeen</a>
  970. <a href="/">eighteen</a>
  971. </div>
  972.  
  973. <!-- search box, don't edit -->
  974. <form class="search" action="javascript:return false">
  975. <input type="text" class="query" placeholder="looking for something?">
  976. </form>
  977.  
  978. </div>
  979. </div><!--end tab5-->
  980.  
  981.  
  982. </div></div><!-- END TABS HTML -->
  983.  
  984. </div><!-- end container container -->
  985.  
  986. <!-- don't edit -->
  987. <div class="atlas"><a href="https://www.atlasthemes.tumblr.com" target="_blank">a</a></div>
  988. </body>
  989. </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!