API tools faq
paste
atlasthemes

wip page 01

atlasthemes
Jun 16th, 2019 (edited)
1,443
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.90 KB | None | 0 0
raw download clone embed print report
  1. <!------------------------------------------------------------------------
  2.  
  3.  
  4.  
  5. wip page 01
  6. by @bebewrites
  7. pls do not remove credit,
  8. thanks!<3
  9.  
  10.  
  11.  
  12. ------------------------------------------------------------------------->
  13.  
  14. <!DOCTYPE html>
  15. <head>
  16. <link rel="shortcut icon" href="{Favicon}">
  17.  
  18. <!-- icon font -->
  19. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
  20.  
  21. <!-- googe fonts -->
  22. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700" rel="stylesheet">
  23.  
  24. <title>wips</title><!-- title for browser tab -->
  25.  
  26. <style type="text/css">
  27.  
  28. /* ---------------------- change colors & font here --------------------- */
  29.  
  30. :root {
  31. --body:#555555; /* text color */
  32. --link-color:#aaaaaa; /* link color */
  33. --link-hover:#000000; /* link hover color */
  34. --accent:#b492a8; /* accent color */
  35. --bg-color:#ffffff; /* background */
  36. --section:#ffffff; /* box background color */
  37. --section-hover:#f6f6f6; /* box background color on hover */
  38. --heading:#333333; /* heading color */
  39. --borders:#eeeeee;
  40.  
  41. --body-font:'Open Sans';
  42. --font-size:11px;
  43. --text-align:justify; /* or change to LEFT */
  44.  
  45. --featured-image:url("https://images.unsplash.com/photo-1465491736982-abaddedcedc7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80");
  46. }
  47.  
  48. /* ---------------------------------------------------------------------- */
  49.  
  50.  
  51. @-webkit-keyframes fadein {
  52. 0% {opacity: 0;}
  53. 100% { opacity: 1; }}
  54.  
  55. @-moz-keyframes fadein {
  56. 0% { opacity: 0; }
  57. 100% { opacity: 1; }}
  58.  
  59. @keyframes fadein {
  60. 0% { opacity: 0; }
  61. 100% { opacity: 1; }}
  62.  
  63. body {
  64. font-family:var(--body-font);
  65. font-size:var(--font-size);
  66. line-height:170%;
  67. color:var(--body);
  68. text-align:var(--text-align);
  69. background-color:var(--bg-color);
  70. -moz-osx-font-smoothing:grayscale;
  71. -webkit-font-smoothing:antialiased;
  72. font-smoothing:antialiased;
  73. -webkit-animation: fadein 1.3s;
  74. -moz-animation:fadein 1.3s;
  75. animation:fadein 1.3s;
  76. }
  77.  
  78. a {color:var(--link-color);text-decoration: none;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
  79.  
  80. a:hover {color:var(--link-hover);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
  81.  
  82. em {letter-spacing:0.2px;}
  83.  
  84. h1 {font-size:var(--font-size);color:var(--heading);letter-spacing:0.75px;font-weight:700;text-transform:uppercase;padding:0px;margin:0px 0px 5px 0px;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
  85.  
  86. #container {
  87. display:block;
  88. position:relative;
  89. margin:100px auto 50px auto;
  90. width:1000px;
  91. height:auto;
  92. }
  93.  
  94. #heading {
  95. display:block;
  96. position:relative;
  97. margin:0 15px 50px 15px;
  98. }
  99.  
  100. #t {font-size:16px;text-transform:uppercase;font-weight:700;color:var(--heading);margin-bottom:40px;}
  101. #t span {float:right;}
  102. #t span a {font-size:10px;letter-spacing:0.75px;text-transform:uppercase;font-weight:600;color:var(--heading);margin-left:10px;}
  103. #t span a:hover {color:var(--accent);}
  104.  
  105. #featured-image {
  106. height:275px;
  107. width:100%;
  108. background-image:var(--featured-image);
  109. background-size:cover;
  110. background-position:center;
  111. border-radius:3px;
  112. }
  113.  
  114. #column-wrap {
  115. width:1000px;
  116. display: flex;
  117. flex-direction: row;
  118. align-items: flex-start;
  119. justify-content: space-between;
  120. }
  121.  
  122. #column-one, #column-two {
  123. display:block;
  124. width:470px;
  125. height:auto;
  126. margin-bottom:100px;
  127. }
  128.  
  129. section {
  130. display:block;
  131. background-color:var(--section);
  132. padding:15px;
  133. margin-bottom:30px;
  134. break-inside: avoid;
  135. border:1px solid var(--section);
  136. cursor:pointer;
  137. border-radius:3px;
  138. -webkit-transition: all 0.3s ease-in-out;
  139. -moz-transition: all 0.3s ease-in-out;
  140. -o-transition: all 0.3s ease-in-out;
  141. -ms-transition: all 0.3s ease-in-out;
  142. transition: all 0.3s ease-in-out;
  143. }
  144.  
  145. section:hover {
  146. color:var(--heading);
  147. background-color:var(--section-hover);
  148. border-color:var(--borders);
  149. box-shadow:2px 3px 3px #f2f2f2;
  150. -webkit-transition: all 0.3s ease-in-out;
  151. -moz-transition: all 0.3s ease-in-out;
  152. -o-transition: all 0.3s ease-in-out;
  153. -ms-transition: all 0.3s ease-in-out;
  154. transition: all 0.3s ease-in-out;
  155. }
  156.  
  157. section:hover h1 {
  158. color:var(--accent);
  159. -webkit-transition: all 0.3s ease-in-out;
  160. -moz-transition: all 0.3s ease-in-out;
  161. -o-transition: all 0.3s ease-in-out;
  162. -ms-transition: all 0.3s ease-in-out;
  163. transition: all 0.3s ease-in-out;
  164. }
  165.  
  166. section i {font-size:9px;margin-right:7px;}
  167.  
  168. #details {display:grid;grid-template-columns:49% 49%;grid-gap:2%;}
  169. #details span {display:block;}
  170.  
  171. #themes {text-align:left;}
  172. #themes span {padding:4px 6px;margin-right:8px;border-radius:3px;border:1px solid #f1f1f1;background-color:#fff;line-height:3em;}
  173.  
  174. #quote {font-size:12px;line-height:1.5em;}
  175. #quote span {display:block;border-left:2px solid #f1f1f1;padding-left:15px;font-style:italic;}
  176.  
  177. #characters, #info {display:block;}
  178.  
  179. #characters span, #info span {
  180. display:block;
  181. margin-bottom:1em;
  182. }
  183.  
  184. #characters span:last-of-type, #info span:last-of-type {
  185. margin-bottom:0px;
  186. }
  187.  
  188. #characters span b, #info span b {
  189. color:var(--heading);
  190. }
  191.  
  192. #characters span img {
  193. width:30px;
  194. height:30px;
  195. border-radius:3px;
  196. margin-right:8px;
  197. margin-top:4px;
  198. float:left;
  199. }
  200.  
  201. #links a {display:block;font-size:10px;letter-spacing:0.75px;color:var(--body);text-transform:uppercase;font-weight:600;padding:3px 0px;}
  202. #links a:hover {color:var(--accent);}
  203. #links span {display:grid;grid-template-columns:auto auto auto auto;grid-gap:5px;}
  204.  
  205. iframe.tmblr-iframe {display:none;}
  206.  
  207. </style>
  208. </head>
  209. <body>
  210.  
  211. <!------------------------------------------------------------------------->
  212. <!-- -->
  213. <!-- customization starts here -->
  214. <!-- -->
  215. <!------------------------------------------------------------------------->
  216.  
  217. <!--
  218. note: if you need to italicize something, please use <em></em> instead of <i></i> - the icon font used with this code relies on the <i> tag so the css applied to the icons will also be applied to any text wrapped in <i> tags. the <em> tag will work just like regular italics.
  219.  
  220. if you would like to change the icons by each section title, you can find more at https://fontawesome.com/icons?d=gallery&m=free
  221. -->
  222.  
  223. <div id="container">
  224. <!-- header -->
  225. <div id="heading">
  226. <div id="t"> project title <!-- wip title -->
  227. <span>
  228. <a href="/">home</a>
  229. <a href="/ask">contact</a>
  230. <a href="http://www.tumblr.com">dash</a>
  231. <!-- pls don't remove, thx ily!!<3 -->
  232. <a href="http://www.bebewrites.tumblr.com">theme</a>
  233. </span>
  234. </div>
  235.  
  236. <!-- featured image -->
  237. <div id="featured-image"></div>
  238. </div>
  239.  
  240.  
  241. <div id="column-wrap">
  242.  
  243.  
  244. <div id="column-one">
  245.  
  246. <!-- details -->
  247. <section>
  248. <h1><i class="fas fa-bars"></i> details</h1>
  249.  
  250. <div id="details">
  251. <span><b>genre:</b> fantasy</span>
  252. <span><b>started:</b> jan 2019</span>
  253. <span><b>status:</b> in progress</span>
  254. <span><b>draft:</b> one</span>
  255. <span><b>pov:</b> past, third</span>
  256. <span><b>wordcount:</b> 25k</span>
  257. </div>
  258. </section>
  259. <!-- end details -->
  260.  
  261.  
  262. <!-- synopsis -->
  263. <section>
  264. <h1><i class="fas fa-pencil-alt"></i> synopsis</h1>
  265.  
  266. 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.
  267.  
  268. </section><!-- end synopsis -->
  269.  
  270.  
  271. <!-- themes & tropes -->
  272. <section id="themes">
  273. <h1><i class="fas fa-asterisk"></i> themes</h1>
  274.  
  275. <!-- you can use the line break tag <br/> to arrange these how you want if they aren't lining up nicely -->
  276.  
  277. <span>magic & dark magic</span>
  278. <span>equality</span>
  279. <span>self love</span>
  280. <span>mental health</span><br/>
  281. <span>enemies to lovers</span>
  282. <span>fake dating</span>
  283. <span>mutual pining</span>
  284. <span>so much pining</span><br/>
  285. <span>there was only one bed</span>
  286. <span>and they were roommates</span>
  287.  
  288. </section><!-- end themes -->
  289.  
  290.  
  291. <!-- quote -->
  292. <section id="quote">
  293. <h1><i class="fas fa-quote-left"></i> quote</h1>
  294.  
  295. <span>
  296. 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.
  297. </span>
  298. </section><!-- end quote -->
  299.  
  300. </div><!-- end column one-->
  301.  
  302.  
  303. <div id="column-two">
  304.  
  305. <!-- important links -->
  306. <section id="links">
  307. <h1><i class="fas fa-link"></i> links</h1>
  308.  
  309. <!-- add however many links you want! looks best in multiples of 4 -->
  310.  
  311. <span>
  312. <a href="http://www.tumblr.com">link</a>
  313. <a href="http://www.tumblr.com">link</a>
  314. <a href="http://www.tumblr.com">link</a>
  315. <a href="http://www.tumblr.com">link</a>
  316. <a href="http://www.tumblr.com">link</a>
  317. <a href="http://www.tumblr.com">link</a>
  318. <a href="http://www.tumblr.com">link</a>
  319. <a href="http://www.tumblr.com">link</a>
  320. </span>
  321. </section><!-- end links -->
  322.  
  323. <!-- characters : this box will scroll -->
  324. <section id="characters">
  325. <h1><i class="fas fa-users"></i> characters</h1>
  326.  
  327. <span><img src="https://i.imgur.com/pn8Mt1T.png"/>
  328. <b>Character Name:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</span>
  329.  
  330. <span><img src="http://i.imgur.com/pw070qs.png"/>
  331. <b>Character Name:</b> 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. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</span>
  332.  
  333. <span><img src="https://i.imgur.com/oWzBVHS.png"/>
  334. <b>Character Name:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</span>
  335.  
  336. <span><img src="http://i.imgur.com/DPs1LuJ.png"/>
  337. <b>Character Name:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</span>
  338.  
  339. </section><!-- end characters -->
  340.  
  341.  
  342. <!-- extra info : this box will scroll -->
  343. <section id="info">
  344. <h1><i class="fas fa-bookmark"></i> info + worldbuilding</h1>
  345.  
  346. <span><b>heading:</b> 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.</span>
  347.  
  348. <span><b>heading:</b> 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.</span>
  349.  
  350. <span><b>heading:</b> 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.</span>
  351.  
  352. </section><!-- end info-->
  353.  
  354. </div><!-- end column two-->
  355.  
  356. </div></div> <!-- end container -->
  357. </body>
  358. </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!