API tools faq
paste
Advertisement
repth

Theme 35

repth
May 17th, 2022
2,506
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.71 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 35</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=Sacramento&display=swap" rel="stylesheet">
  11.  
  12. <style>
  13.  
  14. body{
  15. background-image: url('https://i.imgur.com/A6xdkX0.jpg');
  16. margin: 0px;
  17. color: #613f3f;
  18. overflow-x: hidden;
  19. }
  20.  
  21. #topborder{
  22. background-image: url('https://i.imgur.com/0vWS1mg.png');
  23. background-repeat: repeat-x;
  24. height: 73px;
  25. width: 100vw;
  26. position: fixed;
  27. top: 0px;
  28. z-index: 3;
  29. }
  30.  
  31. #bottomborder{
  32. background-image: url('https://i.imgur.com/lv5pt9F.png');
  33. background-repeat: repeat-x;
  34. height: 73px;
  35. width: 100vw;
  36. position: fixed;
  37. bottom: 0px;
  38. z-index: 3;
  39. }
  40.  
  41. #all{
  42. background-color: #aaa;
  43. width: 800px;
  44. margin: 0 auto;
  45. }
  46.  
  47. #side{
  48. width: 175px;
  49. margin-top: 135px;
  50. float: left;
  51. position: fixed;
  52. }
  53.  
  54. #profile{
  55. background-color: #fefefe;
  56. border-radius: 10px;
  57. width: 145px;
  58. margin-bottom: 25px;
  59. padding: 15px;
  60. }
  61.  
  62. #pfp{
  63. background-image: url('https://i.imgur.com/ZlderV2.png');
  64. width: 145px;
  65. height: 145px;
  66. border-radius: 10px;
  67. opacity: 0.9;
  68. }
  69.  
  70. #profiletext{
  71. margin: 0px;
  72. letter-spacing: 1px;
  73. text-align: justify;
  74. font-size: 14px;
  75. padding: 15px 5px 0px 5px;
  76. color: #856d6d;
  77. }
  78.  
  79. #nav{
  80. background-color: #fefefe;
  81. width: 175px;
  82. border-radius: 10px;
  83. position: relative;
  84. }
  85.  
  86. #navheader{
  87. border-bottom: 3px solid #cdb5b5;
  88. margin: 0px;
  89. line-height: 10px;
  90. padding-left: 5px;
  91. padding-top: 15px;
  92. font-family: 'Sacramento', cursive;
  93. color: #578EA3;
  94. }
  95.  
  96. #navbow{
  97. background-image: url('https://i.imgur.com/2IzDDAz.png');
  98. background-size: 100%;
  99. background-repeat: no-repeat;
  100. width: 65px;
  101. height: 41px;
  102. position: absolute;
  103. right: 9px;
  104. top: 14px;
  105. z-index: 2;
  106. }
  107.  
  108. ul{
  109. margin: 0px;
  110. padding: 13px 10px 10px 16px;
  111. }
  112.  
  113. li{
  114. list-style-type: none;
  115. margin: -10px;
  116. letter-spacing: -1px;
  117. font-size: 18px;
  118. }
  119.  
  120. #main{
  121. width: 605px;
  122. float: right;
  123. position: relative;
  124. }
  125.  
  126. #title{
  127. font-family: 'Sacramento', Cursive;
  128. border-bottom: 3px solid #cdb5b5;
  129. line-height: 15px;
  130. width: 600px;
  131. margin: 0px;
  132. color: #578EA3;
  133. background-color: #fefefe;
  134. position: absolute;
  135. top: 74px;
  136. border-radius: 10px 10px 0px 0px;
  137. padding-left: 5px;
  138. padding-top: 22px;
  139. }
  140.  
  141. #bow{
  142. background-image: url('https://i.imgur.com/GOQMFVP.png');
  143. background-size: 100%;
  144. background-repeat: no-repeat;
  145. width: 160px;
  146. height: 102px;
  147. position: absolute;
  148. right: 45px;
  149. top: 81px;
  150. z-index: 2;
  151. }
  152.  
  153. #content{
  154. background-color: #fefefe;
  155. position: absolute;
  156. top: 114px;
  157. width: 575px;
  158. padding: 15px 15px 73px 15px;
  159. }
  160.  
  161. .entry{
  162. width: 575px;
  163. }
  164.  
  165. .entryhead{
  166. width: 575px;
  167. height: 80px;
  168. position: relative;
  169. border-bottom: 1px dotted #613f3f;
  170. padding-bottom: 5px;
  171. }
  172.  
  173. .icon{
  174. width: 80px;
  175. opacity: 0.9;
  176. }
  177.  
  178. .date{
  179. position: absolute;
  180. bottom: 0;
  181. left: 85px;
  182. padding-bottom: 5px;
  183. }
  184.  
  185. .date p{
  186. margin: 0px;
  187. letter-spacing: -1px;
  188. color: #856d6d;
  189. }
  190.  
  191. .datecolor{
  192. color: #578EA3;
  193. }
  194.  
  195. .header{
  196. position: absolute;
  197. bottom: 0;
  198. right: 0;
  199. }
  200.  
  201. .header h2{
  202. margin: 0px;
  203. font-family: 'Sacramento', cursive;
  204. line-height: 23px;
  205. font-size: 26px;
  206. color: #578EA3;
  207. }
  208.  
  209. .text{
  210. text-align: justify;
  211. margin-top: 5px;
  212. letter-spacing: 1px;
  213. color: #856d6d;
  214. }
  215.  
  216. a{
  217. text-decoration: none;
  218. color: #613f3f;
  219. font-family: 'Sacramento', Cursive;
  220. }
  221.  
  222. a:visited{
  223. color: #613f3f;
  224. }
  225.  
  226. a:hover{
  227. font-style: italic;
  228. }
  229.  
  230. a:active{
  231. font-style: italic;
  232. font-weight: bold;
  233. }
  234.  
  235. ::-webkit-scrollbar{
  236. width: 6px;
  237. }
  238.  
  239. ::-webkit-scrollbar-track{
  240. background-color: #578EA3;
  241. }
  242.  
  243. ::-webkit-scrollbar-thumb{
  244. background-color: #cdb5b5;
  245. }
  246.  
  247. #credit{
  248. font-size: 12px;
  249. position: fixed;
  250. bottom: 70px;
  251. right: 0;
  252. }
  253.  
  254. </style>
  255.  
  256. </head>
  257.  
  258. <body>
  259.  
  260. <div id="topborder"></div>
  261. <div id="bottomborder"></div>
  262.  
  263. <div id="all">
  264.  
  265. <div id="side">
  266.  
  267. <div id="profile">
  268. <div id="pfp"></div> <!-- see "#pfp" in CSS, 145x145px -->
  269. <p id="profiletext">Lorem ipsum dolor sit amet, conse ctetur adip iscing elit. Donec a auctor ex.</p>
  270. </div>
  271.  
  272. <div id="nav">
  273. <div id="navbow"></div>
  274. <h2 id="navheader">Nav Here</h2>
  275.  
  276. <ul>
  277. <li>♡ <a href="URL HERE">Link 1</a></li>
  278. <li>♡ <a href="URL HERE">Link 2</a></li>
  279. <li>♡ <a href="URL HERE">Link 3</a></li>
  280. <li>♡ <a href="URL HERE">Link 4</a></li>
  281. <li>♡ <a href="URL HERE">Link 5</a></li>
  282. <li>♡ <a href="URL HERE">Link 6</a></li>
  283. <li>♡ <a href="URL HERE">Link 7</a></li>
  284. </ul>
  285. </div>
  286.  
  287. </div>
  288.  
  289. <div id="main">
  290.  
  291. <div id="bow"></div>
  292.  
  293. <h1 id="title">Title Here</h1>
  294.  
  295. <div id="content">
  296.  
  297. <!-- ENTRY START -->
  298.  
  299. <div class="entry">
  300.  
  301. <div class="entryhead">
  302. <div class="icon">
  303. <img src="https://i.imgur.com/oOPh2V0.jpg" width="80px">
  304. </div>
  305. <div class="date">
  306. <p><span class="datecolor"><b>Date:</b></span> 05/16/2022</p>
  307. <p><span class="datecolor"><b>Mood:</b></span> jkklajfejsjf</p>
  308. </div>
  309. <div class="header">
  310. <h2>Header Here</h2>
  311. </div>
  312. </div>
  313.  
  314. <div class="text">
  315. <p style="margin:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae urna porttitor, dapibus risus eget, efficitur massa. Mauris orci dui, fringilla id urna quis, cursus rhoncus lorem. Cras blandit ultricies lectus.</p>
  316.  
  317. <p>Aenean elementum metus felis, in condimentum ante luctus et. Pellentesque ultrices diam nec fringilla ullamcorper. Morbi porta sem ac eros sollicitudin dignissim. Vestibulum tincidunt enim quis rutrum consequat.</p>
  318.  
  319. <p>In pulvinar in eros ullamcorper sollicitudin. Phasellus imperdiet vulputate sapien nec eleifend.</p>
  320. </div>
  321.  
  322. </div>
  323.  
  324. <!-- ENTRY END -->
  325.  
  326.  
  327. <!-- ENTRY START -->
  328.  
  329. <div class="entry">
  330.  
  331. <div class="entryhead">
  332. <div class="icon">
  333. <img src="https://i.imgur.com/oOPh2V0.jpg" width="80px">
  334. </div>
  335. <div class="date">
  336. <p><span class="datecolor"><b>Date:</b></span> 05/16/2022</p>
  337. <p><span class="datecolor"><b>Mood:</b></span> jkklajfejsjf</p>
  338. </div>
  339. <div class="header">
  340. <h2>Header Here</h2>
  341. </div>
  342. </div>
  343.  
  344. <div class="text">
  345. <p style="margin:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae urna porttitor, dapibus risus eget, efficitur massa. Mauris orci dui, fringilla id urna quis, cursus rhoncus lorem. Cras blandit ultricies lectus.</p>
  346.  
  347. <p>Aenean elementum metus felis, in condimentum ante luctus et. Pellentesque ultrices diam nec fringilla ullamcorper. Morbi porta sem ac eros sollicitudin dignissim. Vestibulum tincidunt enim quis rutrum consequat.</p>
  348.  
  349. <p>In pulvinar in eros ullamcorper sollicitudin. Phasellus imperdiet vulputate sapien nec eleifend.</p>
  350. </div>
  351.  
  352. </div>
  353.  
  354. <!-- ENTRY END -->
  355.  
  356.  
  357. <!-- ENTRY START -->
  358.  
  359. <div class="entry">
  360.  
  361. <div class="entryhead">
  362. <div class="icon">
  363. <img src="https://i.imgur.com/oOPh2V0.jpg" width="80px">
  364. </div>
  365. <div class="date">
  366. <p><span class="datecolor"><b>Date:</b></span> 05/16/2022</p>
  367. <p><span class="datecolor"><b>Mood:</b></span> jkklajfejsjf</p>
  368. </div>
  369. <div class="header">
  370. <h2>Header Here</h2>
  371. </div>
  372. </div>
  373.  
  374. <div class="text">
  375. <p style="margin:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae urna porttitor, dapibus risus eget, efficitur massa. Mauris orci dui, fringilla id urna quis, cursus rhoncus lorem. Cras blandit ultricies lectus.</p>
  376.  
  377. <p>Aenean elementum metus felis, in condimentum ante luctus et. Pellentesque ultrices diam nec fringilla ullamcorper. Morbi porta sem ac eros sollicitudin dignissim. Vestibulum tincidunt enim quis rutrum consequat.</p>
  378.  
  379. <p>In pulvinar in eros ullamcorper sollicitudin. Phasellus imperdiet vulputate sapien nec eleifend.</p>
  380. </div>
  381.  
  382. </div>
  383.  
  384. <!-- ENTRY END -->
  385.  
  386.  
  387. <!-- ENTRY START -->
  388.  
  389. <div class="entry">
  390.  
  391. <div class="entryhead">
  392. <div class="icon">
  393. <img src="https://i.imgur.com/oOPh2V0.jpg" width="80px">
  394. </div>
  395. <div class="date">
  396. <p><span class="datecolor"><b>Date:</b></span> 05/16/2022</p>
  397. <p><span class="datecolor"><b>Mood:</b></span> jkklajfejsjf</p>
  398. </div>
  399. <div class="header">
  400. <h2>Header Here</h2>
  401. </div>
  402. </div>
  403.  
  404. <div class="text">
  405. <p style="margin:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae urna porttitor, dapibus risus eget, efficitur massa. Mauris orci dui, fringilla id urna quis, cursus rhoncus lorem. Cras blandit ultricies lectus.</p>
  406.  
  407. <p>Aenean elementum metus felis, in condimentum ante luctus et. Pellentesque ultrices diam nec fringilla ullamcorper. Morbi porta sem ac eros sollicitudin dignissim. Vestibulum tincidunt enim quis rutrum consequat.</p>
  408.  
  409. <p>In pulvinar in eros ullamcorper sollicitudin. Phasellus imperdiet vulputate sapien nec eleifend.</p>
  410. </div>
  411.  
  412. </div>
  413.  
  414. <!-- ENTRY END -->
  415.  
  416.  
  417. </div>
  418.  
  419. </div>
  420.  
  421. </div>
  422.  
  423. <div id="credit"><a href="https://repth.neocities.org/index.html">©repth</a></div>
  424.  
  425. </body>
  426.  
  427. </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!