API tools faq
paste
Advertisement
repth

Theme 21

repth
Nov 3rd, 2021 (edited)
286
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>theme 21</title>
  7.  
  8. <link rel="preconnect" href="https://fonts.googleapis.com">
  9. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10. <link href="https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap" rel="stylesheet">
  11.  
  12. <link rel="preconnect" href="https://fonts.googleapis.com">
  13. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  14. <link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">
  15.  
  16. <style>
  17.  
  18. body{
  19. background-image: url('https://i.imgur.com/hsY0m68.png');
  20. font-family: 'Caveat', serif;
  21. }
  22.  
  23. #all{
  24. position: absolute;
  25. width: 888px;
  26. height: 594px;
  27. left: 50%;
  28. top: 50%;
  29. -webkit-transform: translate(-50%, -50%);
  30. transform: translate(-50%, -50%);
  31. }
  32.  
  33. #container{
  34. width: 888px;
  35. height: 594px;
  36. background-image: url('https://i.imgur.com/ayab4vZ.png');
  37. background-repeat: no-repeat;
  38. background-position: center center;
  39. position: absolute;
  40. }
  41.  
  42. #title{
  43. position: relative;
  44. width: 310px;
  45. height: 105px;
  46. top: 23px;
  47. left: 18px;
  48. text-align: center;
  49. color: #fff;
  50. font-family: 'Homemade Apple', cursive;
  51. }
  52.  
  53. #title h1{
  54. margin: 0px;
  55. line-height: 115px;
  56. font-weight: normal;
  57. font-size: 45px;
  58. }
  59.  
  60. #titleimg{
  61. width: 115px;
  62. position: relative;
  63. left: 325px;
  64. top: -85px;
  65. }
  66.  
  67. #blurb{
  68. width: 210px;
  69. height: 107px;
  70. overflow: scroll;
  71. overflow-x: hidden;
  72. position: relative;
  73. top: -85px;
  74. left: 200px;
  75. padding: 2px 10px 10px 10px;
  76. font-size: 19px;
  77. text-align: right;
  78. color: #574745;
  79. }
  80.  
  81. #blurb p{
  82. margin: 0px;
  83. }
  84.  
  85. #img2{
  86. position: relative;
  87. width: 235px;
  88. height: 253px;
  89. top: -53px;
  90. left: 52px;
  91. background-image: url('https://i.imgur.com/b8pcFNw.jpg');
  92. background-repeat: no-repeat;
  93. }
  94.  
  95. #nav{
  96. position: relative;
  97. width: 125px;
  98. height: 285px;
  99. top: -300px;
  100. left: 318px;
  101. }
  102.  
  103. #nav li{
  104. background-image: url('https://i.imgur.com/dTGm9LF.png');
  105. background-position: top left;
  106. background-repeat: no-repeat;
  107. margin-left: -20px;
  108. text-shadow: 0px 1px 0px #f0a6cb;
  109. text-transform: lowercase;
  110. font-family: 'Homemade Apple', cursive;
  111. font-size: 18px;
  112. list-style-type: none;
  113. text-align: center;
  114. }
  115.  
  116. #nav a{
  117. color: #fff;
  118. text-decoration: none;
  119. }
  120.  
  121. #nav a:hover{
  122. color: #f0a6cb;
  123. text-shadow: 0px 1px 0px #fff;
  124. }
  125.  
  126. #title2{
  127. position: relative;
  128. text-align: center;
  129. width: 400px;
  130. height: 100px;
  131. top: -875px;
  132. left: 461px;
  133. font-family: 'Homemade Apple', cursive;
  134. color: #fff;
  135. }
  136.  
  137. #title2 h1{
  138. font-weight: normal;
  139. font-size: 44px;
  140. margin: 0px;
  141. line-height: 110px;
  142. }
  143.  
  144. #content{
  145. position: relative;
  146. width: 398px;
  147. height: 426px;
  148. top: -866px;
  149. left: 449px;
  150. padding: 10px 15px 15px 15px;
  151. font-size: 14px;
  152. overflow: scroll;
  153. overflow-x: hidden;
  154. font-family: 'Garamond', serif;
  155. }
  156.  
  157. #date{
  158. text-align: right;
  159. border-bottom: 1px dashed #BBAAA6;
  160. letter-spacing: -1px;
  161. color: #F2BEA3;
  162. }
  163.  
  164. #date h2{
  165. margin: 0px;
  166. font-size: 16px;
  167. }
  168.  
  169. #mood{
  170. margin: 0px;
  171. font-size: 15px;
  172. color: #A87890;
  173. }
  174.  
  175. #entry{
  176. text-align: justify;
  177. color: #755a67;
  178. }
  179.  
  180. ::-webkit-scrollbar{
  181. width: 6px;
  182. }
  183.  
  184. ::-webkit-scrollbar-track{
  185. background-color: transparent;
  186. }
  187.  
  188. ::-webkit-scrollbar-thumb{
  189. background-color: #F2BEA3;
  190. }
  191.  
  192. #credit{
  193. font-size: 13px;
  194. position: fixed;
  195. bottom: 0;
  196. right: 0;
  197. font-family: 'Garamond', serif;
  198. }
  199.  
  200. #credit a{
  201. text-decoration: none;
  202. color: #A87890;
  203. }
  204.  
  205. a{
  206. color: #A87890;
  207. }
  208.  
  209. a:hover{
  210. color: #574745;
  211. }
  212.  
  213. </style>
  214.  
  215. </head>
  216.  
  217. <body>
  218.  
  219. <div id="all">
  220.  
  221. <div id="container">
  222.  
  223. <div id="title">
  224. <h1>Welcome</h1>
  225. </div>
  226.  
  227. <img src="https://i.imgur.com/6mlThyL.png" id="titleimg">
  228.  
  229. <div id="blurb">
  230.  
  231. <p>Nam feugiat pellentesque leo, in lacinia nisi commodo et. Nam molestie libero id augue vehicula accumsan. Sed a pulvinar sem. Maecenas imperdiet, nisi maximus egestas semper, quam nunc interdum quam, eu venenatis sapien tortor vitae metus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
  232.  
  233. </div>
  234.  
  235. <div id="img2"></div>
  236.  
  237. <div id="nav">
  238.  
  239. <ul>
  240. <li><a href="">Home</a></li>
  241. <li><a href="">About</a></li>
  242. <li><a href="">Gallery</a></li>
  243. <li><a href="">Blog</a></li>
  244. <li><a href="">Links</a></li>
  245. <li><a href="">Misc</a></li>
  246. <li><a href="">Other</a></li>
  247. </ul>
  248.  
  249. </div>
  250.  
  251. <div id="title2">
  252.  
  253. <h1>My Journal</h1>
  254.  
  255. </div>
  256.  
  257. <div id="content">
  258.  
  259. <div id="date">
  260. <h2>[11/3/2021]</h2>
  261. <p id="mood">Mood: akdjsnfj</p>
  262. </div>
  263.  
  264. <div id="entry">
  265. <p><b>Lorem ipsum dolor</b> <i>sit amet, consectetur</i> <s>adipiscing elit. Nullam</s> laoreet erat et nisi convallis fermentum. Etiam nulla libero, egestas nec lacus eu, imperdiet scelerisque nunc. Vestibulum in magna vel nunc consequat sodales. Proin porttitor faucibus maximus. Nullam eu leo nec magna suscipit commodo. Donec vestibulum rhoncus urna, nec bibendum augue feugiat nec. Nulla fermentum consequat tortor et aliquet. Cras varius sem egestas diam semper, ac venenatis libero blandit. Ut pharetra ex vitae magna dictum sodales. Suspendisse vel nibh ultricies, ullamcorper nunc congue, feugiat sem. Duis maximus purus id ligula sollicitudin dictum. Curabitur ac feugiat nisl.</p>
  266.  
  267. <p><a href="">Ut sollicitudin</a> mauris magna, et molestie tellus pretium a. Morbi mattis non nunc suscipit commodo. Cras vestibulum, eros sit amet rhoncus faucibus, nulla diam elementum nulla, sit amet bibendum libero ante a eros. Duis iaculis diam libero, eget luctus ipsum finibus vitae. Quisque consectetur mattis lectus. Nullam dictum eros quis euismod lacinia. Nulla tellus lectus, condimentum nec nulla a, venenatis dapibus odio. Duis scelerisque dictum sollicitudin. Sed eu efficitur arcu, sed pulvinar sem. Sed et ultrices justo. Curabitur erat diam, pulvinar ac maximus sit amet, condimentum nec justo. Nulla quis enim a odio tristique tristique.</p>
  268.  
  269. <p>Ut viverra justo rhoncus massa suscipit ullamcorper. Maecenas est metus, aliquam non iaculis non, iaculis sit amet urna. Donec sodales risus ut odio suscipit malesuada non ut tortor. Ut posuere mattis mauris at porttitor. Proin lobortis finibus purus, sit amet commodo nulla elementum a. Vivamus nulla lacus, fermentum ac blandit nec, vehicula vitae ante. Duis augue sapien, porta et quam at, rutrum imperdiet leo. Proin non nibh tristique, ullamcorper augue et, consectetur velit. Cras accumsan rhoncus metus quis semper. Integer porttitor elit tincidunt sem consectetur, eu maximus mi rhoncus. Curabitur turpis nunc, rutrum a posuere id, eleifend id lorem. Pellentesque commodo mollis mauris. Aenean euismod volutpat erat id elementum. Nulla quis orci ultricies turpis fringilla luctus convallis vitae risus. Quisque lobortis ipsum sit amet eros malesuada, posuere cursus leo porttitor.</p>
  270. </div>
  271.  
  272. </div>
  273.  
  274. </div>
  275.  
  276. </div>
  277.  
  278. <div id="credit"><a href="https://repth.neocities.org/index.html">@Repth</a></div>
  279.  
  280. </body>
  281.  
  282. </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!