API tools faq
paste
Chibi-Elle

Sailor Jupes Code

Chibi-Elle
Dec 3rd, 2018
122
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.31 KB | None | 0 0
raw download clone embed print report
  1. <style type="text/css">
  2.  
  3. @import url('https://fonts.googleapis.com/css?family=Playfair+Display|Montserrat|Oswald|PT+Sans|Pacifico|Poppins|Ubuntu');
  4.  
  5. body
  6. {overflow-x:hidden;
  7. background-image:
  8. url('http://i.picpar.com/ykad.png');
  9. background-position: bottom right;
  10. background-repeat: repeat;
  11. background-attachment: fixed;
  12. background-color:#468747;
  13. overflow:hidden;}
  14.  
  15. ::-webkit-scrollbar-thumb:vertical {background-color:#EBD0D5; height:3px; }
  16. ::-webkit-scrollbar { height:3px; width:1px; background-color:transparent; }
  17.  
  18. ::selection {
  19. color: #fff;
  20. background: #121212;}
  21.  
  22. a {
  23. color: #EBD0D5;
  24. text-decoration:underline;
  25. text-transform:regular;
  26. font-family: 'Pacifico', cursive;
  27. font-size:15px;
  28. -webkit-transition: all 0.5s ease-in-out;
  29. -moz-transition: all 0.5s ease-in-out;
  30. -o-transition: all 0.5s ease-in-out;
  31. -ms-transition: all 0.5s ease-in-out;
  32. transition: all 0.5s ease-in-out;}
  33.  
  34. a:hover {color: #fff;
  35. -webkit-transition: all 0.5s ease-in-out;
  36. -moz-transition: all 0.5s ease-in-out;
  37. -o-transition: all 0.5s ease-in-out;
  38. -ms-transition: all 0.5s ease-in-out;
  39. transition: all 0.5s ease-in-out;}
  40.  
  41. b {
  42. color: #EBD0D5;
  43. text-decoration: none;
  44. font-family: georgia, cursive;
  45. text-transform:regular;
  46. font-style:italic;
  47. font-size:10px;
  48. letter-spacing:0;}
  49.  
  50. h1 {
  51. margin-top:1px;
  52. line-height:25px;
  53. text-align:center;
  54. color:#F1BFB8;
  55. font-family: 'Playfair Display', serif;
  56. font-size:20px;
  57. letter-spacing:1px;
  58. text-transform:uppercase;
  59. border-bottom:1px dotted #fff;}
  60.  
  61. h2 {
  62. padding:5px;
  63. margin-top:1px;
  64. margin-bottom:5px;
  65. color:#F1BFB8;
  66. background:transparent;
  67. border-bottom:1px solid #fff;
  68. font-size:12px;
  69. font-family: 'Playfair Display', serif;
  70. text-transform:uppercase;
  71. letter-spacing:1px;
  72. text-align:right;
  73. font-weight:900;}
  74.  
  75. *{cursor: url('http://media.tumblr.com/7c3edb626c8cf9435c5c0b2d6acceffd/tumblr_inline_mh67v6xNXM1rdqsqf.png'), default;}
  76.  
  77. #bitch{position:absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;}
  78.  
  79. #credit {
  80. overflow:hidden;
  81. position:fixed;
  82. text-align:justify;
  83. bottom:0px;
  84. right:0px;
  85. height:60px;
  86. width:60px;
  87. padding:0px;
  88. opacity: .8;
  89. background-image: url('https://i.imgur.com/MH0XSqe.png');
  90. background-position:top center;
  91. background-attachment: absolute;
  92. -webkit-background-size: cover;
  93. -moz-background-size: cover;
  94. -o-background-size: cover;
  95. background-size: cover;}
  96.  
  97. #container {
  98. position:absolute;
  99. top:50%;
  100. margin-top:-300px;
  101. left:50%;
  102. margin-left:-300px;
  103. height:600px;
  104. width:610px;
  105. background:#6CA256;
  106. background-image:url('');
  107. background-repeat:repeat;
  108. background-size:100%;}
  109.  
  110. .mainimg {
  111. position:absolute;
  112. width:260px;
  113. height:576px;
  114. z-index:10;
  115. top:10px;
  116. right:10px;
  117. background-color: transparent;
  118. background-image: url('https://i-h1.pinimg.com/564x/0e/ed/35/0eed3547f1655a208685ae9917febb1c.jpg');
  119. background-position:-95px -50px;
  120. background-attachment: absolute;
  121. background-repeat: no-repeat;}
  122.  
  123. #sidebar1 {
  124. width:300px;
  125. left:calc(50% - 650px);
  126. position:fixed;
  127. top: 50%;
  128. transform: translateY(-50%);}
  129.  
  130. #desc {
  131. padding:5;
  132. margin-bottom:10px;
  133. background:#E7728F;
  134. font-size:8px;
  135. line-height:10px;
  136. color: #fff;
  137. text-transform:uppercase;
  138. font-family:calibri, sans-serif;}
  139.  
  140. #title {
  141. font-weight:800;
  142. text-transform:uppercase;
  143. font-size:40px;
  144. font-family: 'Oswald', sans-serif;
  145. background: url(https://media.giphy.com/media/12RN5YGERpZ57O/giphy.gif) no-repeat;
  146. -webkit-background-clip: text;
  147. -webkit-text-fill-color: transparent;
  148. background-size:cover;
  149. background-position:center;
  150. margin-bottom:0px;
  151. margin-top:0px;
  152. line-height:45px;}
  153.  
  154. .icon {
  155. height:100px;
  156. width:280px;
  157. z-index:10;
  158. margin-left:0px;
  159. border:10px solid #e7728f;
  160. background-color: transparent;
  161. background-image: url('https://i.gifer.com/4cUk.gif');
  162. background-position:center center;
  163. background-attachment: absolute;
  164. background-repeat: no-repeat;}
  165.  
  166. #sidebar2 {
  167. width:250px;}
  168.  
  169. #links {
  170. position:fixed;
  171. text-transform:uppercase;
  172. font-size:20px;
  173. top:50%;
  174. width:250px;
  175. transform:translateY(-50%);
  176. left:calc(50% + 315px);
  177. line-height:45px;}
  178.  
  179. .link {
  180. color:#1f1413;
  181. text-decoration:none;
  182. font-weight:800;
  183. font-size:20px;
  184. text-transform:uppercase;
  185. font-family:'Oswald', sans-serif;
  186. transition:all 0.6s ease;}
  187.  
  188. .link:hover {
  189. padding-left:20px;}
  190.  
  191. #boxbg {
  192. background-color:#e7728f;
  193. position: absolute;
  194. width:300px;
  195. height:555px;
  196. left:10px;
  197. top:10px;
  198. padding:10px;
  199. margin:1px;
  200. overflow:auto;
  201. opacity:1;}
  202.  
  203. #box {
  204. background-color:#54984D;
  205. text-transform: regular;
  206. text-align: left;
  207. color: #f2f2f2;
  208. font-size:10px;
  209. font-family: 'Montserrat', sans-serif;
  210. position: absolute;
  211. width:275px;
  212. height:530px;
  213. left:10px;
  214. top:10px;
  215. line-height:12px;
  216. padding:10px;
  217. margin:1px;
  218. overflow:auto;
  219. opacity:1;
  220. z-index:10;}
  221.  
  222. #history {
  223. background-color:#54984D;
  224. text-transform: regular;
  225. text-align: left;
  226. color: #f2f2f2;
  227. font-size:10px;
  228. font-family: 'Montserrat', sans-serif;
  229. position: absolute;
  230. width:275px;
  231. height:530px;
  232. left:10px;
  233. top:10px;
  234. line-height:12px;
  235. padding:10px;
  236. margin:1px;
  237. overflow:auto;
  238. opacity:0;}
  239.  
  240. #abilities {
  241. background-color:#54984D;
  242. text-transform: regular;
  243. text-align: left;
  244. color: #f2f2f2;
  245. font-size:10px;
  246. font-family: 'Montserrat', sans-serif;
  247. position: absolute;
  248. width:275px;
  249. height:530px;
  250. left:10px;
  251. top:10px;
  252. line-height:12px;
  253. padding:10px;
  254. margin:1px;
  255. overflow:auto;
  256. opacity:0;}
  257.  
  258. #relationships {
  259. background-color:#54984D;
  260. text-transform: regular;
  261. text-align: left;
  262. color: #f2f2f2;
  263. font-size:10px;
  264. font-family: 'Montserrat', sans-serif;
  265. position: absolute;
  266. width:275px;
  267. height:530px;
  268. left:10px;
  269. top:10px;
  270. line-height:12px;
  271. padding:10px;
  272. margin:1px;
  273. overflow:auto;
  274. opacity:0;}
  275.  
  276. .rel {
  277. width:250px;
  278. height:150px;
  279. margin:20px;
  280. margin-top:1px;
  281. margin-bottom:10px;
  282. float:left;
  283. margin-left:1px;
  284. background:#E88EA8;}
  285.  
  286. .rel img {
  287. position:absolute;
  288. width:100px;
  289. height:100px;
  290. border-radius:50%;
  291. border:10px solid #E88EA8;
  292. box-shadow:1px 1px 10px #f2f2f2;
  293. margin-top:17px;
  294. right:10px;}
  295.  
  296. .wrds {
  297. position:absolute;
  298. padding:5;
  299. margin-left:10px;
  300. margin-top:8px;
  301. width:120px;
  302. height:120px;
  303. text-transform:uppercase;
  304. color:#f2f2f2;
  305. background-color:#54984D;
  306. font-size:8px;
  307. font-weight:900;
  308. font-family:calibri, sans-serif;}
  309.  
  310. #blanket1:target #history{
  311. opacity:1;
  312. z-index:100;}
  313.  
  314. #blanket1:target #box{
  315. opacity:0;
  316. z-index:1;}
  317.  
  318. #blanket2:target #abilities{
  319. opacity:1;
  320. z-index:100;}
  321.  
  322. #blanket2:target #box{
  323. opacity:0;
  324. z-index:1;}
  325.  
  326. #blanket3:target #relationships{
  327. opacity:1;
  328. z-index:100;}
  329.  
  330. #blanket3:target #box{
  331. opacity:0;
  332. z-index:1;}
  333. </style>
  334.  
  335. <div id="bitch" oncontextmenu="return false;">
  336. <div id="blanket"><div id="blanket1"><div id="blanket2"><div id="blanket3"><div id="blanket4">
  337. <a href= "https://roleplay.chat/profile.php?user=UFO" target="_blank"><div id= "credit"></div></a>
  338.  
  339. <div id="sidebar1">
  340. <div id="title">Makoto Kino; ♃.</div>
  341. <div id="desc">
  342. This is a nice little OOC section. <br>I wouldn't recommend leaving it too small, but I ALSO wouldn't recommend making it too large, either. <br>♃ power.<br>Pussy power.<br>Girl gang, girl gang, girl gang.
  343. </div>
  344. <div class="icon"></div>
  345. </div>
  346.  
  347. <div id="sidebar2">
  348. <div id="links">
  349. <a href="#blanket1"><div class="link"><img src="https://images.vexels.com/media/users/3/147935/isolated/preview/f27d91a3d13718bcc9623aab612b62d0-red-blooming-rose-icon-by-vexels.png" height="50" title="History"></div></a>
  350. <a href="#blanket2"><div class="link"><img src="https://images.vexels.com/media/users/3/147935/isolated/preview/f27d91a3d13718bcc9623aab612b62d0-red-blooming-rose-icon-by-vexels.png" height="50" title="Abilities/Attacks"></div></a>
  351. <a href="#blanket3"><div class="link"><img src="https://images.vexels.com/media/users/3/147935/isolated/preview/f27d91a3d13718bcc9623aab612b62d0-red-blooming-rose-icon-by-vexels.png" height="50" title="Relationships"></div></a>
  352. <a href="#"><div class="link"><img src="https://images.vexels.com/media/users/3/147935/isolated/preview/f27d91a3d13718bcc9623aab612b62d0-red-blooming-rose-icon-by-vexels.png" height="50" title="Reset"></div></a>
  353. </div>
  354. </div>
  355.  
  356. <div id= "container">
  357. <div class="mainimg"></div>
  358. <div id="boxbg">
  359. <div id= "box">
  360. <h1>To Be Courageous.</h1>
  361. <font style=float:left><b>Cilvilian Identity; </b> </font> <font style=float:right>Makoto Kino.</font><br>
  362. <font style=float:left><b>Nickname(s);</b> </font> <font style=float:right>N/A.</font><br>
  363. <font style=float:left><b>Age;</b> </font> <font style=float:right>20.</font><br>
  364. <font style=float:left><b>Birthday;</b> </font> <font style=float:right>Dec. 5th.</font><br>
  365. <font style=float:left><b>Zodiac;</b> </font> <font style=float:right>Sagittarius.</font><br>
  366. <font style=float:left><b>Gender;</b> </font> <font style=float:right>Female.</font><br>
  367. <font style=float:left><b>Height;</b> </font> <font style=float:right>177 cm./5'8".</font><br>
  368. <font style=float:left><b>Build;</b> </font> <font style=float:right>Muscular.</font><br>
  369. <font style=float:left><b>Hair Color;</b> </font> <font style=float:right>Brunette.</font><br>
  370. <font style=float:left><b>Eye color;</b> </font> <font style=float:right>Olive.</font><br>
  371. <font style=float:left><b>Blood type;</b> </font> <font style=float:right>O.</font><br>
  372. <font style=float:left><b>Occupation;</b> </font> <font style=float:right>Bakery Owner/Florist (?).</font><br>
  373. <font style=float:left><b>Likes;</b> </font> <font style=float:right>Baking, Home Ec., Shopping.</font><br>
  374. <font style=float:left><b>Dislikes;</b> </font> <font style=float:right>Cheaters, Flying, Biology.</font><br>
  375. <h2>One Must First Know Fear.</h2>
  376. Makoto is a teenage girl who fair skin and a slim complexion, though she is slightly more muscular than her most of her fellow Senshi. She has big green eyes, long brown wavy hair that she usually keeps tied up with a ponytail holder with two green balls, and is almost always shown wearing her pink rose earrings. She is also the tallest out of the Inner Senshi, standing at 168cm or 5 feet 6 inches.<br>
  377. <h2>And Overcome it.</h2>
  378. <center><font color=lightyellow>"<I>Protected by Jupiter, the planet of thunder, Guardian of Protection, Sailor Jupiter!</I>"</font>
  379. <br>
  380. <font style=float:left><b>Senshi name;</b> </font> <font style=float:right>Sailor Jupiter.</font><br>
  381. <font style=float:left><b>Title(s);</b> </font> <font style=float:right>Soldier of Thunder; soldier of protection.</font><br>
  382. <font style=float:left><b>Forms;</b> </font> <font style=float:right>Three.</font><br>
  383. <font style=float:left><b>Planet;</b> </font> <font style=float:right>Jupiter.</font><br>
  384. <font style=float:left><b>Elements;</b> </font> <font style=float:right>Lightning; Plants.</font><br>
  385. <font style=float:left><b>Weapon;</b> </font> <font style=float:right>Thunder and Lightning Antenna.</font><br>
  386. <font style=float:left><b>Mother;</b> </font> <font style=float:right>Queen Zeus.</font><br>
  387. <font style=float:left><b>Alignment;</b> </font> <font style=float:right>Moon Kingdom; Crystal Tokyo.</font><br>
  388. <font style=float:left><b>Affiliates;</b> </font> <font style=float:right>Inner/Outer senshi.</font><br>
  389. <hr>
  390. Sailor Jupiter wears a sailor suit with two colors: Green (scarf, boots, skirt, choker, gem of tiara, button of front bow, end of sleeves on gloves) and Pink (both bows, earrings). The rest of her out fit is white. Her tiara is the same base color as the rest of the Sailor Senshi's; gold. She is also seen wearing a light blue hair accessory as well as a pair of pink rose earrings.
  391.  
  392. </div>
  393.  
  394. <div id="history">
  395. <h1>a brief biography.</h1>
  396. Makoto's strong, independent personality is hinted at in her most striking physical feature—her unusual height (5'8" or 1.77 meters). She is stated at her first appearance in the series to be very tall, and considerable notice is taken in the original Japanese versions, although this trait is downplayed in English translations (as her relative height is not all that uncommon in most Europeans). She is physically very strong, and in fact, was rumored to have been kicked out of her previous school for fighting. She is introduced to the series after transferring to Azabu Jūban Junior High, where Usagi Tsukino and Ami Mizuno are students, and where she stands out all the more because her school uniform is different from everyone else's; unable to find anything in her size, her school's administration tells her to wear her old one. It has a long skirt, which when coupled with her curly hair, was a common visual cue for a tough or delinquent girl at the time the series was created. However, unlike these delinquent girls, her wavy hair is natural. Despite her tough appearance, she is very gentle. She always wears pink rose earrings and a green hair tie that decorates her ponytail.<br><br>
  397.  
  398. One of the most consistent characters across the many versions of the series, Makoto is always depicted as simultaneously the most masculine and feminine of the four Guardian Soldiers. Her most closely held dream is to get married and own a cake and flower shop. After entering high school, she also joins the cooking and gardening clubs. Her domestic talents are explained as a deliberate effort to overcome her tomboyishness. In the live-action series she enjoys shopping, but eschews "girly" things (she can be seen shopping for basketball shoes in one scene, for instance); she cooks, but also physically overpowers delinquents; she reorganizes her home, but does so with a sledgehammer. She also excels in dancing, especially ice-skating. She insists that she is not the least bit feminine, and seems surprised and touched when someone tells her she is.<br><br>
  399.  
  400. This dual nature comes from a need to be self-sufficient: her parents died in an aviation accident as a child and she has since then looked after herself. She is self-sufficient almost to a fault and gets shocked when an airplane passes overhead. In the anime adaptation, Makoto lives alone. In Pretty Guardian Sailor Moon, Makoto's parents' death is told in a flashback in Act 6, but how they died is not mentioned.<br><br>
  401.  
  402. Makoto has at least one former boyfriend, which is the importance of this subplot. Her senpai is mentioned only once or twice. In the anime adaptation, Makoto is extremely boy-crazy. Being Pretty Guardian Sailor Jupiter is an integral part of why Makoto feels she needs to be alone. In each version of Pretty Guardian Sailor Moon, there are mentions of other men who were very briefly a part of her life. Makoto is generally attracted to Motoki Furuhata, especially in the anime, but only in the live-action show do they become close. By the end of the direct-to-DVD Special Act, they are engaged to be married. However, <B>as this is canon divergent</B> the history shared here is just a collective Wikipedia rundown. It is alterable and can be explained in different ways by the player of Jupiter herself.
  403.  
  404. </div>
  405.  
  406. <div id="abilities">
  407. <h1>Abilities.</h1>
  408. <li><b>ability name</b> words go here.</li>
  409. <li><b>ability name</b> words go here.</li>
  410. <li><b>ability name</b> words go here.</li>
  411. <li><b>ability name</b> words go here.</li>
  412. <h2>Inventory.</h2>
  413. <li><b>ability name</b> words go here.</li>
  414. <li><b>ability name</b> words go here.</li>
  415. </div>
  416.  
  417. <div id="relationships">
  418. <h1>relationships</h1>
  419. <div class="rel">
  420. <a target="_blank" href="URLHERE"><img src="https://data.whicdn.com/images/114063893/superthumb.jpg?t=1398984571"></a>
  421. <div class="wrds">
  422. <div class="t">
  423. <li><b>Name;</b> Usagi Tsukino.</li>
  424. <li><b>Age;</b> Twenty.</li>
  425. <li><b>Location;</b> words words</li>
  426. <li><b>history</b> words words</li>
  427. or you can just put a blurb about them here.
  428. </div>
  429. </div>
  430. </div>
  431.  
  432. <div class="rel">
  433. <a target="_blank" href="URLHERE"><img src="https://66.media.tumblr.com/3a6054a7e3f2788041a7038db4064990/tumblr_inline_p7he89qg401rm43mm_540.png"></a>
  434. <div class="wrds">
  435. <div class="t">
  436. <li><b>Name;</b> Ami Mizuno.</li>
  437. <li><b>Age;</b> 20.</li>
  438. <li><b>Location;</b> words words</li>
  439. <li><b>History;</b> words words</li>
  440. or you can just put a blurb about them here.
  441. </div>
  442. </div>
  443. </div>
  444.  
  445. <div class="rel">
  446. <a target="_blank" href="URLHERE"><img src="https://pbs.twimg.com/media/DkooD0PW0AA4J7F.jpg"></a>
  447. <div class="wrds">
  448. <div class="t">
  449. <li><b>Name;</b> Rei Hino.</li>
  450. <li><b>Age</b> words words</li>
  451. <li><b>Location;</b> words words</li>
  452. <li><b>History;</b> words words</li>
  453. or you can just put a blurb about them here.
  454. </div>
  455. </div>
  456. </div>
  457.  
  458. <div class="rel">
  459. <a target="_blank" href="URLHERE"><img src="https://66.media.tumblr.com/2d087e8b6b8cb4b2439578ec78722398/tumblr_inline_p7iykpHscm1qk8x8b_250.png"></a>
  460. <div class="wrds">
  461. <div class="t">
  462. <li><b>Name;</b> Minako Aino.</li>
  463. <li><b>Age;</b> 20.</li>
  464. <li><b>Location;</b> words words</li>
  465. <li><b>History;</b> words words</li>
  466. or you can just put a blurb about them here.
  467. </div>
  468. </div>
  469. </div>
  470. </div>
  471.  
  472. </div>
  473. </div>
Advertisement
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!