API tools faq
paste
atlasthemes

lorem ipsum - page

atlasthemes
Apr 2nd, 2019
450
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.39 KB | None | 0 0
raw download clone embed print report
  1. <!------------------------------------------------------------------------
  2.  
  3. // wip page 001
  4.  
  5. by @bebewrites
  6. pls don't remove credit
  7. pls don't use as a base code
  8. thanks! <3
  9.  
  10. ------------------------------------------------------------------------->
  11.  
  12. <!DOCTYPE html>
  13. <head>
  14. <link rel="shortcut icon" href="{Favicon}">
  15.  
  16. <!-- GOOGLE FONTS -->
  17. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet">
  18.  
  19.  
  20.  
  21. <title>wip page</title> <!-- title for browser tab -->
  22.  
  23. <style type="text/css" >
  24.  
  25. /* --------------------- change colors & fonts here --------------------- */
  26.  
  27. :root {
  28. --bg-color:#ffffff; /* page background color */
  29. --body:#444444; /* text color */
  30. --links:#aaaaaa; /* link color */
  31. --top-links:#444444; /* top links color */
  32. --bottom-links:#444444; /* bottom links color */
  33. --link-hover:#C22E56; /* link hover color */
  34.  
  35. --body-font:'Open Sans'; /* main font */
  36. --font-size:10px; /* font size */
  37. --title-font-size:16px; /* title font size */
  38. }
  39.  
  40. /* ---------------------------------------------------------------------- */
  41.  
  42. @-webkit-keyframes fadein {
  43. 0% {opacity: 0;}
  44. 100% { opacity: 1; } }
  45.  
  46. @-moz-keyframes fadein {
  47. 0% { opacity: 0; }
  48. 100% { opacity: 1; } }
  49.  
  50. @keyframes fadein {
  51. 0% { opacity: 0; }
  52. 100% { opacity: 1; } }
  53.  
  54. body {
  55. color:var(--body);
  56. font-family:var(--body-font);
  57. font-size:var(--font-size);
  58. background:var(--bg-color);
  59. line-height:18px;
  60. -moz-osx-font-smoothing:grayscale;
  61. -webkit-font-smoothing:antialiased;
  62. font-smoothing:antialiased;
  63. -webkit-animation: fadein 1s;
  64. -moz-animation:fadein 1s;
  65. animation:fadein 1s;}
  66.  
  67. hr {
  68. width:100%;
  69. border-width: 1px 0px 0px 0px;
  70. border-style: solid;
  71. border-color:#eeeeee;
  72. margin:20px 0px;
  73. }
  74.  
  75. a {
  76. color:var(--links);
  77. text-decoration: none;
  78. -webkit-transition: all 0.3s ease-in-out;
  79. -moz-transition: all 0.3s ease-in-out;
  80. -o-transition: all 0.3s ease-in-out;
  81. -ms-transition: all 0.3s ease-in-out;
  82. transition: all 0.3s ease-in-out;}
  83.  
  84. a:hover {color:var(--link-hover);}
  85.  
  86. h1 {
  87. font-size:14px;
  88. margin:5px 0px;
  89. padding:0px;
  90. }
  91.  
  92. .container {
  93. width:500px;
  94. display:block;
  95. position:relative;
  96. margin:auto;
  97. top:75px;
  98. }
  99.  
  100. .section {
  101. display:block;
  102. position:relative;
  103. padding: 15px;
  104. margin:0px auto 75px auto;
  105. border-radius:3px;
  106. text-align:justify; /* can change to LEFT */
  107. }
  108.  
  109. .title {
  110. display:inline-block:
  111. position:relative;
  112. padding-top:15px;
  113. font-size:var(--title-font-size);
  114. font-weight:bold;
  115. letter-spacing:1px;
  116. text-transform:uppercase;
  117. margin-bottom:10px;
  118. }
  119.  
  120. .quote {display:block;margin-bottom:10px;}
  121.  
  122. /*--- links under quote ---*/
  123.  
  124. .toplinks {font-weight:bold;}
  125. .toplinks a {color:var(--top-links);margin-right:6px;}
  126. .toplinks a:hover {color:var(--link-hover);}
  127.  
  128. /*--- character section ---*/
  129.  
  130. .section span {display:block;margin-bottom:5px;}
  131. .section span b {font-weight:bold;}
  132.  
  133. /*--- bottom links ---*/
  134.  
  135. .bottomlinks {font-weight:bold;}
  136. .bottomlinks a {color:var(--bottom-links);margin-right:6px;}
  137. .bottomlinks a:hover {color:var(--link-hover);}
  138.  
  139. </style>
  140. </head>
  141. <body>
  142. <!------------------------------------------------------------------------->
  143. <!-- EDITING BEGINS HERE -->
  144. <!------------------------------------------------------------------------->
  145.  
  146. <div class="container">
  147. <div class="section">
  148.  
  149.  
  150. <!-- title -->
  151.  
  152. <div class="title">lorem ipsum</div>
  153.  
  154.  
  155. <!-- quote - you can delete this section -->
  156. <div class="quote">
  157.  
  158. "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..."
  159.  
  160. </div><!-- end quote -->
  161.  
  162.  
  163.  
  164. <!-- links below quote - please don't remove the credit! -->
  165.  
  166. <div class="toplinks">
  167. <a href="/">home.</a>
  168. <a href="/">wips.</a> <!-- change to your wip page url -->
  169. <a href="/ask">ask.</a>
  170. <a href="www.tumblr.com/dashboard">dash.</a>
  171. <!-- please don't edit or remove this one thanks ily!!!!<333 -->
  172. <a href="http://www.bebewrites.tumblr.com" target="_blank">theme.</a>
  173. </div>
  174.  
  175.  
  176. <hr>
  177.  
  178.  
  179. <!-- add wip synopsis here -->
  180.  
  181. This is <b>bold</b>, this is <i>italic</i>, this is a <a href="/">link</a>. 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. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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.
  182.  
  183.  
  184. <hr>
  185.  
  186.  
  187. <!-- add some character info here - if you want to link to a character tag, you could make the character name a link! copy and paste however many characters you need. you can also delete this section if you want a simpler page without characters. -->
  188.  
  189. <span><b>character name.</b> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
  190.  
  191. <span><b>character name.</b> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
  192.  
  193. <span><b>character name.</b> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
  194.  
  195. <!-- end characters -->
  196.  
  197.  
  198. <hr>
  199.  
  200.  
  201. <!-- you can add some links here! add/remove however many you want -->
  202.  
  203. <div class="bottomlinks">
  204.  
  205. <a href="http://www.tumblr.com">inspo.</a>
  206. <a href="http://www.tumblr.com">writing.</a>
  207. <a href="http://www.tumblr.com">art.</a>
  208. <a href="http://www.tumblr.com">sideblog.</a>
  209. <a href="http://www.tumblr.com">pinterest.</a>
  210. <a href="http://www.tumblr.com">playlist.</a>
  211.  
  212. </div><!-- end links -->
  213.  
  214. </div></div>
  215. </body></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!