API tools faq
paste
repth

Theme 3

repth
Aug 29th, 2021
700
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.16 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 3</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=Fuggles&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=Mali:wght@500&display=swap" rel="stylesheet">
  15.  
  16. <style type="text/css">
  17.  
  18. html{
  19. height: 100%;
  20. }
  21.  
  22. body{
  23. background-image: url('https://i.imgur.com/CZh3SQC.png');
  24. height: 100%;
  25. overflow-x: hidden;
  26. color: #696950;
  27. font-family: 'Mali', cursive;
  28. }
  29.  
  30. #container{
  31. background-color: #769e52;
  32. margin: 0 auto;
  33. width: 1000px;
  34. height: 90vh;
  35. margin-top: 30px;
  36. padding: 5px;
  37. border: 1px solid black;
  38. }
  39.  
  40. a {
  41. text-decoration: none;
  42. color: #4a4a38;
  43. }
  44.  
  45. a:visited{
  46. color: #4a4a38;
  47. }
  48.  
  49. a:hover{
  50. color: #4a4a38;
  51. }
  52.  
  53. ::-webkit-scrollbar {
  54. width: 5px;
  55. }
  56.  
  57. ::-webkit-scrollbar-track {
  58. width: 5px;
  59. }
  60.  
  61. ::-webkit-scrollbar-thumb {
  62. background-color: #F26D56;
  63. }
  64.  
  65. ::-webkit-scrollbar-thumb:hover {
  66. background-color: #F26D56;
  67. }
  68.  
  69. #sidebarleft{
  70. float: left;
  71. width: 200px;
  72. border: 1px solid #000;
  73. text-align: center;
  74. background-color: #EEEECD;
  75. height: 97.3%;
  76. padding: 10px 5px 5px 5px;
  77. background-image: url('https://i.imgur.com/LNOMncW.png');
  78. text-shadow: 0.5px 0.5px 0px #fff;
  79. color: #4a4a38;
  80. }
  81.  
  82. #middle{
  83. float: left;
  84. width: 554px;
  85. border: 1px solid #000;
  86. margin: 0px 5px 0px 5px;
  87. text-align: center;
  88. background-color: #EEEECD;
  89. height: 98%;
  90. padding: 5px;
  91. background-image: url('https://i.imgur.com/LNOMncW.png');
  92. }
  93.  
  94. #sidebarright{
  95. background-image: url('https://i.imgur.com/LNOMncW.png');
  96. float: left;
  97. width: 200px;
  98. border: 1px solid #000;
  99. text-align: center;
  100. background-color: #EEEECD;
  101. height: 97.3%;
  102. padding: 10px 5px 5px 5px;
  103. text-shadow: 0.5px 0.5px 0px #fff;
  104. }
  105.  
  106. #content{
  107. background-color: #eeeecd;
  108. border: 1px solid black;
  109. margin: 0 auto;
  110. height: 71%;
  111. width: 95%;
  112. padding: 10px;
  113. overflow: scroll;
  114. overflow-x: hidden;
  115. }
  116.  
  117. #other{
  118. background-color: #EEEECD;
  119. border: 1px solid black;
  120. width: 95%;
  121. margin: 0 auto;
  122. padding: 10px;
  123. height: 21%;
  124. margin-top: 5px;
  125. overflow: scroll;
  126. overflow-x: hidden;
  127. }
  128.  
  129. ul, li{
  130. list-style-type: none;
  131. padding-left: 20px;
  132. text-align: left;
  133. }
  134.  
  135. .list{
  136. margin: 0 auto;
  137. width: 125px;
  138. }
  139.  
  140. #miscbox{
  141. text-align: center;
  142. border: 1px solid black;
  143. height:120px;
  144. width: 145px;
  145. margin: 0 auto;
  146. overflow: scroll;
  147. overflow-x: hidden;
  148. margin-bottom: 10px;
  149. padding: 5px;
  150. }
  151.  
  152.  
  153. </style>
  154.  
  155.  
  156. </head>
  157. <body>
  158.  
  159. <div id="container">
  160.  
  161. <div id="sidebarleft">
  162.  
  163. <img src="https://i.imgur.com/lRJj5OV.gif" style="width:85%;"><img>
  164.  
  165. <h3 style="margin:5px 0px 0px 0px;">Welcome</h3>
  166. <p style="margin:0px 0px 10px 0px;">Nulla eu posuere nisi. Suspendisse potenti. Ut ut volutpat mauris, eget rhoncus massa. Quisque lacinia eu risus quis iaculis. Morbi tempus nisl vitae metus tristique, ut varius risus eleifend.</p>
  167.  
  168. <img src="https://i.imgur.com/e7f47Fp.gif"><img><br>
  169. <p style="margin:5px;">Sed mauris justo, vulputate eget egestas a, blandit eu augue.</p>
  170. <img src="https://i.imgur.com/qRB0iN1.gif"><img>
  171.  
  172. </div>
  173.  
  174. <div id="middle">
  175.  
  176. <div id="content">
  177.  
  178. <h1 style="color:#9AB677;margin:0px;font-family:'Fuggles', cursive;font-size:52px;">This is a Header</h1>
  179.  
  180. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra urna non sodales efficitur. Aenean eget vulputate velit. Nam et finibus lectus. Donec condimentum tincidunt lacinia. Sed rhoncus lobortis eros. Duis gravida tellus massa, quis faucibus ex commodo at.</p>
  181.  
  182. <p>Duis ultrices et arcu ac interdum. Mauris pellentesque mauris eget quam facilisis, id rhoncus sapien eleifend. Vivamus blandit, mauris eget placerat volutpat, nisl est tristique metus, a semper diam nulla gravida nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  183.  
  184. <p>Nulla eu posuere nisi. Suspendisse potenti. Ut ut volutpat mauris, eget rhoncus massa. Quisque lacinia eu risus quis iaculis. Morbi tempus nisl vitae metus tristique, ut varius risus eleifend. Sed mauris justo, vulputate eget egestas a, blandit eu augue. Aliquam erat volutpat.</p>
  185.  
  186. <p>Nulla eu posuere nisi. Suspendisse potenti. Ut ut volutpat mauris, eget rhoncus massa. Quisque lacinia eu risus quis iaculis. Morbi tempus nisl vitae metus tristique, ut varius risus eleifend. Sed mauris justo, vulputate eget egestas a, blandit eu augue. Aliquam erat volutpat.</p>
  187.  
  188. <p>Sed non dapibus velit. Etiam vestibulum tortor eget maximus condimentum. Nunc eu tincidunt elit. Suspendisse dolor est, tincidunt non accumsan a, elementum sit amet erat. Phasellus quis turpis nulla. Donec condimentum mauris quis ex accumsan consequat. Integer eros quam, ultricies in interdum a, dictum vitae massa. Maecenas eu urna consequat, condimentum purus et, vestibulum lectus. Cras mattis ullamcorper sapien, nec efficitur erat lacinia et.</p>
  189.  
  190. </div>
  191.  
  192. <div id="other">
  193.  
  194. <h2 style="color:#9AB677;margin:5px 0px 0px 0px;font-family:'Fuggles', cursive;font-size:42px;">Header</h2>
  195.  
  196. <p style="margin:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra urna non sodales efficitur. Aenean eget vulputate velit. Nam et finibus lectus. Donec condimentum tincidunt lacinia. Sed rhoncus lobortis eros.</p>
  197.  
  198. <p>Nulla eu posuere nisi. Suspendisse potenti. Ut ut volutpat mauris, eget rhoncus massa. Quisque lacinia eu risus quis iaculis. Morbi tempus nisl vitae metus tristique, ut varius risus eleifend. Sed mauris justo, vulputate eget egestas a, blandit eu augue. Aliquam erat volutpat.</p>
  199.  
  200. </div>
  201.  
  202. </div>
  203.  
  204. <div id="sidebarright">
  205.  
  206. <h2 style="margin:0;">Navigate</h2>
  207.  
  208. <div class="list">
  209. <ul>
  210.  
  211. <li style="background-image:url('https://i.imgur.com/arNeXBB.png');background-repeat: no-repeat;"><a href="">Home</a></li>
  212. <li style="background-image:url('https://i.imgur.com/arNeXBB.png');background-repeat: no-repeat;"><a href="">About</a></li>
  213. <li style="background-image:url('https://i.imgur.com/arNeXBB.png');background-repeat: no-repeat;"><a href="">Blog</a></li>
  214. <li style="background-image:url('https://i.imgur.com/arNeXBB.png');background-repeat: no-repeat;"><a href="">Misc</a></li>
  215. <li style="background-image:url('https://i.imgur.com/arNeXBB.png');background-repeat: no-repeat;"><a href="">Etc..</a></li>
  216.  
  217. </ul>
  218. </div>
  219.  
  220. <img src="https://i.imgur.com/buXqoMP.gif" style="width:100%;"><img>
  221.  
  222. <div class="list">
  223. <ul>
  224.  
  225. <li style="background-image:url('https://i.imgur.com/arNeXBB.png');background-repeat: no-repeat;"><a href="">Misc link 1</a></li>
  226. <li style="background-image:url('https://i.imgur.com/arNeXBB.png');background-repeat: no-repeat;"><a href="">Misc link 2</a></li>
  227. <li style="background-image:url('https://i.imgur.com/arNeXBB.png');background-repeat: no-repeat;"><a href="">Misc link 3</a></li>
  228. <li style="background-image:url('https://i.imgur.com/arNeXBB.png');background-repeat: no-repeat;"><a href="">Misc link 4</a></li>
  229. <li style="background-image:url('https://i.imgur.com/arNeXBB.png');background-repeat: no-repeat;"><a href="">Etc..</a></li>
  230.  
  231. </ul>
  232. </div>
  233.  
  234. <img src="https://i.imgur.com/buXqoMP.gif" style="width:100%;"><img>
  235.  
  236. <div id="miscbox">
  237.  
  238. <p style="margin:0">Nulla eu posuere nisi. Suspendisse potenti. Ut ut volutpat mauris, eget rhoncus massa. Quisque lacinia eu risus quis iaculis. Morbi tempus nisl vitae metus tristique, ut varius risus eleifend. Sed mauris justo, vulputate eget egestas a, blandit eu augue. Aliquam erat volutpat.</p>
  239.  
  240. </div>
  241.  
  242. <img src="https://i.imgur.com/1HTWphx.gif"><img> <img src="https://i.imgur.com/Mt4iG9J.png"><img> <img src="https://i.imgur.com/A5tWuyJ.jpg"><img>
  243. <img src="https://i.imgur.com/hkNJoUO.png"><img>
  244.  
  245. </div>
  246.  
  247. <br style="clear: left;" /> <!-- don't delete this or theme will break -->
  248.  
  249. </div>
  250.  
  251. </body>
  252. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!