Advertisement
Alcyone-Codes

Code 7; 1 img, 5 text, tabs

Sep 25th, 2017
1,632
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.32 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <style type="text/css">
  4.  
  5. /* Preview: http://i.picpar.com/7m5c.png */
  6.  
  7. /* Profile was created by Alcyone, for anyone to use freely. If you are interested in commissioning a profile, go ahead and leave her some mail. */
  8.  
  9. @import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
  10. @font-face {
  11. font-family: 'Open Sans Condensed';
  12. font-style: normal;
  13. font-weight: 300;
  14. src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(https://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.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, U+E0FF, U+EFFD, U+F000;
  16. }
  17.  
  18. @import url(https://fonts.googleapis.com/css?family=Noto+Sans);
  19. @font-face {
  20. font-family: 'Noto Sans';
  21. font-style: normal;
  22. font-weight: 400;
  23. src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  24. 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, U+E0FF, U+EFFD, U+F000;
  25. }
  26.  
  27. body, a:hover {cursor: url(https://upload.wikimedia.org/wikipedia/commons/d/d8/Black_Cursor.svg), progress !important; }
  28.  
  29.  
  30. ::-webkit-scrollbar {progress; width: 4px;}
  31. ::-webkit-scrollbar-thumb:vertical {
  32. background-color: none;
  33. border: 1px solid #101010;
  34. -webkit-border-radius: 1px;
  35. box-shadow: 0 0 3px transparent, inset 0 0 6px transparent;
  36. -moz-transition:all 0.3s ease-in-out;
  37. -webkit-transition:all 0.3s ease-in-out;}
  38. ::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-button:start:decrement:hover, ::-webkit-scrollbar-button:end:increment:hover {border-color:transparent;box-shadow: 0 0 12px transparent, inset 0 0 16px transparent;}
  39.  
  40. .bg {position: fixed;
  41. margin: auto;
  42. top: 0px;
  43. bottom: 0px;
  44. left: 0px;
  45. right: 0px;
  46. background: none url('')
  47. center center repeat;
  48. width: 800px;
  49. height: 550px;
  50. text-align: center;
  51. border: 0px solid #ccc;}
  52.  
  53. /* ------------------------------------------ */
  54. /* ------------------------------------------ */
  55. /* ------------------------------------------ */
  56.  
  57. /* Start editing your stuff below. */
  58.  
  59. body {background-color:#000000;
  60. background:url(http://weknowyourdreams.com/images/fog/fog-05.jpg)
  61. center center no-repeat fixed;
  62. -webkit-background-size: cover;
  63. -moz-background-size: cover;
  64. -o-background-size: cover;
  65. background-size: cover;
  66. overflow-x:hidden;}
  67.  
  68. .screen {background: #000;
  69. position: fixed;
  70. opacity: .85;
  71. text-align: center;
  72. width: 5000px;
  73. height: 5000px;
  74. top: 0px;
  75. left: 0px;
  76. border: 0px solid #000;}
  77.  
  78.  
  79. /* Paragraph text, etc. */
  80. p {background: none;
  81. font-size:14px;
  82. font-family: Open Sans Condensed;
  83. text-align: justify;
  84. color:#646464;
  85. padding:1px 5px 5px 5px;}
  86.  
  87. /* Link */
  88. a {color:#d73838;
  89. letter-spacing: 1px;
  90. text-decoration: none;}
  91.  
  92. /* Bold */
  93. b {letter-spacing: 2px;
  94. color:#892929;}
  95.  
  96. /* Italics */
  97. i {color:#abaaaa;
  98. letter-spacing: 1px;}
  99.  
  100. /* Underline */
  101. u {color:#abaaaa;
  102. letter-spacing: 1px;}
  103.  
  104. /* Change border px from 1 to 0 after applying image. */
  105.  
  106. .transparentimage {background: none;
  107. background:url('')
  108. center center no-repeat;
  109. position: absolute;
  110. text-align: center;
  111. width: 500px;
  112. height: 600px;
  113. top: 0px;
  114. left: 500px;
  115. border: 1px solid #ccc;
  116. overflow: auto;}
  117.  
  118. .title {font-size: 35px;
  119. left: 105px;
  120. top: 160px;
  121. width: 410px;
  122. text-align: right;
  123. position: absolute;
  124. padding:5px 5px 5px 5px;
  125. color: #606060;
  126. border: 0px solid #000;
  127. text-shadow:
  128. #000 -1px 1px,
  129. #000 1px 1px,
  130. #000 1px 1px,
  131. #000 1px -1px;}
  132.  
  133. .boxout {background: #0a0a0a;
  134. opacity: .5;
  135. position: absolute;
  136. text-align: center;
  137. width: 420px;
  138. height: 220px;
  139. top: 200px;
  140. left: 100px;
  141. border: 2px solid #000;
  142. border-radius: 1px 1px 1px 1px;
  143. overflow: auto;}
  144.  
  145. .words {background: #000;
  146. position: absolute;
  147. text-align: center;
  148. width: 400px;
  149. height: 200px;
  150. left: 110px;
  151. top: 210px;
  152. border: 2px solid #000;
  153. overflow: auto;}
  154.  
  155. #navi1 {
  156. position: absolute;
  157. top: 220px;
  158. left: 525px;
  159. background: url('');
  160. text-align: center;}
  161.  
  162. a.navi, a.navi:visited, a.navi:hover{
  163. text-decoration: none;
  164. display: block;
  165. height: 10px;
  166. width: 10px;
  167. margin-bottom: 30px;
  168. margin-left: 10px;
  169. border: 1px double #232323;
  170. color: #111;
  171. background-color: #090909;
  172. border-radius: 1px;
  173. box-shadow:inset 0 0 4px 1px #232323, 0 0 4px 2px #000;
  174.  
  175. #box1 {background: none;
  176. width: 400px;
  177. height: 200px;
  178. position: fixed;
  179. left: 0px;
  180. top: 0px;
  181. border: 0px solid #ccc;
  182. overflow: auto;}
  183.  
  184. </style>
  185. <div class="screen"></div>
  186.  
  187. <div class="bg">
  188. <div class="transparentimage"></div>
  189. <div class="boxout"></div>
  190.  
  191. <div class="title">Character Name</div>
  192.  
  193. <div id="navi1">
  194. <a href="#one"class="navi"> </a>
  195. <a href="#two"class="navi"> </a>
  196. <a href="#three"class="navi"> </a>
  197. <a href="#four"class="navi"> </a>
  198. <a href="#five"class="navi"> </a>
  199. </div>
  200.  
  201. <div class="words">
  202. <div id="box1">
  203. <div style="background: none; position: absolute; width: 400px; height: 200px; left: 0px; top: 0px; border: 0px solid #000; overflow-y: hidden;">
  204.  
  205. <a name="one"></a><div style="width: 400px; height: 200px; overflow: auto;">
  206.  
  207. <p>
  208.  
  209. <font style=float:left><b>Stat:</b></font> <font style=float:right><i>Info</i></font><br>
  210. <font style=float:left><b>Stat:</b></font> <font style=float:right><i>Info</i></font><br>
  211. <font style=float:left><b>Stat:</b></font> <font style=float:right><i>Info</i></font><br>
  212. <font style=float:left><b>Stat:</b></font> <font style=float:right><i>Info</i></font><br>
  213. <font style=float:left><b>Stat:</b></font> <font style=float:right><i>Info</i></font><br>
  214. <font style=float:left><b>Stat:</b></font> <font style=float:right><i>Info</i></font><br>
  215. <font style=float:left><b>Stat:</b></font> <font style=float:right><i>Info</i></font><br>
  216. <font style=float:left><b>Stat:</b></font> <font style=float:right><i>Info</i></font><br>
  217. </p>
  218.  
  219.  
  220. </div>
  221.  
  222. <a name="two"></a><div style="width: 400px; height: 200px; overflow: auto;">
  223. <p><b>Bold</b>, <i>Italics</i>, <a href="">Link</a></p>
  224. <p>
  225.  
  226. Tab 2
  227.  
  228. </p>
  229. </div>
  230.  
  231. <a name="three"></a><div style="width: 400px; height: 200px; overflow: auto;">
  232. <p>
  233.  
  234. Tab 3
  235.  
  236. </p>
  237.  
  238. </div>
  239.  
  240. <a name="four"></a><div style="width: 400px; height: 200px; overflow: auto;">
  241. <p>
  242.  
  243. <a href="linkforprofilehere" target="_blank"title="Friend Here"><img src="iconimagehere" alt="" width="70" height="70" /></a>
  244. <a href="linkforprofilehere" target="_blank"title="Friend Here"><img src="iconimagehere" alt="" width="70" height="70" /></a>
  245. <a href="linkforprofilehere" target="_blank"title="Friend Here"><img src="iconimagehere" alt="" width="70" height="70" /></a>
  246. <a href="linkforprofilehere" target="_blank"title="Friend Here"><img src="iconimagehere" alt="" width="70" height="70" /></a>
  247.  
  248.  
  249. </p>
  250. </div>
  251.  
  252. <a name="five"></a><div style="width: 400px; height: 200px; overflow: auto;">
  253. <p>
  254.  
  255. <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.<br><b>01</b>. OOC Rule here.<br>
  256. <b>02</b>. OOC Rule here.<br>
  257. <b>03</b>. OOC Rule here.<br>
  258. <b>04</b>. OOC Rule here.<br>
  259.  
  260. </p>
  261. </div>
  262.  
  263. </div></div></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement