Advertisement
repth

Theme 22

Nov 5th, 2021
1,184
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.09 KB | None | 0 0
  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. <style>
  9.  
  10. body{
  11. background-color: #49515b;
  12. }
  13.  
  14. #all{
  15. position: absolute;
  16. left: 50%;
  17. top: 50%;
  18. -webkit-transform: translate(-50%, -50%);
  19. transform: translate(-50%, -50%);
  20. width: 410px;
  21. height: 520px;
  22. }
  23.  
  24. #container{
  25. width: 390px;
  26. height: 500px;
  27. background-color: #fff;
  28. padding: 10px;
  29. }
  30.  
  31. #header{
  32. height: 70px;
  33. background-image: url('https://i.imgur.com/eiaqAdT.png');
  34. background-position: top left;
  35. padding: 5px;
  36. position: relative;
  37. }
  38.  
  39. #header h1{
  40. text-transform: uppercase;
  41. font-weight: normal;
  42. color: #fff;
  43. font-size: 15px;
  44. letter-spacing: 3px;
  45. text-shadow: 1px 1px 0px #25272b;
  46. margin: 0px;
  47. position: absolute;
  48. bottom: 0px;
  49. right: 0px;
  50. }
  51.  
  52. #content{
  53. overflow: scroll;
  54. overflow-x: hidden;
  55. height: 377px;
  56. padding: 4px;
  57. text-align: justify;
  58. color: #444951;
  59. margin-bottom: 5px;
  60. margin-top: 5px;
  61. }
  62.  
  63. #content p{
  64. margin-top: 0px;
  65. font-size: 14px;
  66. }
  67.  
  68. #bottom{
  69. height: 23px;
  70. background-image: url('https://i.imgur.com/eiaqAdT.png');
  71. background-position: top left;
  72. }
  73.  
  74. #credit a{
  75. color: #fff;
  76. opacity: 0.5;
  77. text-decoration: none;
  78. }
  79.  
  80. #nav{
  81. font-size: 12px;
  82. text-transform: uppercase;
  83. letter-spacing: 1px;
  84. }
  85.  
  86. #nav a{
  87. color: #fff;
  88. opacity: 0.6;
  89. text-decoration: none;
  90. }
  91.  
  92. #nav a:hover{
  93. color: #fff;
  94. opacity: 1;
  95. }
  96.  
  97. ::-webkit-scrollbar{
  98. width: 6px;
  99. }
  100.  
  101. ::-webkit-scrollbar-track{
  102. background-color: transparent;
  103. }
  104.  
  105. ::-webkit-scrollbar-thumb{
  106. background-color: #434750;
  107. }
  108.  
  109. #credit{
  110. font-size: 13px;
  111. position: fixed;
  112. bottom: 0;
  113. right: 0;
  114. font-family: 'Garamond', serif;
  115. }
  116.  
  117. </style>
  118.  
  119. </head>
  120.  
  121. <body>
  122.  
  123. <div id="all">
  124.  
  125. <div id="container">
  126.  
  127. <div id="header">
  128.  
  129. <div id="nav">
  130.  
  131. <a href="">link</a>
  132. <a href="">link</a>
  133. <a href="">link</a>
  134. <a href="">link</a>
  135. <a href="">link</a>
  136.  
  137. </div>
  138.  
  139. <h1>title here</h1></div>
  140.  
  141. <div id="content">
  142.  
  143. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac felis ultrices, dictum magna at, rhoncus risus. Donec nibh quam, scelerisque at sollicitudin quis, egestas dictum justo. Curabitur mollis ante vitae turpis ornare porta. Phasellus vitae ipsum eget magna placerat accumsan vel imperdiet ex. Praesent non finibus neque. Integer iaculis nunc id dolor suscipit, eget vulputate risus sagittis. Aenean nec aliquet ante. Quisque facilisis dapibus augue sodales viverra. Fusce in nisl velit. Suspendisse augue ante, viverra et sodales volutpat, accumsan vel nisi. Proin sem neque, malesuada non gravida ac, tincidunt at lectus. Vivamus pharetra pharetra feugiat. Mauris ac felis eget sem semper feugiat.</p>
  144.  
  145. <p>Sed quis turpis eros. Fusce aliquet, augue eu egestas mattis, ante erat mattis justo, et bibendum est ligula nec est. Nulla in gravida velit. Fusce at sapien ut lacus pretium cursus eu a dolor. Praesent suscipit finibus sapien ac sagittis. Vestibulum aliquet dignissim sem, id suscipit est porttitor et. Proin dapibus aliquam imperdiet. Fusce non dapibus lectus. In et scelerisque odio.</p>
  146.  
  147. <p>Nulla pharetra scelerisque nisi a posuere. Donec aliquet quis diam ac mattis. Proin tempus pellentesque ligula, a rhoncus enim tincidunt quis. Praesent aliquam sagittis pulvinar. Donec maximus tristique arcu quis accumsan. Sed in quam urna. Pellentesque non ante quam. Aenean euismod lorem diam. Aliquam erat volutpat. Morbi at eros nibh. Praesent dignissim aliquam diam sit amet auctor. Phasellus faucibus massa quis quam blandit fermentum. Fusce auctor, odio ac mollis sagittis, arcu tortor posuere neque, at vulputate odio lectus nec nisl.</p>
  148.  
  149. <p>Sed malesuada, massa id fermentum sodales, metus erat feugiat nunc, ac tincidunt eros nunc sed orci. Phasellus enim velit, convallis sit amet malesuada sed, aliquet eu dui. Integer semper nisl faucibus leo porttitor vulputate. Ut ac sodales magna. Fusce ut varius tortor. Phasellus tristique, nisl et eleifend scelerisque, eros est hendrerit urna, nec elementum sapien nisl nec libero. Aliquam convallis nunc vitae nisl mattis blandit. Fusce volutpat tristique massa, sed congue nibh viverra eget. In venenatis, nibh ullamcorper mollis semper, purus libero gravida libero, eu vehicula sapien lectus vitae est. Vivamus viverra, ligula vel cursus efficitur, lorem ex mollis arcu, non dictum arcu tortor quis nibh. Sed lacinia id mi eget dapibus. In massa felis, malesuada vel ante nec, hendrerit cursus mi.</p>
  150.  
  151. <p>Sed non congue elit, sagittis ornare augue. Nunc porttitor lectus sed sollicitudin rutrum. Duis justo mi, hendrerit sit amet tempor ac, cursus lobortis massa. Praesent purus risus, rutrum ut augue eu, convallis vulputate neque. Praesent nec mauris quis nisi mattis lobortis. Proin placerat nisl sagittis magna convallis fringilla. Curabitur vel mauris ultrices, blandit nibh dapibus, consectetur dui. Nam a mauris est. Etiam vel ipsum condimentum, vestibulum tortor eu, interdum nunc. Curabitur blandit neque a enim aliquet interdum.</p>
  152.  
  153. </div>
  154.  
  155. <div id="bottom"></div>
  156.  
  157. </div>
  158.  
  159. </div>
  160.  
  161. <div id="credit"><a href="https://repth.neocities.org/index.html">@Repth</a></div>
  162.  
  163. </body>
  164.  
  165. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement