Skittles

This layout was made by Edits By M (/1631904). Do not remove any credit, claim this layout as your own, or use this on an account that has not asked for it. Thank you SO much for wanting to use this layout. You are wonderful.

<!--about me-->
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

body {
background-color:#232426;
background-repeat:no-repeat;
background-attachment:fixed;
margin: 0;
overflow:auto;
background-image: linear-gradient(#61d2d0, #88339a);
}

table, tr, td, li, p, div, .profileInfo td.text {
font-size: 12px;
color: #000;
font-family: Playfair Display;
}

b{
    color: #fff;
    background: #7d61a9;
    padding: 5px;
    line-height: 32px;
    font-weight: 100;
}

h1{
    font-family: Playfair Display;
    font-size: 31px;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    text-transform: uppercase;
    color: #fff;
    background: #7d61a9;
    text-align: center;
    font-weight: 100;
    letter-spacing: 6px;
}

h2{
    font-family: Playfair Display;
    font-size: 13px;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    text-transform: uppercase;
    color: #fff;
    background: #67bcc8;
    text-align: center;
    font-weight: 100;
}

h3{
    font-family: Playfair Display;
    font-size: 13px;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    text-transform: uppercase;
    color: #fff;
    background: #7d61a9;
    text-align: center;
    font-weight: 100;
}


.container {
width:650px;
height:650px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
overflow:hidden;
margin:auto;
color:#fff;
background-color:#fff;
font-family: 'Abel', sans-serif;
}

.containerLinks{
width:650px;
height:40px;
position:absolute;
left:0;
right:0;
top:-690px;
bottom:0;
overflow:hidden;
margin:auto;
color:#fff;
background-color:#fff;
font-family: 'Abel', sans-serif;
text-align:center;
}

.containerSide {
    width: 180px;
    padding-left:10px;
    padding-right:10px;
    height: 650px;
    position: absolute;
    left: -851px;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    margin: auto;
    color: #fff;
    background-color: #fff;
    font-family: 'Abel', sans-serif;
}

.sideBarPhotos{
width: 180px;
height: 200px;
margin-top: 10px;
}

.connectionBox{
width: 175px;
height: 210px;
margin-top: 10px;
text-align:justify;
padding-right:5px;
overflow:auto;
color:#000;
}

.biography{
width: 357px;
height: 122px;
padding: 20px;
font-size: 12px;
color: #000;
text-align: justify;
overflow: auto;
}

.bigPictureAndQuote{
    width: 610px;
    height: 135px;
    display: inline-block;
    vertical-align: top;
    padding: 20px;
    text-align: center;
    font-size: 35px;
    color:#fff;
    background-image:url('https://i.imgur.com/5XZLu1o.png');
}

.loveInterest{
width: 204px;
height: 110px;
display: inline-block;
vertical-align: top;
padding: 20px;
text-align:justify;
overflow:auto;
}

.basicInfo{
width:127px;
height:117px;
display:inline-block;
vertical-align:top;
background:#fff;
text-align:justify;
padding:10px;
overflow:auto;
}

.personality{
width:127px;
height:117px;
display:inline-block;
vertical-align:top;
background:#fff;
text-align:justify;
padding:10px;
overflow:auto;
}

.abilities{
width:127px;
height:106px;
display:inline-block;
vertical-align:top;
background:#fff;
text-align:justify;
padding:10px;
overflow:auto;
}

a.navigationalLinks:link, a.navigationalLinks:visited {
    color: white;
    padding: 8px 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    font-size: 14px;
    width: 35px;
    background: #64bcc8;
    font-weight: 100;
    border-radius: 50%;
    margin-bottom: 10px;
    margin-top: 3px;
    margin-right: 65px;
}

a.navigationalLinks:hover, a.navigationalLinks:active {
color: #1a1a1a;
}

::-webkit-scrollbar-thumb:vertical {height:12px; background:#fff; border-top:10px solid #7d61a9; border-bottom:10px solid #7d61a9;}
::-webkit-scrollbar-thumb:horizontal {background-color:#fff;}
::-webkit-scrollbar {width:5px; height:7px;}


.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, .navbar font, tr td font {visibility:hidden;display:none;height:0px;!important;} #footerWarpper{display: none;} table table table table,table table table table td.text, td.text td.text table{display:none;} 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.footer {display: none;} div table a.navbar img {display:none;} div table.navigationBar {margin-bottom:-30px;} .profileInfo {display:none;} .profileInfo td {text-align:left;} .profileInfo a img {position:relative; margin-bottom:-1px; margin-bottom:-2px; width:125px; margin-right:-6px; margin-top:4px; _margin-top:3px; display:block;} .profileInfo td td, .nametext, .msOnlineNow img {display:none;} .profileInfo td td.text {display:table-cell; _display:inline;} .profileInfo .text {font-size:7px; line-height:8px; text-transform:uppercase; font-family:small fonts;} .msOnlineNow {font-family:small fonts; letter-spacing:0px; font-size:7px; line-height:8px; padding:2px; padding-left:0px; text-transform:uppercase; font-weight:normal; display:none; text-decoration:blink; letter-spacing:2px;} .userAlbums {display:none;} div td {display:none;} </span>
</style>


<!--like to meet-->
<html>
<body>
<div class="containerLinks">
<a href="/home.php" title="home" class="navigationalLinks" style="margin-left:0px;">H</a>
<a href="/send_message.php?member_id=" title="message" class="navigationalLinks">M</a>
<a href="/add_comment.php?member_id=" title="comment" class="navigationalLinks">C</a>
<a href="/status_stream.php?member_id=" title="stream" class="navigationalLinks">S</a>
<a href="/view_member_blog.php?member_id=" title="blog" class="navigationalLinks">B</a>
<a href="/1631904" title="credit" class="navigationalLinks" style="margin-right:0px;">C</a>
</div>
<div class="containerSide">
<div class="sideBarPhotos"><img src="https://i.imgur.com/xaedtjO.png"></div>
<div class="connectionBox">
<b>connection name</b> / <i>connection</i> - talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here.
<b>connection name</b> / <i>connection</i> - talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here.
<b>connection name</b> / <i>connection</i> - talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here.
<b>connection name</b> / <i>connection</i> - talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here.
<b>connection name</b> / <i>connection</i> - talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here.
<b>connection name</b> / <i>connection</i> - talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here.
<b>connection name</b> / <i>connection</i> - talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here.
<b>connection name</b> / <i>connection</i> - talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here.
<b>connection name</b> / <i>connection</i> - talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here.
<b>connection name</b> / <i>connection</i> - talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here.
<br><br>
</div>
<div class="sideBarPhotos"><img src="https://i.imgur.com/MDcgkmP.png"></div>
</div>
<div class="container">
<h1>First Middle Last</h1>

<div style="width:250px; height:413px; display:inline-block; vertical-align:top;">
<img src="https://i.imgur.com/dow8U8d.png" style="margin-top: 3px;">
<div class="basicInfo"><h2>basic info</h2>
<b>Full Name</b> here<br>
<b>Pronunciation</b> here<br>
<b>Nickname/Alias</b> here<br>
<b>Gender</b> here<br>
<b>Orientation</b> here<br>
<b>Real Age</b> here<br>
<b>Birthday</b> here<br>
<b>Birthplace</b> here<br>
<b>Astrological Sign</b> here<br>
<b>Species</b> here<br>
<b>Ethnicity</b> here<br>
<b>Preferred Hand</b> here<br>
<b>Eye Color</b> here<br>
<b>Hair Color</b> here<br>
<b>Hairstyle</b> here<br>
<b>Skin Tone</b> here<br>
<b>Makeup</b> here<br>
<b>Build</b> here<br>
<b>Height</b> here<br>
<b>Weight</b> here<br>
<b>Shoe Size</b> here<br>
<b>Birthmarks/scars</b> here<br>
<b>Distinguishing Features</b> here<br>
<b>Health</b> here<br>
<b>Allergies</b> here<br>

</div>
<br>
<div class="personality">
<h2>personality</h2>
Talk about their personality here, you can fill it as much as you want, it will overflow. Talk about their personality here, you can fill it as much as you want, it will overflow. Talk about their personality here, you can fill it as much as you want, it will overflow. Talk about their personality here, you can fill it as much as you want, it will overflow. Talk about their personality here, you can fill it as much as you want, it will overflow. Talk about their personality here, you can fill it as much as you want, it will overflow. Talk about their personality here, you can fill it as much as you want, it will overflow. Talk about their personality here, you can fill it as much as you want, it will overflow. Talk about their personality here, you can fill it as much as you want, it will overflow. Talk about their personality here, you can fill it as much as you want, it will overflow. Talk about their personality here, you can fill it as much as you want, it will overflow. Talk about their personality here, you can fill it as much as you want, it will overflow. Talk about their personality here, you can fill it as much as you want, it will overflow. Talk about their personality here, you can fill it as much as you want, it will overflow. Talk about their personality here, you can fill it as much as you want, it will overflow.
</div>
<img src="https://i.imgur.com/5RJlkcq.png" style="margin-top: 3px;">
<br>
<img src="https://i.imgur.com/jKcTXkq.png" style="margin-top: 3px;">


<div class="abilities">
<h2>abilities</h2>
Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be. Talk about your abilities here, it can be as long as you wish for it to be.
</div>
</div>














<div style="width: 397px; height: 413px; display: inline-block; vertical-align: top; margin-right: -1px;">
<img src="https://i.imgur.com/DlbfeqE.png">
<div class="biography">
<h3>The Story of a Girl</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
</div>
<div style="width: 397px; height: 150px;">
<img src="https://i.imgur.com/xcm78kF.png" style="margin-top:5px;">
<div class="loveInterest">
<h2>story of a boy</h2>
<b>status</b> here <br>
<b>to whom</b> here <br>
<b>since when</b> here <br>
<b>comments</b> talk about them here.
</div>
</div>
</div>

<div class="bigPictureAndQuote">
"Eat spaghetti to forgetti your regretti. Eat spaghetti to forgetti your regretti. Eat spaghetti to forgetti your regretti."
</div>


</div>
</body>
</html>