Advertisement
kay_kodes

clint || profile text

Jun 25th, 2023 (edited)
504
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.41 KB | None | 0 0
  1. <html>
  2. <center>
  3. <link href="https://fonts.googleapis.com/css2?family=PT+Serif&display=swap" rel="stylesheet">
  4.  
  5. <link href="https://fonts.cdnfonts.com/css/highvoltage-heavy-rough" rel="stylesheet">
  6.  
  7. <link href='https://fonts.googleapis.com/css?family=Libre Barcode 39' rel='stylesheet'>
  8.  
  9. <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@200&display=swap" rel="stylesheet">
  10.  
  11. <link href="https://fonts.cdnfonts.com/css/rasings" rel="stylesheet">
  12.  
  13.  
  14. <style>
  15. /*Scrollbar*/
  16. ::-webkit-scrollbar {width: 0px;}
  17. ::-webkit-scrollbar-thumb {background: #fff;}
  18. ::-webkit-scrollbar-thumb:hover {background: #fff;}
  19. .box{
  20. position: relative;
  21. text-align: center;
  22.  
  23. }
  24. .page{
  25. text-decoration: none;
  26. color:black;
  27. padding: 10px
  28. }
  29. .columnone{
  30. margin-left:450px;
  31. margin-bottom:20px;
  32. overflow:auto;
  33. width:50px;
  34. height:650;
  35. color:#fff;
  36. float:right;
  37. font-family: 'RAsings', sans-serif; writing-mode: vertical-rl;
  38. font-size:23px;
  39. border:0px #fff solid;
  40. margin-top:-660;
  41. overflow:hidden
  42.  
  43.  
  44. }
  45. .square{
  46. width:600px;
  47. height:300px;
  48. margin-top:15px;
  49. color:#fff;
  50. background: #fff;
  51. overflow: auto;
  52. text-align:left;
  53. border:solid 1px #fff;
  54. font-size:15px;
  55. padding:12px;
  56. margin-bottom:15px;
  57.  
  58.  
  59. }
  60. .zoom2:hover {
  61. background-color: #eee;
  62. box-shadow: 0px 15px 20px #eee;
  63. color: #000;
  64. transform: translateY(-7px);
  65.  
  66. }
  67.  
  68. .zoom2:active {
  69. transform: translateY(-1px);
  70.  
  71. }
  72. .zoom2{
  73. transition: all 0.3s ease 0s;
  74.  
  75. }.container {
  76. position: relative;
  77. width: 550px;
  78. height: 680px;
  79. border: #000 2px solid;
  80. object-fit:cover;
  81. float:center;
  82. margin-left:25px;
  83.  
  84. }
  85.  
  86. .image {
  87. display: block;
  88. width: 550px;
  89. height: 680px;
  90. object-fit:cover;
  91. filter:brightness(40%);
  92. outline: 4px solid #fff;
  93. outline-offset: -9px;
  94.  
  95. }
  96.  
  97. .overlay {
  98. position: absolute;
  99. top: 0;
  100. bottom: 0;
  101. left: 0;
  102. right: 0;
  103. height: 100%;
  104. width: 100%;
  105. opacity: 0;
  106. transition: .5s ease;
  107. background-color: #000;
  108. }
  109.  
  110. .container:hover .overlay {
  111. opacity: 1;
  112. }
  113.  
  114. .text {
  115. color: white;
  116. font-size: 15px;
  117. position: absolute;
  118. top: 50%;
  119. left: 50%;
  120. -webkit-transform: translate(-50%, -50%);
  121. -ms-transform: translate(-50%, -50%);
  122. transform: translate(-50%, -50%);
  123. font-family: 'Dosis', sans-serif
  124. }
  125. button {
  126. width:150px;
  127. height:90px;
  128. margin-top:0px;
  129. overflow: hidden;
  130. border: 0px solid #fff;
  131. font-weight: bold;
  132. font-size: 20px;
  133. color:#fff;
  134. background:rgba(255, 255, 255, 0.0)
  135. }
  136. .centered {
  137. position: absolute;
  138. top: 90%;
  139. left: 50%;
  140. transform: translate(-50%, -50%);
  141. font-size:60px;
  142. color:#fff;
  143. font-family: 'HighVoltage Heavy Rough', sans-serif;
  144. }
  145.  
  146. p1{
  147. font-family: 'Libre Barcode 39';
  148. font-size: 60px;
  149. }
  150.  
  151. .trait{
  152. background:#738787;
  153. font-family: 'Dosis', sans-serif;
  154. font-size:15px;
  155. text-align:center;
  156. text-transform:lowercase;
  157. border-radius:20px
  158.  
  159. }
  160.  
  161. .vis:hover {
  162. outline: none;
  163. transition: all 0.5s ease 0s;
  164.  
  165. </style>
  166.  
  167. <div class="box">
  168. <center>
  169. <div class="container">
  170.  
  171. <!--BG IMG FRONT-->
  172.  
  173. <img src="https://i.pinimg.com/564x/ac/ae/30/acae30ba197a1d5277cc04817c5a6580.jpg" alt="Avatar" class="image">
  174.  
  175. <!--NAME HERE-->
  176. <div class="centered"><i style="text-shadow: 0 0 10px #000, 0 0 5px #fff, 0 0 10px #008b8b, 0 0 5px #008b8b, 0 0 5px #008b8b, 0 0 5px #008b8b, 0 0 5px #008b8b">NAME HERE</i>
  177.  
  178. <br>
  179.  
  180. <!--BARCODE HERE-->
  181. <p1>Barcode</p1>
  182.  
  183. <!--QUOTE HERE-->
  184. <div class="columnone">
  185. <i>"if we're gonna win this one, some of us might have to lose it"</i>
  186. </div>
  187.  
  188. <br>
  189.  
  190.  
  191.  
  192. </div>
  193. <div class="overlay">
  194. <div class="text">
  195.  
  196. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:15px;width:500px;height:620px;text-align:justify;overflow:auto">
  197.  
  198. <!--FIRST PAGE-->
  199. <div id="one" class="tabcontent">
  200. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:45px;border-radius:20px;margin-left:20px;">
  201. BIO
  202.  
  203. <!--BUTTON-->
  204.  
  205. <!-- DO NOT CHANGE -->
  206. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-left:-100px;float:left;width:50px;height:20px;background-color:#800000">→</button>
  207. <!-- - -->
  208.  
  209.  
  210. <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px">→</button>
  211.  
  212. </div>
  213. <br>
  214.  
  215. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px">
  216.  
  217.  
  218. <b>Agent:</b> insert placement here
  219. <hr style="border:1px #fff solid" align="left" width="250px">
  220.  
  221. <p>
  222.  
  223. <b>Date of Birth:</b> insert placement here
  224. <hr style="border:1px #fff solid" align="left" width="250px">
  225.  
  226. <p>
  227.  
  228. <b>Gender:</b> insert placement here
  229. <hr style="border:1px #fff solid" align="left" width="250px">
  230.  
  231. <p>
  232.  
  233. <b>Citizenship:</b> insert placement here
  234. <hr style="border:1px #fff solid" align="left" width="250px">
  235.  
  236. <p>
  237.  
  238. <b>Status:</b> insert placement here
  239. <hr style="border:1px #fff solid" align="left" width="250px">
  240.  
  241. <br><br>
  242.  
  243. <b>Occupation:</b> insert placement here
  244. <hr style="border:1px #fff solid" align="left" width="250px">
  245.  
  246. <p>
  247.  
  248. <b>Alias:</b> insert placement here
  249. <hr style="border:1px #fff solid" align="left" width="250px">
  250.  
  251. <img src="https://i.pinimg.com/564x/e9/d5/e0/e9d5e0fb2517a554771569d101d159dc.jpg" style="width:200px;height:300px;border:2px solid #fff;object-fit:cover;margin-right:-17px;margin-top:-310px;margin-left:30px;float:right;filter:brightness(65%);outline: 1px solid #fff;outline-offset:-6px">
  252.  
  253. <br><br>
  254.  
  255. <div style="background: #000;padding:5%;border:#fff 3px solid;width:150px;height:170px;float:right;margin-right:-3px;margin-left:15px;font-family:'Dosis'">
  256.  
  257. <!--STRENGTHS-->
  258. <center>
  259. <b style="font-size:20px">Strengths</b>
  260. <hr>
  261. ➟ Insert Here<br>
  262. ➟ Insert Here<br>
  263. ➟ Insert Here<br>
  264. <p>
  265. ➟ Insert Here<br>
  266. ➟ Insert Here<br>
  267. ➟ Insert Here<br>
  268. </center>
  269. </div>
  270.  
  271. <!--WEAKNESSES-->
  272. <div style="background: #000;padding:5%;border:#fff 3px solid;width:150px;height:170px;float:left;margin-right:-3px;margin-left:15px;font-family:'Dosis'">
  273. <center>
  274. <b style="font-size:20px">Weaknesses</b>
  275. <hr>
  276. ➟ Insert Here<br>
  277. ➟ Insert Here<br>
  278. ➟ Insert Here<br>
  279. <p>
  280. ➟ Insert Here<br>
  281. ➟ Insert Here<br>
  282. ➟ Insert Here<br>
  283. </center>
  284. </div>
  285.  
  286. <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  287.  
  288. <!--STATISTICS & TRAITS-->
  289.  
  290. <div style="background:#eee;width:470px;margin:7px 0;box-shadow: 1px 1px 6px 2px #008b8b;border-radius:20px">
  291. <div class="trait" style="width:37%">
  292. trait here → 37%
  293. </div>
  294. </div>
  295.  
  296. <p>
  297.  
  298. <div style="background:#eee;width:470px;margin:7px 0;box-shadow: 1px 1px 6px 2px #008b8b;border-radius:20px">
  299. <div class="trait" style="width:82%">
  300. trait here → 82%
  301. </div>
  302. </div>
  303.  
  304. <p>
  305.  
  306. <div style="background:#eee;width:470px;margin:7px 0;box-shadow: 1px 1px 6px 2px #008b8b;border-radius:20px">
  307. <div class="trait" style="width:54%">
  308. trait here → 54%
  309. </div>
  310. </div>
  311.  
  312. <p>
  313.  
  314. <div style="background:#eee;width:470px;margin:7px 0;box-shadow: 1px 1px 6px 2px #008b8b;border-radius:20px">
  315. <div class="trait" style="width:98%">
  316. trait here → 98%
  317. </div>
  318. </div>
  319.  
  320. <p>
  321.  
  322. <div style="background:#eee;width:470px;margin:7px 0;box-shadow: 1px 1px 6px 2px #008b8b;border-radius:20px">
  323. <div class="trait" style="width:67%">
  324. trait here → 67%
  325. </div>
  326. </div>
  327.  
  328. </div></div>
  329.  
  330.  
  331.  
  332. <!--SECOND PAGE-->
  333. <div id="two" class="tabcontent">
  334. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:45px;border-radius:20px;margin-left:20px;">
  335. PSYCH EVAL
  336.  
  337. <!--BUTTON-->
  338. <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px">→</button>
  339. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;float:right;width:50px;height:20px">←</button>
  340.  
  341. </div>
  342.  
  343. <br>
  344.  
  345. <!--PERSONALITY-->
  346. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px">
  347. <b style="font-size:35px">Personality</b>
  348. <br>
  349.  
  350. 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.
  351.  
  352.  
  353. <img src="https://i.pinimg.com/originals/a2/d0/6f/a2d06fa4a5212b98ce71f71974bead0c.gif" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;float:left;filter:brightness(80%);outline: 1px solid #fff;outline-offset:-6px">
  354.  
  355. <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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  356.  
  357. <br><br>
  358.  
  359. <!--FIRST IMPRESSIONS-->
  360. <b style="font-size:35px;margin-left:240px">First Impressions</b>
  361. <br>
  362.  
  363. 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.
  364.  
  365.  
  366. <img src="https://i.pinimg.com/originals/1f/96/e9/1f96e9899b2002f84562ea6ecfe5f52d.gif" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;float:right;filter:brightness(45%);outline: 1px solid #fff;outline-offset:-6px">
  367.  
  368. <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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  369.  
  370. <br><br>
  371.  
  372. <!--APPEARANCE-->
  373. <b style="font-size:35px">Appearance</b>
  374. <br>
  375.  
  376.  
  377. <img src="https://i.pinimg.com/564x/ba/a9/c9/baa9c949d5040722b874dbf7df1ee76b.jpg" style="width:200px;height:300px;border:2px solid #fff;object-fit:cover;margin-right:-17px;margin-left:30px;float:right;margin-top:-30px;filter:brightness(45%);outline: 1px solid #fff;outline-offset:-6px">
  378.  
  379. <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.>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.
  380.  
  381. </div></div>
  382.  
  383.  
  384. <!--THIRD PAGE-->
  385. <div id="three" class="tabcontent">
  386. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:45px;border-radius:20px;margin-left:20px">
  387. CONNECTIONS
  388.  
  389. <!--BUTTON-->
  390. <button class="tablinks" onclick="openCity(event, 'four')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px">→</button>
  391. <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen"style="margin-top:10px;float:right;width:50px;height:20px">←</button>
  392.  
  393. </div>
  394.  
  395. <br>
  396.  
  397. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px">
  398.  
  399.  
  400. <!--each relation-->
  401. <div style="padding:5%;border:#d9cbc3 2px solid;width:420px;margin-right:10px;float:left;margin-top:10px">
  402. <img src="https://i.pinimg.com/originals/73/29/d3/7329d318c8b75e350c55e0855f627596.gif" style="width:100px;height:100px;border:solid #fff;float:left;margin-left:-10px;margin-right:10px;object-fit:cover;margin-top:10px;filter:brightness(50%);outline: 1px solid #fff;outline-offset:-6px">
  403. <p><b>Relation | Name</b></p>
  404. <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. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. 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.
  405. </div><br>
  406.  
  407. <!--each relation-->
  408. <div style="padding:5%;border:#d9cbc3 2px solid;width:420px;margin-right:10px;float:left;margin-top:10px">
  409. <img src="https://i.pinimg.com/originals/67/35/b4/6735b448b39b2a7a344306e9a2643cc0.gif" style="width:100px;height:100px;border:solid #fff;float:left;margin-left:-10px;margin-right:10px;object-fit:cover;margin-top:10px;filter:brightness(70%);outline: 1px solid #fff;outline-offset:-6px">
  410. <p><b>Relation | Name</b></p>
  411. <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. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. 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.
  412. </div><br>
  413.  
  414. <!--each relation-->
  415. <div style="padding:5%;border:#d9cbc3 2px solid;width:420px;margin-right:10px;float:left;margin-top:10px">
  416. <img src="https://i.pinimg.com/originals/ab/c4/e8/abc4e8fe8601f638937183cb0c25fd8d.gif" style="width:100px;height:100px;border:solid #fff;float:left;margin-left:-10px;margin-right:10px;object-fit:cover;margin-top:10px;filter:brightness(60%);outline: 1px solid #fff;outline-offset:-6px">
  417. <p><b>Relation | Name</b></p>
  418. <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. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. 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.
  419. </div><br>
  420.  
  421. <!--each relation-->
  422. <div style="padding:5%;border:#d9cbc3 2px solid;width:420px;margin-right:10px;float:left;margin-top:10px">
  423. <img src="https://i.pinimg.com/originals/56/eb/26/56eb263e707d47b2f0b204b604bc6929.gif" style="width:100px;height:100px;border:solid #fff;float:left;margin-left:-10px;margin-right:10px;object-fit:cover;margin-top:10px;filter:brightness(60%);outline: 1px solid #fff;outline-offset:-6px">
  424. <p><b>Relation | Name</b></p>
  425. <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. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. 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.
  426. </div><br>
  427.  
  428. <!--each relation-->
  429. <div style="padding:5%;border:#d9cbc3 2px solid;width:420px;margin-right:10px;float:left;margin-top:10px">
  430. <img src="https://i.pinimg.com/originals/5b/b0/bb/5bb0bb675c16e9d296627503e563413d.gif" style="width:100px;height:100px;border:solid #fff;float:left;margin-left:-10px;margin-right:10px;object-fit:cover;margin-top:10px;filter:brightness(65%);outline: 1px solid #fff;outline-offset:-6px">
  431. <p><b>Relation | Name</b></p>
  432. <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. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. 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.
  433. </div><br>
  434.  
  435. </div></div>
  436.  
  437.  
  438. <!--FOURTH PAGE-->
  439. <div id="four" class="tabcontent">
  440. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:45px;border-radius:20px;margin-left:20px">
  441. VISUALS
  442.  
  443. <!--BUTTON-->
  444. <button class="tablinks" onclick="openCity(event, 'five')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px">→</button>
  445. <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen"style="margin-top:10px;float:right;width:50px;height:20px">←</button>
  446.  
  447. </div>
  448.  
  449. <br>
  450.  
  451. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px">
  452.  
  453. <center>
  454.  
  455. <!--each aesthetic-->
  456. <img src="https://i.pinimg.com/564x/11/82/7d/11827df5ae71153e35928ea8523bd71d.jpg" style="width:200px;height:300px;margin-left:2px;margin-right:px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;object-fit:cover;filter:brightness(40%);outline: 1px solid #fff;outline-offset:-6px">
  457.  
  458. <!--each aesthetic-->
  459. <img src="https://i.pinimg.com/564x/bf/13/9a/bf139a48384b9e2bc2d04c8ed876704f.jpg" style="width:200px;height:300px;margin-left:2px;margin-right:px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;object-fit:cover;filter:brightness(40%);outline: 1px solid #fff;outline-offset:-6px">
  460.  
  461. <!--each aesthetic-->
  462. <img src="https://i.pinimg.com/564x/d3/b4/86/d3b4868acb3eeba024598894dcdd4183.jpg" style="width:200px;height:300px;margin-left:2px;margin-right:px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;object-fit:cover;filter:brightness(40%);outline: 1px solid #fff;outline-offset:-6px">
  463.  
  464.  
  465.  
  466. <!--each aesthetic-->
  467. <img src="https://i.pinimg.com/236x/a1/eb/4b/a1eb4b32bcadc2dc703a28b602bd1d21.jpg" style="width:200px;height:300px;margin-left:2px;margin-right:px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;object-fit:cover;filter:brightness(40%);outline: 1px solid #fff;outline-offset:-6px">
  468.  
  469. <!--each aesthetic-->
  470. <img src="https://i.pinimg.com/236x/43/72/b0/4372b04046cba513fcc247ad0102fb62.jpg" style="width:200px;height:300px;margin-left:2px;margin-right:px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;object-fit:cover;filter:brightness(50%);outline: 1px solid #fff;outline-offset:-6px">
  471.  
  472. <!--each aesthetic-->
  473. <img src="https://i.pinimg.com/236x/75/41/6f/75416f99fb2c638029874bf00d46c0c5.jpg" style="width:200px;height:300px;margin-left:2px;margin-right:px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;object-fit:cover;filter:brightness(40%);outline: 1px solid #fff;outline-offset:-6px">
  474.  
  475. </center>
  476. </div></div>
  477.  
  478.  
  479. <!--FIFTH PAGE-->
  480. <div id="five" class="tabcontent">
  481. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:45px;border-radius:20px;margin-left:20px">
  482. BACKGROUND
  483.  
  484. <!--BUTTON-->
  485. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px">→</button>
  486. <button class="tablinks" onclick="openCity(event, 'five')" id="defaultOpen"style="margin-top:10px;float:right;width:50px;height:20px">←</button>
  487.  
  488. </div>
  489. <br>
  490.  
  491. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px">
  492. 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.
  493.  
  494.  
  495. <img src="https://i.pinimg.com/236x/bd/19/82/bd19824a267c1e7341a9c8247135207d.jpg" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;float:left;outline: 1px solid #fff;outline-offset:-6px;filter:brightness(50%)">
  496.  
  497. <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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  498.  
  499. <p>
  500.  
  501.  
  502. <img src="https://i.pinimg.com/236x/62/93/58/629358a77254aa200724fb91191e50d0.jpg" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;float:right;outline: 1px solid #fff;outline-offset:-6px;filter:brightness(50%)">
  503.  
  504. <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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  505.  
  506. <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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  507. </div></div>
  508.  
  509.  
  510.  
  511. </div>
  512. </div></div>
  513.  
  514. <div>
  515. <div>
  516.  
  517. </div></div></div>
  518.  
  519.  
  520. <center><a href="https://kaykodes.tumblr.com/" style="color:#000;font-size:15px;font-family: Times New Romans"><b>kay kodes</b></a></center>
  521.  
  522. <link rel="preconnect" href="https://fonts.googleapis.com">
  523. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  524. <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
  525.  
  526. <script>
  527. function openCity(evt, cityName) {
  528. var i, tabcontent, tablinks;
  529. tabcontent = document.getElementsByClassName("tabcontent");
  530. for (i = 0; i < tabcontent.length; i++) {
  531. tabcontent[i].style.display = "none";
  532. }
  533. tablinks = document.getElementsByClassName("tablinks");
  534. for (i = 0; i < tablinks.length; i++) {
  535. tablinks[i].className = tablinks[i].className.replace(" active", "");
  536. }
  537. document.getElementsByClassName("tablinks");
  538. for (i = 0; i < tablinks.length; i++) {
  539. tablinks[i].className = tablinks[i].className.replace(" active", "");
  540. }
  541. document.getElementById(cityName).style.display = "block";
  542. evt.currentTarget.className += " active";
  543. }
  544.  
  545. // Get the element with id="defaultOpen" and click on it
  546. document.getElementById("defaultOpen").click();
  547. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement