API tools faq
paste
Advertisement
NightSkyWriter

WriterLife Character Page

NightSkyWriter
Mar 19th, 2019
102
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.41 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!-------------------------------CSS Coding------------------------------------->
  4.  
  5. <!DOCTYPE html>
  6.  
  7. <html>
  8. <div id="Container">
  9. <head>
  10. <style>
  11.  
  12.  
  13.  
  14. Body {
  15. background-color: #222;
  16. font-family: Bookman-Body-Copy, Times-New-Roman, Hevetica, serif;
  17. background-image: url("https://images2.alphacoders.com/261/thumb-1920-26102.jpg");
  18. background-repeat: no-repeat;
  19. background-size: cover;
  20. }
  21.  
  22. a {
  23.  
  24. color: #333;
  25. text-decoration: none;
  26.  
  27. }
  28.  
  29.  
  30. #Top {
  31. background-color: #;
  32. height: 30px;
  33.  
  34. }
  35.  
  36.  
  37. #Header {
  38. background-color: #fff;
  39. }
  40. #TippyToppy {
  41. background-color: #fff;
  42. }
  43.  
  44. #Container {
  45. background-color: #fff;
  46. width: 1000px;
  47. margin-left: auto;
  48. margin-right: auto;
  49. box-shadow: 5px 10px #000;
  50. padding: 10px;
  51. }
  52.  
  53. #Main {
  54. background-color: #000;
  55. }
  56. #Info {
  57. background-color: #ccccff;
  58. text-align: left;
  59. width: 620px;
  60. height: 150px;
  61. padding: 10px 10px 10px 10px;
  62. float: left;
  63. }
  64.  
  65. #Profile {
  66. float: left;
  67. padding: 0px 5px 0px 0px;
  68.  
  69.  
  70. }
  71.  
  72. #age {
  73. float: left;
  74. width: 150px;
  75. height: 25px;
  76. background-color: #FFFACD;
  77. text-align: center;
  78. padding: 0px 10px 30px 0px;
  79.  
  80. }
  81.  
  82. #xtra {
  83. float: right;
  84. width: 150px;
  85. height: 25px;
  86. background-color: #FFFACD;
  87. text-align: center;
  88. padding: 0px 10px 30px 0px;
  89.  
  90. }
  91.  
  92. #Moral {
  93. float: left;
  94. width: 150px;
  95. height: 25px;
  96. background-color: #FFFACD;
  97. text-align: center;
  98. padding: 0px 10px 30px 0px;
  99.  
  100. }
  101.  
  102.  
  103. #team {
  104. float: right;
  105. width: 150px;
  106. height: 25px;
  107. background-color: #FFFACD;
  108. text-align: center;
  109. padding: 0px 10px 30px 0px;
  110.  
  111. }
  112.  
  113.  
  114. #whiteline {
  115. background-color: white;
  116. float: right;
  117. width: 620px;
  118.  
  119.  
  120. }
  121.  
  122.  
  123.  
  124. #bio {
  125. width: 850px;
  126. float: left;
  127. padding: 10px;
  128. background-color: #F8F8FF;
  129.  
  130. }
  131.  
  132. #Links {
  133. background-color: #F5F1ff;
  134. color: #000;
  135. width: 240px;
  136. padding: 15px;
  137. float: right;
  138.  
  139. }
  140. #Links .selected {
  141. font-weight: bold;
  142. }
  143.  
  144. #Links ul {
  145. list-style-type: none;
  146. padding: 0px;
  147. }
  148.  
  149. #biobox {
  150. background-color: #c0e0e0;
  151.  
  152. }
  153.  
  154. #namebox {
  155. background-color: #aaa0ff;
  156. text-align: center;
  157. }
  158.  
  159. #physbox {
  160. background-color: #c0e0e0;
  161.  
  162. }
  163.  
  164. #fambox {
  165. background-color: #c0e0e0;
  166. }
  167.  
  168. #affbox {
  169. background-color: #c0e0e0;
  170.  
  171. }
  172.  
  173. #persbox {
  174. background-color: #c0e0e0;
  175.  
  176. }
  177.  
  178. #footer {
  179. text-align: right;
  180. clear: all;
  181. padding: 10px;
  182. background-color: #999999;
  183. color: white;
  184. }
  185.  
  186. </style>
  187. </head>
  188. <!--------------------Body---------------------------->
  189. <!DOCTYPE html>
  190.  
  191. <html>
  192.  
  193.  
  194. <div id="Container">
  195. <head>
  196. <title>Character Page</title>
  197. <link rel="stylesheet" type="text/css" href="Wiki Css.css"/>
  198. </head>
  199. <!--------------------Body---------------------------->
  200. <body>
  201.  
  202. <div id="Top">
  203. <i>Tags:
  204. <a href="/">Character Tag</a>
  205. ,
  206. <a href="/">WIP Tag</a>
  207. ,
  208. <a href="/">Team Tag</a>
  209. </i>
  210. </div>
  211.  
  212. <div id="TippyToppy">
  213. <h1>Character Name</h1>
  214. <hr>
  215.  
  216. </div>
  217. <!-------------------------------------------------------------------------------------------------------->
  218. <div id="Header">
  219.  
  220.  
  221. </div>
  222. <!-------------------------------------------------------------------------------------------------------->
  223.  
  224. <!-------------------------------------------------------------------------------------------------------->
  225. <div id="Main">
  226.  
  227.  
  228. <!--------------------------------------------------------------------------------------------------------
  229. <div id="whiteline">
  230. <br>
  231.  
  232. </div>
  233. <!-------------------------------------------------------------------------------------------------------->
  234. <div id="bio">
  235. <div id="Links">
  236.  
  237. <div id="Profile"> <!--This is for your OC pic. Try to keep it at 240x300 pixels-->
  238. <img src="https://i.pinimg.com/originals/60/23/fa/6023fa7d48388b97aa69e55df162e0ba.jpg"
  239. width="240px"
  240. height="300px" >
  241. </div>
  242.  
  243. <div id="namebox">
  244. <b>Character Name</b>
  245. <hr>
  246. </div>
  247.  
  248. <div id="biobox">
  249. <b>Biographical Information</b>
  250. </div>
  251. <ul>
  252. <b>
  253. <li> Born: XXXX </li>
  254.  
  255. <li> Martial Status: Unmarried/Married </li>
  256.  
  257. <li>Nationality: XXXX</li>
  258.  
  259. </b>
  260. </ul>
  261.  
  262. <div id="physbox">
  263. <b>Physical Information</b>
  264. </div>
  265. <ul>
  266. <b>
  267. <li> Species: XXXX </li>
  268.  
  269. <li> Gender: X </li>
  270.  
  271. <li> Hair Color: </li>
  272.  
  273. <li>Eye Color: X</li>
  274.  
  275. <li>Skin Color: X</li>
  276.  
  277. <li>Height: X.X</li>
  278.  
  279. <li>Build: XXXX</li>
  280. </b>
  281. </ul>
  282.  
  283. <div id="fambox">
  284. <b>Family Information</b>
  285. </div>
  286. <ul>
  287. <b>
  288. <li> Spouse: XXXX</li>
  289.  
  290. <li> Mother: XXXX </li>
  291.  
  292. <li> Father: XXXX </li>
  293.  
  294. <li> Sibling(s): XXXX</li>
  295.  
  296. <li>Grandmother: XXXX</li>
  297.  
  298. <li>Grandfather: XXXX</li>
  299.  
  300. </b>
  301. </ul>
  302.  
  303.  
  304. <div id="persbox">
  305. <b>Personality</b>
  306. </div>
  307. <ul>
  308. <b>
  309. <li> MBTI: XXXX </li>
  310.  
  311. <li> Enneagram: XXXX </li>
  312.  
  313. <li>Three Best Traits: XXXX, XXXX, XXXX</li>
  314.  
  315. <li>Three Worst Traits: XXXX, XXXX, XXXX</li>
  316.  
  317. </b>
  318. </ul>
  319.  
  320. <div id="affbox">
  321. <b>Affiliation</b>
  322. </div>
  323. <ul>
  324. <b>
  325. <li> Occupation: XXXX </li>
  326.  
  327. <li> Loyalties: XXXX </li>
  328.  
  329. <li>Other Groups: XXXX</li>
  330.  
  331. </b>
  332. </ul>
  333.  
  334. </div>
  335. <!---->
  336. <p>
  337. <h2>Biography</h2>
  338. <hr>
  339. <b>Early Life</b>
  340. <br>
  341.  
  342. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  343. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  344. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  345. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  346. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  347. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  348. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  349. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  350. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  351.  
  352. <br>
  353. <br>
  354.  
  355. <b>Early Career</b>
  356. <br>
  357. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  358. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  359. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  360. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  361. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  362.  
  363. <br>
  364. <br>
  365.  
  366. <b>Major Life Point One</b>
  367. <br>
  368. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  369. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  370. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  371. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  372. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  373.  
  374. <br>
  375. <br>
  376.  
  377. <b>Major Life Point Two</b>
  378. <br>
  379. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  380. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  381. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  382. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  383. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  384. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  385. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  386. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  387.  
  388. <br>
  389. <br>
  390.  
  391. <b>Major Life Point Three</b>
  392. <br>
  393. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  394. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  395. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  396. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  397. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  398. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  399. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  400. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  401. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  402. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  403.  
  404. <br>
  405. <br>
  406.  
  407. <b>Major Life Point Four</b>
  408. <br>
  409. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  410. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  411. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  412. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  413. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  414. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  415. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  416. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  417. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  418. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  419.  
  420.  
  421. </div>
  422.  
  423.  
  424. </div>
  425.  
  426.  
  427. <!----------------------------CREDIT! DO NOT TOUCH ----------------------------->
  428. <div id="footer">
  429. Theme by <a href="https://nightskywriter.tumblr.com/">NightSkyWriter</a>
  430.  
  431. </div>
  432. </div>
  433. <!body>
  434. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!