API tools faq
paste
sylphthm

maiki page

sylphthm
Nov 4th, 2018 (edited)
1,820
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.44 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. PAGE 001 — MAIKI (REVAMP)
  6. © engelboy 2020
  7.  
  8. please make sure you have read and understand
  9. my terms of use. note that all my work is
  10. licensed under creative commons.
  11.  
  12. terms of use — engelthm.tumblr.com/tou
  13. credit — engelthm.tumblr.com/cred
  14.  
  15. directions for use in code.
  16.  
  17. ENJOY <3
  18.  
  19. -->
  20.  
  21.  
  22. <head>
  23. <title>{Title}</title>
  24. <link rel="shortcut icon" href="{Favicon}">
  25.  
  26.  
  27. <!-- fonts + icons -->
  28.  
  29. <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
  30. <!-- tutorial for changing the font here: https://www.w3schools.com/howto/howto_google_fonts.asp -->
  31.  
  32.  
  33. <style type="text/css">
  34.  
  35. /* VARIABLES — EDIT THIS */
  36.  
  37. :root {
  38.  
  39. --background: #F3F4FB; /* background color */
  40. --content-bg: #FFF; /* container background color */
  41. --text: #060606; /* text color of content */
  42. --link: #3556C7; /* link colors */
  43. --link-hover: #17B5A6; /* link colors */
  44. --borders: #D8DAE7; /* border color */
  45. --title: #D8DAE7; /* accent and title color */
  46.  
  47. --font: 'DM Sans', sans-serif; /* font */
  48. --text-size: 14px; /* text size */
  49. --border-radius: 10px; /* how curved the borders are */
  50.  
  51. }
  52.  
  53.  
  54. /* general */
  55.  
  56. body {
  57. font-family: var(--font);
  58. font-size: var(--text-size);
  59. font-weight: 400;
  60. text-decoration: none;
  61. line-height: 150%;
  62. overflow-x: hidden;
  63. color: var(--text);
  64. background-color: var(--background);
  65. }
  66.  
  67. a {
  68. color: var(--link);
  69. box-shadow: inset 0 -.1em 0 0 var(--borders);
  70. text-decoration: none;
  71. transition-duration: 0.3s;
  72. -moz-transition-duration: 0.3s;
  73. -webkit-transition-duration: 0.3s;
  74. -o-transition-duration: 0.3s;
  75. -ms-transition-duration: 0.3s;
  76. }
  77.  
  78. a:hover {
  79. color: var(--link-hover);
  80. text-decoration: none;
  81. transition-duration: 0.3s;
  82. -moz-transition-duration: 0.3s;
  83. -webkit-transition-duration: 0.3s;
  84. -o-transition-duration: 0.3s;
  85. -ms-transition-duration: 0.3s;
  86. }
  87.  
  88. blockquote {
  89. padding-left: 10px;
  90. border-left: 2px solid var(--borders);
  91. }
  92.  
  93. h2 { margin: 0 0 5px; }
  94. #info h3 { font-weight: 400; }
  95. h1, h3, h4, h5 { margin: 20px 0 5px; }
  96. b, strong { font-weight: 700; }
  97. ul { list-style: none;}
  98. ul li:before { content: "•"; padding-right: 5px; }
  99.  
  100. * {
  101. -webkit-animation: fadein 2s;
  102. -moz-animation: fadein 2s;
  103. -ms-animation: fadein 2s;
  104. -o-animation: fadein 2s;
  105. animation: fadein 2s;
  106. }
  107.  
  108.  
  109. /* content */
  110.  
  111. .container {
  112. position: fixed;
  113. top: 50%;
  114. left: 50%;
  115. transform: translate(-50%, -50%);
  116. width: 50%;
  117. height: 500px;
  118. border-radius: var(--border-radius);
  119. border: 3px solid var(--borders);
  120. background-color: var(--content-bg);
  121. overflow: scroll;
  122. z-index: 100;
  123. }
  124.  
  125. .title {
  126. width: 100%;
  127. height: 50px;
  128. text-align: center;
  129. font-weight: bold;
  130. line-height: 50px;
  131. text-transform: uppercase;
  132. letter-spacing: 3px;
  133. color: var(--title);
  134. border-bottom: 3px solid var(--borders);
  135. }
  136.  
  137. .content {
  138. display: flex;
  139. flex-direction: row-reverse;
  140. align-items: flex-start;
  141. padding: 25px;
  142. }
  143.  
  144. #info {
  145. margin: 0 7px 0 25px;
  146. width: 100%;
  147. }
  148.  
  149. #info img {
  150. width: 100%;
  151. height: auto;
  152. object-fit: cover;
  153. border-radius: var(--border-radius);
  154. border: 4px solid var(--borders);
  155. }
  156.  
  157. #social a {
  158. text-decoration: none;
  159. padding: 10px 15px;
  160. margin: 0 5px;
  161. line-height: 375%;
  162. box-shadow: none;
  163. border-radius: var(--border-radius);
  164. border: 2px solid var(--title);
  165. color: var(--content-bg);
  166. background-color: var(--title);
  167. }
  168.  
  169. #social a:hover {
  170. text-decoration: none;
  171. border: 2px solid var(--title);
  172. color: var(--link);
  173. background-color: var(--background);
  174. }
  175.  
  176.  
  177. /* mobile display */
  178.  
  179. @media screen and (max-width: 1000px) {
  180.  
  181. .container {
  182. width: 65%;
  183. height: 400px;
  184. }
  185.  
  186. }
  187.  
  188. @media screen and (max-width: 800px) {
  189.  
  190. .content {
  191. display: flex;
  192. flex-direction: column;
  193. width: 80%;
  194. height: 500px!important;
  195. }
  196.  
  197. #info { margin: 0 0 25px 0; }
  198. #info img { width: 100%; height: auto; }
  199.  
  200. }
  201.  
  202.  
  203. /* extras */
  204.  
  205. * { cursor: url(https://i.imgur.com/dHusUiR.png),auto }
  206. a:hover { cursor: url(https://i.imgur.com/ZM41vky.png),progress!important }
  207.  
  208. ::-webkit-scrollbar { display: none; }
  209.  
  210. ::-moz-selection {
  211. background: var(--borders); /* highlight background */
  212. color: var(--text); /* highlight text */
  213. }
  214. ::selection {
  215. background: var(--borders); /* highlight background */
  216. color: var(--text); /* highlight text */
  217. }
  218.  
  219. iframe.tmblr-iframe {
  220. z-index: 99999999999999!important;
  221. top: 25px!important;
  222. right: 25px!important;
  223. opacity: 0.0!important;
  224. padding-right: 50px!important;
  225. /* remove this for light controls */
  226. filter: invert(1) contrast(150%);
  227. -webkit-filter: invert(1) contrast(150%);
  228. -o-filter: invert(1) contrast(150%);
  229. -moz-filter: invert(1) contrast(150%);
  230. -ms-filter: invert(1) contrast(150%);
  231. /* to here */
  232. transform: scale(0.45);
  233. transform-origin: 100% 0;
  234. -webkit-transform: scale(0.45);
  235. -webkit-transform-origin: 100% 0;
  236. -o-transform: scale(0.45);
  237. -o-transform-origin: 100% 0;
  238. -moz-transform: scale(0.45);
  239. -moz-transform-origin: 100% 0;
  240. -ms-transform: scale(0.45);
  241. -ms-transform-origin: 100% 0;
  242. transition-duration: 0.3s;
  243. -moz-transition-duration: 0.3s;
  244. -webkit-transition-duration: 0.3s;
  245. -o-transition-duration: 0.3s;
  246. -ms-transition-duration: 0.3s;
  247. }
  248.  
  249. iframe.tmblr-iframe:hover {
  250. opacity: 0.5!important;
  251. transition-duration: 0.3s;
  252. -moz-transition-duration: 0.3s;
  253. -webkit-transition-duration: 0.3s;
  254. -o-transition-duration: 0.3s;
  255. -ms-transition-duration: 0.3s;
  256. }
  257.  
  258. @keyframes fadein {
  259. from { opacity: 0; }
  260. to { opacity: 1; }
  261. }
  262. @-moz-keyframes fadein {
  263. from { opacity: 0; }
  264. to { opacity: 1; }
  265. }
  266. @-webkit-keyframes fadein {
  267. from { opacity: 0; }
  268. to { opacity: 1; }
  269. }
  270. @-ms-keyframes fadein {
  271. from { opacity: 0; }
  272. to { opacity: 1; }
  273. }
  274. @-o-keyframes fadein {
  275. from { opacity: 0; }
  276. to { opacity: 1; }
  277. }
  278.  
  279.  
  280. /* corner elements, do not touch credit */
  281.  
  282. svg {
  283. width: 20px;
  284. height: auto;
  285. stroke-width: 1.5px;
  286. stroke: var(--link);
  287. transition-duration: 0.3s;
  288. -moz-transition-duration: 0.3s;
  289. -webkit-transition-duration: 0.3s;
  290. -o-transition-duration: 0.3s;
  291. -ms-transition-duration: 0.3s;
  292. }
  293.  
  294. svg:hover {
  295. stroke: var(--link-hover);
  296. transition-duration: 0.3s;
  297. -moz-transition-duration: 0.3s;
  298. -webkit-transition-duration: 0.3s;
  299. -o-transition-duration: 0.3s;
  300. -ms-transition-duration: 0.3s;
  301. }
  302.  
  303. .back {
  304. position: fixed;
  305. top: 25px;
  306. left: 25px;
  307. box-shadow: none;
  308. }
  309.  
  310. .controls {
  311. position: fixed;
  312. top: 25px;
  313. right: 25px;
  314. box-shadow: none;
  315. }
  316.  
  317. .cred {
  318. position: fixed;
  319. bottom: 25px;
  320. right: 25px;
  321. box-shadow: none;
  322. }
  323.  
  324.  
  325. </style>
  326. </head>
  327.  
  328. <body>
  329. <div class="container">
  330.  
  331. <div class="title"> <!-- title in top bar -->
  332.  
  333. maiki_pg.zip
  334.  
  335. </div>
  336. <div class="content">
  337.  
  338. <span id="info">
  339. <!-- img url should go between "" after src= -->
  340.  
  341. <img src="https://i.imgur.com/B6gpLUm.jpg" />
  342.  
  343. <!-- personal info -->
  344.  
  345. <h3>
  346. <b>Name&nbsp;</b> your name <br>
  347. <b>Pronouns&nbsp;</b> pronouns <br>
  348. <b>Birthday&nbsp;</b> a date <br>
  349. <b>Star sign&nbsp;</b> a sun sign <br>
  350. </h3>
  351.  
  352. </span>
  353. <span id="about">
  354.  
  355. <!-- top quote, remove it if you want -->
  356. <h2>
  357.  
  358. & The Painted Blue
  359.  
  360. </h2>
  361.  
  362.  
  363. <!-- first section title -->
  364. <h3> About </h3>
  365.  
  366. <!-- first section content -->
  367. Here is where you want to put your description. <i>italics</i> look like that, <b>bold text</b> is something that you can also write with, maybe try something <u>underlined</u>, or a <a href="URL">link</a>. There's also <small>small text</small> and slightly <big>larger text</big>.
  368. <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam.</blockquote>
  369. And this is what a list looks like:
  370. <ul>
  371. <li>Quis nostrud exercitation
  372. <li>Ullamco laboris nisi
  373. <li>Duis aute irure dolor
  374. </ul>
  375. In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  376.  
  377.  
  378. <!-- second section title -->
  379. <h3> Links </h3>
  380.  
  381. <b> Group </b>&emsp;
  382. <a href="url">index</a>&nbsp;
  383. <a href="url">contact</a>&nbsp;
  384. <a href="url">link</a>&nbsp;
  385. <a href="url">submit</a>&nbsp;
  386. <a href="url">archive</a>&nbsp;
  387.  
  388. <br>
  389.  
  390. <b> Group </b>&emsp;
  391. <a href="url">link</a>&nbsp;
  392. <a href="url">link</a>&nbsp;
  393. <a href="url">link</a>&nbsp;
  394. <a href="url">a long link</a>&nbsp;
  395. <a href="url">link</a>&nbsp;
  396.  
  397.  
  398. <span id="social">
  399.  
  400. <!-- third section title -->
  401. <h3> Social </h3>
  402.  
  403. <a href="url">Instagram</a>
  404. <a href="url">Twitter</a>
  405. <a href="url">Pinterest</a>
  406. <a href="url">Spotify</a>
  407. <a href="url">Goodreads</a>
  408. <a href="url">Ko-fi</a>
  409.  
  410. </span></span>
  411.  
  412.  
  413. </div>
  414. </div>
  415.  
  416.  
  417. <!-- corner elements -->
  418.  
  419. <div class="controls"><svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="hamburgerIconTitle" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M6 7L18 7M6 12L18 12M6 17L18 17"/></svg></div>
  420.  
  421. <a class="back" href="/" title="Index"><svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="arrowLeftIconTitle" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M9 6l-6 6 6 6"/><path d="M21 12H4"/><path stroke-linecap="round" d="M3 12h1"/></svg></a>
  422.  
  423.  
  424. <!-- credit - DO NOT TOUCH -->
  425.  
  426. <a class="cred" target="_blank" href="https://engelthm.tumblr.com/" title="From an angel."><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="codeAltIconTitle" stroke-linecap="round" stroke-linejoin="round"> <path d="M7 8L3 12L7 16"/><path d="M17 16L21 12L17 8"/><path d="M9 19.5L14.5 5"/></svg></a>
  427.  
  428.  
  429. <!-- scripts -->
  430.  
  431. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  432. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  433. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  434. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  435. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  436.  
  437.  
  438. </body>
  439. </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!