API tools faq
paste
Alcyone-Codes

Code 10: Sci-fi Theme; 3 img, 3 text, tabs

Alcyone-Codes
Nov 10th, 2017
1,251
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.96 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <style type="text/css">
  4. /* Profile Preview: https://i.imgur.com/ycP4xWG.png */
  5.  
  6. /* Profile was created by Alcyone, for anyone to use freely. Please keep credit on the profile, please and thank you. If you are interested in commissioning a profile, go ahead and leave her some mail. */
  7.  
  8. /* Profile editing area near the end of the CSS area. Scroll until you see it. */
  9.  
  10. @font-face {
  11. font-family: 'VT323';
  12. font-style: normal;
  13. font-weight: 400;
  14. src: local('VT323 Regular'), local('VT323-Regular'), url(https://fonts.gstatic.com/s/vt323/v9/lo_L7yCDHYN9FAxvMCI1vQ.woff2) format('woff2');
  15. unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;}
  16.  
  17. ::-webkit-scrollbar {progress; width: 0px;}
  18. ::-webkit-scrollbar-thumb:vertical {
  19. background-color: #669bad;
  20. border: 0px solid transparent;
  21. -webkit-border-radius: 0px;
  22. box-shadow: 0 0 3px transparent, inset 0 0 6px transparent;
  23. -moz-transition:all 0.3s ease-in-out;
  24. -webkit-transition:all 0.3s ease-in-out;}
  25.  
  26. ::-webkit-scrollbar-thumb:vertical:hover,
  27. ::-webkit-scrollbar-button:start:decrement:hover,
  28. ::-webkit-scrollbar-button:end:increment:hover
  29. {border-color:transparent;box-shadow: 0 0 12px transparent, inset 0 0 16px transparent;}
  30.  
  31. ::selection {background: #fff; color:#000;}
  32.  
  33. body {background-color:#000000;
  34. background:url(https://images4.alphacoders.com/106/106826.jpg) center center no-repeat fixed;
  35. -webkit-background-size: cover;
  36. -moz-background-size: cover;
  37. -o-background-size: cover;
  38. background-size: cover;
  39. overflow-x:hidden;}
  40.  
  41. .bg {position: fixed;
  42. margin: auto;
  43. top: 0px;
  44. bottom: 0px;
  45. left: 0px;
  46. right: 0px;
  47. background: none url('')
  48. center center repeat;
  49. width: 1200px;
  50. height: 660px;
  51. text-align: center;
  52. border: 0px solid #fff;}
  53.  
  54. .pyramid {background: none;
  55. position: absolute;
  56. text-align: center;
  57. width: 0px;
  58. height: 0px;
  59. top: 50px;
  60. left: 250px;
  61. opacity: .5;
  62. border-left: 350px solid transparent;
  63. border-right: 350px solid transparent;
  64. border-bottom: 570px solid #000;
  65. overflow: auto;}
  66.  
  67. .square1 {background: #68a9d5;
  68. position: absolute;
  69. text-align: center;
  70. width: 30px;
  71. height: 30px;
  72. left: 585px;
  73. top: 16px;
  74. border: 0px solid #000;
  75. overflow: auto;}
  76.  
  77. .circle1 {background: #fff;
  78. position: absolute;
  79. text-align: center;
  80. width: 30px;
  81. height: 30px;
  82. left: 585px;
  83. top: 16px;
  84. border-radius: 50px;
  85. border: 0px solid #000;
  86. box-shadow: 0px 0px 45px 15px #a8fefe;
  87. overflow: auto;}
  88.  
  89. .square2 {background: #68a9d5;
  90. position: absolute;
  91. text-align: center;
  92. width: 30px;
  93. height: 30px;
  94. left: 220px;
  95. top: 620px;
  96. border: 0px solid #000;
  97. overflow: auto;}
  98.  
  99. .circle2 {background: #fff;
  100. position: absolute;
  101. text-align: center;
  102. width: 30px;
  103. height: 30px;
  104. left: 220px;
  105. top: 620px;
  106. border-radius: 50px;
  107. border: 0px solid #000;
  108. box-shadow: 0px 0px 45px 15px #a8fefe;
  109. overflow: auto;}
  110.  
  111. .square3 {background: #68a9d5;
  112. position: absolute;
  113. text-align: center;
  114. width: 30px;
  115. height: 30px;
  116. left: 950px;
  117. top: 620px;
  118. border: 0px solid #000;
  119. overflow: auto;}
  120.  
  121. .circle3 {background: #fff;
  122. position: absolute;
  123. text-align: center;
  124. width: 30px;
  125. height: 30px;
  126. left: 950px;
  127. top: 620px;
  128. border-radius: 50px;
  129. border: 0px solid #000;
  130. box-shadow: 0px 0px 45px 15px #a8fefe;
  131. overflow: auto;}
  132.  
  133. #navi1 {position: absolute;
  134. left: 585px;
  135. top: 16px;}
  136.  
  137. #navi1 a {background-color: #68a9d5;
  138. display: inline-block;
  139. height: 30px;
  140. width: 30px;
  141. border: 0px solid #000;
  142. transform: rotate(45deg);}
  143.  
  144. #navi2 {position: absolute;
  145. left: 220px;
  146. top: 620px;}
  147.  
  148. #navi2 a {background-color: #68a9d5;
  149. display: inline-block;
  150. height: 30px;
  151. width: 30px;
  152. border: 0px solid #000;
  153. transform: rotate(45deg);}
  154.  
  155. #navi3 {position: absolute;
  156. left: 950px;
  157. top: 620px;}
  158.  
  159. #navi3 a {background-color: #68a9d5;
  160. display: inline-block;
  161. height: 30px;
  162. width: 30px;
  163. border: 0px solid #000;
  164. transform: rotate(45deg);}
  165.  
  166. .lineleft {background: #68a9d5;
  167. position: absolute;
  168. text-align: center;
  169. width: 3px;
  170. height: 600px;
  171. left: 410px;
  172. top: 30px;
  173. border: 0px solid #000;
  174. box-shadow: 0px 0px 25px 2px #fff;
  175. transform: rotate(32deg);
  176. overflow: auto;}
  177.  
  178. .lineright {background: #68a9d5;
  179. position: absolute;
  180. text-align: center;
  181. width: 3px;
  182. height: 600px;
  183. left: 786px;
  184. top: 30px;
  185. border: 0px solid #000;
  186. box-shadow: 0px 0px 25px 2px #fff;
  187. transform: rotate(-32deg);
  188. overflow: auto;}
  189.  
  190. .linebtm {background: #68a9d5;
  191. position: absolute;
  192. text-align: center;
  193. width: 3px;
  194. height: 600px;
  195. left: 595px;
  196. top: 335px;
  197. border: 0px solid #000;
  198. box-shadow: 0px 0px 25px 2px #fff;
  199. transform: rotate(90deg);
  200. overflow: auto;}
  201.  
  202. .linebtmright {background: #68a9d5;
  203. position: absolute;
  204. text-align: center;
  205. width: 100px;
  206. height: 3px;
  207. left: 1093px;
  208. top: 634px;
  209. border: 0px solid #000;
  210. box-shadow: 0px 0px 25px 2px #fff;
  211. overflow: auto;}
  212.  
  213. .linebtmleft {background: #68a9d5;
  214. position: absolute;
  215. text-align: center;
  216. width: 100px;
  217. height: 3px;
  218. left: 10px;
  219. top: 634px;
  220. border: 0px solid #000;
  221. box-shadow: 0px 0px 25px 2px #fff;
  222. overflow: auto;}
  223.  
  224. .lineleftleft {background: #68a9d5;
  225. position: absolute;
  226. text-align: center;
  227. width: 3px;
  228. height: 100px;
  229. left: 10px;
  230. top: 535px;
  231. border: 0px solid #000;
  232. box-shadow: 0px 0px 25px 2px #fff;
  233. overflow: auto;}
  234.  
  235. .linerightright {background: #68a9d5;
  236. position: absolute;
  237. text-align: center;
  238. width: 3px;
  239. height: 100px;
  240. left: 1190px;
  241. top: 535px;
  242. border: 0px solid #000;
  243. box-shadow: 0px 0px 25px 2px #fff;
  244. overflow: auto;}
  245.  
  246. .linetopright {background: #68a9d5;
  247. position: absolute;
  248. text-align: center;
  249. width: 350px;
  250. height: 3px;
  251. left: 840px;
  252. top: 10px;
  253. border: 0px solid #000;
  254. box-shadow: 0px 0px 25px 2px #fff;
  255. overflow: auto;}
  256.  
  257. .linetopleft {background: #68a9d5;
  258. position: absolute;
  259. text-align: center;
  260. width: 350px;
  261. height: 3px;
  262. left: 10px;
  263. top: 10px;
  264. border: 0px solid #000;
  265. box-shadow: 0px 0px 25px 2px #fff;
  266. overflow: auto;}
  267.  
  268. /* ------------------------------------------ */
  269. /* ------------------------------------------ */
  270. /* ------------------------------------------ */
  271.  
  272. /* Start editing your stuff below. */
  273.  
  274. /* Links */
  275. a {color:#edcbec;
  276. text-shadow:
  277. #0c4da3 -1px 0px,
  278. #0c4da3 0px 1px,
  279. #0c4da3 1px 0px,
  280. #0c4da3 0px -1px;
  281. text-decoration: none;}
  282.  
  283. /* Bold */
  284. b {color: #fff;
  285. text-shadow:
  286. #2d4be0 -1px 0px,
  287. #2d4be0 0px 1px,
  288. #2d4be0 1px 0px,
  289. #2d4be0 0px -1px;
  290. text-decoration: none;}
  291.  
  292. /* Italics */
  293. i {color: #fff;
  294. text-shadow:
  295. #346493 -1px 0px,
  296. #346493 0px 1px,
  297. #346493 1px 0px,
  298. #346493 0px -1px;}
  299.  
  300. /* Underline */
  301. u {color: #fff;
  302. text-shadow:
  303. #dd5e5e -1px 0px,
  304. #dd5e5e 0px 1px,
  305. #dd5e5e 1px 0px,
  306. #dd5e5e 0px -1px;
  307. text-decoration-style: dotted;}
  308.  
  309. /* Headers */
  310. h1 {font-family: 'VT323';
  311. font-variant: small-caps;
  312. font-size:30px;
  313. letter-spacing: 2px;
  314. color:#fff;
  315. text-align: center;
  316. text-shadow:
  317. #68a9d5 -2px 0px,
  318. #68a9d5 0px 2px,
  319. #68a9d5 2px 0px,
  320. #68a9d5 0px -2px;}
  321.  
  322. .info {background: #000;
  323. position: absolute;
  324. text-align: left;
  325. width: 690px;
  326. height: 390px;
  327. top: 150px;
  328. left: 250px;
  329. border: 1px solid #404040;
  330. padding:5px 5px 5px 5px;
  331. overflow: auto;
  332. z-index:1;}
  333.  
  334. .info:target{z-index:10;}
  335.  
  336. .words {background: #000;
  337. font-family: 'VT323';
  338. font-size: 19px;
  339. color: #fff;
  340. position: absolute;
  341. text-align: Justify;
  342. width: 690px;
  343. height: 390px;
  344. left: 0px;
  345. top: 0px;
  346. border: 0px solid #fff;
  347. overflow: auto;
  348. padding:5px 5px 5px 5px;
  349. z-index:2;}
  350.  
  351. .stats {background: #000;
  352. font-family: 'VT323';
  353. font-size: 19px;
  354. color: #fff;
  355. position: absolute;
  356. text-align: Justify;
  357. width: 387px;
  358. height: 390px;
  359. left: 0px;
  360. top: 0px;
  361. border: 0px solid #fff;
  362. overflow: auto;
  363. padding:5px 5px 5px 5px;}
  364.  
  365. /* Inside stat box picture 300x400 */
  366. .statspic {background: none;
  367. background: url('http://i.picpar.com/')
  368. center center no-repeat;
  369. position: absolute;
  370. text-align: center;
  371. width: 300px;
  372. height: 400px;
  373. top: 0px;
  374. left: 400px;
  375. border: 0px solid #000;
  376. overflow: auto;}
  377.  
  378. /* Left Picture 250x250 */
  379. .leftpic {background: none;
  380. background: url('http://i.picpar.com/')
  381. center center no-repeat;
  382. position: absolute;
  383. text-align: center;
  384. width: 250px;
  385. height: 250px;
  386. top: 0px;
  387. left: 0px;
  388. border-radius: 250px;
  389. border: 1px solid #404040;
  390. overflow: auto;}
  391.  
  392. /* Right Picture 250x250 */
  393. .rightpic {background: none;
  394. background: url('http://i.picpar.com/')
  395. center center no-repeat;
  396. position: absolute;
  397. text-align: center;
  398. width: 250px;
  399. height: 250px;
  400. top: 0px;
  401. left: 950px;
  402. border-radius: 250px;
  403. border: 1px solid #404040;
  404. overflow: auto;}
  405.  
  406. /* Character Name */
  407. .title {position: absolute;
  408. font-family: 'VT323';
  409. color: #fff;
  410. font-size: 70px;
  411. top: 545px;
  412. left:300px;
  413. width: 600px;
  414. border: 0px solid #fff;
  415. text-align: center;
  416. text-shadow:
  417. #68a9d5 -2px 0px,
  418. #68a9d5 0px 2px,
  419. #68a9d5 2px 0px,
  420. #68a9d5 0px -2px;
  421. z-index:99;}
  422. </style>
  423.  
  424. <div class="bg">
  425.  
  426. <div class="pyramid"></div>
  427. <div class="circle1"></div>
  428. <div class="circle2"></div>
  429. <div class="circle3"></div>
  430. <div class="square1"></div>
  431. <div class="square2"></div>
  432. <div class="square3"></div>
  433. <div class="lineleft"></div>
  434. <div class="lineright"></div>
  435. <div class="linebtm"></div>
  436.  
  437. <div class="linetopright"></div>
  438. <div class="linetopleft"></div>
  439. <div class="linerightright"></div>
  440. <div class="lineleftleft"></div>
  441. <div class="linebtmright"></div>
  442. <div class="linebtmleft"></div>
  443. <div class="leftpic"></div>
  444. <div class="rightpic"></div>
  445.  
  446. <div id="navi1"><a href="#1"></a></div>
  447. <div id="navi2"><a href="#2"></a></div>
  448. <div id="navi3"><a href="#3"></a></div>
  449.  
  450. <div class="title">Character Name</div>
  451.  
  452. <div id="1" class="info">
  453. <div class="statspic"></div>
  454. <div class="stats">
  455.  
  456. <h1>Statistics</h1>
  457.  
  458. <font style=float:left><b>Stat</b></font> <font style=float:right><i>Info</i></font><br>
  459. <font style=float:left><b>Stat</b></font> <font style=float:right><i>Info</i></font><br>
  460. <font style=float:left><b>Stat</b></font> <font style=float:right><i>Info</i></font><br>
  461. <font style=float:left><b>Stat</b></font> <font style=float:right><i>Info</i></font><br>
  462. <font style=float:left><b>Stat</b></font> <font style=float:right><i>Info</i></font><br>
  463. <font style=float:left><b>Stat</b></font> <font style=float:right><i>Info</i></font><br>
  464. <font style=float:left><b>Stat</b></font> <font style=float:right><i>Info</i></font><br>
  465. <font style=float:left><b>Stat</b></font> <font style=float:right><i>Info</i></font><br>
  466. <font style=float:left><b>Stat</b></font> <font style=float:right><i>Info</i></font><br>
  467. <font style=float:left><b>Stat</b></font> <font style=float:right><i>Info</i></font><br>
  468. <font style=float:left><b>Stat</b></font> <font style=float:right><i>Info</i></font><br>
  469. <font style=float:left><b>Stat</b></font> <font style=float:right><i>Info</i></font><br>
  470. <font style=float:left><b>Stat</b></font> <font style=float:right><i>Info</i></font><br>
  471. <font style=float:left><b>Stat</b></font> <font style=float:right><i>Info</i></font><br>
  472.  
  473. </div></div>
  474.  
  475. <div id="2" class="info">
  476. <div class="words">
  477. <h1>Story</h1>
  478. <b>Bold</b>, <i>Italics</i>, <u>underline</u>, <a target="_blank" href="https://roleplay.chat/profile.php?user=" title="">Link</a>
  479. <br>
  480. <br>
  481. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  482. <br>
  483. <br>
  484. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  485. </div></div>
  486.  
  487. <div id="3" class="info">
  488. <div class="words">
  489. <h1>Out of Character</h1>
  490.  
  491. <b>00</b>. Profile was created by <a target="_blank" href="https://roleplay.chat/profile.php?user=Alcyone" title="">Alcyone</a>, for anyone to use freely. If you are interested in commissioning a profile, go ahead and leave her some mail. Do not delete the credit, please.<br>
  492. <b>01</b>. OOC Rule here.<br>
  493. <b>01</b>. OOC Rule Here.<br>
  494. <b>02</b>. OOC Rule Here.<br>
  495. <b>03</b>. OOC Rule Here.<br>
  496. <b>04</b>. OOC Rule Here.<br>
  497. <b>05</b>. OOC Rule Here.<br>
  498. <b>06</b>. OOC Rule Here.<br>
  499. <b>07</b>. OOC Rule Here.<br>
  500.  
  501. </div></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!