API tools faq
paste
Advertisement
repth

Theme 12

repth
Sep 18th, 2021
3,518
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.34 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 12</title>
  7.  
  8. <link href="http://fonts.cdnfonts.com/css/fortyseven-micro-nbp" rel="stylesheet">
  9.  
  10. <style>
  11.  
  12. body{
  13. background-color: #fff7fb;
  14. font-family: 'FortySeven Micro NBP', sans-serif;
  15. }
  16.  
  17. #container{
  18. display: flex;
  19. justify-content: center;
  20. align-items: center;
  21. width: 800px;
  22. margin: 0 auto;
  23. border: 1px solid #ff668a;
  24. padding: 3px;
  25. }
  26.  
  27. #box{
  28. width: 800px;
  29. background-color: #fff7fb;
  30. color: #000;
  31. border: 1px solid #ff668a;
  32. }
  33.  
  34. #header{
  35. margin-bottom: 10px;
  36. padding: 10px;
  37. border-bottom: 1px solid #ff668a;
  38. background-image: linear-gradient(to right, #ff668a, #ffbfce);
  39. color: #fff;
  40. letter-spacing: 3px;
  41. }
  42.  
  43. #header h1{
  44. margin: 0px;
  45. }
  46.  
  47. #side{
  48. float: left;
  49. width: 145px;
  50. padding: 0px 0px 5px 10px;
  51. overflow: hidden;
  52. }
  53.  
  54. .sidebox{
  55. border: 1px solid #ff668a;
  56. margin: 0px 0px 5px 0px;
  57. }
  58.  
  59. .sidecontent{
  60. padding: 0px 0px 0px 5px;
  61. color: #6e5057;
  62. font-size: 17px;
  63. letter-spacing: 1px;
  64. }
  65.  
  66. .sidecontent ul, li{
  67. margin: 0px;
  68. list-style-type: none;
  69. padding-left: 0px;
  70. }
  71.  
  72. a{
  73. text-decoration: none;
  74. color: #ff668a;
  75. }
  76.  
  77. a:visited{
  78. color: #ff668a;
  79. }
  80.  
  81. a:hover{
  82. text-shadow: 0px 0px 2px #78beff;
  83. }
  84.  
  85. #scrollcontainer{
  86. padding: 5px;
  87. }
  88.  
  89. #scrolly{
  90. overflow: scroll;
  91. overflow-x: hidden;
  92. width: 110px;
  93. height:110px;
  94. border: 1px solid #ff668a;
  95. margin: 0 auto;
  96. text-align: center;
  97. }
  98.  
  99. #scrollyheader{
  100. margin: 0px;
  101. border-bottom: 1px dotted #ff668a;
  102. }
  103.  
  104. #main{
  105. float: right;
  106. width: 624px;
  107. overflow: hidden;
  108. padding: 0px 10px 5px 0px;
  109. }
  110.  
  111. .mainboxes{
  112. border: 1px solid #ff668a;
  113. padding: 0px;
  114. margin: 0px 0px 5px 0px;
  115. }
  116.  
  117. .subheader{
  118. background-image: linear-gradient(to right, #ff668a, #ffbfce);
  119. border-bottom: 1px solid #ff668a;
  120. padding: 3px;
  121. color: #fff;
  122. letter-spacing: 3px;
  123. }
  124.  
  125. .subheader h3{
  126. margin: 0px;
  127. }
  128.  
  129. .mainboxescontent{
  130. padding: 0px 15px 0px 15px;
  131. color: #6e5057;
  132. font-size: 17px;
  133. }
  134.  
  135. #footer{
  136. clear: both;
  137. padding: 3px;
  138. border-top: 1px solid #ff668a;
  139. background-image: linear-gradient(to right, #ff668a, #ffbfce);
  140. color: #fff;
  141. font-size: 14px;
  142. }
  143.  
  144. #footer p{
  145. margin: 0px;
  146. }
  147.  
  148. ::-webkit-scrollbar{
  149. width: 8px;
  150. }
  151.  
  152. ::-webkit-scrollbar-track{
  153. background-color: #fff7fb;
  154. }
  155.  
  156. ::-webkit-scrollbar-thumb{
  157. background-color: #ff668a;
  158. }
  159.  
  160. #credit{
  161. font-size: 12px;
  162. position: fixed;
  163. bottom: 0;
  164. right: 0;
  165. }
  166.  
  167. </style>
  168.  
  169. </head>
  170.  
  171. <body>
  172.  
  173. <div id="container">
  174.  
  175. <div id="box">
  176.  
  177. <div id="header"><h1>Welcome</h1></div>
  178.  
  179. <div id="side">
  180.  
  181. <div class="sidebox">
  182.  
  183. <div class="subheader"><h3>Navigate</h3></div>
  184.  
  185. <div class="sidecontent">
  186.  
  187. <!-- LINK BOX 1 -->
  188.  
  189. <ul>
  190. <li><a href="">⊳ Link 1</a></li>
  191. <li><a href="">⊳ Link 2</a></li>
  192. <li><a href="">⊳ Link 3</a></li>
  193. <li><a href="">⊳ Link 4</a></li>
  194. <li><a href="">⊳ Link 5</a></li>
  195. </ul>
  196.  
  197. <!-- END LINK BOX 1 -->
  198.  
  199. </div>
  200. </div>
  201.  
  202. <div class="sidebox">
  203.  
  204. <div class="subheader"><h3>Sub Header</h3></div>
  205.  
  206. <div class="sidecontent">
  207.  
  208. <!-- LINK BOX 2 -->
  209.  
  210. <ul>
  211. <li><a href="">⊳ Link 1</a></li>
  212. <li><a href="">⊳ Link 2</a></li>
  213. <li><a href="">⊳ Link 3</a></li>
  214. <li><a href="">⊳ Link 4</a></li>
  215. <li><a href="">⊳ Link 5</a></li>
  216. </ul>
  217.  
  218. <!-- END LINK BOX 2 -->
  219.  
  220. </div>
  221. </div>
  222.  
  223. <div class="sidebox">
  224.  
  225. <div class="subheader"><h3>Other</h3></div>
  226.  
  227. <div class="sidecontent" id="scrollcontainer">
  228.  
  229. <div id="scrolly">
  230.  
  231. <!-- SCROLLBOX CONTENT -->
  232.  
  233. <p id="scrollyheader">Hello</p>
  234. <div id="scrollycontent" style="padding:5px;">
  235.  
  236. <img src="https://i.imgur.com/PfbykXz.jpg" style="width:100%;"><img>
  237. <img src="https://i.imgur.com/1HTWphx.gif" style="width:100%;"><img>
  238. <img src="https://i.imgur.com/Mt4iG9J.png" style="width:100%;"><img>
  239. <img src="https://i.imgur.com/hOOVOkf.gif" style="width:100%;"><img>
  240.  
  241. <!-- END SCROLLBOX CONTENT -->
  242.  
  243. </div>
  244.  
  245. </div>
  246.  
  247. </div>
  248.  
  249. </div>
  250.  
  251. </div>
  252.  
  253. <div id="main">
  254.  
  255. <div class="mainboxes">
  256.  
  257. <div class="subheader"><h3>Header</h3></div>
  258.  
  259. <div class="mainboxescontent">
  260.  
  261. <!-- REPLACE CONTENT BELOW WITH YOUR OWN -->
  262.  
  263. <p style="clear:right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et orci sit amet nunc fringilla rutrum. Aliquam finibus ipsum nec orci dignissim, id luctus dolor semper. Phasellus dictum mauris ut neque molestie hendrerit. Vestibulum at neque purus.
  264.  
  265. <img src="https://i.imgur.com/bExQthf.gif" style="float:left;margin:5px;"><img>
  266.  
  267. Cras est sapien, ultricies ut vulputate id, pellentesque malesuada arcu. Vestibulum efficitur quam in elit cursus vehicula. Praesent in tellus nisl. Vestibulum a massa lorem. Phasellus placerat velit sed feugiat pharetra.</p>
  268.  
  269. <p>Nulla vel ipsum odio. Integer hendrerit dui id enim porta, in dapibus elit sollicitudin. Vestibulum efficitur quam in elit cursus vehicula. Vestibulum at neque purus. Cras est sapien, ultricies ut vulputate id, pellentesque malesuada arcu.</p>
  270.  
  271. <!-- END CONTENT -->
  272.  
  273. </div>
  274.  
  275. </div>
  276.  
  277. <div class="mainboxes">
  278.  
  279. <div class="subheader"><h3>Header</h3></div>
  280.  
  281. <div class="mainboxescontent">
  282.  
  283. <!-- REPLACE CONTENT BELOW WITH YOUR OWN -->
  284. <p style="clear:left;">Maecenas et imperdiet odio. Ut nec lorem aliquam, maximus diam id, bibendum lorem. Suspendisse sit amet semper justo. Proin venenatis, neque vitae accumsan dignissim, mauris sem feugiat augue, et congue arcu massa eget dui.
  285.  
  286. <img src="https://i.imgur.com/YNX2Ih9.gif" style="float:right;margin:5px;"><img>
  287.  
  288. Sed sit amet purus sapien. Sed porttitor vel enim sit amet aliquam. Aenean ornare nisi et viverra venenatis. Sed at sem nunc. Nulla vel ipsum odio. Integer hendrerit dui id enim porta, in dapibus elit sollicitudin.</p>
  289.  
  290. <p style="clear:left";>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et orci sit amet nunc fringilla rutrum. Aliquam finibus ipsum nec orci dignissim, id luctus dolor semper. Phasellus dictum mauris ut neque molestie hendrerit. Vestibulum at neque purus. Cras est sapien, ultricies ut vulputate id, pellentesque malesuada arcu. Vestibulum efficitur quam in elit cursus vehicula. Praesent in tellus nisl. Vestibulum a massa lorem. Phasellus placerat velit sed feugiat pharetra.</p>
  291.  
  292. <!-- END CONTENT -->
  293.  
  294. </div>
  295.  
  296. </div>
  297.  
  298. </div>
  299.  
  300.  
  301. <div id="footer"><p>Footer 2021</p></div>
  302.  
  303. </div>
  304.  
  305. </div>
  306.  
  307. <div id="credit"><a href="https://repth.neocities.org/index.html">@Repth</a></div>
  308.  
  309. </body>
  310.  
  311. </html>
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!