API tools faq
paste
Advertisement
repth

Theme 33

repth
May 13th, 2022
762
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.75 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 33</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. <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=Cutive&display=swap" rel="stylesheet">
  15.  
  16. <style>
  17.  
  18. body{
  19. background-color: #D6D0C8;
  20. background-image: url(https://i.imgur.com/Wg5ki1C.png);
  21. margin-top: 0px;
  22. }
  23.  
  24. #all{
  25. width: 660px;
  26. position: relative;
  27. left: 10%;
  28. }
  29.  
  30. #header{
  31. background-image: url('https://i.imgur.com/jupbmhn.png');
  32. background-color: #4E4B44;
  33. color: #d9d3c5;
  34. font-family: 'Special Elite', serif;
  35. border-radius: 0px 0px 7px 7px;
  36. width: 460px;
  37. height: 105px;
  38. margin-left: 12px;
  39. box-shadow: 5px 5px #302A27;
  40. }
  41.  
  42. #header h1{
  43. margin: 0px;
  44. font-weight: normal;
  45. text-align: center;
  46. font-size: 40px;
  47. line-height: 105px;
  48. text-shadow: 3px 3px #302A27;
  49. }
  50.  
  51. #img{
  52. background-image: url('https://i.imgur.com/qnZzOWz.png');
  53. position: absolute;
  54. top: 10px;
  55. right: 0px;
  56. width: 175px;
  57. height: 175px;
  58. z-index: 2;
  59. }
  60.  
  61. #maincontainer{
  62. width: 520px;
  63. }
  64.  
  65. .postcontainer{
  66. width: 520px;
  67. position: relative;
  68. top: 10px;
  69. color: #302A27;
  70. }
  71.  
  72. .icon{
  73. width: 100px;
  74. height: 100px;
  75. box-shadow: 4px 4px #4E4B44;
  76. position: absolute;
  77. top: -45px;
  78. z-index: 3;
  79. }
  80.  
  81. .post{
  82. background-image: url(https://i.imgur.com/bm02JPx.png);
  83. background-color: #faf7f5;
  84. width: 480px;
  85. box-shadow: 5px 5px #302A27;
  86. margin-top: 55px;
  87. margin-left: 35px;
  88. }
  89.  
  90. .subheaders{
  91. text-align: right;
  92. padding: 5px 5px 0px 0px;
  93. margin: 0px;
  94. font-weight: normal;
  95. font-family: 'Special Elite', serif;
  96. font-size: 20px;
  97.  
  98. }
  99.  
  100. .date{
  101. text-align: right;
  102. padding: 0px 5px 0px 0px;
  103. margin: 0px;
  104. font-weight: normal;
  105. font-family: 'Special Elite', serif;
  106. font-size: 14px;
  107. text-decoration: underline;
  108. text-decoration-style: dashed;
  109. }
  110.  
  111. .posttext{
  112. padding: 15px;
  113. text-align: justify;
  114. letter-spacing: 1px;
  115. }
  116.  
  117. ::-webkit-scrollbar{
  118. width: 6px;
  119. }
  120.  
  121. ::-webkit-scrollbar-track{
  122. background-color: #302a27;
  123. }
  124.  
  125. ::-webkit-scrollbar-thumb{
  126. background-color: #615955;
  127. }
  128.  
  129. #credit{
  130. font-size: 12px;
  131. position: fixed;
  132. bottom: 0;
  133. right: 0;
  134. }
  135.  
  136. #nav{
  137. position: fixed;
  138. top: 0px;
  139. right: 7%;
  140. width: 145px;
  141. background-image: url('https://i.imgur.com/jupbmhn.png');
  142. background-color: #4E4B44;
  143. border-radius: 0px 0px 7px 7px;
  144. text-align: center;
  145. font-family: 'Special Elite', serif;
  146. box-shadow: 2px 3px #302A27;
  147. }
  148.  
  149. ul{
  150. padding: 0px;
  151. margin: 0px;
  152. }
  153.  
  154. li{
  155. list-style-type: none;
  156. margin: 7px 0;
  157. text-shadow: 2px 2px #302A27;
  158. }
  159.  
  160. a{
  161. color: #d9d3c5;
  162. text-decoration: none;
  163. }
  164.  
  165. a:visited{
  166. color: #d9d3c5;
  167. }
  168.  
  169. a:hover{
  170. color: #d9d3c5;
  171. font-style: italic;
  172. }
  173.  
  174. a:active{
  175. color: #d9d3c5;
  176. font-style: italic;
  177. font-weight: bold;
  178. }
  179.  
  180. </style>
  181.  
  182. </head>
  183.  
  184. <body>
  185.  
  186. <div id="all">
  187.  
  188. <div id="header">
  189. <h1>Title Here</h1>
  190. </div>
  191.  
  192. <div id="img">
  193. <!-- refer to '#img' in CSS; 175x175px -->
  194. </div>
  195.  
  196. <div id="maincontainer">
  197.  
  198. <div class="postcontainer">
  199.  
  200. <div class="icon">
  201. <img src="https://i.imgur.com/Ln3osFy.png"> <!-- 100x100px -->
  202. </div>
  203.  
  204. <div class="post">
  205. <h2 class="subheaders">Header Here</h2>
  206. <p class="date">date: 5/13/2022</p>
  207. <div class="posttext">
  208. <p style="margin-top: 5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor enim nec congue rhoncus. Sed ultricies, ex ornare finibus imperdiet, purus libero mollis tortor, vel pellentesque lectus felis at mauris. Sed eu leo dui. Quisque quis elementum nunc.</p>
  209.  
  210. <p>Aenean semper lacus risus. Maecenas consectetur ipsum ut urna bibendum pellentesque ac quis velit. Vestibulum id interdum dolor, at vestibulum enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc sit amet posuere erat. Suspendisse vel ornare dui, sed feugiat ex. Mauris euismod, tellus et imperdiet feugiat, massa augue sagittis velit, egestas fermentum lectus dui pharetra leo. Praesent in tellus ex.</p>
  211.  
  212. <p>Nulla facilisi. Mauris tempor dolor ut tempor rhoncus. Morbi non lorem eu erat commodo.</p>
  213. </div>
  214. </div>
  215. </div>
  216.  
  217. <div class="postcontainer">
  218.  
  219. <div class="icon">
  220. <img src="https://i.imgur.com/Ln3osFy.png">
  221. </div>
  222.  
  223. <div class="post">
  224. <h2 class="subheaders">header here</h2>
  225. <p class="date">date: 5/13/2022</p>
  226. <div class="posttext">
  227. <p style="margin-top:5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor enim nec congue rhoncus. Sed ultricies, ex ornare finibus imperdiet, purus libero mollis tortor, vel pellentesque lectus felis at mauris. Sed eu leo dui. Quisque quis elementum nunc.</p>
  228.  
  229. <p>Aenean semper lacus risus. Maecenas consectetur ipsum ut urna bibendum pellentesque ac quis velit. Vestibulum id interdum dolor, at vestibulum enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc sit amet posuere erat. Suspendisse vel ornare dui, sed feugiat ex. Mauris euismod, tellus et imperdiet feugiat, massa augue sagittis velit, egestas fermentum lectus dui pharetra leo. Praesent in tellus ex.</p>
  230.  
  231. <p>Nulla facilisi. Mauris tempor dolor ut tempor rhoncus. Morbi non lorem eu erat commodo.</p>
  232. </div>
  233. </div>
  234. </div>
  235.  
  236. <div class="postcontainer">
  237.  
  238. <div class="icon">
  239. <img src="https://i.imgur.com/Ln3osFy.png">
  240. </div>
  241.  
  242. <div class="post">
  243. <h2 class="subheaders">header here</h2>
  244. <p class="date">date: 5/13/2022</p>
  245. <div class="posttext">
  246. <p style="margin-top: 5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor enim nec congue rhoncus. Sed ultricies, ex ornare finibus imperdiet, purus libero mollis tortor, vel pellentesque lectus felis at mauris. Sed eu leo dui. Quisque quis elementum nunc.</p>
  247.  
  248. <p>Aenean semper lacus risus. Maecenas consectetur ipsum ut urna bibendum pellentesque ac quis velit. Vestibulum id interdum dolor, at vestibulum enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc sit amet posuere erat. Suspendisse vel ornare dui, sed feugiat ex. Mauris euismod, tellus et imperdiet feugiat, massa augue sagittis velit, egestas fermentum lectus dui pharetra leo. Praesent in tellus ex.</p>
  249.  
  250. <p>Nulla facilisi. Mauris tempor dolor ut tempor rhoncus. Morbi non lorem eu erat commodo.</p>
  251. </div>
  252. </div>
  253. </div>
  254.  
  255. </div>
  256.  
  257. </div>
  258.  
  259. <div id="nav">
  260. <ul>
  261. <li><a href="URL HERE">home</li>
  262. <li><a href="URL HERE">about</li>
  263. <li><a href="URL HERE">photos</li>
  264. <li><a href="URL HERE">blog</li>
  265. <li><a href="URL HERE">links</li>
  266. <li><a href="URL HERE">other</li>
  267. </ul>
  268. </div>
  269.  
  270. <div id="credit"><a href="https://repth.neocities.org/index.html">©repth</a></div>
  271.  
  272. </body>
  273.  
  274. </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!