API tools faq
paste
repth

Theme 37

repth
May 23rd, 2022
190
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.40 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 37</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=Love+Ya+Like+A+Sister&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=Karla&display=swap" rel="stylesheet">
  15.  
  16. <style>
  17.  
  18. body{
  19. background-image: url('https://i.imgur.com/jdEamQr.png');
  20. background-color: #F8EEDA;
  21. margin: 7%;
  22. margin-top: 3%;
  23. font-family: 'Karla', sans-serif;
  24. font-size: 15px;
  25. }
  26.  
  27. #sidebg{
  28. background-image: url('https://i.imgur.com/WWd5ZJ1.png');
  29. background-repeat: repeat-y;
  30. background-position: top right;
  31. margin-left: -7%;
  32. width: 200px;
  33. height: 100%;
  34. position: fixed;
  35. top: 0;
  36. left 0;
  37. }
  38.  
  39. #side{
  40. background-color: #fffefc;
  41. width: 176px;
  42. height: 100%;
  43. color: #967e68;
  44. }
  45.  
  46. #side img{
  47. margin-left: 10px;
  48. width: 165px;
  49. border-radius: 0px 0px 30px 30px;
  50. opacity: 0.9;
  51. }
  52.  
  53. #sidecontent{
  54. padding: 0px 9px 15px 20px;
  55. text-align: justify;
  56. }
  57.  
  58. #sidecontent h2{
  59. font-family: 'Love Ya Like A Sister', serif;
  60. font-weight: normal;
  61. font-size: 28px;
  62. margin-bottom: 0;
  63. }
  64.  
  65. li{
  66. list-style-image: url('https://i.imgur.com/iqIEW3A.gif');
  67. font-size: 16px;
  68. }
  69.  
  70. #main{
  71. margin-left: 200px;
  72. }
  73.  
  74. #headerholder{
  75. position: relative;
  76. width: 100%;
  77. height: 201px;
  78. }
  79.  
  80. #headerholder h1{
  81. position: absolute;
  82. bottom: 0px;
  83. margin: 0px;
  84. color: #8f7c66;
  85. font-family: 'Love Ya Like A Sister', serif;
  86. font-weight: normal;
  87. font-size: 44px;
  88. }
  89.  
  90. #header{
  91. width: 280px;
  92. position: absolute;
  93. right: -20px;
  94. bottom: -25px;
  95. z-index: 2;
  96. }
  97.  
  98. .post{
  99. background-color: #fffefc;
  100. display: table;
  101. width: 100%;
  102. color: #967e68;
  103. margin-bottom: 20px;
  104. }
  105.  
  106. .text{
  107. border: 3px solid #967e68;
  108. display: table-cell;
  109. margin: 0;
  110. padding: 10px;
  111. vertical-align: top;
  112. }
  113.  
  114. .text p{
  115. margin: 0;
  116. }
  117.  
  118. .side2{
  119. display: table-cell;
  120. border-top: 3px solid #967e68;
  121. border-bottom: 3px solid #967e68;
  122. border-left: 3px solid #967e68;
  123. padding: 10px;
  124. margin: 0;
  125. width: 80px;
  126. text-align: center;
  127. }
  128.  
  129. .side2 img{
  130. width: 100%;
  131. opacity: 0.9;
  132. }
  133.  
  134. .side2 p{
  135. margin: 0;
  136. }
  137.  
  138. a{
  139. text-decoration: none;
  140. color: #76AFC2;
  141. }
  142.  
  143. a:visited{
  144. color: #76AFC2;
  145. }
  146.  
  147. a:hover{
  148. font-weight: bold;
  149. }
  150.  
  151. a:active{
  152. font-weight: normal;
  153. }
  154.  
  155. ::-webkit-scrollbar{
  156. width: 6px;
  157. }
  158.  
  159. ::-webkit-scrollbar-track{
  160. background-color: transparent;
  161. }
  162.  
  163. ::-webkit-scrollbar-thumb{
  164. background-color: #967e68;
  165. }
  166.  
  167. #credit{
  168. font-size: 12px;
  169. position: fixed;
  170. bottom: 0;
  171. right: 0;
  172. }
  173.  
  174. </style>
  175.  
  176. </head>
  177.  
  178. <body>
  179.  
  180. <div id="sidebg">
  181. <div id="side">
  182. <!-- SIDEBAR AVATAR -->
  183. <img src="https://64.media.tumblr.com/0882da2752698f3af95bb0430cb9a3ed/tumblr_pk7notiPBU1rnxhlq_540.gif">
  184. <!-- SIDEBAR CONTENT -->
  185. <div id="sidecontent">
  186. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere augue vitae neque finibus dapibus.</p>
  187. <h2>Header</h2>
  188. <ul>
  189. <li><a href="URL HERE">Home</a></li>
  190. <li><a href="URL HERE">About</a></li>
  191. <li><a href="URL HERE">Gallery</a></li>
  192. <li><a href="URL HERE">Blog</a></li>
  193. <li><a href="URL HERE">Misc</a></li>
  194. <li><a href="URL HERE">Links</a></li>
  195. </ul>
  196. </div>
  197. </div>
  198. </div>
  199.  
  200. <div id="main">
  201. <div id="headerholder">
  202. <!-- SITE TITLE -->
  203. <h1>My Diary</h1>
  204. <!-- HEADER IMAGE -->
  205. <img src="https://i.imgur.com/IwhbkAN.png" id="header">
  206. </div>
  207. <!-- POST -->
  208. <div class="post">
  209. <div class="side2">
  210. <!-- POST ICON -->
  211. <img src="https://i.imgur.com/neUtluA.jpg">
  212. <p><b>5/23/2022</b></p>
  213. </div>
  214. <div class="text"><p style="padding-top:10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere augue vitae neque finibus dapibus. Sed pharetra sem quis vulputate finibus. Nullam ullamcorper urna laoreet, sagittis neque sed, mattis massa. Proin pretium luctus lacus, ac efficitur tortor auctor id. Integer bibendum eros faucibus dolor imperdiet pretium. Maecenas eget blandit nisl. Mauris sit amet turpis porttitor, cursus orci non, laoreet sapien. Duis sed finibus velit. Nulla lobortis lectus vel congue porta. Praesent pulvinar nulla quis pharetra gravida. Suspendisse nisi sapien, viverra id placerat in, dignissim a arcu. Aenean nulla ex, efficitur quis iaculis a, maximus eu erat. Aliquam iaculis tellus in sem pulvinar, in convallis purus interdum.</p></div>
  215. </div>
  216. <!-- POST END -->
  217.  
  218. <!-- POST -->
  219. <div class="post">
  220. <div class="side2">
  221. <!-- POST ICON -->
  222. <img src="https://i.imgur.com/neUtluA.jpg">
  223. <p><b>5/23/2022</b></p>
  224. </div>
  225. <div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere augue vitae neque finibus dapibus. Sed pharetra sem quis vulputate finibus. Nullam ullamcorper urna laoreet, sagittis neque sed, mattis massa. Proin pretium luctus lacus, ac efficitur tortor auctor id. Integer bibendum eros faucibus dolor imperdiet pretium. Maecenas eget blandit nisl. Mauris sit amet turpis porttitor, cursus orci non, laoreet sapien. Duis sed finibus velit. Nulla lobortis lectus vel congue porta. Praesent pulvinar nulla quis pharetra gravida. Suspendisse nisi sapien, viverra id placerat in, dignissim a arcu. Aenean nulla ex, efficitur quis iaculis a, maximus eu erat. Aliquam iaculis tellus in sem pulvinar, in convallis purus interdum.</p></div>
  226. </div>
  227. <!-- POST END -->
  228.  
  229. <!-- POST -->
  230. <div class="post">
  231. <div class="side2">
  232. <!-- POST ICON -->
  233. <img src="https://i.imgur.com/neUtluA.jpg">
  234. <p><b>5/23/2022</b></p>
  235. </div>
  236. <div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere augue vitae neque finibus dapibus. Sed pharetra sem quis vulputate finibus. Nullam ullamcorper urna laoreet, sagittis neque sed, mattis massa. Proin pretium luctus lacus, ac efficitur tortor auctor id. Integer bibendum eros faucibus dolor imperdiet pretium. Maecenas eget blandit nisl. Mauris sit amet turpis porttitor, cursus orci non, laoreet sapien. Duis sed finibus velit. Nulla lobortis lectus vel congue porta. Praesent pulvinar nulla quis pharetra gravida. Suspendisse nisi sapien, viverra id placerat in, dignissim a arcu. Aenean nulla ex, efficitur quis iaculis a, maximus eu erat. Aliquam iaculis tellus in sem pulvinar, in convallis purus interdum.</p></div>
  237. </div>
  238. <!-- POST END -->
  239.  
  240. <!-- POST -->
  241. <div class="post">
  242. <div class="side2">
  243. <!-- POST ICON -->
  244. <img src="https://i.imgur.com/neUtluA.jpg">
  245. <p><b>5/23/2022</b></p>
  246. </div>
  247. <div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere augue vitae neque finibus dapibus. Sed pharetra sem quis vulputate finibus. Nullam ullamcorper urna laoreet, sagittis neque sed, mattis massa. Proin pretium luctus lacus, ac efficitur tortor auctor id. Integer bibendum eros faucibus dolor imperdiet pretium. Maecenas eget blandit nisl. Mauris sit amet turpis porttitor, cursus orci non, laoreet sapien. Duis sed finibus velit. Nulla lobortis lectus vel congue porta. Praesent pulvinar nulla quis pharetra gravida. Suspendisse nisi sapien, viverra id placerat in, dignissim a arcu. Aenean nulla ex, efficitur quis iaculis a, maximus eu erat. Aliquam iaculis tellus in sem pulvinar, in convallis purus interdum.</p></div>
  248. </div>
  249. <!-- POST END -->
  250. </div>
  251.  
  252. <div id="credit"><a href="https://repth.neocities.org/index.html">©repth</a></div>
  253.  
  254. </body>
  255.  
  256. </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!