repth

Theme 8

Sep 8th, 2021 (edited)
133
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.98 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 8</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=Share&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=IBM+Plex+Sans+Arabic&display=swap" rel="stylesheet">
  15.  
  16. <link rel="preconnect" href="https://fonts.googleapis.com">
  17. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  18. <link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
  19.  
  20. <style>
  21.  
  22. html{
  23. height: 100%;
  24. }
  25.  
  26. body{
  27. height: 100%;
  28. margin: 0px;
  29. padding: 0px;
  30. overflow: hidden;
  31. background-color: #000;
  32. }
  33.  
  34. #all{
  35. height: 698px;
  36. width: 1366px;
  37. }
  38.  
  39. #container{
  40. height: 100%;
  41. width: 100%;
  42. margin: 0px;
  43. }
  44.  
  45. #sidebar{
  46. width: 9.3%;
  47. height: 97.1%;
  48. float: left;
  49. color: #fff;
  50. padding: 10px;
  51. background-color: #000;
  52. text-align: center;
  53. overflow: hidden;
  54. font-size: 29px;
  55. font-family: 'Share', sans-serif;
  56. }
  57.  
  58. #sidebar ul, li{
  59. list-style-type: none;
  60. padding-left: 0px;
  61. }
  62.  
  63. a{
  64. text-decoration: none;
  65. color: #fff;
  66. }
  67.  
  68. a:hover{
  69. color: #97D9E9;
  70. }
  71.  
  72. a:visited{
  73. }
  74.  
  75. #main{
  76. clear: right;
  77. overflow: hidden;
  78. width: 89.2%;
  79. height: 100%;
  80. position: relative;
  81. background-image: url('https://i.imgur.com/ZFxd5SH.png');
  82. background-repeat: no-repeat;
  83. background-position: top left;
  84. background-size: 100% 100%;
  85. }
  86.  
  87. #header{
  88. font-size: 36px;
  89. font-family: 'Share', sans-serif;
  90. }
  91.  
  92. #header h1{
  93. margin: 0px;
  94. padding: 18px 0px 0px 10px;
  95. text-shadow: 3px 1px 2px #481e00;
  96. }
  97.  
  98. #content{
  99. background-color: #fff;
  100. border-left: 5px ridge #C1975E;
  101. border-top: 5px ridge #C1975E;
  102. border-bottom: 5px ridge #81643C;
  103. border-right: 5px ridge #81643C;
  104. width: 700px;
  105. height: 500px;
  106. margin-left: 108px;
  107. margin-top: 28px;
  108. }
  109.  
  110. #contentheader{
  111. background-image: linear-gradient(to right, rgba(13,18,21,1), rgba(38,40,45,1));
  112. color: #fff;
  113. font-family: 'Share', sans-serif;
  114. }
  115.  
  116. #contentheader h3{
  117. padding: 0px 0px 0px 3px;
  118. margin: 0px;
  119. }
  120.  
  121. #innercontent{
  122. padding: 0px 15px 15px 15px;
  123. font-family: 'Varela Round', sans-serif;
  124. font-size: 20px;
  125. color: #130907;
  126. height: 463px;
  127. overflow: scroll;
  128. overflow-x: hidden;
  129. }
  130.  
  131. #footer{
  132. position: absolute;
  133. bottom: 0px;
  134. width: 100%;
  135. background-color: #000;
  136. opacity: 0.5;
  137. color: #fff;
  138. padding-left: 3px;
  139. font-size: 12px;
  140. font-family: 'Share', sans-serif;
  141. }
  142.  
  143. #footer p{
  144. margin: 0px;
  145. }
  146.  
  147. ::-webkit-scrollbar{
  148. width: 8px;
  149. }
  150.  
  151. ::-webkit-scrollbar-track{
  152. background-color: #773D02;
  153. }
  154.  
  155. ::-webkit-scrollbar-thumb{
  156. background-color: #C1975E;
  157. }
  158.  
  159. #credit{
  160. font-size: 12px;
  161. position: fixed;
  162. bottom: 0;
  163. right: 0;
  164. }
  165.  
  166. </style>
  167.  
  168. </head>
  169.  
  170. <body>
  171.  
  172. <div id="all">
  173.  
  174. <div id="container">
  175.  
  176. <div id="sidebar">
  177. <ul>
  178. <li><a href="URL HERE"><img src="https://i.imgur.com/FM4JrM1.png"><img><br>THE WORLD</a></li>
  179. <li><a href="URL HERE"><img src="https://i.imgur.com/WeZ6fmy.png"><img><br>MAILER</a></li>
  180. <li><a href-"URL HERE"><img src="https://i.imgur.com/KkJtAml.png"><img><br>NEWS</a></li>
  181. <li><a href="URL HERE"><img src="https://i.imgur.com/eZGAhVt.png"><img><br>ACCESSORY</a></li>
  182. <li><a href="URL HERE"><img src="https://i.imgur.com/2SMR5ij.png"><img><br>AUDIO</a></li>
  183. <li><a href="URL HERE"><img src="https://i.imgur.com/zKnelZI.png"><img><br>DATA</a></li>
  184. </ul>
  185. </div>
  186.  
  187. <div id="main">
  188.  
  189. <div id="header">
  190. <h1>The World</h1>
  191. </div>
  192.  
  193. <div id="content">
  194. <div id="contentheader">
  195. <h3>HEADER</h3>
  196. </div>
  197.  
  198. <div id="innercontent">
  199. <h3>Title</h3>
  200.  
  201. <!-- replace content below with your own content -->
  202. <p style="clear:left;">
  203. "I've always wanted a litter box like this!" It flushes with water so there is no need to clean it. The sensor picks up the cat's motion and keeps it clean at all times. It is bolted on easily between the human toilet and the sewer, so there is no hassle involved.
  204. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut mi et urna pharetra cursus molestie et augue. Nulla eu ultrices lectus. Aliquam et egestas urna. Pellentesque vitae faucibus magna, vel facilisis lorem. Phasellus quis nisl a eros accumsan interdum. Proin accumsan finibus finibus.
  205.  
  206. <img style="float:right;margin:10px;width:230px;border:1px solid #97D9E9;" src="https://i.imgur.com/VKfwfex.jpg"><img>
  207.  
  208. Suspendisse a consectetur tellus. Morbi aliquet semper pellentesque. Praesent ultricies ac purus in scelerisque. Nunc cursus quam sit amet dolor egestas, elementum malesuada nulla molestie. Etiam turpis leo, vehicula in tempor quis, fermentum non est.</p>
  209.  
  210. <p style="clear:left;">Sed egestas hendrerit erat sed fringilla. Praesent pharetra, lorem ac mollis semper, erat tortor volutpat libero, sed aliquam dolor nulla non erat. Nam auctor luctus ligula sed lobortis. Vivamus lorem urna, vulputate quis arcu id, pretium vehicula dui. Nam ac massa arcu. Morbi sagittis enim in diam pulvinar accumsan.
  211.  
  212. <p>Cras dignissim nisi lobortis tellus molestie malesuada. Fusce imperdiet est turpis, sit amet convallis arcu volutpat in. Donec eu ipsum et dui interdum sagittis. Nunc eget condimentum lorem. Curabitur sit amet lorem id erat ultricies volutpat nec at ante. Proin at nulla nibh. Morbi nibh odio, semper at enim id, ultrices mollis ligula. Cras in purus massa. Phasellus eget sagittis purus. Etiam a turpis ac est tincidunt congue. Aliquam mattis libero felis, eget lobortis neque porttitor eu. Praesent nulla enim, sollicitudin sed velit nec, eleifend semper mauris. Quisque tellus massa, condimentum at ante vitae, venenatis aliquet diam.
  213. </p>
  214. <!-- content end -->
  215. </div>
  216.  
  217. </div>
  218.  
  219. <div id="footer">
  220. <p>footer 2021</p>
  221. </div>
  222.  
  223. </div>
  224.  
  225. <div id="credit"><a href="https://repth.neocities.org/index.html">@Repth</a></div>
  226.  
  227. </div>
  228.  
  229. </div>
  230.  
  231. </body>
  232.  
  233. </html>
Add Comment
Please, Sign In to add comment