Advertisement
ChaZayari

Kyojin

Mar 24th, 2020
93
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.38 KB | None | 0 0
  1. <style>
  2. @import url('https://fonts.googleapis.com/css?family=Black+Ops+One|Forum|Squada+One');
  3. ::-webkit-scrollbar{width:0vh;height:1vh;}
  4. ::-webkit-scrollbar-track{background:#5a5063;}
  5. ::-webkit-scrollbar-thumb{border-radius:0;background:#2c2e4d;}
  6.  
  7.  
  8. *{font-family: 'Squada One', cursive; font-size: 2.8vh; color:#000;}
  9. t{font-family: 'Black Ops One', cursive;font-size: 10vh;color:#000;}
  10. a{font-family: 'Forum', cursive;transition: 0.5s;text-decoration: none;}
  11. a:hover{color: #fff;text-shadow:0 0 16px #000; transition: 0.5s;}
  12.  
  13.  
  14. body{
  15. overflow-x: scroll;
  16. margin-right: -300vw;
  17. }
  18.  
  19. #background1{
  20. position: absolute;
  21. background: #78BEB6;
  22. z-index: 1;
  23. height: 100%;
  24. width: 100vw;
  25. left:0vw;
  26. bottom:0%;
  27. }
  28.  
  29. #background2{
  30. position: absolute;
  31. background: #EB362F;
  32. z-index: 1;
  33. height: 100%;
  34. width: 100%;
  35. left:100vw;
  36. bottom:0%;
  37. }
  38.  
  39. #background2{
  40. position: absolute;
  41. background: #EB362F;
  42. z-index: 1;
  43. height: 100%;
  44. width: 100%;
  45. left:100vw;
  46. bottom:0%;
  47. }
  48.  
  49. #background3{
  50. position: absolute;
  51. background: #B6A1C7;
  52. z-index: 1;
  53. height: 100%;
  54. width: 100%;
  55. left:200vw;
  56. bottom:0%;
  57. }
  58.  
  59. #background4{
  60. position: absolute;
  61. background: #9B6C74;
  62. z-index: 1;
  63. height: 100%;
  64. width: 100%;
  65. left:300vw;
  66. bottom:0%;
  67. }
  68.  
  69. #image1{
  70. position: absolute;
  71. background: url(https://pbs.twimg.com/media/Dn8p3khUcAEKonn.jpg);
  72. background-position: top center;
  73. background-size: cover;
  74. z-index: 2;
  75. opacity: 1;
  76. width: 32vw;
  77. height: 100vh;
  78. bottom: 0vh;
  79. left: 10vw;
  80. }
  81.  
  82. #image2{
  83. position: absolute;
  84. background: url(https://pbs.twimg.com/media/DveTWnZUUAAzQTp.jpg);
  85. background-position: top center;
  86. background-size: cover;
  87. z-index: 2;
  88. opacity: 1;
  89. width: 38vw;
  90. height: 100vh;
  91. bottom: 0vh;
  92. left: 162vw;
  93. }
  94.  
  95. #image3{
  96. position: absolute;
  97. background: url(https://pbs.twimg.com/media/DvN3h61UYAACwJr.jpg);
  98. background-position: top center;
  99. background-size: cover;
  100. z-index: 2;
  101. opacity: 1;
  102. width: 45vw;
  103. height: 100vh;
  104. bottom: 0vh;
  105. left: 200vw;
  106. }
  107.  
  108. #image4{
  109. position: absolute;
  110. background: url(https://pbs.twimg.com/media/Dtu-syfUUAEQWRh.jpg);
  111. background-position: top center;
  112. background-size: cover;
  113. z-index: 2;
  114. opacity: 1;
  115. width: 32vw;
  116. height: 100vh;
  117. bottom: 0vh;
  118. left: 368vw;
  119. }
  120.  
  121.  
  122. #border{
  123. position: absolute;
  124. z-index: 2;
  125. border: 4px #000 solid;
  126. opacity: 1;
  127. height: 100vh;
  128. bottom: 0vh;
  129. left: 99.5vw;
  130. width: 0vw;
  131. }
  132.  
  133.  
  134.  
  135. #border2{
  136. position: absolute;
  137. z-index: 2;
  138. border: 4px #000 solid;
  139. opacity: 1;
  140. height: 100vh;
  141. bottom: 0vh;
  142. left: 199.5vw;
  143. width: 0vw;
  144. }
  145.  
  146.  
  147. #border3{
  148. position: absolute;
  149. z-index: 2;
  150. border: 4px #000 solid;
  151. opacity: 1;
  152. height: 100vh;
  153. bottom: 0vh;
  154. left: 299.5vw;
  155. width: 0vw;
  156. }
  157.  
  158. #title1{
  159. position: absolute;
  160. z-index: 2;
  161. border: 0px #000 solid;
  162. opacity: 1;
  163. overflow: auto;
  164. text-align: center;
  165. height: 10vh;
  166. bottom: 50vh;
  167. left: 40vw;
  168. width: 40vw;
  169. }
  170.  
  171. #title2{
  172. position: absolute;
  173. z-index: 2;
  174. border: 0px #000 solid;
  175. padding: 1%;
  176. opacity: 1;
  177. overflow: auto;
  178. height: 10vh;
  179. bottom: 49vh;
  180. left: 115vw;
  181. width: 30vw;
  182. text-align: center;
  183. }
  184.  
  185.  
  186. #title3{
  187. position: absolute;
  188. z-index: 2;
  189. border: 0px #000 solid;
  190. padding: 1%;
  191. opacity: 1;
  192. overflow: auto;
  193. height: 10vh;
  194. bottom: 61vh;
  195. left: 245vw;
  196. width: 40vw;
  197. text-align: center;
  198. }
  199.  
  200. #title4{
  201. position: absolute;
  202. z-index: 2;
  203. border: 0px #000 solid;
  204. padding: 1%;
  205. opacity: 1;
  206. overflow: auto;
  207. height: 10vh;
  208. bottom: 61vh;
  209. left: 315vw;
  210. width: 40vw;
  211. text-align: center;
  212. }
  213.  
  214.  
  215.  
  216. #box1{
  217. position: absolute;
  218. z-index: 2;
  219. border: 4px #000 solid;
  220. padding: 1%;
  221. opacity: 1;
  222. overflow: auto;
  223. height: 27vh;
  224. bottom: 18vh;
  225. left: 48.5vw;
  226. width: 20vw;
  227. }
  228.  
  229.  
  230. #box2{
  231. position: absolute;
  232. z-index: 2;
  233. border: 4px #000 solid;
  234. padding: 1%;
  235. opacity: 1;
  236. overflow: auto;
  237. height: 27vh;
  238. bottom: 18vh;
  239. left: 120vw;
  240. width: 20vw;
  241. }
  242.  
  243.  
  244.  
  245. #box3{
  246. position: absolute;
  247. z-index: 2;
  248. border: 4px #000 solid;
  249. padding: 1%;
  250. opacity: 1;
  251. overflow: auto;
  252. height: 32vh;
  253. bottom: 24vh;
  254. left: 250vw;
  255. width: 30vw;
  256. }
  257.  
  258.  
  259. #box4{
  260. position: absolute;
  261. z-index: 2;
  262. border: 4px #000 solid;
  263. padding: 1%;
  264. opacity: 1;
  265. overflow: auto;
  266. height: 32vh;
  267. bottom: 24vh;
  268. left: 320vw;
  269. width: 30vw;
  270. }
  271.  
  272.  
  273.  
  274.  
  275. #arrow{
  276. background: url(https://i.imgur.com/F0KRhba.png?1);
  277. background-position: center;
  278. background-size: 100% 100%;
  279. background-repeat: no-repeat;
  280. z-index: 2;
  281. position: absolute;
  282. opacity: 1;
  283. height: 20vw;
  284. width: 20vh;
  285. bottom: 25vh;
  286. left: 90vw;
  287. }
  288.  
  289.  
  290. </style>
  291. <div id="background1"></div>
  292. <div id="background2"></div>
  293. <div id="background3"></div>
  294. <div id="background4"></div>
  295.  
  296. <div id="image1"></div>
  297. <div id="image2"></div>
  298. <div id="image3"></div>
  299. <div id="image4"></div>
  300.  
  301. <div id="border"></div>
  302. <div id="border2"></div>
  303. <div id="border3"></div>
  304. <div id="arrow"></div>
  305.  
  306.  
  307. <div id="title1"><t>IJN KYOJIN</t></div>
  308. <div id="box1">
  309. <center>
  310. The Battleship classified as 'Kyojin', for the International Japanese Navy, designed to provide maximum defense for the Japanese borders.<br><br>
  311. Built to fight against extra-terrestrial forces should they attack the Japanese home-front.
  312. </div>
  313.  
  314.  
  315. <div id="title2"><t>Dossier</t></div>
  316. <div id="box2">
  317. Classification: Jaeger-Class Battleship, Kyojin<br>
  318. Alias(es): Kyojin, Jaeger<br>
  319. Commissioned: 18 Novermber, 2056<br>
  320. Affiliation: International Japanese Navy, United National Defense<br>
  321. <br>
  322. Height: Approximately 80 feet (24.3 meters) tall.<br>
  323. Weight: 3,100 tonnes (6,200,000 lbs)<br>
  324. Power Source: An advanced alloy core that processes Liquid <a title="A fuel source that can be renewed upon use through constant fusion.">Tritonium</a>, allowing for an ever lasting fuel supply. Kind of like her blood.<br><br>
  325. For more <a title="
  326. Kyojin
  327. Seven feet, three inches tall
  328. 700 lbs heavy
  329. Gentle
  330. Friendly
  331. ">human</a> statistics...
  332. </div>
  333.  
  334.  
  335.  
  336. <div id="title3"><t>History</t></div>
  337. <div id="box3">
  338. <p>There had come a time in Earth's history, where they had made first contact with the stars. They had found intelligent life beyond their solar system, but the only response had been that of an invasion. A war of the worlds, in 2023.</p>
  339. <p>Through a series of events, humanity prevailed, although lost a third of its population. But over the years, they rebuilt their homes, their governments, their militaries. And Japan had the idea. To Fuse alien technology with human ingenuity.</p>
  340. <p>Thus was born the IJN Kyojin, built for the express experiment of conjoining Earth's technologies and that of this unknown species. But once the mainframe was completed, this boat had transformed, shifted into a humanoid form resembling that of a giant, mechanical woman. She had been named to be one of the largest boats in Japanese history, but it was then that the name 'Kyojin', or giant, took on a whole new meaning.<p>
  341. </p>Kyojin is not only the first of her kind, but is a whole new life form entirely. The mainframe that the leading engineers had installed in her gave her sentient life, not just artificial intelligence. She is capable of cognitive thought, and is capable of emotion, having expressed happiness, sadness, and even anger. But it was when a second attack on the planet occured that mankind witnessed another emotion. Protectiveness, over those who created her.</p>
  342. <p>During this second battle, she had suffered many damages, but the majority of these she took in defense of the people. She never used any building or vehicle as a weapon, as a lot of people would have assumed, but rather fought with her bare hands and with her artillery, the ammunition of which no engineer could have explained.</p>
  343. <p>From this battle on, mankind has recognized her, and few others like her, as their proper protectors, and they have not failed in their mission of defense against the unknown.
  344. </div>
  345.  
  346.  
  347.  
  348. <div id="title4"><t>Out of Shells</t></div>
  349. <div id="box4">
  350. > This code is mine. Please do not steal without my permission, as I worked very hard on it.<br>
  351. > The art is most definitely not mine. All credit goes to the artist.<br>
  352. > I am open to most PMs, so long as you exercise proper grammer, and can bother to have a vocabulary that consists of more than 'Hi' or 'Hey'.<br>
  353. > If you want to make an entrance post, feel free to do so! I cannot guarantee on my character's size, though.<br>
  354. > For anyone looking to have some lewd with this character, that may be a bit difficult as she is an eighty foot, 3100 ton robot. Best of luck to you.<br>
  355. > Lastly, thank you so much for taking a look at my profile! I hope you enjoyed it, and I look forward to any ideas you may have!
  356. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement