API tools faq
paste
atlasthemes

wip page 02

atlasthemes
Jul 17th, 2019
3,758
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.53 KB | None | 0 0
raw download clone embed print report
  1. <!------------------------------------------------------------------------
  2.  
  3. wip page 02 // by @bebewrites
  4. pls do not remove credit thanks!<3
  5.  
  6. tab base code by @neonbikethemes
  7.  
  8. ------------------------------------------------------------------------->
  9.  
  10. <html>
  11. <head>
  12. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  13.  
  14. <title>wip page</title> <!-- title for browser tab -->
  15.  
  16. <link rel="shortcut icon" href="{Favicon}">
  17. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  18.  
  19. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  20.  
  21.  
  22. <!-- google fonts -->
  23.  
  24. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i" rel="stylesheet">
  25.  
  26. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,700i,900&display=swap" rel="stylesheet">
  27.  
  28.  
  29. <!-- scripts - don't edit -->
  30. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  31. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  32. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  33.  
  34. <script>
  35. $(document).ready(function() {
  36. $('.tabs .tab-links a').on('click', function(e) {
  37. var currentAttrValue = $(this).attr('href');
  38.  
  39. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  40.  
  41. $(this).parent('li').addClass('active').siblings().removeClass('active');
  42.  
  43. e.preventDefault();
  44. });
  45. });
  46. </script>
  47.  
  48. <script>
  49. $(document).ready(function() {
  50. $('#filterOptions li a').click(function() {
  51. // fetch the class of the clicked item
  52. var ourClass = $(this).attr('class');
  53.  
  54. // reset the active class on all the buttons
  55. $('#filterOptions li').removeClass('active');
  56. // update the active state on our clicked button
  57. $(this).parent().addClass('active');
  58.  
  59. if(ourClass == 'all') {
  60. // show all our items
  61. $('#ourHolder').children('div.item').show();
  62. }
  63. else {
  64. // hide all elements that don't share ourClass
  65. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  66. // show all elements that do share ourClass
  67. $('#ourHolder').children('div.' + ourClass).show();
  68. }
  69. return false;
  70. });
  71. });
  72. </script>
  73.  
  74. <script>
  75. (function($){
  76. $(document).ready(function(){
  77. $("a[title]").style_my_tooltips({
  78. tip_follows_cursor:true,
  79. tip_delay_time:90,
  80. tip_fade_speed:300,
  81. attribute:"title"
  82. });
  83. });
  84. })(jQuery);
  85. </script>
  86.  
  87.  
  88. <style type="text/css">
  89.  
  90. /* --------------------- change fonts & colors here --------------------- */
  91.  
  92.  
  93. :root {
  94. --accent:#d7eaea; /* accent color */
  95. --body-text:#666666; /* text color */
  96. --heading:#333333; /* heading color */
  97. --link-color:#aaaaaa; /* link color */
  98. --link-hover:#afd5d5; /* link hover color */
  99.  
  100. --body-font:'Open Sans';
  101. --text-size:10px; /* main font size */
  102. }
  103.  
  104.  
  105. /* ---------------------------------------------------------------------- */
  106.  
  107.  
  108. /* --- fade in --- */
  109.  
  110. @-webkit-keyframes fadein {
  111. 0% {opacity: 0;}
  112. 100% { opacity: 1; } }
  113.  
  114. @-moz-keyframes fadein {
  115. 0% { opacity: 0; }
  116. 100% { opacity: 1; } }
  117.  
  118. @keyframes fadein {
  119. 0% { opacity: 0; }
  120. 100% { opacity: 1; } }
  121.  
  122. #s-m-t-tooltip {max-width:300px;margin-top:-40px;margin-left:0px;font-size:8.5px;letter-spacing:0.5px;font-weight:600;text-align:center;text-transform:uppercase;color:var(--heading);z-index:999999;}
  123. body {background-color:#fff;color:var(--body-text);font-family:var(--body-font);font-size:var(--text-size);letter-spacing:0px;text-align:justify;line-height:16px;word-wrap: break-word;-webkit-animation: fadein 1.5s;-moz-animation:fadein 1.5s;animation:fadein 1.5s;}
  124. a {color:var(--link-color);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;} a:hover {color:var(--link-hover);-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;}
  125.  
  126. h1 {font-family:'Playfair Display';font-size:14px;color:var(--heading);font-weight:900;margin:10px 0px 5px 0px;letter-spacing:0.5px;} h2 {font-size:10px;color:var(--heading);font-weight:700;margin:5px 0px;text-transform:uppercase;letter-spacing:0.4px;} h3 {font-family:'Playfair Display';font-size:12px;font-style:italic;color:var(--heading);font-weight:700;margin:0px;letter-spacing:0.25px;} i, em {letter-spacing:0.25px;}
  127.  
  128. #container {display:block;position:relative;top:50px;left:0px;right:0px;width:650px;height:500px;margin:auto;}
  129. #header {display:block;width:650px;height:40px;padding-bottom:20px;margin-bottom:0px;border-bottom:1px solid #f1f1f1;}
  130. #title {display:inline-block;font-family:'Playfair Display';color:var(--heading);padding-top:8px;text-transform:uppercase;font-size:16px;font-weight:900;line-height:16px;letter-spacing:0.5px;text-align:left;}
  131. #nav {display:inline-block;color:#444;float:right;text-align:right;margin-top:8px;font-size:9px;} #nav a {color:var(--heading);margin-left:10px;} #nav a:hover {color:var(--link-hover);}
  132.  
  133. #sidebar {display:block;position:absolute;width:150px;height:414px;}
  134. #tab-bar {display:block;width:150px;padding-top:20px;} #tab-bar i {float:right;line-height:16px;}
  135. .tabcontent {display:block;position:static;width:433px;height:auto;margin-left:180px;margin-bottom:100px;border-left:1px solid #f1f1f1;padding:20px 15px 0px 30px;} .tabs {width:100%;display:inline-block;} .tab-links {padding-left:0px;margin:0px;text-align:left;} .tab-links:after {display:block;clear:both;content:'';} .tab-links li {display:block;list-style:none;margin:0px;padding:0px;} .tab-links a {display:block;padding:10px 15px;margin:auto auto;margin-bottom:8px;display:block;color:var(--body-text);font-size:9.5px;letter-spacing:0.5px;font-weight:700;text-transform:uppercase;transition:all linear 0.15s;border-radius:2px;-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;} .tab-links a:hover {background-color:var(--accent);padding:10px 20px;-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;} li.active a, li.active a:hover {background-color:#f7f7f7;color:#666;padding:10px 20px;-webkit-transition: all .3s;-moz-transition: all .3s;-o-transition: all .3s;-ms-transition: all .3s;transition: all .3s;}
  136. .tab-content {
  137. }
  138. .tab {display:none;} .tab.active {display:block;}
  139.  
  140. section {margin-bottom:35px;} .linkbox {display:grid;grid-template-columns:33% 33% 33%;grid-gap:5px;margin-bottom:25px;} .linkbox a {display:block;padding:4px 0px;background-color:#fff;border-radius:2px;} .linkbox a:hover {color:var(--heading);background-color:var(--accent);} h1 i {width:10px;font-size:10px;margin-right:8px;}
  141. .details {display:grid;grid-template-columns:33% 33% 33%;grid-gap:5px;margin-bottom:25px;} .details span {background-color:#fafafa;border:1px solid #f7f7f7;padding:3px 5px;border-radius:2px;} .details span b {font-size:9px;text-transform:uppercase;letter-spacing:0.5px;margin-right:3px;}
  142. .th {margin:25px 0px;text-align:left;} .theme {font-family:var(--body-font);font-size:10px;color:#999;padding:4px 8px 5px 8px;height:25px;background-color:#fafafa;border:1px solid #f7f7f7;margin-right:8px;margin-bottom:6px;border-radius:2px;outline:0px;-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;} .theme:hover {background-color:var(--accent);border-color:var(--accent);color:var(--heading);-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;}
  143. .abt-quote {font-family:'Playfair Display';font-size:14px;line-height:18px;margin-bottom:5px;font-weight:700;font-style:italic;text-align:left;letter-spacing:0.25px;} .abt-quote i {font-size:12px;color:#ddd;} .abt-quote span {display:inline-block;font-family:var(--body-font);font-size:9.5px;text-transform:uppercase;letter-spacing:0.5px;margin-left:3px;font-style:normal;margin-top:5px;font-weight:400;}
  144. .char {width:410px;min-height:120px;padding:5px 10px 0px 10px;border-radius:3px;} .char h1 a {color:var(--heading);border:0px;} .char h1 a:hover {color:var(--link-hover);} .char-image {width:100px;height:100px;display:inline-block;overflow-y:hidden;overflow-x:hidden;float:left;border-radius:3px;} .char-image img {width:100%;height:auto;} .bio {display:block;width:270px;height:90px;margin-left:110px;overflow-y:scroll;overflow-x:hidden;background-color:#fafafa;padding:5px 10px;border-radius:2px;text-align:left;} .bio a {border-bottom:1px solid #eee;} .bio::-webkit-scrollbar {width:9px;height:9px;} .bio::-webkit-scrollbar {background-color:transparent;} .bio::-webkit-scrollbar-track {border:4px solid #fafafa;background-color:#f1f1f1;} .bio::-webkit-scrollbar-thumb {border:4px solid #fafafa;background-color:#ddd;min-height:24px;min-width:24px;}
  145. .info span {display:block;margin:10px 0px;} .info a {border-bottom:1px solid #eee;} .excerpt p:first-of-type {font-size:9.5px;text-transform:uppercase;letter-spacing:0.5px;color:var(--heading);font-weight:600;} iframe.tmblr-iframe {display:none;}
  146.  
  147. </style>
  148. </head>
  149. <body>
  150.  
  151. <!----------------------------------------------------------------------->
  152. <!----------------------------------------------------------------------->
  153. <!----------------------------------------------------------------------->
  154. <!----------------------------------------------------------------------->
  155. <!----------------------------------------------------------------------->
  156.  
  157. <div id="container">
  158.  
  159. <!-- header -->
  160. <div id="header">
  161. <div id="title">novel title here</div>
  162.  
  163. <div id="nav">
  164.  
  165. <a href="/" title="home"><i class="fas fa-home"></i></a>
  166. <a href="/ask" title="ask"><i class="fas fa-comment"></i></a>
  167. <a href="/archive" title="archive"><i class="fas fa-history"></i></a>
  168. <a href="http://www.tumblr.com/dashboard" title="dash"><i class="fas fa-bars"></i></a>
  169. <!-- pls don't remove this one, thanks!<33 -->
  170. <a href="http://bebewrites.tumblr.com" title="code by @bebewrites"><i class="fas fa-code"></i></a>
  171.  
  172. </div>
  173. </div>
  174.  
  175. <!--sidebar-->
  176.  
  177. <div id="sidebar">
  178.  
  179. <!--- tab titles --->
  180. <div id="tab-bar">
  181. <div class="tabs">
  182. <ul class="tab-links">
  183. <li class="active">
  184.  
  185.  
  186. <!-- tabs:
  187.  
  188. get more icons at https://fontawesome.com/icons?d=gallery&m=free
  189. to replace an icon, replace this part below: <i class="fas fa-bars"></i>
  190.  
  191. -->
  192.  
  193. <a href="#tab1">about <i class="fas fa-bookmark"></i></a></li>
  194. <li><a href="#tab2">characters <i class="fas fa-users"></i></a></li>
  195. <li><a href="#tab3">info <i class="fas fa-globe-americas"></i></a></li>
  196. <li><a href="#tab4">links <i class="fas fa-link"></i></a></li>
  197. <li><a href="#tab5">excerpt <i class="fas fa-edit"></i></a></li>
  198.  
  199. </ul>
  200. </div>
  201. </div></div>
  202.  
  203.  
  204. <!--------------------------------- TABS ---------------------------------->
  205.  
  206. <div class="tabs">
  207. <div class="tab-content">
  208.  
  209.  
  210.  
  211. <!-- INFO/ABOUT TAB ------------------------------------------------------->
  212.  
  213. <div id="tab1" class="tab active">
  214. <div class="tabcontent">
  215.  
  216. <!-- you can delete any of these sections if you don't want to include them on your about tab -->
  217.  
  218. <!-- synopsis -->
  219. <section><h1>synopsis</h1>
  220. 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. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.
  221. </section>
  222.  
  223. <!-- details - you can change these to whatever you want -->
  224. <h1>details</h1>
  225. <section class="details">
  226. <span><b>genre:</b> fantasy</span>
  227. <span><b>started:</b> dec 2017</span>
  228. <span><b>status:</b> draft one</span>
  229. <span><b>word goal:</b> 75k</span>
  230. <span><b>wordcount:</b> 30k</span>
  231. <span><b>pov:</b> third present</span>
  232. <span><b>item:</b> content</span>
  233. <span><b>item:</b> content</span>
  234. <span><b>item:</b> content</span>
  235. </section>
  236.  
  237. <!-- themes/tropes - add as many as you want! -->
  238. <section class="th">
  239.  
  240. <h1>themes & tropes</h1>
  241. <button class="theme">diversity</button>
  242. <button class="theme">chaos and order</button>
  243. <button class="theme">mutual pining</button>
  244. <button class="theme">enemies to lovers</button>
  245. <button class="theme">self love</button>
  246. <button class="theme">power and corruption</button>
  247. <button class="theme">there was only one bed</button>
  248. </section>
  249.  
  250. <section class="abt-quote"><i class="fas fa-quote-left" style="margin-right:3px;"></i>
  251.  
  252. <!-- quote -->
  253. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.
  254.  
  255. <i class="fas fa-quote-right" style="margin-left:3px;"></i>
  256.  
  257. <!-- quote source -->
  258. <span> &mdash; quote source</span>
  259. </section>
  260.  
  261. </div></div><!--end tab1-->
  262.  
  263.  
  264.  
  265. <!-- CHARACTERS ----------------------------------------------------------->
  266.  
  267. <div id="tab2" class="tab">
  268. <div class="tabcontent">
  269.  
  270.  
  271. <!-- to add more characters, copy one whole character section (ie. from the "character one" line through the "end character one" line), paste it after character two, and update with new info -->
  272.  
  273.  
  274. <!-- character one -->
  275.  
  276. <div class="char">
  277. <div class="char-image"> <!-- character image url -->
  278. <img src="https://images.unsplash.com/photo-1542206395-9feb3edaa68d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" />
  279. </div>
  280.  
  281. <div class="bio"><!-- character name - can be linked to char tag -->
  282. <h1><a href="/tagged/character-name">character one</a></h1>
  283.  
  284. <!-- character bio - this box scrolls -->
  285. 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. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna.
  286. </div>
  287. </div><!-- end character one -->
  288.  
  289.  
  290. <!-- character two -->
  291. <div class="char">
  292. <div class="char-image">
  293. <img src="https://images.unsplash.com/photo-1486074051793-e41332bf18fc?ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80" />
  294. </div>
  295.  
  296. <div class="bio">
  297. <h1><a href="/tagged/character-name">character two</a></h1>
  298.  
  299. 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. 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.
  300. </div>
  301. </div><!-- end character two -->
  302.  
  303. </div></div><!-- end tab2 -->
  304.  
  305.  
  306. <!-- INFO ----------------------------------------------------------------->
  307.  
  308. <div id="tab3" class="tab">
  309. <div class="tabcontent">
  310. <div class="info">
  311.  
  312. <!-- excerpt - use <p> to create paragraphs -->
  313.  
  314. <p>You can include some more info or whatever you want here. This is <b>bold</b>, this is <i>italic</i>, this is a <a href="/">link</a>.</p>
  315.  
  316. <p> Use the < p > and < / p > tags to create paragraphs. 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.</p>
  317.  
  318. <h1>this is a heading</h1>
  319.  
  320. <h2>this is a smaller heading</h2>
  321.  
  322. <p>You could do a question and answer section like this:</p>
  323.  
  324. <span><h3>this is a question?</h3>
  325. this is the answer.
  326. </span>
  327.  
  328. <span><h3>this is another question?</h3>
  329. this is another answer.
  330. </span>
  331.  
  332. </div>
  333. </div></div><!--end tab4-->
  334.  
  335.  
  336. <!-- LINKS ---------------------------------------------------------------->
  337.  
  338. <div id="tab4" class="tab">
  339. <div class="tabcontent">
  340.  
  341. <!-- links - add or remove however many links or sections you want! -->
  342.  
  343. <h1><i class="fas fa-edit"></i> wip tags</h1>
  344. <section class="linkbox">
  345. <a href="/">link</a>
  346. <a href="/">link</a>
  347. <a href="/">link</a>
  348. <a href="/">link</a>
  349. <a href="/">link</a>
  350. <a href="/">link</a>
  351. </section>
  352.  
  353. <h1><i class="fas fa-user-tag"></i> character tags</h1>
  354. <section class="linkbox">
  355. <a href="/">link</a>
  356. <a href="/">link</a>
  357. <a href="/">link</a>
  358. <a href="/">link</a>
  359. <a href="/">link</a>
  360. <a href="/">link</a>
  361. </section>
  362.  
  363. <h1><i class="fas fa-link"></i> elsewhere</h1>
  364. <section class="linkbox">
  365. <a href="/">link</a>
  366. <a href="/">link</a>
  367. <a href="/">link</a>
  368. <a href="/">link</a>
  369. <a href="/">link</a>
  370. <a href="/">link</a>
  371. </section>
  372.  
  373. </div>
  374. </div><!--end tab3-->
  375.  
  376.  
  377. <!-- EXCERPT -------------------------------------------------------------->
  378.  
  379. <div id="tab5" class="tab">
  380. <div class="tabcontent">
  381. <div class="excerpt">
  382.  
  383. <!-- excerpt - use <p></p> around each paragraph. the first paragraph will automatically be an ~accent paragraph~ but if you don't want it then don't use <p> tags. just write your paragraphs as normal and put two <br/> tags after the end of each -->
  384.  
  385. <p>Now this is a story all about how my life got flipped-turned upside down. And I'd like to take a minute, just sit right there. I'll tell you how I became the prince of a town called Bel-Air.</p>
  386.  
  387. <p>In west Philadelphia born and raised on the playground was where I spent most of my days. Chillin' out maxin' relaxin' all cool and all shooting some b-ball outside of the school when a couple of guys who were up to no good
  388. started making trouble in my neighborhood. I got in one little fight and my mom got scared. She said, "You're movin' with your auntie and uncle in Bel-Air."</p>
  389.  
  390. <p>I begged and pleaded with her day after day, but she packed my suitcase and sent me on my way. She gave me a kiss and then she gave me my ticket, I put my Walkman on and said, "I might as well kick it."</p>
  391.  
  392. <p>First class, yo, this is bad drinking orange juice out of a champagne glass. Is this what the people of Bel-Air living like? Hmm, this might be alright.</p>
  393.  
  394. <p>But wait I hear they're prissy, bourgeois, all that. Is this the type of place that they just send this cool cat? I don't think so. I'll see when I get there. I hope they're prepared for the prince of Bel-Air.</p>
  395.  
  396. <p>Well, the plane landed and when I came out there was a dude who looked like a cop standing there with my name out. I ain't trying to get arrested yet, I just got here. I sprang with the quickness like lightning, disappeared.</p>
  397.  
  398. <p>I whistled for a cab and when it came near. The license plate said "Fresh" and it had dice in the mirror. If anything I could say that this cab was rare, but I thought, "Nah, forget it" – "Yo, home to Bel-Air!"</p>
  399.  
  400. <p>I pulled up to the house about 7 or 8 and I yelled to the cabbie, "Yo home smell ya later!" I looked at my kingdom, I was finally there. To sit on my throne as the Prince of Bel-Air.</p>
  401.  
  402. </div>
  403. </div></div><!--end tab4-->
  404.  
  405.  
  406. </div></div><!-- END TABS -->
  407. </div>
  408.  
  409. </body>
  410. </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!