Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <style>
- /* Last Update: 02/24/18 */
- /* PAGE BACKGROUND AND FONT */
- body {
- background-image:url(https://cdn.discordapp.com/attachments/414991205902974976/583076032274497566/cd01cafef69c16afe07f05c4a127e776.png);
- background-attachment:fixed;
- background-repeat:no-repeat;
- background-size:100% 100%;
- background-color:#dc143c;
- font-size:105%;
- font-family:serif;
- text-align:left;
- }
- /* MAIN DISPLAY COLORS */
- .color {
- background-color:#2b000f;
- border:2px solid #000000;
- color:#ffffff;
- }
- h2 {
- border-bottom:2px solid #f61307;
- width:100%;
- text-align:left;
- }
- b, h1, h2 {
- color:#d07e01;
- }
- a {
- text-decoration:none;
- color:;#ffa500;
- }
- /* GOOGLE CHROME SCROLLBARS */
- ::-webkit-scrollbar {
- width:8px;
- height:8px;
- background-color:transparent;
- }
- ::-webkit-scrollbar-thumb:vertical {
- background-color:#945b04;
- border-radius:5px;
- }
- ::-webkit-scrollbar-thumb:horizontal {
- background-color:#945b04;
- border-radius:5px;
- }
- /* CSS MEAT */
- #mugshot, .infobox {
- position:fixed;
- border-radius:1px;
- }
- #mugshot {
- top:7.5%;
- left:63%;
- height:89.5%;
- width:32%;
- overflow:hidden;
- }
- #mugshot img {
- position:absolute;
- top:50%;
- left:50%;
- height:100%;
- transform: translateX(-50%) translateY(-50%);
- -o-transform: translateX(-50%) translateY(-50%);
- -moz-transform: translateX(-50%) translateY(-50%);
- -webkit-transform: translateX(-50%) translateY(-50%);
- }
- .infobox {
- top:7.5%;
- left:5%;
- width:30%;
- padding:1%;
- overflow-y:auto;
- }
- #one {
- height:45%;
- }
- #two {
- top:63%;
- height:26%;
- }
- #three {
- left:40%;
- height:81.5%;
- width:18%;
- text-align:center;
- }
- #three img {
- width:70%;
- }
- #three h3 {
- margin-top:0%;
- margin-bottom:2%;
- }
- #equip {
- width:100%;
- }
- #equip img {
- height:8vh;
- width:8vh;
- border:2px solid #ffffff;
- border-radius:50%;
- }
- #equip h3 {
- display:inline-block;
- position:absolute;
- width:75%;
- text-indent:2.5%;
- }
- .infobox img {
- max-width:100%;
- }
- p {
- text-indent:5%;
- }
- #credit {
- position:fixed;
- height:17px;
- right:1%;
- bottom:0%;
- background-color:#ffffff;
- border-radius:5px;
- }
- </style>
- <body>
- <div class="color" id="mugshot">
- <img src="https://cdn.discordapp.com/attachments/575528207613427717/583080516027154448/f6255efe2df8ad45e000332fff6300ef.png" alt=""/>
- </div>
- <div class="color infobox" id="one">
- <h2>Stats</h2>
- <p style="text-indent:0%;">
- <b>Name:</b> Falish.D.Darakin
- <br/>
- <br>
- <b>Rank:</b> Captain of The Silent Sultans
- <br>Second Captain of the crew after the first died
- <br>
- <br>
- <b>Species:</b> Cursed One(Devilkin)
- <br/>
- <b>Gender:</b> Male
- <br/>
- <b>Age:</b> 17
- <br>Legally a adult for the race by one year
- <br/>
- <br>
- <b>Hair:</b> Dark red
- <br/>
- <b>Eyes:</b> Orange with no pupil
- <br>Bloodlusted: Red with a snake like pupil
- <br/>
- <br>
- <b>Height:</b> 6'0ft
- <br>
- <b>Weight:</b> 231Lb
- <br>
- <br>
- <b>Styles Known:</b>
- <br> Claw-Style
- <br>Stance one: Dodge and Counter
- <br>Snake Style: Coiling Strike
- <br>Ape Style: Iron Palm
- <br>
- </p>
- <h2>Story</h2>
- <p>
- Information and stuffity stuff stuff stufff. More stuuuufff. AND. MORE STUFF! Bippity boop bop biddly beep squap. Anyways, what do I usually do for examples when I need to fill space? OH YEAH! *ahem* Hello, people of Earth, I have come to devour you. Do not fear for it shall be a quick and painless death as I intake your entire planet. The sudden loss of atmospheric pressure and its protections will either freeze you in a millisecond or cause all of your blood to boil out of your body in a single instant. Hmm. I suppose that last one doesn't quite sound painless, but nonetheless it should be instantaneous.
- </p>
- <p>
- Paragraph two.
- </p>
- <p>
- Paragraph three.
- </p>
- <p>
- Paragraph four.
- </p>
- </ul>
- </div>
- <div class="color infobox" id="two">
- <h2>Styles,Skills, and Weapons</h2>
- <div id="equip">
- <img src="EQUIPMENT IMAGE URL HERE" alt=""/>
- <h3>Weapon 1</h3>
- </div>
- <p>
- Description here
- </p>
- <div id="Styles and Skills">
- <img src="EQUIPMENT IMAGE URL HERE" alt=""/>
- <h3>Weapon 2</h3>
- </div>
- <p>
- Description here
- </p>
- </div>
- <div class="color infobox" id="three">
- <h2>Connections</h2>
- <h3>Falish Dante: Little brother</h3>
- <img src="https://cdn.discordapp.com/attachments/575528207613427717/583100933693505556/ac.jpg" alt=""/>
- <br/>
- <h3>Falish Drake: Older Brother</h3>
- <img src="https://cdn.discordapp.com/attachments/575528207613427717/583100933697699847/RSIMR1T.jpg" alt=""/>
- <br/>
- <h3>Lilith Razorand: Crew mate and one of his race </h3>
- <img src="https://cdn.discordapp.com/attachments/575528207613427717/583100934184501248/Lillith.jpg" alt=""/>
- <br/>
- <h3>Name 4</h3>
- <img src="IMAGE HERE" alt=""/>
- <br>
- </div>
- <a href="http://wix.cera-nore.com/" target="_blank" title="CC#26">
- <img src="https://orig00.deviantart.net/9a8a/f/2017/256/c/d/cera_by_cera_nore-dbncbii.png" id="credit"/>
- </a>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement