API tools faq
paste
Sky_Blue

THE WEB IS YOURS layout

Sky_Blue
Apr 2nd, 2023 (edited)
1,633
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.33 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5.  
  6. <!-- viewport - for mobile screens -->
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
  9. <!-- favicon & title -->
  10. <link rel="shortcut icon" href="FAVICON LINK HERE">
  11. <title>TITLE HERE</title>
  12.  
  13. <!-- fonts -->
  14. <link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500&display=swap" rel="stylesheet">
  15. </head>
  16. <style>
  17. :root{
  18. --lace: var(--black); /* change pink to the color you want */
  19. /* options are: pink, black, blue, yellow, purple */
  20. --pink: url("https://files.catbox.moe/bsr34l.png");
  21. --black: url("https://files.catbox.moe/stv815.png");
  22. --blue: url("https://files.catbox.moe/pweyk3.png");
  23. --yellow: url("https://files.catbox.moe/r3ub8h.png");
  24. --purple: url("https://files.catbox.moe/acs8xi.png");
  25. }
  26.  
  27. /****** fonts ******/
  28. @font-face {
  29. font-family: scratch boys;
  30. src: url(https://files.catbox.moe/1sb02z.ttf);
  31. }
  32.  
  33. @font-face {
  34. font-family: cerl;
  35. src: url(https://dl.dropbox.com/s/vaz4fe5yzk1uiku/CHERL___.TTF);
  36. }
  37.  
  38. @font-face {
  39. font-family: Adorable Doll;
  40. src: url(https://dl.dropbox.com/s/plehp3a9xbtct7n/AdorableDoll.ttf);
  41. }
  42.  
  43. @font-face{
  44. font-family: vintage;
  45. src: url(https://files.catbox.moe/nwq0cf.ttf);
  46. }
  47.  
  48. /****** scrollbar ******/
  49. ::-webkit-scrollbar{
  50. display:none;
  51. }
  52.  
  53. /****** select hightlight ******/
  54. ::selection {
  55. background: #7053d0;
  56. color:white;
  57. }
  58.  
  59. ::-moz-selection {
  60. background: #7053d0;
  61. color:white;
  62. }
  63.  
  64. /****** body ******/
  65. body {
  66. background-color:#ffffff;
  67. background-image:url();
  68. background-repeat: repeat;
  69. background-position: 0 0;
  70. background-attachment: fixed;
  71. color:#7053d0; /* default font color */
  72. font-family:ms gothic; /* default font */
  73. font-size:20px; /* default font size */
  74. padding:10px;
  75. background-image: linear-gradient(#7053d0 1px, transparent 1px), linear-gradient(to right, #7053d0 1px, #c3bcfa 1px);
  76. background-size: 20px 20px;
  77. }
  78.  
  79. /****** links ******/
  80. a{
  81. text-decoration: none;
  82. color:#fff;
  83. transition:0.3s;
  84. text-shadow: -1px 0 #7053d0, 0 1px #7053d0, 1px 0 #7053d0, 0 -1px #7053d0;
  85. }
  86.  
  87. a:hover{
  88. cursor:help;
  89. transition:0.3s;
  90. color:#7053d0;
  91. text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
  92. }
  93.  
  94. /****** wrappers ******/
  95. #wrapper{
  96. animation: fadeEffect 1s;
  97. margin: auto;
  98. width:fit-content;
  99. width: -moz-fit-content;
  100. top: 50%;
  101. left: 50%;
  102. transform: translate(-50%, -50%);
  103. position:absolute;
  104. }
  105.  
  106. @keyframes fadeEffect {
  107. from {opacity: 0;}
  108. to {opacity: 1;}
  109. }
  110.  
  111. /****** containers ******/
  112. .container {
  113. display: grid;
  114. margin: auto;
  115. width:1000px;
  116. grid-template-columns: 250px 1fr 1fr 250px;
  117. grid-template-rows: 250px 250px 0.1fr;
  118. gap: 10px 10px;
  119. grid-auto-flow: row;
  120. grid-template-areas:
  121. "icon main main links"
  122. "updates main main box"
  123. "footer footer footer footer";
  124. border-width:10px;
  125. border-style:solid;
  126. border-image: var(--lace) 8 fill round;
  127. }
  128.  
  129. .main {
  130. grid-area: main;
  131. border-width:10px;
  132. border-style:solid;
  133. border-image: var(--lace) 8 fill round;
  134. padding:10px;
  135. overflow:auto;
  136. }
  137.  
  138. .icon {
  139. grid-area: icon;
  140. border-width:10px;
  141. border-style:solid;
  142. border-image: var(--lace) 8 fill round;
  143. padding:10px;
  144. }
  145.  
  146. .icon img{
  147. width:100%;
  148. display:block;
  149. height:auto;
  150. }
  151.  
  152. .updates {
  153. grid-area: updates;
  154. border-width:10px;
  155. border-style:solid;
  156. border-image: var(--lace) 8 fill round;
  157. padding:10px;
  158. overflow:auto;
  159. line-height:130%;
  160. }
  161.  
  162. .links {
  163. grid-area: links;
  164. border-width:10px;
  165. border-style:solid;
  166. border-image: var(--lace) 8 fill round;
  167. padding:10px;
  168. text-align: center;
  169. display:flex;
  170. flex-direction: column;
  171. justify-content: space-between;
  172. }
  173.  
  174. .box {
  175. grid-area: box;
  176. border-width:10px;
  177. border-style:solid;
  178. border-image: var(--lace) 8 fill round;
  179. padding:10px;
  180. }
  181.  
  182. .footer{
  183. grid-area: footer;
  184. text-align:center;
  185. border-width:10px;
  186. border-style:solid;
  187. border-image: var(--lace) 8 fill round;
  188. }
  189.  
  190. header{
  191. text-align: center;
  192. font-family:Adorable Doll;
  193. font-size:40px;
  194. margin-bottom:10px;
  195. }
  196.  
  197. .cornerimg{
  198. position:absolute;
  199. bottom:0;
  200. right:0;
  201. }
  202.  
  203. .highlight{
  204. background-color:#7053d0;
  205. color:white;
  206. }
  207.  
  208. </style>
  209. <body>
  210.  
  211. <div id="wrapper">
  212.  
  213. <div class="container">
  214.  
  215.  
  216. <div class="main">
  217. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At imperdiet dui accumsan sit. Porttitor massa id neque aliquam vestibulum. Cursus sit amet dictum sit amet justo. Consectetur a erat nam at lectus urna duis. Leo duis ut diam quam nulla porttitor massa. Mi eget mauris pharetra et. At elementum eu facilisis sed. <span class="highlight">Vitae tempus quam pellentesque nec nam aliquam sem et tortor. Sed blandit libero volutpat sed.</span> Ac turpis egestas sed tempus urna. Gravida quis blandit turpis cursus in hac. Sit amet aliquam id diam maecenas ultricies mi eget. Aliquam ultrices sagittis orci a scelerisque. Phasellus egestas tellus rutrum tellus pellentesque eu. Sit amet justo donec enim diam. Arcu bibendum at varius vel pharetra vel turpis. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Volutpat sed cras ornare arcu dui vivamus arcu.<br><br>
  218.  
  219. Neque volutpat ac tincidunt vitae semper quis lectus nulla at. Non odio euismod lacinia at quis risus sed. <span class="highlight">Accumsan lacus vel facilisis volutpat est velit egestas dui. Vulputate sapien nec sagittis aliquam.</span> Id volutpat lacus laoreet non. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Ornare lectus sit amet est. In egestas erat imperdiet sed euismod nisi. Quisque sagittis purus sit amet volutpat consequat. Consectetur purus ut faucibus pulvinar elementum integer enim. Ultrices mi tempus imperdiet nulla. Quam quisque id diam vel quam elementum pulvinar etiam. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat.
  220. </div>
  221.  
  222. <div class="icon">
  223. <img src="https://files.catbox.moe/tuxnn8.jpg">
  224. </div>
  225.  
  226. <div class="updates">
  227. <header>updates</header>
  228. <span class="highlight">4.1.23</span> - weanus<br>
  229. <span class="highlight">3.31.23</span> - hi lol<br>
  230. <span class="highlight">3.30.23</span> - amongla<br>
  231. <span class="highlight">3.29.23</span> - blah<br>
  232. <span class="highlight">3.28.23</span> - lorem ipsum i guess<br>
  233. <span class="highlight">3.27.23</span> - why are you still reading this
  234. </div>
  235.  
  236. <div class="links">
  237. <header>navigation</header>
  238. <a href="https://www.pixiv.net/en/artworks/103742485">one</a>
  239. <a>two</a>
  240. <a>three</a>
  241. <a>four</a>
  242. <a>five</a>
  243. <a>six</a>
  244. </div>
  245.  
  246. <div class="box">
  247. you can put whatever you'd like in here :)
  248. </div>
  249.  
  250. <div class="footer">
  251. template by adilene @ adilene.net
  252. </div>
  253.  
  254. <div class="cornerimg">
  255. <img src="https://files.catbox.moe/ge4sxq.png">
  256. </div>
  257. </div>
  258. </div>
  259.  
  260. </body>
  261. </html>
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!