Advertisement
repth

Theme 18

Oct 30th, 2021
119
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.47 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 18</title>
  7.  
  8. <style>
  9.  
  10. body{
  11. background-color: #e3cfb1;
  12. }
  13.  
  14. #all{
  15. width: 525px;
  16. position: relative;
  17. left: 20px;
  18. top: 10px;
  19. }
  20.  
  21. #container{
  22. width: 525px;
  23. position: absolute;
  24. }
  25.  
  26. #header{
  27. background-image: url('https://i.imgur.com/OXjijM9.png');
  28. background-repeat: no-repeat;
  29. background-position: center center;
  30. background-size: 525px;
  31. width: 525px;
  32. height: 386px;
  33. margin: 0px;
  34. position: absolute;
  35. z-index: 2;
  36. }
  37.  
  38. #title{
  39. text-transform: uppercase;
  40. letter-spacing: 2px;
  41. font-size: 18px;
  42. font-weight: normal;
  43. color: #fff;
  44. text-shadow: 0px 0px 10px #000;
  45. text-align: right;
  46. position: relative;
  47. right: 45px;
  48. }
  49.  
  50. #nav{
  51. text-align: right;
  52. text-transform: uppercase;
  53. text-shadow: 0px 0px 4px #000;
  54. letter-spacing: 2px;
  55. font-size: 13px;
  56. position: relative;
  57. right: 45px;
  58. }
  59.  
  60. #nav ul, li{
  61. list-style-type: none;
  62. padding: 0px;
  63. }
  64.  
  65. a{
  66. text-decoration: none;
  67. color: #867E62;
  68. }
  69.  
  70. a:hover{
  71. color: #88936E;
  72. }
  73.  
  74. #nav a{
  75. text-decoration: none;
  76. color: #fff;
  77. }
  78.  
  79. #nav a:hover{
  80. text-shadow: 0px 0px 10px #fff;
  81. }
  82.  
  83. #box{
  84. width: 440px;
  85. background-color: #fff;
  86. padding: 15px;
  87. text-align: justify;
  88. font-size: 13px;
  89. color: #45443b;
  90. position: relative;
  91. top: 285px;
  92. margin: 0 auto;
  93. }
  94.  
  95. #boxinner{
  96. position: relative;
  97. z-index: 3;
  98. }
  99.  
  100. #box h2{
  101. text-transform: uppercase;
  102. letter-spacing: 2px;
  103. font-size: 13px;
  104. color: #92816C;
  105. }
  106.  
  107. ::-webkit-scrollbar{
  108. width: 8px;
  109. }
  110.  
  111. ::-webkit-scrollbar-track{
  112. background-color: transparent;
  113. }
  114.  
  115. ::-webkit-scrollbar-thumb{
  116. background-color: #45443b;
  117. }
  118.  
  119. #credit{
  120. font-size: 12px;
  121. position: fixed;
  122. bottom: 0;
  123. right: 0;
  124. }
  125.  
  126. </style>
  127.  
  128. </head>
  129.  
  130. <body>
  131.  
  132. <div id="all">
  133.  
  134. <div id="container">
  135.  
  136. <div id="header">
  137.  
  138. <h1 id="title">title here</h1>
  139.  
  140. <div id="nav">
  141.  
  142. <ul>
  143. <li><a href="URL HERE">home</a></li>
  144. <li><a href="URL HERE">about</a></li>
  145. <li><a href="URL HERE">gallery</a></li>
  146. <li><a href="URL HERE">blog</a></li>
  147. <li><a href="URL HERE">other</a></li>
  148. <li><a href="URL HERE">misc</a></li>
  149. </ul>
  150.  
  151. </div>
  152.  
  153. </div>
  154.  
  155. <div id="box">
  156.  
  157. <div id="boxinner">
  158.  
  159. <h2>header</h2>
  160.  
  161. <!-- REPLACE CONTENT BELOW WITH YOUR OWN -->
  162.  
  163. <p><b>Lorem ipsum dolor sit amet</b>, <i>consectetur adipiscing elit</i>. <s>Nullam ut massa eu lacus</s> ullamcorper eleifend sed quis turpis. In egestas augue urna, non varius nibh varius eu. Pellentesque turpis leo, convallis a semper nec, aliquam a massa. Donec sagittis ipsum non orci venenatis finibus. In sodales, orci at scelerisque accumsan, purus eros iaculis lectus, volutpat malesuada lectus risus ac odio. Nunc vestibulum finibus mi sit amet vulputate. Fusce in purus vel dolor interdum pulvinar. Ut tempor ac orci nec porta. Curabitur eleifend erat nec facilisis tincidunt.</p>
  164.  
  165. <p><a href="">Aenean tempor</a> magna et neque tristique, in fermentum tellus vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla efficitur venenatis cursus. Nunc dolor elit, interdum rutrum sollicitudin eu, pharetra eu dui. Phasellus nibh sapien, porttitor vel gravida eget, sodales eu odio. Duis in luctus neque. Morbi ligula mauris, gravida sit amet fringilla a, venenatis non sapien. Phasellus eget est eleifend, sodales leo quis, egestas libero.</p>
  166.  
  167. <!-- END CONTENT -->
  168.  
  169. </div>
  170.  
  171. </div>
  172.  
  173. </div>
  174.  
  175. </div>
  176.  
  177. <div id="credit"><a href="https://repth.neocities.org/index.html">@Repth</a></div>
  178.  
  179. </body>
  180.  
  181. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement