API tools faq
paste
alicescreed

002 — DITTO

alicescreed
Dec 2nd, 2023
1,746
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.41 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <link rel="shortcut icon" href="{Favicon}">
  4. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  5. <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
  6.  
  7. <!-- 002 DITTO muse page by anahilation
  8. thanks for using my page! i hope you enjoy.
  9. please don't remove credit or claim as your own. -->
  10.  
  11. <title>{title}</title>
  12. <head>
  13.  
  14. <style type="text/css">
  15.  
  16. @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;800&display=swap');
  17.  
  18.  
  19.  
  20. body {
  21. background-color: #f5eded;
  22. letter-spacing: 0px;
  23. font-family: 'Work Sans', sans-serif;
  24. color: #3f3434;
  25. font-size: 9pt;
  26. }
  27.  
  28. #container {
  29. margin: 0 auto;
  30. width: 700px;
  31. padding: 50px;
  32. position: float;
  33. }
  34.  
  35. a {
  36. text-decoration: none;
  37. color: #000;
  38. transition-duration: 0.6s;
  39. -moz-transition-duration: 0.6s;
  40. -webkit-transition-duration: 0.6s;
  41. -o-transition-duration: 0.6s;
  42. }
  43.  
  44. a:hover {
  45. color: #ff8484;
  46. transition-duration: 0.6s;
  47. -moz-transition-duration: 0.6s;
  48. -webkit-transition-duration: 0.6s;
  49. -o-transition-duration: 0.6s;
  50. }
  51.  
  52. #box {
  53. border: 1px solid #d9cdcd;
  54. background-color: #fff;
  55. padding: 10px;
  56. width: 750px;
  57. height: 500px;
  58. border-radius: 10px;
  59. }
  60.  
  61. #left {
  62. width: 260px;
  63. height: 490px;
  64. position: fixed;
  65. }
  66.  
  67. #sideinfo {
  68. height: 100px;
  69. width: 250px;
  70. overflow: auto;
  71. text-align: justify;
  72. font-size: 9pt;
  73. }
  74.  
  75. #name {
  76. text-align: center;
  77. font-size: 10pt;
  78. width: 240px;
  79. border-bottom: 1px solid #d9cdcd;
  80. padding: 5px;
  81. transition-duration: 0.6s;
  82. -moz-transition-duration: 0.6s;
  83. -webkit-transition-duration: 0.6s;
  84. -o-transition-duration: 0.6s;
  85. margin-bottom: 5px;
  86. }
  87.  
  88. ::-webkit-scrollbar-thumb:vertical {
  89. background-color: transparent;
  90. height:auto;
  91. }
  92.  
  93. ::-webkit-scrollbar-thumb:horizontal {
  94. background-color: transparent;
  95. height:2px;
  96. }
  97.  
  98. ::-webkit-scrollbar {
  99. height:3px;
  100. width:3px;
  101. background-color: transparent;
  102. }
  103.  
  104. #stats {
  105. margin-top: 10px;
  106. }
  107.  
  108. #middle {
  109. position: fixed;
  110. width: 305px;
  111. height: 490px;
  112. margin-left: 265px;
  113. overflow: auto;
  114. text-align: justify;
  115. }
  116.  
  117.  
  118.  
  119. #right {
  120. height: 490px;
  121. width: 170px;
  122. position: fixed;
  123. margin-left: 580px;
  124. text-align: center;
  125. }
  126.  
  127. #right img {
  128. }
  129.  
  130. #navlinkhub {
  131. margin-top: 10px;
  132. }
  133.  
  134. #navlink {
  135. background-color: #f5eded;
  136. padding: 4px;
  137. text-transform: uppercase;
  138. font-size: 7pt;
  139. margin-bottom: 5px;
  140. transition-duration: 0.6s;
  141. -moz-transition-duration: 0.6s;
  142. -webkit-transition-duration: 0.6s;
  143. -o-transition-duration: 0.6s;
  144. }
  145.  
  146. #navlink:hover {
  147. background-color: transparent;
  148. transition-duration: 0.6s;
  149. -moz-transition-duration: 0.6s;
  150. -webkit-transition-duration: 0.6s;
  151. -o-transition-duration: 0.6s;
  152. }
  153.  
  154. h1 {
  155.  
  156. }
  157.  
  158. h1::first-letter {
  159. color: #ff8484;
  160. font-size: 110%;
  161. }
  162.  
  163. #subhead {
  164. padding: 3px;
  165. border-bottom: 1px solid #d9cdcd;
  166. font-size: 12pt;
  167. margin-bottom: 4px;
  168. }
  169.  
  170. #subhead::first-letter {
  171. color: #ff8484;
  172. font-size: 110%;
  173. font-weight: bold;
  174. }
  175.  
  176. #credit {
  177. right:10px;
  178. bottom:7px;
  179. padding:5px;
  180. font-size:10px;
  181. position:fixed;
  182. text-align: center;
  183. font-style: italic;
  184. letter-spacing: 1px;
  185. border: 1px solid #d9cdcd;
  186. padding: 5px;
  187. background-color: #fff;
  188. font-size: 120%;
  189. margin-bottom: 5px;
  190. transition-duration: 0.6s;
  191. -moz-transition-duration: 0.6s;
  192. -webkit-transition-duration: 0.6s;
  193. -o-transition-duration: 0.6s;
  194. }
  195.  
  196. #credit a {
  197. color: #ff8484;
  198. }
  199.  
  200. </style>
  201.  
  202. </head>
  203.  
  204. <body>
  205.  
  206. <div id="container">
  207.  
  208. <div id="box">
  209.  
  210. <div id="left">
  211. <img src="https://placehold.co/250x350"> <!--MAIN IMAGE HERE-->
  212.  
  213. <div id="stats">
  214.  
  215. <!--EDIT STATS HERE-->
  216.  
  217. <div id="name"> <span class="material-symbols-outlined" style="font-size: 85%; ">person</span> name</div>
  218.  
  219. <div id="name"><span class="material-symbols-outlined" style="font-size: 85%;">cake</span> birthday</div>
  220.  
  221. <div id="name"><span class="material-symbols-outlined" style="font-size: 85%;">home</span> residence</div>
  222.  
  223. <div id="name" style="border-bottom: 0px;"> <span class="material-symbols-outlined" style="font-size: 85%;">work_history</span> occupation</div>
  224.  
  225.  
  226. </div>
  227. </div>
  228.  
  229.  
  230.  
  231. <div id="middle">
  232. <div id="subhead">this is an optional subhead</div> <!--REMOVE THE <div id="subhead">xxx</div> if you don't want this subhead-->
  233. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent magna lacus, egestas at consequat eget, pretium quis quam. Sed gravida, lectus eu tempus mollis, magna mauris vulputate sem, vel luctus nisi arcu non arcu. Suspendisse dolor arcu, venenatis eget sapien nec, laoreet lacinia ligula. Integer facilisis feugiat urna eget feugiat. Etiam ullamcorper metus libero, a ultrices neque ultricies a. Vivamus vel euismod lectus.<p>
  234.  
  235. Praesent malesuada dolor in nisi tristique pharetra. Proin sit amet nunc neque. Nulla porttitor odio et aliquet vulputate. Mauris nec lorem aliquam, pulvinar erat eu, mollis mauris. Donec viverra id lorem at mattis. Suspendisse potenti. Phasellus gravida orci vel est feugiat laoreet. Aliquam erat volutpat.<p>
  236.  
  237. <div id="subhead">this is an optional subhead</div>
  238.  
  239. Proin facilisis laoreet erat id fringilla. Nulla facilisi. Cras vestibulum libero in lectus fermentum sodales. Mauris ultricies eros eu eleifend porta. Phasellus vel pretium ipsum, vitae ullamcorper est. In fermentum vestibulum arcu, et malesuada odio consequat quis. Integer eget dolor vel libero tristique pellentesque. Duis consectetur nisl erat, sit amet laoreet urna consectetur vitae. Phasellus ornare vitae nunc eu finibus. Vestibulum consequat iaculis fringilla. Integer laoreet, purus ut tristique tincidunt, quam ante vulputate arcu, nec aliquet sapien risus non risus. Donec lacinia, tellus vitae iaculis porttitor, leo velit imperdiet eros, sed euismod arcu turpis volutpat felis. <p>
  240.  
  241.  
  242.  
  243. Maecenas in dui venenatis, efficitur eros eu, faucibus urna. Etiam vitae velit ornare, pharetra lacus sit amet, hendrerit tellus. Quisque porta ipsum eget semper mollis. Sed pretium justo ac enim venenatis, sed bibendum magna ultricies. Cras euismod pulvinar lorem, nec dignissim lacus laoreet quis. Vivamus orci velit, accumsan tempor velit vitae, tincidunt aliquet tellus. Nam eget dolor eros. <p>
  244.  
  245.  
  246. Praesent auctor vulputate purus vel mollis. Phasellus scelerisque sem leo, sed ornare nisi consequat nec. Nulla eleifend, nibh a convallis eleifend, mauris eros auctor enim, et rutrum risus elit in diam. Proin vehicula condimentum fringilla. Suspendisse vehicula rhoncus imperdiet. Sed pulvinar consectetur mauris a accumsan. Integer sagittis, tellus eu hendrerit dictum, risus dui rutrum ante, ut placerat ante diam a metus. <p>
  247.  
  248. Praesent varius justo enim, non venenatis lectus congue id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas imperdiet arcu nec metus consequat pharetra. Morbi consectetur metus convallis arcu imperdiet, vitae sodales mi commodo. Etiam pulvinar sit amet risus et ultrices. Sed feugiat viverra augue, viverra rhoncus enim ullamcorper quis. Sed malesuada eros ac ante ultricies, a commodo erat venenatis.<p>
  249. </div>
  250.  
  251.  
  252. <div id="right">
  253.  
  254. <img src="https://placehold.co/170x220"><p> <!--SUB IMAGE HERE-->
  255.  
  256.  
  257. <h1>lorem ipsum dolor sit amet.</h1> <!--QUOTE HERE-->
  258.  
  259.  
  260. <div id="navlinkhub"> <!--DEPENDING ON HOW LONG YOUR QUOTE IS, YOU CAN ADD OR REMOVE LINKS-->
  261.  
  262. <div id="navlink"><a href="/">back to main</a></div>
  263. <div id="navlink"><a href="/">dashboard</a></div>
  264. <div id="navlink"><a href="/">link one</a></div>
  265. <div id="navlink"><a href="/">link two</a></div>
  266. <div id="navlink"><a href="/">link three</a></div>
  267.  
  268. </div>
  269.  
  270. </div>
  271.  
  272.  
  273. </div>
  274.  
  275. </div>
  276.  
  277. <div id="credit">
  278. <a href="https://anahilation.tumblr.com/" title="theme by ana"><span class="material-symbols-outlined">gesture</span></a>
  279. </div>
  280.  
  281.  
  282. </body>
  283.  
  284. </html>
  285.  
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!