API tools faq
paste
Advertisement
repth

Theme 23

repth
Nov 7th, 2021 (edited)
728
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.67 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 22</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=Orelega+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=Roboto+Slab&display=swap" rel="stylesheet">
  15.  
  16. <style>
  17.  
  18. body{
  19. background-color: #e3d1ee;
  20. color: #44394a;
  21. }
  22.  
  23. #all{
  24. width: 720px;
  25. }
  26.  
  27. #left{
  28. width: 500px;
  29. float: left;
  30. }
  31.  
  32. #right{
  33. width: 200px;
  34. float: right;
  35. }
  36.  
  37. #leftheader{
  38. width: 500px;
  39. height: 397px;
  40. background-image: url('https://i.imgur.com/0G9hRKR.png');
  41. background-repeat: no-repeat;
  42. position: relative;
  43. }
  44.  
  45. #lefttitle{
  46. text-align: right;
  47. position: absolute;
  48. bottom: 0px;
  49. right: 0px;
  50. }
  51.  
  52. #lefttitle h1{
  53. margin: 0px;
  54. color: #fff;
  55. font-weight: normal;
  56. font-size: 36px;
  57. font-family: 'Orelega One', serif;
  58. }
  59.  
  60. #righttitle{
  61. text-align: right;
  62. }
  63.  
  64. #righttitle h1{
  65. margin: 0px;
  66. color: #fff;
  67. font-weight: normal;
  68. font-family: 'Orelega One', serif;
  69. }
  70.  
  71. #leftcontent{
  72. padding: 15px;
  73. background-color: #fff;
  74. border-radius: 10px;
  75. font-size: 12px;
  76. text-align: justify;
  77. font-family: 'Roboto Slab', serif;
  78. }
  79.  
  80. #leftcontent h2{
  81. margin: 0px;
  82. text-align: left;
  83. font-weight: normal;
  84. font-size: 12px;
  85. text-transform: uppercase;
  86. color: #c0b1c9;
  87. }
  88.  
  89. #rightcontent{
  90. padding: 15px;
  91. background-color: #fff;
  92. border-radius: 10px;
  93. text-align: center;
  94. font-size: 12px;
  95. font-family: 'Roboto Slab', serif;
  96. }
  97.  
  98. #rightcontent h2{
  99. text-transform: uppercase;
  100. font-weight: normal;
  101. font-size: 12px;
  102. margin: 0px;
  103. text-align: right;
  104. color: #b89aaa;
  105. border-bottom: 2px dotted #b89aaa;
  106. }
  107.  
  108. #rightcontent p{
  109. text-align: justify;
  110. }
  111.  
  112. #rightcontent ul{
  113. margin: 4px;
  114. }
  115.  
  116. #rightcontent ul, li{
  117. list-style-type: none;
  118. padding-left: 0px;
  119. letter-spacing: 1px;
  120. text-transform: uppercase;
  121. }
  122.  
  123. a{
  124. text-decoration: none;
  125. color: #FF006F;
  126. }
  127.  
  128. a:hover{
  129. color: #b89aaa;
  130. }
  131.  
  132. #credit a{
  133. color: #b89aaa;
  134. }
  135.  
  136. #credit a:hover{
  137. color: #FF006F;
  138. }
  139.  
  140. ::-webkit-scrollbar{
  141. width: 8px;
  142. }
  143.  
  144. ::-webkit-scrollbar-track{
  145. background-color: transparent;
  146. }
  147.  
  148. ::-webkit-scrollbar-thumb{
  149. background-color: #b89aaa;
  150. }
  151.  
  152. #credit{
  153. font-size: 13px;
  154. position: fixed;
  155. bottom: 0;
  156. right: 0;
  157. font-family: 'Garamond', serif;
  158. }
  159.  
  160. </style>
  161.  
  162. </head>
  163.  
  164. <body>
  165.  
  166. <div id="all">
  167.  
  168. <div id="left">
  169.  
  170. <div id="leftheader">
  171. <div id="lefttitle"><h1>title here</h1></div>
  172. </div>
  173.  
  174. <div id="leftcontent">
  175.  
  176. <h2>header here</h2>
  177.  
  178. <p>Vivamus massa arcu, tempor in dapibus sit amet, vehicula quis ante. Sed felis orci, varius vitae diam ut, suscipit gravida nulla. Aliquam elementum gravida interdum. Sed dictum in arcu sit amet aliquet. Nullam egestas odio in pulvinar faucibus. Suspendisse consectetur enim efficitur elit elementum, in pharetra felis aliquam. Aliquam sed urna dictum, aliquam orci vitae, tempor nisl. Ut et purus quis nisi fringilla vehicula quis at nunc.</p>
  179.  
  180. <p>Etiam scelerisque placerat commodo. Integer elementum, lectus a varius ultricies, orci augue vulputate velit, id sodales lectus neque nec nibh. Vestibulum ut nisl augue. Aenean sit amet suscipit mauris. Fusce ut egestas sapien. Ut blandit dolor sit amet nisl condimentum, suscipit tristique leo iaculis.</p>
  181.  
  182. <p>Pellentesque vitae condimentum turpis. Suspendisse euismod et arcu id sollicitudin. Duis elementum massa erat, ut volutpat orci rhoncus id. Integer malesuada aliquam orci a lacinia. Sed congue nibh ut dignissim cursus. Morbi finibus diam lorem, et congue tortor tristique auctor. Cras in sodales nibh. Donec dapibus ac lacus ac maximus. Maecenas feugiat interdum vehicula. Vivamus at molestie est.</p>
  183.  
  184. <p>Aliquam erat volutpat. Maecenas blandit luctus lorem eleifend finibus. Vivamus luctus sagittis rutrum. Vestibulum mollis turpis eget eros vehicula eleifend. Integer sit amet leo ultrices, imperdiet est sit amet, lobortis erat. Sed eget aliquam dui. Duis in odio sed ex lobortis rhoncus. Curabitur maximus non lectus eu cursus. Donec sagittis, tellus a congue luctus.</p>
  185.  
  186. </div>
  187.  
  188. </div>
  189.  
  190. <div id="right">
  191.  
  192. <div id="righttitle"><h1>title here</h1></div>
  193.  
  194. <div id="rightcontent">
  195.  
  196. <h2>welcome</h2>
  197.  
  198. <p>Aliquam erat volutpat. Maecenas blandit luctus lorem eleifend finibus. Vivamus luctus sagittis rutrum. Vestibulum mollis turpis eget eros vehicula eleifend. Integer sit amet leo ultrices, imperdiet est sit amet, lobortis erat. Sed eget aliquam dui.</p>
  199.  
  200. <h2>links</h2>
  201.  
  202. <ul>
  203. <li><a href="">home</a></li>
  204. <li><a href="">about</a></li>
  205. <li><a href="">gallery</a></li>
  206. <li><a href="">blog</a></li>
  207. <li><a href="">links</a></li>
  208. <li><a href="">other</a></li>
  209. <li><a href="">misc</a></li>
  210. </ul>
  211.  
  212. <h2>more links</h2>
  213.  
  214. <ul>
  215. <li><a href="">home</a></li>
  216. <li><a href="">about</a></li>
  217. <li><a href="">gallery</a></li>
  218. <li><a href="">blog</a></li>
  219. <li><a href="">links</a></li>
  220. <li><a href="">other</a></li>
  221. <li><a href="">misc</a></li>
  222. </ul>
  223.  
  224. <h2>Other</h2>
  225.  
  226. <p>Vitae condimentum turpis. Suspendisse euismod et arcu id sollicitudin. Duis elementum massa erat, ut volutpat orci rhoncus id. Integer malesuada aliquam orci a lacinia. Sed congue nibh ut dignissim cursus. Morbi finibus diam lorem, et congue tortor tristique auctor. Cras in sodales nibh. Donec dapibus ac lacus ac maximus. Maecenas feugiat interdum vehicula. Vivamus at molestie est.</p>
  227.  
  228. </div>
  229.  
  230. </div>
  231.  
  232. </div>
  233.  
  234. <div id="credit"><a href="https://repth.neocities.org/index.html">©repth</a></div>
  235.  
  236. </body>
  237.  
  238. </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!