API tools faq
paste
Advertisement
repth

Theme 2

repth
Aug 28th, 2021
817
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.75 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 2</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=Cute+Font&display=swap" rel="stylesheet">
  11.  
  12. <style>
  13.  
  14. html{
  15. height: 100%;
  16. }
  17.  
  18. body{
  19. height: 100%;
  20. background-color: #AEA8D9;
  21. font-family: 'Cute Font', cursive;
  22. background-image: url('https://i.imgur.com/lbIvJYZ.png');
  23. }
  24.  
  25. #container{
  26. width: 800px;
  27. border: 3px outset #e1dbf1;
  28. margin: 0 auto;
  29. height: 93.1vh;
  30. background-color: #AEA8D9;
  31. }
  32.  
  33. #header{
  34. margin: 5px;
  35. }
  36.  
  37. #header h1{
  38. background-color: #8b7ead;
  39. margin: 0px;
  40. color: #fff;
  41. padding: 0px 0px 0px 5px;
  42. font-size: 25px;
  43. background-image: url('https://i.imgur.com/aJaHnVi.png');
  44. background-repeat: no-repeat;
  45. background-position: top right;
  46. background-size: 13%;
  47. }
  48.  
  49. #header h3{
  50. margin: 0px;
  51. font-size: 20px;
  52. padding-left: 5px;
  53. color: #5a5667;
  54. display: inline;
  55. }
  56.  
  57. #sidebar{
  58. float: left;
  59. width: 175px;
  60. background-color: #FFFFA5;
  61. border: 1.5px solid #b9b981;
  62. text-align: center;
  63. margin-left: 5px;
  64. margin-right: 0px;
  65. height: 78.5vh;
  66. color: #5a5667;
  67. font-size: 32px;
  68. }
  69.  
  70. .listimage{
  71. width: 100px;
  72. }
  73.  
  74. #content{
  75. clear: right;
  76. background-color: #fbfbf2;
  77. padding: 15px;
  78. height: 74.6vh;
  79. margin-right: 5px;
  80. overflow: scroll;
  81. overflow-y: overlay;
  82. overflow-x: hidden;
  83. color: #5a5667;
  84. }
  85.  
  86. #content h2{
  87. margin: 0px;
  88. font-size: 32px;
  89. color: #706b81;
  90. }
  91.  
  92. #content p{
  93. font-size: 24px;
  94. }
  95.  
  96. #sidebar ul{
  97. list-style: none;
  98. padding-left: 0px;
  99. line-height: 45px;
  100. }
  101.  
  102. #footer{
  103. background-color: #8b7ead;
  104. margin-left: 5px;
  105. margin-right: 5px;
  106. margin-bottom: 5px;
  107. padding: 3px 3px 3px 5px;
  108. font-size: 17px;
  109. color: #fff;
  110. }
  111.  
  112. ::-webkit-scrollbar{
  113. width: 10px;
  114. }
  115.  
  116. ::-webkit-scrollbar-track{
  117.  
  118. }
  119.  
  120. ::-webkit-scrollbar-thumb{
  121. background: #8b7ead;
  122. }
  123.  
  124. ::-webkit-scrollbar-thumb:hover{
  125. background: #827da6;
  126. }
  127.  
  128. a{
  129. color: #ec80d6;
  130. }
  131.  
  132. a:visited{
  133. color: #ec80d6;
  134. }
  135.  
  136. a:hover{
  137. color: #8B7EAD;
  138. }
  139.  
  140. </style>
  141.  
  142. </head>
  143. <body>
  144.  
  145. <div id="container">
  146.  
  147. <div id="header">
  148. <h1>Welcome</h1>
  149. <h3>File</h3><h3>Edit</h3><h3>Options</h3><h3>Help</h3>
  150. </div>
  151.  
  152. <div id="sidebar">
  153. <ul>
  154. <li><a href="URL HERE"><img class="listimage" src="https://i.imgur.com/jSwyxc8.png" title="Link 1"><img></a></li>
  155. <li><a href="URL HERE"><img class="listimage" src="https://i.imgur.com/jSwyxc8.png" title="Link 2"><img></a></li>
  156. <li><a href="URL HERE"><img class="listimage" src="https://i.imgur.com/jSwyxc8.png" title="Link 3"><img></a></li>
  157. <li><a href="URL HERE"><img class="listimage" src="https://i.imgur.com/jSwyxc8.png" title="Link 4"><img></a></li>
  158. </ul>
  159. </div>
  160.  
  161. <div id="content">
  162.  
  163. <h2>This is a Header</h2>
  164. <p style="margin-top:0px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vulputate lorem. Maecenas ut dignissim arcu. Donec volutpat vehicula facilisis. Proin ut pulvinar eros, at elementum neque. Mauris eu facilisis magna, sit amet ultrices lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi accumsan ante tortor, non tempor nunc malesuada in. Mauris tempor ac ex eu consequat. Proin urna metus, feugiat sit amet congue scelerisque, malesuada luctus augue. Donec sodales rhoncus odio, nec interdum justo sodales vitae. Donec sed nulla mi.</p>
  165.  
  166. <img style="width:500px;display:block;margin:0 auto;border:1px solid #ec80d6" src="https://i.imgur.com/SepfRw8.jpg"><img>
  167. <p style="margin:0px;text-align:center">Here's an image</p>
  168.  
  169. <p>Vivamus eget finibus ex. Curabitur eu sapien velit. Nunc purus velit, elementum a dignissim in, scelerisque eu lectus. Mauris viverra hendrerit tellus, sit amet euismod mauris euismod ut. Nunc egestas eu lacus id elementum. Suspendisse luctus mi sem, non pharetra erat feugiat ut. In ligula nulla, tincidunt eu sapien non, scelerisque mollis mauris.</p>
  170.  
  171. <p><a href="">Here's a link</a></p>
  172.  
  173. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vulputate lorem. Maecenas ut dignissim arcu. Donec volutpat vehicula facilisis. Proin ut pulvinar eros, at elementum neque. Mauris eu facilisis magna, sit amet ultrices lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi accumsan ante tortor, non tempor nunc malesuada in. Mauris tempor ac ex eu consequat. Proin urna metus, feugiat sit amet congue scelerisque, malesuada luctus augue. Donec sodales rhoncus odio, nec interdum justo sodales vitae. Donec sed nulla mi. Integer tortor lacus, mollis at dolor ac, rutrum luctus libero.</p>
  174.  
  175. <p>Vivamus eget finibus ex. Curabitur eu sapien velit. Nunc purus velit, elementum a dignissim in, scelerisque eu lectus. Mauris viverra hendrerit tellus, sit amet euismod mauris euismod ut. Nunc egestas eu lacus id elementum. Suspendisse luctus mi sem, non pharetra erat feugiat ut. In ligula nulla, tincidunt eu sapien non, scelerisque mollis mauris.</p>
  176.  
  177. </div>
  178.  
  179. <div id="footer"><p style="margin:0px">©footer 2021</p></div>
  180.  
  181. </div>
  182.  
  183. </body>
  184. </html>
  185.  
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!