API tools faq
paste
Advertisement
repth

Theme 34

repth
May 14th, 2022
1,657
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.83 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 34</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=Special+Elite&display=swap" rel="stylesheet">
  11.  
  12. <style>
  13.  
  14. body{
  15. background-color: #F9F5F3;
  16. background-image: url('https://i.imgur.com/bNk12OW.png');
  17. margin: 0px;
  18. color: #3d2120;
  19. }
  20.  
  21. #all{
  22. width: 630px;
  23. }
  24.  
  25. #side{
  26. text-align: center;
  27. width: 123px;
  28. height: 100vh;
  29. float: left;
  30. background-color: #fff;
  31. padding: 10px;
  32. border-width: 0px 1px 0px 1px;
  33. border-style: solid;
  34. border-color: #3d2120;
  35. }
  36.  
  37. #sideicon{
  38. border: 1px solid #e98583;
  39. }
  40.  
  41. .sideheader{
  42. font-weight: normal;
  43. margin: 5px 0px 0px 5px;
  44. font-size: 20px;
  45. font-family: 'Special Elite', serif;
  46. }
  47.  
  48. #aboutheader{
  49. margin: 0px 0px -5px 0px;
  50. }
  51.  
  52. #about{
  53. text-align: justify;
  54. margin: 0px 0px 10px 0px;
  55. letter-spacing: 1px;
  56. }
  57.  
  58. .divider{
  59. border-bottom: 1px dashed #3d2120;
  60. }
  61.  
  62. ul{
  63. padding: 0px;
  64. margin: 0px;
  65. }
  66.  
  67. li{
  68. list-style-type: none;
  69. margin: 5px 0;
  70. }
  71.  
  72. #main{
  73. width: 485px;
  74. height: 100vh;
  75. float: left;
  76. background-color: #fff;
  77. overflow: scroll;
  78. overflow-x: hidden;
  79. }
  80.  
  81. #header{
  82. background-image: url('https://i.imgur.com/HRdzoxk.png');
  83. background-color: #e98583;
  84. height: 70px;
  85. border-bottom: 1px solid #6b2d2b;
  86. }
  87.  
  88. #header h1{
  89. margin: 0px;
  90. font-weight: normal;
  91. color: #fff;
  92. font-size: 70px;
  93. line-height: 105px;
  94. text-transform: uppercase;
  95. font-family: 'Special Elite', serif;
  96. }
  97.  
  98. .subheader{
  99. font-weight: normal;
  100. font-size: 30px;
  101. margin: 0px 0px -5px 0px;
  102. padding: 10px 10px 0px 10px;
  103. font-family: 'Special Elite', serif;
  104. }
  105.  
  106. .postcontainer{
  107. padding: 10px;
  108. position: relative;
  109. }
  110.  
  111. .iconanddatecontainer{
  112. height: 92px;
  113. border-bottom: 2px dashed #e98583;
  114. font-family: 'Special Elite', serif;
  115. }
  116.  
  117. .icon{
  118. border: 1px solid #3d2120;
  119. }
  120.  
  121. .posttext{
  122. padding: 0px 15px 0px 15px;
  123. letter-spacing: 1px;
  124. text-align: justify;
  125. margin-top: -4px;
  126. }
  127.  
  128. .icon{
  129. position: absolute;
  130. }
  131.  
  132. .date{
  133. position: absolute;
  134. right: 10px;
  135. }
  136.  
  137. a{
  138. text-decoration: none;
  139. color: #D74329;
  140. }
  141.  
  142. a:visited{
  143. color: #D74329;
  144. }
  145.  
  146. a:hover{
  147. font-style: italic;
  148. font-weight: bold;
  149. }
  150.  
  151. a:active{
  152. font-weight: bold;
  153. font-style: italic;
  154. }
  155.  
  156. ::-webkit-scrollbar{
  157. width: 5px;
  158. }
  159.  
  160. ::-webkit-scrollbar-track{
  161. background-color: transparent;
  162. }
  163.  
  164. ::-webkit-scrollbar-thumb{
  165. background-color: #e98583;
  166. }
  167.  
  168. #bg{
  169. position:fixed;
  170. bottom: 0px;
  171. right: 0;
  172. opacity: 0.9;
  173. }
  174.  
  175. #credit{
  176. font-size: 12px;
  177. position: fixed;
  178. bottom: 0;
  179. right: 0;
  180. z-index: 2;
  181. }
  182.  
  183. </style>
  184.  
  185. </head>
  186.  
  187. <body>
  188.  
  189. <div id="all">
  190.  
  191. <div id="main">
  192.  
  193. <div id="header"><h1>Title Here</h1></div>
  194.  
  195. <!-- POST 1 -->
  196. <h2 class="subheader">Header Here</h2>
  197.  
  198.  
  199. <!-- ICON, DATE, MOOD, ETC HERE -->
  200. <div class="postcontainer">
  201. <div class="iconanddatecontainer">
  202. <img src="https://i.imgur.com/XxzLQbJ.jpg" class="icon" width="80px">
  203. <div class="date">
  204. <p style="margin:0px;">date: 5/13/2022</p>
  205. <p style="margin:0px;">mood: meh</p>
  206. <p style="margin:0px;">music: aksjdj</p>
  207. <p style="margin:0px;">whatever: aksjdj</p>
  208. </div>
  209. </div>
  210. </div>
  211.  
  212. <!-- START ENTRY HERE -->
  213. <div class="posttext">
  214.  
  215. <p style="margin:0px 0px 0px 0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare odio et mi ullamcorper convallis. Quisque posuere finibus condimentum. Cras euismod, nulla et finibus finibus, nulla leo interdum dolor, vel malesuada ipsum enim a diam.</p>
  216.  
  217. <p>In gravida eleifend risus, vitae fringilla lacus lacinia scelerisque. Duis arcu sapien, pulvinar lacinia nunc non, scelerisque venenatis mauris. Nulla pulvinar turpis non odio lacinia, pulvinar convallis nisl pellentesque.</p>
  218.  
  219. <p>Mauris sit amet elit urna. Donec et ipsum dictum, posuere nisl a, luctus libero. Morbi pulvinar ex ut massa fermentum, vel lacinia ante placerat. Mauris hendrerit ut tortor eu hendrerit. Pellentesque tincidunt quam ipsum, non euismod dolor rhoncus ac. Integer ut neque lorem. Nullam sed hendrerit quam, finibus rhoncus mauris.</p>
  220.  
  221. </div>
  222.  
  223. <!-- POST 2 -->
  224. <h2 class="subheader">Header Here</h2>
  225.  
  226. <!-- ICON, DATE, MOOD, ETC HERE -->
  227. <div class="postcontainer">
  228. <div class="iconanddatecontainer">
  229. <img src="https://i.imgur.com/Y8YBTid.gif" class="icon" width="80px">
  230. <div class="date">
  231. <p style="margin:0px;">date: 5/13/2022</p>
  232. <p style="margin:0px;">mood: meh</p>
  233. <p style="margin:0px;">music: aksjdj</p>
  234. <p style="margin:0px;">whatever: aksjdj</p>
  235. </div>
  236. </div>
  237. </div>
  238.  
  239.  
  240. <!-- START ENTRY HERE -->
  241. <div class="posttext">
  242.  
  243. <p style="margin:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare odio et mi ullamcorper convallis. Quisque posuere finibus condimentum. Cras euismod, nulla et finibus finibus, nulla leo interdum dolor, vel malesuada ipsum enim a diam.</p>
  244.  
  245. <p>In gravida eleifend risus, vitae fringilla lacus lacinia scelerisque. Duis arcu sapien, pulvinar lacinia nunc non, scelerisque venenatis mauris. Nulla pulvinar turpis non odio lacinia, pulvinar convallis nisl pellentesque.</p>
  246.  
  247. <p>Mauris sit amet elit urna. Donec et ipsum dictum, posuere nisl a, luctus libero. Morbi pulvinar ex ut massa fermentum, vel lacinia ante placerat. Mauris hendrerit ut tortor eu hendrerit. Pellentesque tincidunt quam ipsum, non euismod dolor rhoncus ac. Integer ut neque lorem. Nullam sed hendrerit quam, finibus rhoncus mauris.</p>
  248.  
  249. </div>
  250.  
  251. <!-- POST 3 -->
  252. <h2 class="subheader">Header Here</h2>
  253.  
  254. <!-- DATE, MOOD, ETC HERE -->
  255. <div class="postcontainer">
  256. <div class="iconanddatecontainer">
  257. <img src="https://i.imgur.com/XxzLQbJ.jpg" class="icon" width="80px">
  258. <div class="date">
  259. <p style="margin:0px;">date: 5/13/2022</p>
  260. <p style="margin:0px;">mood: meh</p>
  261. <p style="margin:0px;">music: aksjdj</p>
  262. <p style="margin:0px;">whatever: aksjdj</p>
  263. </div>
  264. </div>
  265. </div>
  266.  
  267. <!-- START ENTRY HERE -->
  268. <div class="posttext">
  269.  
  270. <p style="margin:0px 0px 0px 0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare odio et mi ullamcorper convallis. Quisque posuere finibus condimentum. Cras euismod, nulla et finibus finibus, nulla leo interdum dolor, vel malesuada ipsum enim a diam.</p>
  271.  
  272. <p>In gravida eleifend risus, vitae fringilla lacus lacinia scelerisque. Duis arcu sapien, pulvinar lacinia nunc non, scelerisque venenatis mauris. Nulla pulvinar turpis non odio lacinia, pulvinar convallis nisl pellentesque.</p>
  273.  
  274. <p>Mauris sit amet elit urna. Donec et ipsum dictum, posuere nisl a, luctus libero. Morbi pulvinar ex ut massa fermentum, vel lacinia ante placerat. Mauris hendrerit ut tortor eu hendrerit. Pellentesque tincidunt quam ipsum, non euismod dolor rhoncus ac. Integer ut neque lorem. Nullam sed hendrerit quam, finibus rhoncus mauris.</p>
  275.  
  276. </div>
  277.  
  278.  
  279. </div>
  280.  
  281. <!-- SIDEBAR STUFF -->
  282.  
  283. <div id="side">
  284. <!-- SIDE ICON -->
  285. <img src="https://i.imgur.com/o5o8iOY.jpg" id="sideicon">
  286.  
  287. <h2 class="sideheader" id="aboutheader">Profile</h2>
  288. <p id="about">Vivamus tinci consect viverra. Aenean vulput varius dolor rutrum auctor. Integer sed magna finibus.</p>
  289.  
  290. <div class="divider"></div>
  291.  
  292. <h2 class="sideheader">Links</h2>
  293. <ul>
  294. <li><a href="URL HERE">home</a></li>
  295. <li><a href="URL HERE">about</a></li>
  296. <li><a href="URL HERE">photos</a></li>
  297. <li><a href="URL HERE">blog</a></li>
  298. <li><a href="URL HERE">links</a></li>
  299. </ul>
  300.  
  301. <div class="divider"></div>
  302.  
  303. <h2 class="sideheader">Links</h2>
  304. <ul>
  305. <li><a href="URL HERE">home</a></li>
  306. <li><a href="URL HERE">about</a></li>
  307. <li><a href="URL HERE">photos</a></li>
  308. <li><a href="URL HERE">blog</a></li>
  309. <li><a href="URL HERE">links</a></li>
  310. </ul>
  311. </div>
  312.  
  313. </div>
  314.  
  315. <!-- BG RENDER HERE -->
  316. <div id="bg"><img src="https://i.imgur.com/Upy6iUY.png" width="300px"></div>
  317.  
  318. <div id="credit"><a href="https://repth.neocities.org/index.html">©repth</a></div>
  319.  
  320. </body>
  321.  
  322. </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!