API tools faq
paste
Advertisement
softcodesthemes

wip page 07

softcodesthemes
Aug 16th, 2022 (edited)
5,212
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.36 KB | None | 1 0
raw download clone embed print report
  1. <!------------------------------------------------------------------------
  2.  
  3.  
  4.  
  5. wip page 07
  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.  
  21. <title>a work in progress</title>
  22.  
  23. <link rel="shortcut icon" href="{Favicon}">
  24. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  25. <meta charset="utf-8">
  26. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  27.  
  28. <script src="https://unpkg.com/feather-icons"></script>
  29.  
  30. <!-- google fonts -->
  31.  
  32. <link rel="preconnect" href="https://fonts.googleapis.com">
  33. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  34. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
  35.  
  36.  
  37. <link rel="preconnect" href="https://fonts.googleapis.com">
  38. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  39. <link href="https://fonts.googleapis.com/css2?family=Cormorant:ital@0;1&display=swap" rel="stylesheet">
  40.  
  41. <!----- CSS ----->
  42.  
  43. <style type="text/css">
  44.  
  45. /* ---------------------------- customizations -------------------------- */
  46.  
  47. :root {
  48. --body-font:'Inter';
  49. --text-size:11px;
  50. --text-align:justify; /* left, center, or justify */
  51. --title-font:'Cormorant';
  52.  
  53. --background-color:#f3ede8;
  54. --text-color:#444444; /* text color */
  55. --accent:#c5ad98;
  56. --headings:#222222;
  57. --links:#a2a2a2;
  58. --borders:#f3ede8;
  59. --drop-cap:#444444;
  60. --drop-cap-background:#f3ede8;
  61.  
  62. --featured-image:url('https://images.unsplash.com/photo-1575126516997-9a17eff5e434?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MjZ8ODQ2ODc5M3x8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60');
  63. }
  64. /* ---------------------------------------------------------------------- */
  65.  
  66. /* --- fade in --- */
  67.  
  68. @-webkit-keyframes fadein {
  69. 0% {opacity: 0;}
  70. 100% { opacity: 1; } }
  71.  
  72. @-moz-keyframes fadein {
  73. 0% { opacity: 0; }
  74. 100% { opacity: 1; } }
  75.  
  76. @keyframes fadein {
  77. 0% { opacity: 0; }
  78. 100% { opacity: 1; } }
  79.  
  80.  
  81. /*----- BASIC STYLING -----*/
  82.  
  83. body {
  84. font-family:var(--body-font);
  85. font-size:var(--text-size);
  86. color:var(--text-color);
  87. background-color:var(--background-color);
  88. line-height: 170%;
  89. text-align:var(--text-align);
  90. word-wrap: break-word;
  91. margin: 0;
  92. padding: 0;
  93. -moz-osx-font-smoothing:grayscale;
  94. -webkit-font-smoothing:antialiased;
  95. font-smoothing:antialiased;
  96. -webkit-animation: fadein 1.5s;
  97. -moz-animation:fadein 1.5s;
  98. animation:fadein 1.5s;
  99. }
  100.  
  101. a {
  102. color: #aaa; /* link color */
  103. text-decoration: none;
  104. -webkit-transition: all 0.3s ease-in-out;
  105. -moz-transition: all 0.3s ease-in-out;
  106. -o-transition: all 0.3s ease-in-out;
  107. -ms-transition: all 0.3s ease-in-out;
  108. transition: all 0.3s ease-in-out;
  109. }
  110.  
  111. a:hover {
  112. color: #000; /* link hover color */
  113. }
  114.  
  115. h1 {
  116. font-size:calc(var(--text-size) + 1px);
  117. letter-spacing:0.75px;
  118. color:var(--headings);
  119. font-weight: 700;
  120. margin:0 0 1.25em 0;
  121. text-transform: uppercase;
  122. }
  123.  
  124. h1 svg {
  125. width:15px;
  126. height:15px;
  127. stroke:var(--accent);
  128. stroke-width:2;
  129. stroke-linecap: round;
  130. stroke-linejoin: round;
  131. fill: none;
  132. vertical-align:middle;
  133. margin-top:-3px;
  134. margin-right:5px;
  135. }
  136.  
  137. h2 {
  138. font-size: 15px;
  139. font-weight: 700;
  140. word-spacing: 3px;
  141. color:var(--headings);
  142. margin:0;
  143. padding:0;
  144. }
  145.  
  146. main {
  147. margin:50px auto;
  148. margin-top:50px;
  149. width:600px;
  150. height: auto;
  151. border-radius:8px;
  152. box-shadow:2px 2px 7px #e2e2e2;
  153. border:1px solid #f2f2f2;
  154. }
  155.  
  156. #content-wrap {
  157. padding:2.5em;
  158. background-color:#fff;
  159. }
  160.  
  161. section {
  162. padding:3em;
  163. border-left:1px solid var(--borders);
  164. border-right:1px solid var(--borders);
  165. border-bottom:1px solid var(--borders);
  166. }
  167.  
  168. .featured-image {
  169. width:100%;
  170. height:200px;
  171. background-image:var(--featured-image);
  172. background-size:cover;
  173. background-position:center;
  174. border-radius:3px;
  175. }
  176.  
  177. heading {
  178. display:block;
  179. text-align: center;
  180. border: 1px solid var(--borders);
  181. padding:2.5em;
  182. }
  183.  
  184. heading a {
  185. padding:0 3px;
  186. color:var(--text-color);
  187. }
  188.  
  189. heading a:hover {
  190. color:var(--accent);
  191. }
  192.  
  193. #wip-title {
  194. font-family:var(--title-font);
  195. color:var(--headings);
  196. font-size:25px;
  197. word-spacing: 3px;
  198. margin-bottom:10px;
  199. text-transform: uppercase;
  200. }
  201.  
  202. .line {
  203. height:1px;
  204. width:75px;
  205. margin:2em auto;
  206. background-color:var(--text-color);
  207. }
  208.  
  209.  
  210. /* details */
  211.  
  212. .details-columns {
  213. display: grid;
  214. grid-template-columns:32% 35% 32%;
  215. }
  216.  
  217. .details-columns i {
  218. vertical-align:middle;
  219. margin:-2px 6px 0 6px;
  220. }
  221.  
  222.  
  223. /* synopsis */
  224.  
  225. .syn:first-letter {
  226. display:block;
  227. float:left;
  228. font-family:var(--title-font);
  229. font-size:calc(var(--text-size) + 8px);
  230. color:var(--drop-cap);
  231. background:var(--drop-cap-background);
  232. font-weight:700;
  233. text-transform:uppercase;
  234. padding:8px 10px;
  235. margin:0 5px 0 0;
  236. border-radius:2px;
  237. }
  238.  
  239.  
  240. /* characters */
  241.  
  242. .char {
  243. display:block;
  244. margin-bottom:1.25em;
  245. padding-bottom:1.25em;
  246. border-bottom:1px solid var(--borders);
  247. }
  248.  
  249. .char:last-of-type {
  250. margin-bottom:0;
  251. padding-bottom:0;
  252. border-bottom:0px solid var(--borders);
  253. }
  254.  
  255. .icon-left {
  256. width: 50px;
  257. height: 50px;
  258. margin-right:1em;
  259. margin-top:3px;
  260. float: left;
  261. border-radius:3px;
  262. }
  263.  
  264. .icon-right {
  265. width: 50px;
  266. height: 50px;
  267. margin-left:1em;
  268. margin-top:3px;
  269. float: right;
  270. border-radius:3px;
  271. }
  272.  
  273. .icon-left img, .icon-right img {
  274. width: 50px;
  275. height: 50px;
  276. }
  277.  
  278.  
  279. /* links */
  280.  
  281. .link-columns {display: grid;grid-template-columns:33.3% 33.3% 33.3%;}
  282.  
  283. .link-columns span {display:block;}
  284.  
  285. .link-columns a {border-bottom:1px solid var(--borders);}
  286.  
  287. .link-columns a:hover {color:var(--accent);border-bottom:1px solid var(--borders);}
  288.  
  289.  
  290. /* info */
  291.  
  292. .info span {display:block;margin-bottom:1.25em;}
  293. .info span:last-of-type {margin-bottom:0;}
  294.  
  295. iframe.tmblr-iframe {display:none;}
  296.  
  297.  
  298. /*--- responsive - don't edit ---*/
  299.  
  300. @media only screen and (max-width: 1100px) {
  301.  
  302. main {width:70%;}
  303. }
  304.  
  305. /*--- for mobile devices ---*/
  306.  
  307. @media only screen and (max-width: 720px) {
  308. main {width: 80vw;}
  309.  
  310. .details-columns {
  311. display: grid;
  312. grid-template-columns:50% 50%;
  313. }
  314.  
  315. }
  316.  
  317. </style>
  318. </head>
  319. <body>
  320.  
  321. <main>
  322. <div id="content-wrap">
  323.  
  324. <heading>
  325.  
  326. <!-- WIP TITLE -->
  327. <div id="wip-title">in the woods somewhere</div>
  328.  
  329. <div class="line"></div>
  330.  
  331. <!-- links underneath the wip title -->
  332.  
  333. <a href="/">index</a> &sdot;
  334. <a href="/ask">contact</a> &sdot;
  335. <a href="/https://www.tumblr.com/dashboard">dash</a> &sdot;
  336. <!-- PLEASE DON'T REMOVE THIS ONE THANKS ILY <3 -->
  337. <a href="http://www.bebewrites.tumblr.com" target="_blank">theme</a>
  338. </heading>
  339.  
  340. <section>
  341. <div class="featured-image"></div>
  342. </section>
  343.  
  344.  
  345. <!-- DETAILS -->
  346.  
  347. <section>
  348. <h1><i data-feather="bookmark"></i> details</h1>
  349.  
  350. <!-- add/remove as many as you like! -->
  351.  
  352. <div class="details-columns">
  353. <div class="column"><b>genre</b> &nbsp;—&nbsp; adult fantasy</div>
  354.  
  355. <div class="column"><b>status</b> &nbsp;—&nbsp; first draft</div>
  356.  
  357. <div class="column"><b>started</b> &nbsp;—&nbsp; january 2019</div>
  358.  
  359. <div class="column"><b>pov</b> &nbsp;—&nbsp; dual pov</div>
  360.  
  361. <div class="column"><b>wordcount</b> &nbsp;—&nbsp; 30k words</div>
  362.  
  363. <div class="column"><b>label</b> &nbsp;—&nbsp; content</div>
  364. </div>
  365. </section>
  366.  
  367. <!-- SYNOPSIS -->
  368.  
  369. <section>
  370. <h1><i data-feather="edit"></i> synopsis</h1>
  371.  
  372. <div class="syn">Lorem ipsum dolor sit amet. Sit odio omnis a impedit similique ut molestiae fuga aut ipsam. Et soluta repudiandae sit similique quae est reprehenderit labore officiis impedit hic voluptas voluptates ut facere nemo? Eos nulla repudiandae et quia explicabo quo cumque corporis sed blanditiis consequatur sed nulla assumenda aut accusantium quis. Qui minus laudantium eum minima asperiores quo voluptas laudantium ab quaerat aperiam et voluptatem vitae et voluptatibus provident ex sunt commodi. Et labore ullam.
  373. </div>
  374. </section>
  375.  
  376.  
  377. <!-- LINKS -->
  378.  
  379. <section>
  380. <h1><i data-feather="link"></i> links</h1>
  381.  
  382. <!--
  383. html links look like this <a href="http://www.url.com">link name</a>
  384. add the url between the quotation marks and change the link name
  385. link to tags, social media, intro posts, etc.
  386. you can add as many as you like!
  387. -->
  388.  
  389. <div class="link-columns">
  390. <div class="column"><a href="/">wip tag</a></div>
  391. <div class="column"><a href="/">character tag</a></div>
  392. <div class="column"><a href="/">inspiration tag</a></div>
  393. <div class="column"><a href="/">writing tag</a></div>
  394. <div class="column"><a href="/">pinterest</a></div>
  395. <div class="column"><a href="/">unsplash</a></div>
  396. </div>
  397. </section>
  398.  
  399.  
  400. <!-- CHARACTERS -->
  401.  
  402. <section>
  403. <h1><i data-feather="users"></i> characters</h1>
  404.  
  405. <!--
  406. if you'd like the character images to alternate,
  407. the image class can be "icon-left" or "icon-right"
  408. if you'd like them all to be on the left,
  409. just make sure they all say "icon-left"
  410. add as many characters as you want!
  411. -->
  412.  
  413. <div class="char">
  414. <img class="icon-left" src="http://i.imgur.com/MDBf2LF.png"/>
  415.  
  416. <b>Character One:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
  417. </div>
  418.  
  419.  
  420. <div class="char">
  421. <img class="icon-right" src="http://i.imgur.com/mUiuf3h.png"/>
  422.  
  423. <b>Character Two:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
  424. </div>
  425.  
  426.  
  427. <div class="char">
  428. <img class="icon-left" src="https://i.imgur.com/BNhXnGr.png"/>
  429.  
  430. <b>Character Three:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
  431. </div>
  432.  
  433. </section><!-- end character section -->
  434.  
  435.  
  436. <!-- worldbuilding -->
  437.  
  438. <section class="info">
  439. <h1><i data-feather="star"></i> worldbuilding</h1>
  440.  
  441. <!-- you can add some additional information here! -->
  442.  
  443. <span><b>Interesting Thing #1:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
  444.  
  445. <span><b>Interesting Thing #2:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
  446. </section>
  447.  
  448. </div>
  449. </main>
  450.  
  451. <script>
  452. feather.replace()
  453. </script>
  454.  
  455. </body>
  456. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!