API tools faq
paste
repth

Theme 36

repth
May 19th, 2022 (edited)
121
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.88 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 36</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=Patua+One&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=Arapey&display=swap" rel="stylesheet">
  15.  
  16. <style>
  17.  
  18. body{
  19. background-image: url('https://www.transparenttextures.com/patterns/textured-stripes.png');
  20. background-color: #E6D0B1;
  21. font-family: 'Arapey', sans-serif;
  22. }
  23.  
  24. #all{
  25. width: 1000px;
  26. margin: 0 auto;
  27. }
  28.  
  29. #head{
  30. width: 1000px;
  31. height: 135px;
  32. margin-bottom: 25px;
  33. }
  34.  
  35. #headborder{
  36. background-image: url('https://www.transparenttextures.com/patterns/textured-stripes.png');
  37. width: 1000px;
  38. height: 7px;
  39. background-color: #dea2a2;
  40. box-shadow: 0px 1px 3px #706451;
  41. position: relative;
  42. z-index: 2;
  43. }
  44.  
  45. #nav{
  46. float: left;
  47. }
  48.  
  49. #head ul{
  50. margin: 2px 0px 0px 10px;
  51. padding: 0px;
  52. }
  53.  
  54. #head li{
  55. background-image: url('https://www.transparenttextures.com/patterns/textured-stripes.png');
  56. list-style-type: none;
  57. display: inline;
  58. margin-right: 5px;
  59. background-color: #B8CC8D;
  60. padding: 5px;
  61. border-radius: 0px 0px 7px 7px;
  62. }
  63.  
  64. a{
  65. color: #fff0f0;
  66. text-decoration: none;
  67. }
  68.  
  69. a:visited{
  70. color: #fff0f0;
  71. }
  72.  
  73. a:hover{
  74. font-style: italic;
  75. }
  76.  
  77. a:active{
  78. font-style: italic;
  79. font-weight: bold;
  80. }
  81.  
  82. #signwrapper{
  83. height: 135px;
  84. width: 315px;
  85. float: right;
  86. margin-right: 10px;
  87. position: relative;
  88. }
  89.  
  90. #signborder{
  91. margin: 0 auto;
  92. width: 285px;
  93. height: 35px;
  94. border-right: 5px solid #c28c8c;
  95. border-left: 5px solid #c28c8c;
  96. }
  97.  
  98. #sign{
  99. background-image: url('https://www.transparenttextures.com/patterns/textured-stripes.png');
  100. position: absolute;
  101. bottom: 0;
  102. width: 315px;
  103. border-radius: 10px;
  104. height: 100px;
  105. background-color: #B8CC8D;
  106. box-shadow: 0px 0px 3px #706451;
  107. text-align: center;
  108. }
  109.  
  110. #sign h1{
  111. font-family: 'Patua One', serif;
  112. font-weight: normal;
  113. color: #fff0f0;
  114. font-size: 40px;
  115. margin: 0;
  116. line-height: 95px;
  117. }
  118.  
  119. #main{
  120. width: 980px;
  121. margin: 0 auto;
  122. }
  123.  
  124. #side{
  125. background-image: url('https://www.transparenttextures.com/patterns/textured-stripes.png');
  126. width: 200px;
  127. float: left;
  128. height: auto;
  129. background-color: #E3BA81;
  130. padding: 15px 0px 15px 0px;
  131. color: #8c593b;
  132. border-radius: 10px 0px 0px 10px;
  133. }
  134.  
  135. #pfpholder{
  136. background-image: url('https://www.transparenttextures.com/patterns/textured-stripes.png');
  137. background-color: #E6D0B1;
  138. width: 155px;
  139. height: 155px;
  140. margin: 0 auto;
  141. border-radius: 10px;
  142. padding: 10px;
  143. box-shadow: 0px 0px 5px #7d5a3d;
  144. }
  145.  
  146. #pfpborder{
  147. border: 2px dashed #ad8f72;
  148. border-radius: 10px;
  149. width: 130px;
  150. height: 130px;
  151. padding: 10px;
  152. }
  153.  
  154. #pfp{
  155. background-image: url('https://i.imgur.com/jIIkOYo.png');
  156. opacity: 0.8;
  157. width: 130px;
  158. height: 130px;
  159. border-radius: 10px;
  160. }
  161.  
  162. #profile{
  163. margin: 10px 0px 0px 0px;
  164. text-align: center;
  165. padding: 0px 16px 0px 16px;
  166. }
  167.  
  168. .divider{
  169. margin: 5px auto;
  170. background-image: url('https://i.imgur.com/gO5n3Rm.png');
  171. background-size: 100%;
  172. width: 185px;
  173. height: 20px;
  174. }
  175.  
  176. .sideheaders{
  177. font-family: 'Patua One', serif;
  178. font-weight: normal;
  179. color: #996a4c;
  180. border-bottom: 1px dotted #ad8f72;
  181. margin: 0px 20px 0px 10px;
  182. padding: 0px 10px 0px 0px;
  183. }
  184.  
  185. #side ul{
  186. margin-bottom: 0px;
  187. }
  188.  
  189. #side li{
  190. list-style-image: url('https://i.imgur.com/bGWUJUg.png');
  191. }
  192.  
  193. #right{
  194. float: left;
  195. width: 750px;
  196. height: auto;
  197. position: relative;
  198. }
  199.  
  200. #content{
  201. background-color: #fff;
  202. color: #8c593b;
  203. width: 750px;
  204. height: auto;
  205. background-image: url('https://i.imgur.com/26bPvD0.png');
  206. background-repeat: no-repeat;
  207. background-position: bottom left;
  208. background-size: 90%;
  209. margin-top: 15px;
  210. margin-bottom: 15px;
  211. padding: 10px 15px 15px 15px;
  212. }
  213.  
  214. #subheader1{
  215. background-image: url('https://www.transparenttextures.com/patterns/textured-stripes.png');
  216. font-family: 'Patua One', serif;
  217. margin: 0px 0px 0px 30px;
  218. background-color: #dea2a2;
  219. color: #fff;
  220. width: max-content;
  221. font-weight: normal;
  222. border-radius: 7px;
  223. padding: 3px;
  224. position: absolute;
  225. top: 0px;
  226. }
  227.  
  228. #subheader{
  229. font-family: 'Patua One', serif;
  230. font-weight: normal;
  231. color: #dea2a2;
  232. border-bottom: 1px dotted #dea2a2;
  233. margin-right: 140px;
  234. }
  235.  
  236. #icon1holder{
  237. background-image: url('https://www.transparenttextures.com/patterns/textured-stripes.png');
  238. display: flex;
  239. justify-content: center;
  240. align-items: center;
  241. background-color: #dea2a2;
  242. width: 100px;
  243. height: 100px;
  244. border-radius: 10px;
  245. margin-right: 15px;
  246. float: right;
  247. }
  248.  
  249. #iconholder{
  250. background-image: url('https://www.transparenttextures.com/patterns/textured-stripes.png');
  251. display: flex;
  252. justify-content: center;
  253. align-items: center;
  254. background-color: #dea2a2;
  255. width: 100px;
  256. height: 100px;
  257. border-radius: 10px;
  258. margin-right: 30px;
  259. float: right;
  260. }
  261.  
  262. .icon{
  263. border-radius: 10px;
  264. border-radius: 10px;
  265. opacity: 0.8;
  266. }
  267.  
  268. #content p{
  269. padding: 0px 30px 0px 15px;
  270. }
  271.  
  272. ::-webkit-scrollbar{
  273. width: 6px;
  274. }
  275.  
  276. ::-webkit-scrollbar-track{
  277. background-color: transparent;
  278. }
  279.  
  280. ::-webkit-scrollbar-thumb{
  281. background-color: #dea2a2;
  282. }
  283.  
  284. #credit{
  285. font-size: 12px;
  286. position: fixed;
  287. bottom: 0;
  288. right: 0;
  289. }
  290.  
  291. </style>
  292.  
  293. </head>
  294.  
  295. <body>
  296.  
  297. <div id="all">
  298.  
  299. <div id="head">
  300. <div id="headborder">
  301. </div>
  302. <div id="nav"> <!-- TOP NAV -->
  303. <ul>
  304. <li><a href="URL HERE">Link 1</a></li>
  305. <li><a href="URL HERE">Link 2</a></li>
  306. <li><a href="URL HERE">Link 3</a></li>
  307. <li><a href="URL HERE">Link 4</a></li>
  308. <li><a href="URL HERE">Link 5</a></li>
  309. </ul>
  310. </div>
  311. <div id="signwrapper">
  312. <div id="signborder">
  313. </div>
  314. <div id="sign">
  315. <h1>Welcome</h1> <!-- SITE HEADER -->
  316. </div>
  317. </div>
  318. </div>
  319.  
  320. <div id="main">
  321. <div id="side">
  322. <div id="pfpholder">
  323. <div id="pfpborder">
  324. <div id="pfp"></div> <!-- SEE "#pfp" IN CSS, 130x130PX -->
  325. </div>
  326. </div> <!-- SIDE DESCRIPTION -->
  327. <p id="profile">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu enim non velit tempus ultricies.</p>
  328. <div class="divider"></div>
  329. <h2 class="sideheaders">Header</h2>
  330. <ul>
  331. <li><a href="URL HERE">Link 1</a></li>
  332. <li><a href="URL HERE">Link 2</a></li>
  333. <li><a href="URL HERE">Link 3</a></li>
  334. <li><a href="URL HERE">Link 4</a></li>
  335. <li><a href="URL HERE">Link 5</a></li>
  336. <li><a href="URL HERE">Link 6</a></li>
  337. </ul>
  338. <div class="divider"></div>
  339. <h2 class="sideheaders">Header</h2>
  340. <ul>
  341. <li><a href="URL HERE">Link 1</a></li>
  342. <li><a href="URL HERE">Link 2</a></li>
  343. <li><a href="URL HERE">Link 3</a></li>
  344. <li><a href="URL HERE">Link 4</a></li>
  345. <li><a href="URL HERE">Link 5</a></li>
  346. <li><a href="URL HERE">Link 6</a></li>
  347. </ul>
  348. </div>
  349.  
  350. <div id="right">
  351. <h3 id="subheader1">Header Here</h3> <!-- RIGHT SECTION TITLE -->
  352. <div id="icon1holder"> <!-- FIRST ICON -->
  353. <img class="icon" src="https://i.imgur.com/XZRFxfA.png" width="90px"></div>
  354. <div id="content">
  355.  
  356. <!-- FIRST POST -->
  357. <h3 id="subheader">Header</h3>
  358. <p><b>Date: 5/19/2022</b></p>
  359. <p>Praesent auctor, mauris nec porta tempor, ipsum diam cursus lorem, ut rhoncus neque nulla in mi. Aenean commodo nibh vitae enim ultricies, id finibus erat mollis. Proin lobortis, arcu et sodales pellentesque, sapien sapien bibendum elit, sit amet porta mi leo et augue.</p>
  360.  
  361. <p>Vestibulum tristique nec nisl eget lobortis. Aliquam ut volutpat mauris, vitae ornare sem. Donec tincidunt congue est, at pharetra libero pharetra non. Duis efficitur lorem eget suscipit sollicitudin. Nulla ultricies iaculis felis, sit amet euismod lacus consectetur sed.</p>
  362.  
  363. <p>Vestibulum non congue nisl. Donec tincidunt ultrices arcu, eget euismod erat convallis vestibulum. Mauris dolor purus, iaculis at ligula eu, imperdiet venenatis ante.</p>
  364.  
  365. <!-- SECOND POST -->
  366. <div class="everypostafterfirstpost"> <!-- include this div for every post after the first post -->
  367. <div id="iconholder">
  368. <img class="icon" src="https://i.imgur.com/XZRFxfA.png" width="90px"></div>
  369. <h3 id="subheader">Header</h3>
  370. <p><b>Date: 5/19/2022</b></p>
  371. <p>Praesent auctor, mauris nec porta tempor, ipsum diam cursus lorem, ut rhoncus neque nulla in mi. Aenean commodo nibh vitae enim ultricies, id finibus erat mollis. Proin lobortis, arcu et sodales pellentesque, sapien sapien bibendum elit, sit amet porta mi leo et augue.</p>
  372.  
  373. <p>Vestibulum tristique nec nisl eget lobortis. Aliquam ut volutpat mauris, vitae ornare sem. Donec tincidunt congue est, at pharetra libero pharetra non. Duis efficitur lorem eget suscipit sollicitudin. Nulla ultricies iaculis felis, sit amet euismod lacus consectetur sed.</p>
  374.  
  375. <p>Vestibulum non congue nisl. Donec tincidunt ultrices arcu, eget euismod erat convallis vestibulum. Mauris dolor purus, iaculis at ligula eu, imperdiet venenatis ante.</p>
  376.  
  377. <!-- THIRD POST -->
  378. <div class="everypostafterfirstpost">
  379. <div id="iconholder">
  380. <img class="icon" src="https://i.imgur.com/XZRFxfA.png" width="90px"></div>
  381. <h3 id="subheader">Header</h3>
  382. <p><b>Date: 5/19/2022</b></p>
  383. <p>Praesent auctor, mauris nec porta tempor, ipsum diam cursus lorem, ut rhoncus neque nulla in mi. Aenean commodo nibh vitae enim ultricies, id finibus erat mollis. Proin lobortis, arcu et sodales pellentesque, sapien sapien bibendum elit, sit amet porta mi leo et augue.</p>
  384.  
  385. <p>Vestibulum tristique nec nisl eget lobortis. Aliquam ut volutpat mauris, vitae ornare sem. Donec tincidunt congue est, at pharetra libero pharetra non. Duis efficitur lorem eget suscipit sollicitudin. Nulla ultricies iaculis felis, sit amet euismod lacus consectetur sed.</p>
  386.  
  387. <p>Vestibulum non congue nisl. Donec tincidunt ultrices arcu, eget euismod erat convallis vestibulum. Mauris dolor purus, iaculis at ligula eu, imperdiet venenatis ante.</p>
  388. </div>
  389. </div>
  390. </div>
  391. </div>
  392.  
  393. </div>
  394. </div>
  395.  
  396. <div id="credit"><a href="https://repth.neocities.org/index.html">©repth</a></div>
  397.  
  398. </body>
  399.  
  400. </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!