API tools faq
paste
repth

Theme 41

repth
Jun 18th, 2022 (edited)
1,596
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.46 KB | None | 1 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>journal theme</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. *{
  19. box-sizing: border-box;
  20. margin: 0;
  21. padding: 0;
  22. }
  23.  
  24. body{
  25. background-image: url('https://i.imgur.com/jdEamQr.png');
  26. background-color: #F8EEDA;
  27. margin: 7%;
  28. font-family: 'Karla', sans-serif;
  29. font-size: 16px;
  30. color: #967e68;
  31. }
  32.  
  33. .sidebg{
  34. background-image: url('https://i.imgur.com/WWd5ZJ1.png');
  35. background-repeat: repeat-y;
  36. background-position: top right;
  37. width: 200px;
  38. height: 100%;
  39. position: fixed;
  40. top: 0;
  41. left: 0;
  42. }
  43.  
  44. .side{
  45. background-color: #fffefc;
  46. width: 176px;
  47. height: 100%;
  48. padding: 1rem 0.5rem 1rem 1rem;
  49. text-align: justify;
  50. font-size: 15px;
  51. display: flex;
  52. flex-direction: column;
  53. gap: 1rem;
  54. }
  55.  
  56. .avatar{
  57. width: 100%;
  58. opacity: 0.9;
  59. }
  60.  
  61. .desc{
  62. padding: 0.5rem;
  63. }
  64.  
  65. .sideheaders{
  66. font-family: 'Love Ya Like A Sister', serif;
  67. font-weight: normal;
  68. font-size: 28px;
  69. }
  70.  
  71. .side ul{
  72. padding-left: 2.5rem;
  73. }
  74.  
  75. .side li{
  76. list-style-image: url('https://i.imgur.com/iqIEW3A.gif');
  77. font-size: 16px;
  78. }
  79.  
  80. .container{
  81. display: flex;
  82. flex-direction: column;
  83. margin-left: 200px;
  84. }
  85.  
  86. .headerwrapper{
  87. display: flex;
  88. flex-direction: row;
  89. justify-content: space-between;
  90. }
  91.  
  92. .title{
  93. font-family: 'Love Ya Like A Sister', serif;
  94. font-weight: normal;
  95. color: #8f7c66;
  96. font-size: 46px;
  97. align-self: end;
  98. margin-left: -1rem;
  99. }
  100.  
  101. .headerimg{
  102. width: 285px;
  103. align-self: end;
  104. margin-right: -1rem;
  105. margin-bottom: -1rem;
  106. position: relative;
  107. z-index: 1;
  108. }
  109.  
  110. .boxgap{
  111. display: flex;
  112. flex-direction: column;
  113. gap: 1rem;
  114. }
  115.  
  116. .box{
  117. display: flex;
  118. flex-direction: row;
  119. background-color: #fffefc;
  120. border: 3px solid #967e68;
  121. }
  122.  
  123. .left{
  124. border-right: 3px solid #967e68;
  125. padding: 0.7rem;
  126. text-align: center;
  127. }
  128.  
  129. .icon{
  130. border: 2px solid #967E68;
  131. }
  132.  
  133. .right{
  134. padding: 1rem;
  135. }
  136.  
  137. a{
  138. color: #76AFC2;
  139. text-decoration: none;
  140. }
  141.  
  142. a:visited{
  143. color: #76AFC2;
  144. }
  145.  
  146. a:hover{
  147. font-weight: bold;
  148. }
  149.  
  150. a:active{
  151. font-style: italic;
  152. font-weight: normal;
  153. }
  154.  
  155.  
  156.  
  157. ::-webkit-scrollbar{
  158. width: 8px;
  159. }
  160.  
  161. ::-webkit-scrollbar-track{
  162. background-color: transparent;
  163. }
  164.  
  165. ::-webkit-scrollbar-thumb{
  166. background-color: #967e68;
  167. }
  168.  
  169. #credit{
  170. font-size: 12px;
  171. position: fixed;
  172. bottom: 0;
  173. right: 0;
  174. }
  175.  
  176. @media(max-width:760px){
  177. body{
  178. margin: 0;
  179. padding: 1rem;
  180. }
  181. .sidebg{
  182. background-image: none;
  183. position: relative;
  184. top: 0;
  185. margin-bottom: 1rem;
  186. width: 100%;
  187. height: auto;
  188. }
  189. .side{
  190. height: auto;
  191. width: 100%;
  192. text-align: center;
  193. padding: 1rem;
  194. }
  195. .desc{
  196. font-size: 16px;
  197. }
  198. .side ul{
  199. padding: 0;
  200. }
  201. .side li{
  202. display: inline;
  203. margin-left: 4px;
  204. }
  205. .avatar{
  206. width: 50%;
  207. margin: 0 auto;
  208. }
  209. .container{
  210. margin: 0;
  211. }
  212. .headerimg{
  213. width: 180px;
  214. }
  215. .title{
  216. font-size: 36px;
  217. margin: 0;
  218. }
  219. }
  220.  
  221. </style>
  222.  
  223. </head>
  224.  
  225. <body>
  226.  
  227. <div class="sidebg">
  228. <div class="side">
  229.  
  230. <!-- SIDEBAR AVATAR -->
  231. <img class="avatar" src="https://64.media.tumblr.com/0882da2752698f3af95bb0430cb9a3ed/tumblr_pk7notiPBU1rnxhlq_540.gif">
  232.  
  233. <!-- SIDEBAR DESCRIPTION -->
  234. <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet ex quis nisi auctor mollis.</p>
  235.  
  236. <!-- SIDEBAR NAV -->
  237. <h2 class="sideheaders">Navigate</h2>
  238. <ul>
  239. <li><a href="">Home</a></li>
  240. <li><a href="">About</a></li>
  241. <li><a href="">Gallery</a></li>
  242. <li><a href="">Blog</a></li>
  243. <li><a href="">Resources</a></li>
  244. <li><a href="">Links</a></li>
  245. <li><a href="">Other</a></li>
  246. </ul>
  247.  
  248. </div>
  249. </div>
  250.  
  251. <div class="container">
  252. <div class="headerwrapper">
  253.  
  254. <!-- TITLE AND HEADER IMAGE -->
  255. <h1 class="title">Title Here</h1>
  256. <img class="headerimg" src="https://i.imgur.com/IwhbkAN.png" id="header">
  257. </div>
  258.  
  259. <div class="boxgap">
  260.  
  261. <!-- POST START -->
  262. <div class="box">
  263.  
  264. <!-- POST ICON AND DATE -->
  265. <div class="left">
  266. <img class="icon" src="https://i.imgur.com/ciYUuHm.jpg">
  267. <p>06/18/22</p>
  268. </div>
  269.  
  270. <!-- POST TEXT -->
  271. <div class="right">
  272. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet ex quis nisi auctor mollis. Phasellus nec nunc sit amet purus mattis sodales. Morbi lectus nunc, tincidunt dapibus sem vitae, porttitor ornare leo. Fusce elit augue, rhoncus sed finibus non, faucibus id tellus. Pellentesque nec justo ex. Praesent nec velit at mauris ultrices bibendum. Fusce fringilla, magna eu bibendum ornare, lacus sapien ornare est, egestas semper urna orci lobortis massa. Maecenas sed ultrices ex, sed cursus orci. Donec orci massa, rhoncus vitae elit sed, tempor gravida nunc. Aenean id iaculis risus, ut interdum mauris. Nunc ac rutrum justo. Praesent eleifend, nunc ac cursus vestibulum, odio nulla fringilla nisl, eu laoreet quam orci eget libero. Maecenas sollicitudin felis nunc, dignissim iaculis est iaculis ut.</p>
  273. </div>
  274.  
  275. </div>
  276. <!-- POST END -->
  277.  
  278. <!-- POST START -->
  279. <div class="box">
  280.  
  281. <!-- POST ICON AND DATE -->
  282. <div class="left">
  283. <img class="icon" src="https://i.imgur.com/ciYUuHm.jpg">
  284. <p>06/18/22</p>
  285. </div>
  286.  
  287. <!-- POST TEXT -->
  288. <div class="right">
  289. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet ex quis nisi auctor mollis. Phasellus nec nunc sit amet purus mattis sodales. Morbi lectus nunc, tincidunt dapibus sem vitae, porttitor ornare leo. Fusce elit augue, rhoncus sed finibus non, faucibus id tellus. Pellentesque nec justo ex. Praesent nec velit at mauris ultrices bibendum. Fusce fringilla, magna eu bibendum ornare, lacus sapien ornare est, egestas semper urna orci lobortis massa. Maecenas sed ultrices ex, sed cursus orci. Donec orci massa, rhoncus vitae elit sed, tempor gravida nunc. Aenean id iaculis risus, ut interdum mauris. Nunc ac rutrum justo. Praesent eleifend, nunc ac cursus vestibulum, odio nulla fringilla nisl, eu laoreet quam orci eget libero. Maecenas sollicitudin felis nunc, dignissim iaculis est iaculis ut.</p>
  290. </div>
  291.  
  292. </div>
  293. <!-- POST END -->
  294.  
  295.  
  296. <!-- POST START -->
  297. <div class="box">
  298.  
  299. <!-- POST ICON AND DATE -->
  300. <div class="left">
  301. <img class="icon" src="https://i.imgur.com/ciYUuHm.jpg">
  302. <p>06/18/22</p>
  303. </div>
  304.  
  305. <!-- POST TEXT -->
  306. <div class="right">
  307. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet ex quis nisi auctor mollis. Phasellus nec nunc sit amet purus mattis sodales. Morbi lectus nunc, tincidunt dapibus sem vitae, porttitor ornare leo. Fusce elit augue, rhoncus sed finibus non, faucibus id tellus. Pellentesque nec justo ex. Praesent nec velit at mauris ultrices bibendum. Fusce fringilla, magna eu bibendum ornare, lacus sapien ornare est, egestas semper urna orci lobortis massa. Maecenas sed ultrices ex, sed cursus orci. Donec orci massa, rhoncus vitae elit sed, tempor gravida nunc. Aenean id iaculis risus, ut interdum mauris. Nunc ac rutrum justo. Praesent eleifend, nunc ac cursus vestibulum, odio nulla fringilla nisl, eu laoreet quam orci eget libero. Maecenas sollicitudin felis nunc, dignissim iaculis est iaculis ut.</p>
  308. </div>
  309.  
  310. </div>
  311. <!-- POST END -->
  312.  
  313. </div>
  314.  
  315. </div>
  316.  
  317. <div id="credit"><a href="https://repth.neocities.org/index.html">©repth</a></div>
  318.  
  319. </body>
  320.  
  321. </html>
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!