𝐑𝐄𝐀𝐋𝐋𝐘, 𝐃𝐀𝐍𝐈𝐄𝐋

Sinful Misfortune Resources - Layouts - Zero Gravity.

- Do not remove credits from the code.
- Do not redistribute the codes.
- Do not share the codes with friends, just have them add me.
- Note: Matching PSD is called Plus Ultra

If you're going to alter the stylesheet, please have a basic understanding of HTML/CSS. I will not walk you through it step by step, simply because I don't have enough time to do so for everyone and keep up with updates. You do need a basic understanding of how stylesheets work in order to use these codes. Please do not ask me for help unless you are extremely confused. It's all pretty easy to figure out if you look at the page while you go through and edit it. Remember to put each code in the designated area.

Thank you for choosing Sinful Misfortune.
Sincerely, Cryptic.


--------------------------- [ ABOUT ME ] ---------------------------

</td></tr></table></td></tr></table></td></tr></table>
<style>

{ S P E C I A L  F O N T S - - C R Y P T I C }

@import url(https://fonts.googleapis.com/css?family=);
@font-face {font-family:slkscrn;src: url('http://static.tumblr.com/jtvmcoc/baIn9f1ea/slkscr.ttf');}
@import url(https://fonts.googleapis.com/css?family=);
@font-face {font-family:bbbrush;src: url('https://static.tumblr.com/blzkhux/6Kvpmsutj/osfc-bristle-brush-script-regular-demo.ttf');}


{ B A S I C  C O D I N G -- C R Y P T I C }

body {
background-color:#d8a4ba;
background-image:url("https://i.imgur.com/aiBvfCi.png");
background-attachment:fixed;
background-repeat:no-repeat;
background-position:top left;
margin-top: 0px;
overflow:auto;
}

.title{
left: 0%;
top: 0%;
Z-index:2!important;
background-color:#b56fa6;
position: absolute;
Width:1135px;
height:60px;
top:45px;
padding:5px;
Margin-left:200px;
text-align: left;
Opacity:1;
border:5px solid #824f74;
}

.navo{
left: 0%;
top: 0%;
Z-index:2!important;
background-color:#b56fa6;
position: absolute;
Width:1135px;
height:35px;
top:135px;
padding:5px;
Margin-left:200px;
text-align: left;
Opacity:1;
border:5px solid #824f74;
}

.boxone{
left: 0%;
top: 0%;
Z-index:2!important;
background-color:#b56fa6;
position: absolute;
Width:450px;
height:275px;
top:200px;
padding:5px;
Margin-left:200px;
text-align: left;
Opacity:1;
border:5px solid #824f74;
}

.boxone img{
border:1px solid #f0c0cc;
}

.boxtwo{
left: 0%;
top: 0%;
Z-index:2!important;
background-color:#b56fa6;
position: absolute;
Width:350px;
height:275px;
top:200px;
padding:5px;
Margin-left:680px;
text-align: left;
Opacity:1;
border:5px solid #824f74;
}

.boxthree{
left: 0%;
top: 0%;
Z-index:2!important;
background-color:#b56fa6;
position: absolute;
Width:275px;
height:275px;
top:200px;
padding:5px;
Margin-left:1060px;
text-align: left;
Opacity:1;
border:5px solid #824f74;
}

.boxthree img{
border:1px solid #f0c0cc;
}

.boxfour{
left: 0%;
top: 0%;
Z-index:2!important;
background-color:#b56fa6;
position: absolute;
Width:200px;
height:350px;
top:505px;
padding:5px;
Margin-left:200px;
text-align: left;
Opacity:1;
border:5px solid #824f74;
}

.boxfive{
left: 0%;
top: 0%;
Z-index:2!important;
background-color:#b56fa6;
position: absolute;
Width:200px;
height:350px;
top:505px;
padding:5px;
Margin-left:430px;
text-align: left;
Opacity:1;
border:5px solid #824f74;
}

.boxsix{
left: 0%;
top: 0%;
Z-index:2!important;
background-color:#b56fa6;
position: absolute;
Width:215px;
height:350px;
top:505px;
padding:5px;
Margin-left:660px;
text-align: left;
Opacity:1;
border:5px solid #824f74;
}

.boxsix img{
border:1px solid #f0c0cc;
}

.boxseven{
left: 0%;
top: 0%;
Z-index:2!important;
background-color:#b56fa6;
position: absolute;
Width:200px;
height:350px;
top:505px;
padding:5px;
Margin-left:905px;
text-align: left;
Opacity:1;
border:5px solid #824f74;
}

.boxseven img{
border:1px solid #f0c0cc;
}

.boxeight{
left: 0%;
top: 0%;
Z-index:2!important;
background-color:#b56fa6;
position: absolute;
Width:200px;
height:350px;
top:505px;
padding:5px;
Margin-left:1135px;
text-align: left;
Opacity:1;
border:5px solid #824f74;
}

.boxeight img{
border:1px solid #f0c0cc;
}


{ TEXT EFFECTS // CRYPTIC}

p, div, table, tr, td, font, br {
Font:9px Andale mono;
line-height:10px;
letter-spacing:0px;
Text-transform:none;
color:#f8dfe8;
Font-weight:normal; }

b {
    Font-family:andale mono;
    font-size: 10px;
    color:#d7b1c1;
    letter-spacing: 0px;
    text-transform:lowercase;
    font-weight:normal;
    Font-style:italic;
    letter-spacing: 0px;
    line-height:10px;}

I {
    font: 10px andale mono;
    text-transform:lowercase;
    font-weight:normal;
    color:#d389c2;
    line-height:10px;
    letter-spacing: 0px;
    Font-style:italic;
    }

u {
    font: 10px andale mono;
    text-transform:lowercase;
    font-style:none;
    font-weight:normal;
    color:#b767a5;
    line-height:10px;
    letter-spacing: 0px;
    Font-style:italic;
    }


Em {
    Font-family:andale mono;
    color:#904a84;
    font-size:20px;
    text-transform: lowercase;
    Font-style:italic;
    line-height: 12px;
    letter-spacing:-2px;
    Margin-bottom:3px;}

a:link, a:active, a:visited, a:link b, a:active b, a:visited b {
Font-family:andale mono;
font-size:9px;
line-height:9px;
letter-spacing:0px;
font-weight:normal;
text-transform:lowercase;
text-decoration:none;
color:#e9c5da;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
text-shadow:10px 0px transparent, -10px 0px transparent;}

a:hover, a:hover b {
text-decoration:none;
Letter-spacing:2px;
color:#904a84;
}

a.nav:link, a.nav:active, a.nav:visited, a.nav:link b, a.nav:active b, a.nav:visited b {
Font-family:andale mono;
font-size:9px;
line-height:15px;
letter-spacing:2px;
font-weight:normal;
Display:inline-block;
width:110px;
Text-transform:lowercase;
Margin:1px;
Margin-top:2px;
text-decoration:none;
color:#f5d4de;
Text-align:center;
Background-color:#904a84;
border: 3px double #f5d4de;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

a.nav:hover, a.nav:hover b {
text-decoration:none;
color:#33122d;
Letter-spacing:0px;
}

a.first, a.first:link, a.first:active, a.first:visited {
Font-family:andale mono;
font-size:9px;
line-height:12px;
font-weight: normal;
color:#e9c5da;
width:100%;
background-color:#723c69;
text-decoration:none;
Text-transform:lowercase;
letter-spacing:0px;
Text-align:center;
display:block;
border-bottom-style:none;
margin-bottom:1px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

a.first:hover {
color: #e3b2c3;
background-color:#8f5380;
Letter-spacing:3px;
}

.title h1 {
  color:#e9c5da;
  font-family: andale mono;
  font-weight:normal;
  font-style:italic;
  font-size:35px;
  line-height:48px;
  overflow: hidden;
  border-right: 1px solid #e9c5da;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 4px;
  Padding-left:30px;
  animation:
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
text-shadow:10px 0px transparent, -10px 0px transparent;
-webkit-transition: all 0.9s ease-out;
-moz-transition: all 0.9s ease-out;
transition: all 0.9s ease-out;
}

.title h1:hover{
text-shadow:1px 0px #75466e, 1px 0px #b984b3;}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #e8f4f3; }
}


h2 {
Font-family:andale mono;
font-size:16px;
line-height:15px;
Margin:0px;
letter-spacing:4px;
font-weight:normal;
Text-transform:lowercase;
Font-style:italic;
Text-align:left;
text-decoration:none;
color:#b77cad;
padding-left:10px;
Border-bottom: 1px solid #5b2d4b;
Background-color:#673c61;
}

h3 {
Font-family:slkscrn;
font-size:8px;
line-height:12px;
letter-spacing:3px;
font-weight:normal;
Text-transform:uppercase;
padding-left:5px;
Text-align:left;
text-decoration:none;
color:#e7c6d4;
Background-color:#5b2d4b;
margin:0px;
}


{ M I S C  C O D I N G -- C R Y P T I C }

::-webkit-scrollbar-thumb {
height:auto;
background-color: #f6d2da;
border:3px solid #8f5380;
}

::-webkit-scrollbar {
height:9px;
width:7px;
background-color: #331129;
border:3px solid #8f5380;
}

a span.av, a:hover span.sm{display: inline;}
a:hover span.av, a span.sm{display: none;}
a:hover {visibility:visible;}


{ H I D E  C O D E S -- C R Y P T I C }

table table div form {display:inline !important;}
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,.btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
table div div{visibility:hidden;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
body div div form {display:none !important;}div div div select {position:absolute !important;  margin-left:-1800px !important; left:0px !important; display:none !important; }div div table div {display:none;} div div table div {display:none;} div form,
.mslogo, div ul {display:none!important;}
div div, div td {background-color:transparent; background-image:none!important;}
div.profileWidth {margin-top: -30px !important;}div.profileWidth div {filter:alpha(opacity=0); opacity:0.2e2e2e1}div.profileWidth div.clearfix, i i i,
div.profileWidth div div {filter:none; opacity:0.9999}div.profileWidth div.clearfix {position:absolute; top:30px}
div div select, div div form {display:none !important;}div div table div {display:none;} .clearfix table div div {display:block;}
.profile, div ul {display:none !important;}
.friendSpace { display:none; }
.profileInfo { display:none; }
.clearfix { display: none; }

</style>


--------------------------- [ LIKE TO MEET ] ---------------------------

</td></tr></table></td></tr></table></td></tr></table>

<div class="title">
<div style="width:454px; height:48px; overflow:none; padding:5px; padding-right:675px; background-color:#673c61; border:1px solid #e5c2d0;">
<h1>plus ultra!</h1>
</div>
</div>

<div class="navo">
<div style="width:1125px; height:25px; overflow:none;background-color:#673c61; border:1px solid #e5c2d0; padding:5px; text-align:center;">
<a href="" class="nav">home</a>
<a href="" class="nav">message</a>
<a href="" class="nav">comment</a>
<a href="" class="nav">gallery</a>
<a href="" class="nav">blog</a>
<a href="" class="nav">extra</a>
<a href="" class="nav">extra</a>
<a href="" class="nav">extra</a>
<a href="/sinfulmisfortune" class="nav">credit</a>
</div>
</div>

<div class="boxone">
<img src="https://i.imgur.com/s019XyG.png">
</div>

<div class="boxtwo">
<div style="width:337px; height:262px; overflow:auto; background-color:#673c61; border:1px solid #e5c2d0;padding:5px;">
<em>biography -</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et dictum nibh. Proin dignissim, mi in lacinia tristique, purus sapien ultricies arcu, convallis tempor mauris augue non lorem. Praesent convallis sem id libero tincidunt, et elementum lorem maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel sapien vestibulum, luctus nulla eu, rhoncus eros. Curabitur accumsan euismod dui aliquam finibus. Nulla tempus, metus nec ultricies laoreet, nisi purus porta sem, accumsan lacinia nunc massa vitae felis. Quisque interdum ligula metus. Pellentesque velit sapien, luctus vitae rutrum vel, malesuada ac purus. Nunc felis tortor, pharetra aliquam erat eget, mollis semper eros. Nulla posuere ante quis augue sollicitudin venenatis et ac metus. Ut ultrices, ligula eu blandit vehicula, eros ipsum vulputate ligula, a efficitur eros tortor eu nunc.
<br><br>
Fusce nec nisl eu magna fermentum bibendum vitae quis lectus. Vestibulum rutrum eget arcu eget pretium. Donec porttitor orci vitae tempus tincidunt. Cras facilisis nulla quis fringilla pellentesque. Donec vehicula ligula convallis dignissim tincidunt. Cras at justo id ante iaculis posuere. Nulla ornare ultrices dui, ullamcorper tempor lacus volutpat a. Sed ac semper sapien. Sed tristique quis dolor et cursus. Phasellus accumsan non justo id aliquam. Donec euismod ultricies diam sed scelerisque. Suspendisse accumsan quam sed pulvinar interdum. Pellentesque molestie, ante sed tempus gravida, massa ipsum ornare quam, vel bibendum lorem nisl a tortor. Etiam lobortis, metus nec finibus hendrerit, augue quam pretium nunc, egestas condimentum ex purus id tortor. Sed egestas sapien dolor, nec eleifend arcu tristique sed.
</div>
</div>

<div class="boxthree">
<img src="https://i.imgur.com/dZatswb.png">
</div>

<div class="boxfour">
<div style="width:188px; height:337px; overflow:auto; background-color:#673c61; border:1px solid #e5c2d0;padding:5px;">
<em>site's stats -</em> <br>
<b>site name:</b> libero sagittis. Suspendisse mi nisl, pulvinar ut tincidunt eget, elementum ac ipsum. Fusce convallis, ipsum ac porttitor tempus, massa leo iaculis lorem<br>
<i>established when:</i> euismod sapien nulla vitae nunc. <br>
<b>Lorem ipsum:</b> dolor sit amet, consectetur adipiscing elit. <br>
<i>current owner:</i> dolor laoreet elit cursus<br>
<b>co-owners:</b> libero sagittis. Suspendisse mi nisl, pulvinar ut tincidunt eget, elementum ac ipsum. Fusce convallis, ipsum ac porttitor tempus, massa leo iaculis lorem<br>

</div>
</div>

<div class="boxfive">
<div style="width:188px; height:337px; overflow:auto; background-color:#673c61; border:1px solid #e5c2d0;padding:5px;">updates  -</em><br>
<b>00.00:</b> libero sagittis. Suspendisse mi nisl, pulvinar ut tincidunt eget, elementum ac ipsum. Fusce convallis, ipsum ac porttitor tempus, massa leo iaculis lorem<br>
<i>00.00:</i> euismod sapien nulla vitae nunc. <br>
<b>00.00:</b> dolor sit amet, consectetur adipiscing elit. <br>
<i>00.00:</i> dolor laoreet elit cursus<br>
<b>00.00:</b> libero sagittis. Suspendisse mi nisl, pulvinar ut tincidunt eget, elementum ac ipsum. Fusce convallis, ipsum ac porttitor tempus, massa leo iaculis lorem<br>
<i>00.00:</i> euismod sapien nulla vitae nunc. <br>
<b>00.00:</b> dolor sit amet, consectetur adipiscing elit. <br>
<i>00.00:</i> dolor laoreet elit cursus<br>
<b>00.00:</b> libero sagittis. Suspendisse mi nisl, pulvinar ut tincidunt eget, elementum ac ipsum. Fusce convallis, ipsum ac porttitor tempus, massa leo iaculis lorem<br>
<i>00.00:</i> euismod sapien nulla vitae nunc. <br>
<b>00.00:</b> dolor sit amet, consectetur adipiscing elit. <br>
<i>00.00:</i> dolor laoreet elit cursus<br>
<b>00.00:</b> libero sagittis. Suspendisse mi nisl, pulvinar ut tincidunt eget, elementum ac ipsum. Fusce convallis, ipsum ac porttitor tempus, massa leo iaculis lorem<br>
<i>00.00:</i> euismod sapien nulla vitae nunc. <br>
<b>00.00:</b> dolor sit amet, consectetur adipiscing elit. <br>
<i>00.00:</i> dolor laoreet elit cursus<br>
<b>00.00:</b> libero sagittis. Suspendisse mi nisl, pulvinar ut tincidunt eget, elementum ac ipsum. Fusce convallis, ipsum ac porttitor tempus, massa leo iaculis lorem<br>
<i>00.00:</i> euismod sapien nulla vitae nunc. <br>
</div>
</div>

<div class="boxsix">
<img src="https://i.imgur.com/yKyk4FG.png">
</div>

<div class="boxseven">
<div style="width:190px; height:232px; overflow:auto; background-color:#673c61; border:1px solid #e5c2d0;padding:5px; margin-bottom:5px;">
<em>custom edits -</em> <br>
<b>name here:</b> 0%<br>
<b>name here:</b> 0%<br>
<b>name here:</b> 0%<br>
<b>name here:</b> 0%<br>
<b>name here:</b> 0%<br>
<b>name here:</b> 0%<br>
<b>name here:</b> 0%<br>
<b>name here:</b> 0%<br>
<b>name here:</b> 0%<br>
<b>name here:</b> 0%<br>
<b>name here:</b> 0%<br>
<b>name here:</b> 0%<br>

<br>
<u>the rule:</u> Fusce nec nisl eu magna fermentum bibendum vitae quis lectus. Vestibulum rutrum eget arcu eget pretium. Donec porttitor orci vitae tempus tincidunt. Cras facilisis nulla quis fringilla pellentesque. Donec vehicula ligula convallis dignissim tincidunt. Cras at justo id ante iaculis posuere. Nulla ornare ultrices dui, ullamcorper tempor lacus volutpat a. Sed ac semper sapien. Sed tristique quis dolor et cursus. Phasellus accumsan non justo id aliquam. Donec euismod ultricies diam sed scelerisque. Suspendisse accumsan quam sed pulvinar interdum. Pellentesque molestie, ante sed tempus gravida, massa ipsum ornare quam, vel bibendum lorem nisl a tortor. Etiam lobortis, metus nec finibus hendrerit, augue quam pretium nunc, egestas condimentum ex purus id tortor. Sed egestas sapien dolor, nec eleifend arcu tristique sed.<br><br>

<u>important info:</u>Fusce nec nisl eu magna fermentum bibendum vitae quis lectus. Vestibulum rutrum eget arcu eget pretium. Donec porttitor orci vitae tempus tincidunt. Cras facilisis nulla quis fringilla pellentesque. Donec vehicula ligula convallis dignissim tincidunt. Cras at justo id ante iaculis posuere. Nulla ornare ultrices dui, ullamcorper tempor lacus volutpat a. Sed ac semper sapien. Sed tristique quis dolor et cursus. Phasellus accumsan non justo id aliquam. Donec euismod ultricies diam sed scelerisque. Suspendisse accumsan quam sed pulvinar interdum. Pellentesque molestie, ante sed tempus gravida, massa ipsum ornare quam, vel bibendum lorem nisl a tortor. Etiam lobortis, metus nec finibus hendrerit, augue quam pretium nunc, egestas condimentum ex purus id tortor. Sed egestas sapien dolor, nec eleifend arcu tristique sed.

</div>

<img src="https://i.imgur.com/7eHAg8C.png">

</div>

<div class="boxeight">
<img src="https://i.imgur.com/yBXQ93I.png">

<div style="width:200px; height:242px; overflow:auto; background-color:#673c61; border:1px solid #e5c2d0;padding:0px; margin-top:5px;">
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>
<a href="" class="first">name here</a>

</div>
</div>