API tools faq
paste
Advertisement
kay_kodes

eiffel || profile text

kay_kodes
Jul 6th, 2023 (edited)
1,519
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.99 KB | None | 1 0
raw download clone embed print report
  1. <html>
  2. <link href="https://fonts.cdnfonts.com/css/cllarin-2" rel="stylesheet">
  3. <link href="https://fonts.cdnfonts.com/css/rustery-mirages" rel="stylesheet">
  4.  
  5.  
  6. <center>
  7. <style>
  8. /*Scrollbar*/
  9. ::-webkit-scrollbar {width: 0px;}
  10. ::-webkit-scrollbar-thumb {background: #fff;}
  11. ::-webkit-scrollbar-thumb:hover {background: #fff;}
  12.  
  13. button {
  14. width:100px;
  15. height:30px;
  16. overflow: hidden;
  17. border:1px rgba(255,255,255,0.0) solid;
  18. background-color:#fff;
  19. font-size:15px;
  20. font-family:'Rustery Mirages', sans-serif;
  21. color:#000;
  22. font-style:italic;
  23. }
  24.  
  25. button:hover {
  26. transform: translateY(-2px);
  27. transition: all 0.9s ease 0s;
  28. transform:rotate(360deg);
  29. font-size:20px
  30.  
  31.  
  32. }
  33.  
  34. /*BOX EFFECTS*/
  35. .zoom{
  36. transition: all 0.3s ease 0s;
  37.  
  38. }
  39. .zoom:hover {
  40. transform: translateY(-2px);
  41. font-size:14px;
  42.  
  43.  
  44. }
  45.  
  46. .zoom:active {
  47. transform: translateY(-1px);
  48. }
  49.  
  50. /*IMAGE 1 EFFECTS*/
  51. .img{
  52. transition: all 0.3s ease 0s;
  53.  
  54. }
  55. .img:hover {
  56. outline: none;
  57. filter:brightness(75%);
  58. transition: all 0.5s ease 0s;
  59. transform: translateY(-7px);
  60. transform:rotate(2deg);
  61.  
  62. }
  63.  
  64. .img:active {
  65. transform: translateY(-1px);
  66. transition: all 0.7s ease 0s;
  67. }
  68.  
  69. /*IMAGE 2 EFFECTS*/
  70. .img2{
  71. transition: all 0.3s ease 0s;
  72.  
  73. }
  74. .img2:hover {
  75. outline: none;
  76. filter:brightness(75%);
  77. transition: all 0.5s ease 0s;
  78. transform: translateY(-7px);
  79. transform:rotate(-2deg);
  80.  
  81. }
  82.  
  83. .img2:active {
  84. transform: translateY(-1px);
  85. transition: all 0.7s ease 0s;
  86.  
  87. }
  88.  
  89. /*IMAGE 3 EFFECTS*/
  90. .zoom2{
  91. transition: all 0.3s ease 0s;
  92.  
  93. }
  94. .zoom2:hover {
  95. transform: translateY(-7px);
  96. filter:brightness(75%)
  97. }
  98.  
  99. .zoom2:active {
  100. transform: translateY(-1px);
  101. }
  102. </style>
  103.  
  104. <!-- IMAGE BACKGROUND -->
  105. <div style="background:url('https://i.pinimg.com/564x/05/fe/ac/05feacdac9b8d6ad9f8a84053897c5b8.jpg');background-size:cover;width:600px;height:650px;box-shadow: 1px 1px 6px 3px #696969;margin-bottom:8px">
  106.  
  107. <br>
  108.  
  109. <!--OUTERBOX-->
  110. <div class="zoom" style="background:#635349;background-size:cover;width:520px;height:600px;outline:1px #fff solid;outline-offset:-12px;margin-top:10px;box-shadow: 2px 2px 7px 4px #000">
  111.  
  112. <br>
  113.  
  114. <div style="background-color:rgba(255,255,255,0.0);background-size:cover;width:450px;height:90px;outline:0px #fff solid;outline-offset:-10px;margin-top:-10px">
  115.  
  116. <!-- BUTTONS -->
  117. <center>
  118. <br>
  119.  
  120.  
  121. <b style="font-family:'rustery mirages';font-size:40px;color:#242424;letter-spacing:3px">FIRST LAST NAME</b>
  122. <img src="https://fontmeme.com/permalink/230707/dd0c54b27da0fdb34c5ffdcacbd4dd4a.png" border="0" style="margin-top:-40px; width:300px;margin-bottom:-80px">
  123. <br><br>
  124. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen" style="background:url('https://cdn.discordapp.com/attachments/871345898469355533/1126492786573705309/WoX_Sigs_1.png');width:150px;height:42px;background-size:cover;margin-left:-10px">about</button>
  125.  
  126. <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen" style="background:url('https://cdn.discordapp.com/attachments/871345898469355533/1126492786573705309/WoX_Sigs_1.png');width:150px;height:42px;background-size:cover;margin-top:0px">lookbook</button>
  127.  
  128. <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen" style="background:url('https://cdn.discordapp.com/attachments/871345898469355533/1126492786573705309/WoX_Sigs_1.png');width:150px;height:42px;background-size:cover;margin-top:0px">relations</button>
  129.  
  130.  
  131. </center>
  132.  
  133. </div>
  134.  
  135.  
  136.  
  137. <div style="background-color:rgba(255,255,255,0.1);background-size:cover;width:460px;height:460px;margin-top:10px;float:left;margin-left:30px;overflow:auto">
  138.  
  139. <!-- ABOUT, PERSONALITY, BIO -->
  140. <div id="one" class="tabcontent">
  141.  
  142. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:12px;width:400px;text-align:justify;margin-right:10px;margin-left:10px">
  143. <br><br><br><br>
  144.  
  145. <!-- BACK IMAGE -->
  146. <div class="img">
  147. <img src="https://i.pinimg.com/564x/68/8a/0a/688a0a45789badeb8f65847b4a48ec38.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-right:10px;float:left;transform:rotate(-2deg);" />
  148. </div>
  149.  
  150. <!-- YOUR NAME -->
  151. <i style="margin-left:10px;font-size:25px;color:#000;font-family:'rustery mirages';font-weight:bold">YOUR FIRST NAME</i>
  152.  
  153. <hr style="border:8px #eee solid;margin-top:-15px">
  154.  
  155. <!-- QUOTE -->
  156. <i style="font-family:'cllarin';font-size:20px">"a quote here for your character"</i>
  157. <br><br>
  158.  
  159. <!-- FRONT IMAGE -->
  160. <div class="img2">
  161. <img src="https://i.pinimg.com/564x/a1/0d/69/a10d698e6d73eec96e4b68d8d55e0f4c.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-left:-90px;float:left;transform:rotate(6deg)" /></div>
  162.  
  163. <!-- BIO PART 1 -->
  164. <div class="zoom" style="background-color:rgba(255,255,255,0.3);background-size:cover;width:150px;height:30px;margin-top:10px;float:right">
  165. <center style="padding:10px"><b>age</b>: insert here</center>
  166. </div>
  167.  
  168. <div class="zoom" style="background-color:rgba(255,255,255,0.3);background-size:cover;width:150px;height:30px;margin-top:10px;float:right">
  169. <center style="padding:10px"><b>birthday</b>: insert here</center>
  170. </div>
  171.  
  172. <div class="zoom" style="background-color:rgba(255,255,255,0.3);background-size:cover;width:150px;height:30px;margin-top:10px;float:right">
  173. <center style="padding:10px"><b>birthplace</b>: insert here</center>
  174. </div>
  175.  
  176.  
  177. <div class="zoom" style="background-color:rgba(255,255,255,0.3);background-size:cover;width:150px;height:30px;margin-top:10px;float:right">
  178. <center style="padding:10px"><b>bloodline</b>: insert here</center>
  179. </div>
  180.  
  181. <div class="zoom" style="background-color:rgba(255,255,255,0.3);background-size:cover;width:150px;height:30px;margin-top:10px;float:right">
  182. <center style="padding:10px"><b>residence</b>: insert here</center>
  183. </div>
  184.  
  185.  
  186. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  187.  
  188. <!-- BIO PART 2 -->
  189. <div class="zoom" style="background-color:rgba(255,255,255,0.3);background-size:cover;width:300px;height:30px;margin-top:10px">
  190. <center style="padding:10px"><b>nicnkames</b>: insert here</center>
  191. </div>
  192.  
  193. <!-- TOP IMAGE -->
  194. <div class="img2">
  195. <img src="https://i.pinimg.com/564x/ff/ee/fa/ffeefadadec19d1c3a44f60ec3b6442e.jpg" style="width:75px;height:75px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-left:10px;float:right;transform:rotate(4deg);margin-top:-30px" /></div>
  196.  
  197.  
  198. <!-- BIO PART 3 -->
  199. <div class="zoom" style="background-color:rgba(255,255,255,0.3);background-size:cover;width:300px;height:30px;margin-top:10px">
  200. <center style="padding:10px"><b>orientation</b>: insert here</center>
  201. </div>
  202.  
  203. <div class="zoom" style="background-color:rgba(255,255,255,0.3);background-size:cover;width:300px;height:30px;margin-top:10px">
  204. <center style="padding:10px"><b>house/faction/kingdom</b>: insert here</center>
  205. </div>
  206.  
  207. <!-- BOTTOM IMAGE -->
  208. <div class="img">
  209. <img src="https://i.pinimg.com/564x/35/89/e3/3589e3199220251b0efb577319e0a4b7.jpg" style="width:75px;height:75px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-left:10px;float:right;transform:rotate(-4deg);margin-top:-10px" /></div>
  210.  
  211.  
  212. <!-- BIO PART 4 -->
  213. <div class="zoom" style="background-color:rgba(255,255,255,0.3);background-size:cover;width:300px;height:30px;margin-top:10px">
  214. <center style="padding:10px"><b>job</b>: insert here</center>
  215. </div>
  216.  
  217. <div class="zoom" style="background-color:rgba(255,255,255,0.3);background-size:cover;width:300px;height:30px;margin-top:10px">
  218. <center style="padding:10px"><b>status</b>: insert here</center>
  219. </div>
  220.  
  221. <br><br>
  222.  
  223.  
  224. <!-- ABOUT -->
  225. <b style="font-size:20px"><u>ABOUT</u></b>
  226. <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  227.  
  228. <br><br>
  229.  
  230. <!-- PERSONALITY -->
  231. <b style="font-size:20px"><u>PERSONALITY</u></b>
  232. <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  233.  
  234.  
  235. <br><br>
  236.  
  237. <!-- BACK IMAGE -->
  238. <div class="img2">
  239. <img src="https://i.pinimg.com/564x/cc/8e/3f/cc8e3f41e1100fc13f03cef4f1497674.jpg" style="width:150px;height:190px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-left:10px;float:right;transform:rotate(4deg);margin-top:-5px" /></div>
  240.  
  241. <br><br>
  242.  
  243. <!-- FRONT IMAGE -->
  244. <div class="img">
  245. <img src="https://i.pinimg.com/564x/d2/d8/aa/d2d8aa5ac552cbe669c91c3860efd90e.jpg" style="width:120px;height:150px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-right:-70px;float:right;transform:rotate(-4deg);margin-top:-10px" /></div>
  246.  
  247.  
  248. <!-- FAMILY TREE -->
  249. <b style="font-size:20px"><u>FAMILY TREE</u></b>
  250. <div style=" border-left: 2px solid #fff; padding-left: 10px">
  251. <p><b>mother.</b> insert name here<br>
  252. <b>father.</b> insert name here
  253.  
  254.  
  255. <div style=" border-left: 2px solid #fff; padding-left: 10px;margin-left:10px">
  256.  
  257. <b>sister.</b> insert name here<br>
  258. <b>brother.</b> insert name here<br>
  259. </div></div>
  260.  
  261.  
  262. <br><b>significant other.</b>
  263.  
  264. <div style=" border-left: 2px solid #fff; padding-left: 10px">
  265. <p><b>daughter.</b> insert name here<br>
  266. <b>son.</b> insert name here</div>
  267.  
  268. <br>
  269. </div></div>
  270.  
  271.  
  272. <!------------------------------------>
  273.  
  274.  
  275. <!-- LOOKBOOK -->
  276. <div id="two" class="tabcontent">
  277.  
  278. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:12px;width:400px;text-align:justify;margin-right:10px;margin-left:10px">
  279. <br><br>
  280.  
  281. <!-- SUBTITLE -->
  282. <center><i style="font-family:'cllarin';font-size:30px">"quote over here"</i></center>
  283.  
  284. <hr style="border:1px #fff dashed">
  285. <center>
  286. <br>
  287.  
  288. <!-- BACK IMAGE -->
  289. <div class="img">
  290. <img src="https://i.pinimg.com/736x/1d/3e/cb/1d3ecb88ee1f9fef0c6152003fb7707d.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-right:10px;float:left;transform:rotate(-2deg);" /></div>
  291.  
  292. <!-- FRONT IMAGE -->
  293. <div class="img2">
  294. <img src="https://i.pinimg.com/564x/72/04/7f/72047fef9f81d904a65b475953432e98.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-left:-90px;float:left;transform:rotate(6deg);margin-right:10px;margin-bottom:10px" /></div>
  295.  
  296.  
  297. <!-- APPREARANCE DESCRIPTION -->
  298. <b style="font-size:20px"><u>APPEARANCE</u></b>
  299. </center>
  300. <br>
  301. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  302.  
  303. <br><br><br>
  304.  
  305. <!-- BACK IMAGE -->
  306. <div class="img2">
  307. <img src="https://i.pinimg.com/564x/88/cd/3f/88cd3fe92d242cbb3756602482cd40a9.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-right:10px;float:right;transform:rotate(6deg);" /></div>
  308.  
  309. <!-- FRONT IMAGE -->
  310. <div class="img">
  311. <img src="https://i.pinimg.com/564x/66/00/d3/6600d389cc9b9764a95e19c09d397601.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;float:right;transform:rotate(-2deg);margin-right:-60px;margin-bottom:10px" /></div>
  312.  
  313.  
  314. <!-- TOP IMAGE -->
  315. <div class="img">
  316. <img src="https://i.pinimg.com/564x/bb/7a/bd/bb7abdaf702de7797582a57047b748b4.jpg" style="width:90px;height:90px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;float:left;transform:rotate(-4deg);margin-top:-10px" /></div>
  317.  
  318. <!-- BOTTOM IMAGE -->
  319. <div class="img2">
  320. <img src="https://i.pinimg.com/736x/1a/c5/cf/1ac5cf1c35863b0c196ffc291fa26f2c.jpg" style="width:90px;height:90px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;float:left;transform:rotate(6deg);margin-top:20px" /></div>
  321.  
  322. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  323.  
  324. <center>
  325.  
  326.  
  327. <!-- APPEARANCE DATA -->
  328. <div class="zoom">
  329. <div style="background-color:rgba(255,255,255,0.3);background-size:cover;width:400px;height:30px;margin-top:10px">
  330. <center style="padding:10px"><b>skin tone</b>: insert here</center>
  331. </div></div>
  332.  
  333. <div class="zoom">
  334. <div style="background-color:rgba(255,255,255,0.3);background-size:cover;width:400px;height:30px;margin-top:10px">
  335. <center style="padding:10px"><b>eye color</b>: insert here</center>
  336. </div></div>
  337.  
  338. <div class="zoom">
  339. <div style="background-color:rgba(255,255,255,0.3);background-size:cover;width:400px;height:30px;margin-top:10px">
  340. <center style="padding:10px"><b>hair color</b>: insert here</center>
  341. </div></div>
  342.  
  343. <div class="zoom">
  344. <div style="background-color:rgba(255,255,255,0.3);background-size:cover;width:400px;height:30px;margin-top:10px">
  345. <center style="padding:10px"><b>features</b>: insert here</center>
  346. </div></div>
  347.  
  348. <div class="zoom">
  349. <div style="background-color:rgba(255,255,255,0.3);background-size:cover;width:400px;height:30px;margin-top:10px">
  350. <center style="padding:10px"><b>build</b>: insert here</center>
  351. </div></div>
  352.  
  353. <br><br>
  354.  
  355. <div class="zoom2">
  356. <img src="https://i.pinimg.com/564x/04/b0/3c/04b03cfb6a406aaf830e97ba6d84d9ee.jpg" style="width:90px;height:90px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;float:left;margin-top:-10px;margin-left:5px" /></div>
  357.  
  358. <div class="zoom2">
  359. <img src="https://i.pinimg.com/564x/96/f7/f5/96f7f5482461741a8e9e8d96bcefda91.jpg" style="width:90px;height:90px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;float:left;margin-top:-10px;margin-left:5px" /></div>
  360.  
  361. <div class="zoom2">
  362. <img src="https://i.pinimg.com/564x/b9/8b/f8/b98bf8fd54a4485907b7a82f47f11848.jpg" style="width:90px;height:90px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;float:left;margin-top:-10px;margin-left:5px" /></div>
  363.  
  364. <div class="zoom2">
  365. <img src="https://i.pinimg.com/564x/64/dc/ed/64dced7507838e99ad3a55d30382ffce.jpg" style="width:90px;height:90px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;float:left;margin-top:-10px;margin-left:5px" /></div>
  366.  
  367. <br><br><br><br><br><br><br>
  368.  
  369. <i style="font-family:'cllarin';font-size:30px">"quote about beauty"</i>
  370. </center>
  371. <br>
  372. </div></div>
  373.  
  374.  
  375. <!------------------------------------>
  376.  
  377.  
  378. <!-- RELATIONS -->
  379. <div id="three" class="tabcontent">
  380.  
  381. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:12px;width:400px;text-align:justify;margin-right:10px;margin-left:10px">
  382. <br><br>
  383.  
  384. <!-- QUOTE HERE -->
  385. <center><i style="font-family:'cllarin';font-size:30px">"aesthetic quote here maybe"</i></center>
  386.  
  387. <br>
  388. <hr style="border:1px #fff dashed">
  389.  
  390. <!--each relation-->
  391. <div style="padding:5%;width:350px;margin-right:10px;float:left;margin-top:10px">
  392. <img src="https://i.pinimg.com/564x/30/f5/64/30f564cd1622c1d7bb29b09cbf3f7c6a.jpg" style="width:100px;height:100px;border:solid #fff;border-radius:100%;float:left;margin-left:-10px;margin-right:10px;outline: 1px solid #fff;outline-offset:-6px;object-fit:cover">
  393. <b>Relation | Name</b>
  394. <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi.
  395. </div><br>
  396.  
  397. <hr style="border:1px #fff dashed">
  398.  
  399. <!--each relation-->
  400. <div style="padding:5%;width:350px;margin-right:10px;float:left;margin-top:10px">
  401. <img src="https://i.pinimg.com/736x/4f/45/bb/4f45bbabd297e03385071574d71cb70f.jpg" style="width:100px;height:100px;border:solid #fff;border-radius:100%;float:left;margin-left:-10px;margin-right:10px;outline: 1px solid #fff;outline-offset:-6px;object-fit:cover">
  402. <p><b>Relation | Name</b></p>
  403. <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi.
  404. </div><br>
  405.  
  406. <hr style="border:1px #fff dashed">
  407.  
  408. <!--each relation-->
  409. <div style="padding:5%;width:350px;margin-right:10px;float:left;margin-top:10px">
  410. <img src="https://i.pinimg.com/564x/d8/09/20/d80920c29be86586329ce47c1cf12d6c.jpg" style="width:100px;height:100px;border:solid #fff;border-radius:100%;float:left;margin-left:-10px;margin-right:10px;outline: 1px solid #fff;outline-offset:-6px;object-fit:cover">
  411. <p><b>Relation | Name</b></p>
  412. <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi.
  413. </div><br>
  414.  
  415. <hr style="border:1px #fff dashed">
  416.  
  417. <!--each relation-->
  418. <div style="padding:5%;width:350px;margin-right:10px;float:left;margin-top:10px">
  419. <img src="https://i.pinimg.com/564x/71/5a/3d/715a3d849b303c82c6c1f39b71dafd94.jpg" style="width:100px;height:100px;border:solid #fff;border-radius:100%;float:left;margin-left:-10px;margin-right:10px;outline: 1px solid #fff;outline-offset:-6px;object-fit:cover">
  420. <p><b>Relation | Name</b></p>
  421. <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi.
  422. </div><br>
  423.  
  424. </div></div>
  425.  
  426.  
  427. <!------------------------------------>
  428.  
  429.  
  430.  
  431. </div></div></div>
  432. <center><a href="https://kaykodes.tumblr.com/" style="color:#000;font-size:12px"><b><u>kay kodes</u></b></a></center>
  433.  
  434. <link rel="preconnect" href="https://fonts.googleapis.com">
  435. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  436. <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
  437.  
  438. <script>
  439. function openCity(evt, cityName) {
  440. var i, tabcontent, tablinks;
  441. tabcontent = document.getElementsByClassName("tabcontent");
  442. for (i = 0; i < tabcontent.length; i++) {
  443. tabcontent[i].style.display = "none";
  444. }
  445. tablinks = document.getElementsByClassName("tablinks");
  446. for (i = 0; i < tablinks.length; i++) {
  447. tablinks[i].className = tablinks[i].className.replace(" active", "");
  448. }
  449. document.getElementsByClassName("tablinks");
  450. for (i = 0; i < tablinks.length; i++) {
  451. tablinks[i].className = tablinks[i].className.replace(" active", "");
  452. }
  453. document.getElementById(cityName).style.display = "block";
  454. evt.currentTarget.className += " active";
  455. }
  456.  
  457. // Get the element with id="defaultOpen" and click on it
  458. document.getElementById("defaultOpen").click();
  459. </script>
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!