API tools faq
paste
HighKingFen

Study of

HighKingFen
Oct 22nd, 2020
163
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.33 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!------- by CRYINGINHTML with the help of CSS-Trick
  4. and the mentorship of panopticonism
  5. --------------->
  6.  
  7. <html lang="en">
  8. <head>
  9. <title>{Title}</title>
  10. <link rel="shortcut icon" href="{Favicon}">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  12. {block:Description}
  13. <meta name="description" content="{MetaDescription}" />
  14. {/block:Description}
  15. <meta charset="utf-8">
  16. <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Playfair+Display+SC:wght@400;700&family=Poiret+One&display=swap" rel="stylesheet">
  17.  
  18. <!-------Meta--------->
  19. <!----Hot Pink
  20. #FFAEBC
  21.  
  22. Tiffany Blue
  23. #A0E7E5
  24.  
  25. Mint
  26. #B4F8C8
  27.  
  28. Yellow
  29. #FBE7C6--->
  30.  
  31. <meta name="if:family" content="1"/>
  32.  
  33.  
  34.  
  35. <style type="text/css">
  36. body {
  37. background-color:white;
  38. font-family: 'Poiret One', cursive;
  39. color:rgb(100,100,90);
  40.  
  41. }
  42.  
  43.  
  44. b{
  45. font-family: 'Playfair Display SC', serif;
  46. color:#A0E7E5;
  47.  
  48.  
  49. }
  50.  
  51. q{
  52. color:#A0E7E5;
  53. position:absolute;
  54. right:calc(15% + 100px);
  55. max-height:30px;
  56. width:450px;
  57. top:25px;
  58. text-align:justify;
  59. }
  60.  
  61. h1{
  62. color:#FFAEBC;
  63. font-family: 'Playfair Display SC', serif;
  64. text-align:center;
  65. text-shadow: 1px 1px 3px black;
  66.  
  67. }
  68.  
  69. ul{
  70. list-style:none;
  71. }
  72.  
  73.  
  74. .title{
  75. color:#B4F8C8;
  76. font-size:50px;
  77. margin-top:5px;
  78. margin-left:calc(15% - 10px);
  79. font-family: 'Playfair Display SC', serif;
  80. text-shadow: 1px 1px 3px black;
  81.  
  82. }
  83.  
  84. #name{
  85. color:#A0E7E5;
  86. font-size:40px;
  87. margin-top:-17px;
  88. margin-left:calc(15% + 30px);
  89. position:absolute;
  90. font-family: 'Dancing Script', cursive;
  91. text-shadow: 1px 1px 3px black;
  92. }
  93.  
  94.  
  95.  
  96. .container{
  97. border:2px #FBE7C6 solid;
  98. width:1200px;
  99. margin-left:auto;
  100. margin-right:auto;
  101. margin-top:40px;
  102. padding:20px;
  103. display:flex;
  104. flex-direction: row;
  105. flex-wrap: wrap;
  106.  
  107. }
  108.  
  109.  
  110. .box{
  111.  
  112.  
  113. }
  114.  
  115.  
  116. #round{
  117. display: inline;
  118. margin: 55px auto;
  119. height: 100%;
  120. width: auto;
  121.  
  122.  
  123. }
  124.  
  125.  
  126. .image-cropper {
  127. width: 200px;
  128. height: 200px;
  129. position: relative;
  130. overflow: hidden;
  131. border-radius: 50%;
  132. margin: 0 auto;
  133. }
  134.  
  135.  
  136. .round-multi img{
  137. width: 150px;
  138. height:auto;
  139. }
  140.  
  141. .image-cropper-multi {
  142. width: 100px;
  143. height: 100px;
  144. position: relative;
  145. overflow: hidden;
  146. border-radius: 50%;
  147. margin: 0 auto;
  148. }
  149.  
  150. #goof{
  151. margin-top:55px;
  152. }
  153.  
  154. #about{
  155. flex-basis: 300px;
  156. }
  157.  
  158. #bio{
  159. overflow-y:scroll;
  160. text-align:justify;
  161. padding:5px;
  162. height:300px;
  163. flex-basis: 300px;
  164. }
  165.  
  166. #one{
  167. color:#B4F8C8;
  168. margin-right:auto;
  169. margin-left:auto;
  170. margin-top:75px;
  171. text-align:center;
  172. flex-basis: 300px
  173.  
  174. }
  175.  
  176. #events{
  177.  
  178. font-size:17px;
  179. margin:0 20px 0 20px;
  180. height:300px;
  181. flex-basis: 350px;
  182. }
  183.  
  184. #events ul{
  185. padding:0;
  186. color:rgb(100,100,90);
  187. }
  188.  
  189. #events li{
  190. margin-left:20%;
  191. }
  192.  
  193. #events a{
  194. color:#A0E7E5;
  195. }
  196.  
  197. #fam{
  198. margin:5px 20px 0 20px;
  199.  
  200. }
  201.  
  202.  
  203. #fam img{
  204. height:80px;
  205. width:80px;
  206. margin:0 5px 0 5px;
  207. overflow:hidden;
  208. object-fit: cover;
  209. filter: grayscale(100%);
  210.  
  211.  
  212. }
  213.  
  214. #fam img:hover{
  215. filter: none;
  216.  
  217. }
  218. /****Corner**/
  219. #image{
  220. height:500px;
  221. bottom:0;
  222. right:0;
  223. position:absolute;
  224. border-radius:0% 100% 0% 100% / 26% 36% 64% 74% ;
  225. }
  226. #flower{
  227. height:500px;
  228. width:400px;
  229. bottom:0;
  230. right:50px;
  231. position:absolute;
  232. border-radius:0% 100% 0% 100% / 26% 36% 64% 74% ;
  233. background-color:#B4F8C8;
  234. z-index:-1;
  235. }
  236.  
  237. #flower2{
  238. height:500px;
  239. width:400px;
  240. bottom:0;
  241. right:0;
  242. position:absolute;
  243. border-radius:15% 100% 15% 100% / 26% 36% 64% 74% ;
  244. background-color:#FFAEBC;
  245. z-index:-1;
  246. }
  247.  
  248. #credit{
  249. position:absolute;
  250. bottom:2px;
  251. left:0;
  252. font-size:10px;
  253.  
  254. }
  255. #credit a{
  256. color:#FFAEBC
  257. font-family: 'Playfair Display SC', serif;
  258. }
  259.  
  260. ::-webkit-scrollbar {
  261. width: 10px;
  262. }
  263.  
  264. ::-webkit-scrollbar-track {
  265. background:transparent;
  266. }
  267. ::-webkit-scrollbar-thumb {
  268. background: #FBE7C650;
  269. }
  270.  
  271. {Custom Css}
  272. </style>
  273. </head>
  274.  
  275. <body>
  276.  
  277. <div class="title">A Study of</div>
  278. <div id="name">Character Name</div> <!---Name of your Character----->
  279.  
  280. <q>Can I just have the best of Fillory, the best of us, of earth, plus the best of those cool movies Todd and I watched. That’s the home I want. That’s what we deserve</q> <!---Quote---->
  281.  
  282. <div class="container">
  283.  
  284. <div id="about" class="box"><!---About----->
  285. <h1>Basic Info</h1>
  286. <ul>
  287. <li><b>Name:</b> Character Name</li>
  288. <li><b>Nickname:</b> Little Pumpkin</li>
  289. <li><b>Age:</b> 23 years old</li>
  290. <li><b>Protrait by:</b> Brittany Curran</li>
  291.  
  292. </ul>
  293. </div>
  294.  
  295. <div id="round" class="box"><div class="image-cropper"><img src="https://64.media.tumblr.com/936433d52643dd44d3ae90da75aca4e0/tumblr_p7av8iZhVr1wd05tno3_250.gif"></div></div> <!----Rounded image---->
  296.  
  297. <div id="bio" class="box"> <!----Bio----->
  298. <h1>Bio</h1>
  299. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quam quisque id diam vel quam. Eget gravida cum sociis natoque penatibus et. Ut tristique et egestas quis ipsum suspendisse ultrices. Aenean pharetra magna ac placerat vestibulum lectus mauris. Urna neque viverra justo nec ultrices dui. Urna et pharetra pharetra massa massa ultricies mi quis hendrerit. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Eget egestas purus viverra accumsan in nisl nisi scelerisque. Cursus in hac habitasse platea. Est sit amet facilisis magna. Ornare arcu odio ut sem nulla pharetra diam sit amet. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Arcu cursus vitae congue mauris.
  300.  
  301. Ullamcorper sit amet risus nullam eget felis eget nunc. Interdum consectetur libero id faucibus. Tempus urna et pharetra pharetra massa massa ultricies mi. Morbi quis commodo odio aenean sed adipiscing. Dis parturient montes nascetur ridiculus mus mauris vitae. Leo urna molestie at elementum. Fermentum odio eu feugiat pretium nibh ipsum consequat. Mauris augue neque
  302. </div>
  303.  
  304.  
  305. <div id="one" class="box"> <!--Quote or Lyrics---->
  306.  
  307. <b>One Line Quote or Lyric</b><br><br>
  308. <b>One Line Quote or Lyric</b><br><br>
  309. <b>One Line Quote or Lyric</b><br><br>
  310.  
  311.  
  312. </div>
  313.  
  314.  
  315.  
  316. <div class="box"><!----Rounded image---->
  317. <div class="round-multi"><div class="image-cropper-multi"><img src="https://64.media.tumblr.com/fde6ecd4c72aaae3fb488e00104ad51f/662001ce2f5af324-5a/s250x400/fdeb95bf7ad1668f6cc185d01f9f6174597dc2da.gif"></div></div>
  318. <br>
  319.  
  320. <div class="round-multi"><div class="image-cropper-multi"><img src="https://64.media.tumblr.com/b36d912a756dff70da55ca583013bfc9/662001ce2f5af324-fb/s540x810/d2d90a1a6bdc5577437ff3d39d4971f0eb415461.gif"></div></div>
  321.  
  322. <br>
  323.  
  324. <div class="round-multi"><div class="image-cropper-multi"><img src="https://64.media.tumblr.com/37eaeeae232a4aa875d2152bcbbc518d/99d3b487d1f94b3b-29/s250x400/5c16bd16f3677af741201789a482bf572f70d53d.gif"></div></div>
  325.  
  326.  
  327. </div>
  328.  
  329. <!----To add more events use this code
  330. <div id="events">
  331. <h3>Life Event</h3>
  332. <hr>
  333. <ul>
  334. <li>ft. Character</li>
  335. <li><a href="URLHERE">Read Here</a></li>
  336. </ul>
  337. </div> <br>
  338. ---->
  339.  
  340. <div id="events" class="box"> <!----Events---->
  341. <h1>Life Events</h1>
  342.  
  343. <ul>
  344. <li><b><a href="URL HERE">Life Event</a> </b>ft Character</li>
  345. <li><b><a href="URL HERE">Life Event</a></b> ft Character</li>
  346. <li><b><a href="URL HERE">Life Event</a> </b>ft Character</li>
  347. <li><b><a href="URL HERE">Life Event</a> </b>ft Character</li>
  348. <li><b><a href="URL HERE">Life Event</a> </b>ft Character</li>
  349. <li><b><a href="URL HERE">Life Event</a> </b>ft Character</li>
  350. <li><b><a href="URL HERE">Life Event</a> </b>ft Character</li>
  351.  
  352. </ul>
  353.  
  354.  
  355.  
  356. </div>
  357.  
  358. <div class="box"><div id="goof" class="image-cropper"><img src="https://64.media.tumblr.com/16dc28a1b05112ae90abfd98fd3c6a16/78202973ff74893e-86/s500x750/f680602fc29d231e88961439f1b424a71d5449f6.gif"></div></div>
  359.  
  360.  
  361. {block:iffamily} <!----Family---->
  362. <div id="fam" class="box">
  363.  
  364. <h1>Family</h1>
  365.  
  366. <table cellpadding="0" cellspacing="0" width="100%">
  367. <tr>
  368. <td><a href="URL HERE"><img src="https://64.media.tumblr.com/faafb2c6f4c536b32d3d7487fc548f31/45eae3fef6076e31-b8/s250x400/7a9a74b574d3b30eb90525edad5978c90a86f0ec.png"></a></td>
  369. <td><a href="URL HERE"><img src="https://64.media.tumblr.com/a472bdd4b554a1b5b41e21d04ecfff45/45eae3fef6076e31-65/s250x400/18d3749ee721f95a6d1fb3f7fefc193e25abd908.png"></a></td>
  370. <td><a href="URL HERE"><img src="https://64.media.tumblr.com/5a978caad93de98041f0ad91d6499e9c/tumblr_ptfdv1d97A1wd05tno8_250.png"></a></td>
  371. <td><a href="URL HERE"><img src="https://64.media.tumblr.com/662d408c6a26d4264f985c766a063770/tumblr_pqp0sbNN5g1wd05tno8_250.png"></a></td>
  372.  
  373. </tr>
  374. <tr>
  375. <td><a href="URL HERE"><img src="https://64.media.tumblr.com/2c13fcc7975358c458f18180d8964bac/tumblr_ptfdv1d97A1wd05tno3_250.png"></a></td>
  376. <td><a href="URL HERE"><img src="https://64.media.tumblr.com/804d912ac595ce318e7b7c12f9c37087/18e472e55274551b-9b/s250x400/faf33d7add71b34f8e96267fff7c230c500da141.png"></a></td>
  377. <td><a href="URL HERE"><img src="https://64.media.tumblr.com/b00bd858f6a56f24e39314925bf7f3c5/219f84401f566df9-98/s250x400/c52fca9a88a51f20b0b99860948d4de7e352d8b7.png"></a></td>
  378. <td><a href="URL HERE"><img src="https://64.media.tumblr.com/ba3306427bcd6cf049b8149389c4440b/75660ecaae30d41e-8f/s250x400/1bc09e26142d7c39710b24cae0b7511e5700b294.png"></a></td>
  379.  
  380. </tr>
  381.  
  382. <td><a href="URL HERE"><img src="https://64.media.tumblr.com/1edf0455186eed90c960a24ea972a88d/fe5cfd4d7b556d85-f2/s250x400/7b0a1be9e331d770ca52461c7ed41b654cd5d631.png"></a></td>
  383. <td><a href="URL HERE"><img src="https://64.media.tumblr.com/b69bc1e24b5755873dea885cfd03900e/dfb1b2f94f8cd3ae-e1/s250x400/c1657ce4f4edfa2cb65a33279f5df2f1dfae08e3.png"></a></td>
  384. <td><a href="URL HERE"><img src="https://64.media.tumblr.com/9e4592ae255de168f5ba9cc55b9653b4/tumblr_p4rr4zBXfg1wd05tno8_250.png"></a></td>
  385. <td><a href="URL HERE"><img src="https://64.media.tumblr.com/ff7c7dcd60f523941f93021875dd05c6/tumblr_pfdsrgHMkB1wd05tno4_250.png"></a></td>
  386.  
  387. </tr>
  388.  
  389. </table>
  390.  
  391.  
  392. </div>
  393.  
  394. {/block:iffamily}
  395.  
  396.  
  397.  
  398.  
  399. </div>
  400.  
  401. </div><!---End container----->
  402.  
  403. <img id="image" src="https://i.pinimg.com/originals/1a/bf/4e/1abf4eb36aa06c575b73e1f6ec25cfea.jpg">
  404. <div id="flower"></div>
  405. <div id="flower2"></div>
  406.  
  407.  
  408. <div id="credit"><a href="cryinhtml.tumblr.com">CryInHtml Theme</a></div>
  409.  
  410. <!----Script----->
  411. </body>
  412. </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!