API tools faq
paste
atlasthemes

wip page 06

atlasthemes
Feb 23rd, 2021
5,968
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.72 KB | None | 0 0
raw download clone embed print report
  1. <!------------------------------------------------------------------------
  2.  
  3.  
  4.  
  5. wip page 06
  6. by @bebewrites
  7. pls do not remove credit,
  8. thanks!<3
  9.  
  10.  
  11.  
  12. ------------------------------------------------------------------------->
  13.  
  14. <!DOCTYPE html>
  15. <html>
  16.  
  17. <head>
  18.  
  19. <!-- browser tab title -->
  20. <title>a work in progress</title>
  21.  
  22. <link rel="shortcut icon" href="{Favicon}">
  23. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24. <meta charset="utf-8">
  25. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  26.  
  27. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  28. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  29.  
  30. <script>
  31. (function($){
  32. $(document).ready(function(){
  33. $("a[title]").style_my_tooltips({
  34. tip_follows_cursor:true,
  35. tip_delay_time:90,
  36. tip_fade_speed:300,
  37. attribute:"title"
  38. });
  39. });
  40. })(jQuery);
  41. </script>
  42.  
  43. <!----- CSS ----->
  44.  
  45. <style type="text/css">
  46.  
  47. /* ---------------------------- customizations -------------------------- */
  48.  
  49. :root {
  50. --body:#444444; /* text color */
  51. --accent:#d6a4a4; /* accent/link color */
  52. --accent2:#edd1d1; /* sidebar title background */
  53. --borders:#f2f2f2;
  54. --headings:#222222;
  55. --text-size:13px; /* font size */
  56. }
  57. /* ---------------------------------------------------------------------- */
  58.  
  59. /* --- fade in --- */
  60.  
  61. @-webkit-keyframes fadein {
  62. 0% {opacity: 0;}
  63. 100% { opacity: 1; } }
  64.  
  65. @-moz-keyframes fadein {
  66. 0% { opacity: 0; }
  67. 100% { opacity: 1; } }
  68.  
  69. @keyframes fadein {
  70. 0% { opacity: 0; }
  71. 100% { opacity: 1; } }
  72.  
  73. #s-m-t-tooltip {
  74. max-width:300px;
  75. margin-top:25px;
  76. margin-left:15px;
  77. font-size:9px;
  78. letter-spacing:1px;
  79. text-align:center;
  80. text-transform:uppercase;
  81. color:#fff;
  82. background-color:#222222;
  83. padding:2px 6px;
  84. border-radius:2px;
  85. z-index:999999;
  86. }
  87.  
  88. /*----- BASIC STYLING -----*/
  89.  
  90. body {
  91. font-family: Arial, sans-serif;
  92. font-size:var(--text-size);
  93. color: #444;
  94. letter-spacing:0.2px;
  95. background-color:#fff;
  96. text-align: justify;
  97. line-height: 150%;
  98. word-wrap: break-word;
  99. margin: 0;
  100. padding: 0;
  101. -moz-osx-font-smoothing:grayscale;
  102. -webkit-font-smoothing:antialiased;
  103. font-smoothing:antialiased;
  104. -webkit-animation: fadein 1.5s;
  105. -moz-animation:fadein 1.5s;
  106. animation:fadein 1.5s;
  107. }
  108.  
  109. a {
  110. color:var(--accent);
  111. text-decoration: none;
  112. -webkit-transition: all 0.3s;
  113. -moz-transition: all 0.3s;
  114. -ms-transition: all 0.3s;
  115. -o-transition: all 0.3s;
  116. transition: all 0.3s;
  117. }
  118.  
  119. a:hover {
  120. color:var(--headings);
  121. -webkit-transition: all 0.3s;
  122. -moz-transition: all 0.3s;
  123. -ms-transition: all 0.3s;
  124. -o-transition: all 0.3s;
  125. transition: all 0.3s;
  126. }
  127.  
  128. blockquote {
  129. padding: 0 0 0 1em;
  130. margin: 1.5em 2.5em 1.5em 1.5em;
  131. font-style:italic;
  132. }
  133.  
  134. h1 {
  135. font-family:Georgia;
  136. font-size:18px;
  137. font-weight:400;
  138. letter-spacing:0;
  139. padding-bottom:0.5em;
  140. margin-bottom:0.5em;
  141. color:var(--headings);
  142. border-bottom:1px solid var(--borders);
  143. }
  144.  
  145. h3 {
  146. color:var(--headings);
  147. letter-spacing:0;
  148. font-weight:bold;
  149. font-size:calc(var(--text-size) + 2px);
  150. }
  151.  
  152. hr {
  153. height: 1px;
  154. border: none;
  155. box-shadow: none;
  156. background-color:#eee;
  157. }
  158.  
  159. /*---- header ----*/
  160.  
  161. #header {
  162. height:40px;
  163. width:100%;
  164. line-height:40px;
  165. background-color:#fafafa;
  166. border-bottom:1px solid var(--borders);
  167. }
  168.  
  169. nav {
  170. width: 975px;
  171. margin:auto;
  172. }
  173.  
  174. nav a {
  175. margin-right:1em;
  176. color:#888888;
  177. }
  178.  
  179. nav a:hover {color:var(--accent);}
  180.  
  181. .credit {float:right;}
  182.  
  183. /*---- aside ----*/
  184.  
  185. #sidebar {
  186. display:inline-block;
  187. width: 300px;
  188. padding:10px;
  189. margin-left:48px;
  190. margin-top:0.5em;
  191. height: auto;
  192. background-color:#fafafa;
  193. border:1px solid var(--borders);
  194. vertical-align:top;
  195. }
  196.  
  197. #sidebar-image img {
  198. width:300px;
  199. height:300px;
  200. margin-bottom:0.25em;
  201. }
  202.  
  203. h2 {
  204. background-color:var(--accent2);
  205. color:var(--headings);
  206. font-style:italic;
  207. display:block;
  208. text-align:center;
  209. font-weight:700;
  210. padding:3px;
  211. font-size:var(--text-size);
  212. }
  213.  
  214. /*---- containers ----*/
  215.  
  216. main {
  217. position: relative;
  218. width: calc(600px + 375px);
  219. margin: 75px auto 150px auto;
  220. }
  221.  
  222. #inner-container {
  223. width:600px;
  224. display:inline-block;
  225. vertical-align:top;
  226. }
  227.  
  228. section {margin-bottom:3em;}
  229. section:last-of-type {margin-bottom:0;}
  230. #sidebar section {margin-bottom:2em;}
  231. #sidebar section:last-of-type {margin-bottom:0;}
  232.  
  233. /*---- title ----*/
  234.  
  235. #title {
  236. font-family:Georgia;
  237. font-style:italic;
  238. font-size:25px;
  239. padding-bottom:0.5em;
  240. margin-bottom:0.5em;
  241. color:var(--headings);
  242. border-bottom:2px solid var(--borders);
  243. }
  244.  
  245. /*---- characters ----*/
  246.  
  247. .character {
  248. display:block;
  249. margin-bottom:1em;
  250. }
  251.  
  252. .character b {
  253. color:var(--headings);
  254. }
  255.  
  256. .char-img-left {
  257. display:inline-block;
  258. width:75px;
  259. height:75px;
  260. padding:2px;
  261. background-color:#fafafa;
  262. border:1px solid var(--borders);
  263. margin-right:1em;
  264. }
  265.  
  266. .char-img-right {
  267. display:inline-block;
  268. width:75px;
  269. height:75px;
  270. padding:2px;
  271. background-color:#fafafa;
  272. border:1px solid var(--borders);
  273. margin-left:1em;
  274. }
  275.  
  276. .char-bio {
  277. display:inline-block;
  278. width:500px;
  279. vertical-align:top;
  280. margin-top:2px;
  281. }
  282.  
  283. /*---- stats ----*/
  284.  
  285. .stats span {display:block;}
  286.  
  287. .stats span b {
  288. display:inline-block;
  289. width:30%;
  290. font-weight:700;
  291. text-transform:lowercase;
  292. color:var(--headings);
  293. }
  294.  
  295. /*---- links ----*/
  296.  
  297. .links {
  298. display:grid;
  299. grid-template-columns:50% 50%;
  300. }
  301.  
  302. iframe.tmblr-iframe {display:none;}
  303.  
  304.  
  305. /*--- responsive - don't edit ---*/
  306.  
  307. @media only screen and (max-width: 1100px) {
  308.  
  309. main {width:80%;}
  310.  
  311. #sidebar {
  312. position: relative;
  313. width:95%;
  314. margin: 50px 0 0 0;
  315. top: auto;
  316. }
  317.  
  318. section {margin-left: 0;}
  319. }
  320.  
  321. /*--- for mobile devices ---*/
  322.  
  323. @media only screen and (max-width: 720px) {
  324. main, section {width: 80vw;}
  325. }
  326.  
  327. </style>
  328. </head>
  329. <body>
  330.  
  331. <div id="header">
  332. <nav>
  333. <a href="/">Index</a>
  334. <a href="/">Dash</a>
  335. <a href="/">Wips</a>
  336. <a href="/">Contact</a>
  337.  
  338. <!-- credit - pls don't remove!<3 -->
  339. <a class="credit" href="http://bebewrites.tumblr.com" title="code by @bebewrites">Theme</a>
  340. </nav>
  341. </div>
  342.  
  343. <main>
  344.  
  345. <!---- wip title ---->
  346.  
  347. <div id="title">Rose Crowned</div>
  348.  
  349. <div id="inner-container">
  350.  
  351. <!---- quote or summary ---->
  352.  
  353. <blockquote>
  354. A small quote or <a href="/">summary</a> can go here. lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam.
  355. </blockquote>
  356.  
  357. <!---- synopsis ---->
  358.  
  359. <section>
  360. Lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam. sed nisi. nulla quis sem at nibh elementum imperdiet. duis sagittis ipsum. praesent mauris. fusce nec tellus sed augue semper porta. mauris massa. vestibulum lacinia arcu eget nulla. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. curabitur sodales ligula in libero. sed dignissim lacinia nunc. curabitur tortor. pellentesque nibh. aenean quam. in scelerisque sem at dolor. maecenas mattis. sed convallis tristique sem. proin ut ligula vel nunc egestas porttitor. morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. fusce ac turpis quis ligula lacinia aliquet. mauris ipsum.
  361. </section>
  362.  
  363. <!---- characters:
  364. there are two ways you can do characters - with the image on the left or right. they're labeled in the code below, so all you have to do is copy whichever one you want to use and update the information.
  365. ---->
  366.  
  367. <section>
  368. <h1>Characters</h1>
  369.  
  370. <!-- character one - image aligned left -->
  371.  
  372. <div class="character">
  373. <img class="char-img-left" src="http://i.imgur.com/oGvzLZu.png"/>
  374.  
  375. <div class="char-bio">
  376. <b>Character Name:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam. sed nisi. nulla quis sem at nibh elementum imperdiet. duis sagittis ipsum. praesent mauris. fusce nec tellus sed augue semper porta. mauris massa. vestibulum lacinia arcu eget nulla.
  377. </div>
  378. </div>
  379.  
  380. <!-- character two - image aligned right -->
  381.  
  382. <div class="character">
  383. <div class="char-bio">
  384. <b>Character Name:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam. sed nisi. nulla quis sem at nibh elementum imperdiet. duis sagittis ipsum. praesent mauris. fusce nec tellus sed augue semper porta. mauris massa. vestibulum lacinia arcu eget nulla.
  385. </div>
  386.  
  387. <img class="char-img-right" src="http://i.imgur.com/JRr6hSW.png"/>
  388. </div>
  389.  
  390. <!-- character three - image aligned left -->
  391.  
  392. <div class="character">
  393. <img class="char-img-left" src="http://i.imgur.com/7m81Hob.png"/>
  394.  
  395. <div class="char-bio">
  396. <b>Character Name:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam. sed nisi. nulla quis sem at nibh elementum imperdiet. duis sagittis ipsum. praesent mauris. fusce nec tellus sed augue semper porta. mauris massa. vestibulum lacinia arcu eget nulla.
  397. </div>
  398. </div>
  399.  
  400. <!-- end of characters -->
  401. </section>
  402.  
  403.  
  404. <!-- additional information - you can copy & paste and add as many sections as you need -->
  405.  
  406. <section>
  407. <h1>Additional Information</h1>
  408.  
  409. Lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam. sed nisi. nulla quis sem at nibh elementum imperdiet. duis sagittis ipsum. praesent mauris. fusce nec tellus sed augue semper porta. mauris massa. vestibulum lacinia arcu eget nulla. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. curabitur sodales ligula in libero. sed dignissim lacinia nunc. curabitur tortor. pellentesque nibh. aenean quam. in scelerisque sem at dolor. maecenas mattis. sed convallis tristique sem. proin ut ligula vel nunc egestas porttitor. morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. fusce ac turpis quis ligula lacinia aliquet. mauris ipsum.
  410. </section>
  411.  
  412. </div> <!-- end inner container -->
  413.  
  414.  
  415. <!---------- sidebar ---------->
  416.  
  417. <div id="sidebar">
  418.  
  419. <!-- sidebar image -->
  420.  
  421. <div id="sidebar-image"><img src="https://64.media.tumblr.com/0d1140298c7eb9ecf0dbb2990fcd16da/0a16275d47364272-93/s1280x1920/04c0312bcad1215be2c3a93854c8ccc1328c2ba8.jpg"/></div>
  422.  
  423. <!---- project details ---->
  424.  
  425. <h2>Details</h2>
  426.  
  427. <section class="stats">
  428. <span><b>Status</b> in progress</span>
  429. <span><b>Genre</b> adult fantasy</span>
  430. <span><b>Started</b> fall 2018</span>
  431. <span><b>Draft</b> first draft</span>
  432. <span><b>Pov</b> third person</span>
  433. <span><b>Wordcount</b> 30,000 words</span>
  434. <span><b>Word goal</b> 75,000 words</span>
  435. </section>
  436.  
  437. <!---- links ---->
  438.  
  439. <h2>Links</h2>
  440.  
  441. <section class="links">
  442. <a href="/">Wip tag</a>
  443. <a href="/">Pinterest</a>
  444. <a href="/">Unsplash</a>
  445. <a href="/">Spotify</a>
  446. <a href="/">Inspo</a>
  447. <a href="/">Sideblog</a>
  448. <a href="/">Website</a>
  449. <a href="/">Instagram</a>
  450. </section>
  451.  
  452. </div><!-- end sidebar -->
  453.  
  454. </main>
  455.  
  456. </body>
  457. </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!