- гостевая
- нужные + хочу видеть
- хочу к вам

- матчасть
- связь с амс
- выяснение отношений

- шаблон анкеты
- личные темы

- флудомысли
- мысли
- прочие игры

- реклама

[html]<div class="benu0">
<div class="benu1a"></div><div class="benu1b"></div>
<img src="https://cdn.discordapp.com/attachments/975568446798573608/975581440228073532/bb3.gif" class="benu1c">
<div class="benu2">You're the pretender</div>
<div class="benu3">I love cheese, especially halloumi fromage. <b>Pepper jack hard cheese the big cheese st. agur blue cheese danish fontina boursin mascarpone squirty cheese.</b> Pepper jack bavarian bergkase stilton mascarpone melted cheese lancashire danish fontina feta. <i>Cottage cheese paneer cottage cheese everyone loves halloumi cheesy feet.</i><p>Parmesan cheddar cheese and biscuits. Swiss croque monsieur blue castello boursin goat jarlsberg croque monsieur red leicester. <b>Fondue cauliflower cheese cheeseburger when the cheese comes out everybody's happy croque monsieur fondue boursin bocconcini.</b> Pepper jack melted cheese parmesan stinking bishop manchego.<p>Monterey jack rubber cheese caerphilly. Who moved my cheese swiss jarlsberg cheese triangles cheddar cottage cheese cottage cheese jarlsberg. <i>Goat smelly cheese fromage frais ricotta st. agur blue cheese cottage cheese smelly cheese smelly cheese.</i> St. agur blue cheese when the cheese comes out everybody's happy when the cheese comes out everybody's happy rubber cheese.<p>Cheese on toast st. agur blue cheese boursin. <b>Port-salut edam monterey jack everyone loves cheese strings chalk and cheese mozzarella stilton. Jarlsberg cheesecake everyone loves boursin manchego boursin cream cheese bocconcini.</b> Cheese and biscuits monterey jack camembert de normandie cheesecake.<p>Cauliflower cheese lancashire dolcelatte. <i>Fromage frais port-salut cheese on toast cut the cheese bocconcini stilton camembert de normandie pepper jack.</i> Ricotta mascarpone the big cheese goat blue castello who moved my cheese danish fontina monterey jack. Blue castello.</div>
<div class="benu4">tag @<br><a href="link">name mcname</a></div>
<div class="benu5">this is the notes section, it'll scroll if necessary and i am going to make it scroll so you can see how it will look</div>
</div>
<style>
.benu0 { width: 500px; height: 350px; background: rgb(var(--black)); margin: auto; overflow: hidden; position: relative; border-radius: 10px; --white: 255, 255, 255; --black: 13, 13, 13; --accent1: 0, 151, 167; --accent2: 178, 235, 242; --font1: Bebas Neue; --font2: Archivo; }
.benu1a { position: absolute; top: -25px; right: -100px; width: 400px; height: 400px; background: rgb(var(--accent1)); border-radius: 100%; transition: .7s; }
.benu0:hover .benu1a { border-radius: 0%; transition: .7s; }
.benu1b { position: absolute; top: -45px; right: -120px; width: 400px; height: 400px; border-radius: 100%; border: 2px dashed rgb(var(--accent1)); padding: 20px; transition: .7s; }
.benu0:hover .benu1b { border-radius: 0%; transition: .7s; }
.benu1c { position: absolute; top: 100px; left: 80px; border-radius: 100%; width: 150px; height: 150px; border: 2px dashed rgb(var(--accent1)); padding: 10px; box-sizing: border-box; transition: .7s; }
.benu0:hover .benu1c { top: 50px; left: 40px; width: 100px; height: 100px; transition: .7s; }
.benu2 { position: absolute; top: 125px; right: 10px; width: 250px; height: 100px; font: 50px/100% var(--font1); color: rgb(var(--accent2)); text-align: center; transition: .7s .5s; }
.benu0:hover .benu2 { opacity: 0; transition: .7s; }
.benu3 { position: absolute; top: 0px; right: 0px; width: 300px; height: 350px; overflow: auto; box-sizing: border-box; border: 50px solid transparent; text-align: justify; padding: 0px 10px 0px 5px; opacity: 0; font: 12px/140% var(--font2); color: rgb(var(--white)); transition: .5s; }
.benu3 b { color: rgb(var(--black)); font: 900 12px/140% var(--font2);  }
.benu3 i { background: linear-gradient(90deg, rgb(var(--white)), rgb(var(--accent2))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.benu0:hover .benu3 { opacity: 1; transition: .7s .5s; }
.benu3::-webkit-scrollbar {width: 2px;}
.benu3::-webkit-scrollbar-track {background: transparent;}
.benu3::-webkit-scrollbar-thumb {background: rgb(var(--accent1)); border-right: 2px dashed rgb(var(--accent2));}
.benu4 { position: absolute; bottom: 140px; left: 0px; width: 175px; color: rgb(var(--accent1)); font: 900 16px/100% var(--font1); text-align: center; letter-spacing: 2px; opacity: 0; transition: .5s; }
.benu0:hover .benu4 { opacity: 1; transition: .7s .6s; }
.benu4 a { text-decoration: none; color: rgb(var(--accent1)); transition: .7s; }
.benu4 a:hover { color: rgb(var(--accent2)); transition: .7s; }
.benu5 { position: absolute; bottom: 40px; left: 15px; width: 150px; height: 100px; overflow: auto; color: rgb(var(--accent2)); font: 10px/140% var(--font2); box-sizing: border-box; border: 20px solid transparent; padding: 0px 10px 0px 5px; text-align: justify; opacity: 0; transition: .5s; }
.benu0:hover .benu5 { opacity: 1; transition: .7s .6s; }
.benu5::-webkit-scrollbar {width: 2px;}
.benu5::-webkit-scrollbar-track {background: transparent;}
.benu5::-webkit-scrollbar-thumb {background: rgb(var(--accent1)); border-right: 2px dashed rgb(var(--black));}
</style><link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">[/html]

[html]<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i" rel="stylesheet">

<style>
/*TO EDIT THE COLOUR OF THE COLOUR SCHEME BLOCKS*/

#kiss-colour1 {
    background-color: #8A535E;
    top: 30px;
}
#kiss-colour2 {
    background-color: #696864;
    top: 30px;
    left: 70px
}
#kiss-colour3 {
    background-color: #DBC5C7;
    top: 30px;
    right: 0
}
#kiss-colour4 {
    background-color: #D9D2CC;
    bottom: 0px;
    left: 35px
}
#kiss-colour5 {
    background-color: #6E404B;
    bottom: 0px;
    right: 35px
}
</style>

<div id="kiss">
  <div id="kiss-title-a">a moodboard for</div>
  <div id="kiss-title-b">first last</div>
  <div id="kiss-colours">
    <div id="kiss-colours-title">color scheme</div>
    <div id="kiss-colour1"></div>
    <div id="kiss-colour2"></div>
    <div id="kiss-colour3"></div>
    <div id="kiss-colour4"></div>
    <div id="kiss-colour5"></div>
  </div>
  <div id="kiss-pic1" style="background-image: url(square img/gif, will resize)"></div>
  <div id="kiss-quote">"quote here"</div>
  <div id="kiss-title-quote">quote author</div>
  <div id="kiss-photos">
    <div id="kiss-photo1" style="background-image: url(square img/gif, will resize to fit)"></div>
    <div id="kiss-photo2" style="background-image: url(square img/gif, will resize to fit)"></div>
    <div id="kiss-photo3" style="background-image: url(square img/gif, will resize to fit)"></div>
    <div id="kiss-photo4" style="background-image: url(square img/gif, will resize to fit)"></div>
    <div id="kiss-photo5" style="background-image: url(square img/gif, will resize to fit)"></div>
    <div id="kiss-photo6" style="background-image: url(square img/gif, will resize to fit)"></div>
    <div id="kiss-photo7" style="background-image: url(square img/gif, will resize to fit)"></div>
   
  </div>
  <div id="kiss-title-aesthetic"><b>name's</b> aesthetic</div>
</div>
<a href="https://shadowplayers.jcink.net/index.php?showuser=120"><div style="width: 400px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">eve's codes</div></a>

<style>
@font-face {
    font-family: 'Aldine';
    src: url('Aldine-Regular.eot');
    src: url('Aldine-Regular.eot?#iefix') format('embedded-opentype'), url('Aldine-Regular.woff') format('woff'), url('http://files.jcink.net/uploads/badhabitsrp/Aldine_Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
#kiss {
    height: 700px;
    width: 400px;
    margin: auto;
    position: relative;
    background: #EDEDEB
}
#kiss-title-a {
    height: 70px;
    width: 400px;
    position: absolute;
    font-family: playfair display;
    text-transform: uppercase;
    font-size: 11px;
    font-style: italic;
    color: #555;
    text-align: center;
    line-height: 70px;
    letter-spacing: 7px;
}
#kiss-title-a::after {
    height: 1px;
    width: 20px;
    content: "";
    background: #999;
    display: inline-block;
    margin-bottom: 2px
}
#kiss-title-a::before {
    height: 1px;
    width: 20px;
    content: "";
    background: #999;
    display: inline-block;
    margin-bottom: 2px;
    margin-right: 10px;
}
#kiss-title-b {
    height: 50px;
    width: 400px;
    position: absolute;
    top: 70px;
    line-height: 20px;
    text-align: center;
    font-family: aldine;
    font-size: 80px;
    color: #8A535E
}
#kiss-colours {
    height: 150px;
    width: 200px;
    position: absolute;
    top: 130px;
    left: 20px
}
#kiss-colours-title {
    position: absolute;
    font-family: playfair display;
    text-transform: uppercase;
    font-size: 11px;
    font-style: italic;
    color: #555;
    text-align: center;
    height: 25px;
    width: 200px;
    line-height: 25px;
    letter-spacing: 2px
}
#kiss-colours-title::after {
    height: 1px;
    width: 20px;
    content: "";
    background: #999;
    display: inline-block;
    margin-bottom: 4px;
    margin-left: 10px;
}
#kiss-colours-title::before {
    height: 1px;
    width: 20px;
    content: "";
    background: #999;
    display: inline-block;
    margin-bottom: 4px;
    margin-right: 10px;
}
#kiss-colour1,
#kiss-colour2,
#kiss-colour3,
#kiss-colour4,
#kiss-colour5 {
    height: 60px;
    width: 60px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    position: absolute
}
#kiss-pic1 {
    height: 80px;
    width: 80px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    position: absolute;
    background-size: cover;
    background-position: center;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    background-color: #999;
    background-blend-mode: multiply;
    right: 50px;
    top: 180px
}
#kiss-quote {
    height: 120px;
    width: 250px;
    background: none;
    position: absolute;
    left: 75px;
    top: 310px;
    text-align: center;
    font-size: 18px;
    font-family: playfair display;
    text-transform: uppercase;
    font-style: italic;
    color: #8A535E;
    line-height: 22px
}
#kiss-title-quote {
    height: 70px;
    width: 400px;
    position: absolute;
    font-family: playfair display;
    text-transform: uppercase;
    font-size: 11px;
    font-style: italic;
    color: #555;
    text-align: center;
    line-height: 70px;
    letter-spacing: 2px;
    top: 390px
}
#kiss-title-quote::after {
    height: 1px;
    width: 20px;
    content: "";
    background: #999;
    display: inline-block;
    margin-bottom: 2px;
    margin-left: 10px
}
#kiss-title-quote::before {
    height: 1px;
    width: 20px;
    content: "";
    background: #999;
    display: inline-block;
    margin-bottom: 2px;
    margin-right: 10px;
}
#kiss-photos {
    height: 155px;
    width: 340px;
    position: absolute;
    background: none;
    left: 30px;
    top: 470px
}
#kiss-photo1,
#kiss-photo2,
#kiss-photo3,
#kiss-photo4,
#kiss-photo5,
#kiss-photo6,
#kiss-photo7 {
    height: 80px;
    width: 80px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    position: absolute;
    background-size: cover;
    background-position: center;
}
#kiss-photo1 {
    top: 0;
    left: 0
}
#kiss-photo2 {
    left: 86px
}
#kiss-photo3 {
    left: 173px
}
#kiss-photo4 {
    right: 0
}
#kiss-photo5 {
    bottom: 0;
    left: 43px
}
#kiss-photo6 {
    bottom: 0;
    left: 130px
}
#kiss-photo7 {
    bottom: 0;
    right: 43px;
}
#kiss-title-aesthetic {
    height: 70px;
    width: 400px;
    position: absolute;
    font-family: playfair display;
    text-transform: uppercase;
    font-size: 11px;
    font-style: italic;
    color: #555;
    text-align: center;
    line-height: 100px;
    letter-spacing: 7px;
    bottom: 25px
}
#kiss-title-aesthetic::after {
    height: 1px;
    width: 20px;
    content: "";
    background: #999;
    display: inline-block;
    margin-bottom: 2px;
    margin-left: 10px
}
#kiss-title-aesthetic::before {
    height: 1px;
    width: 20px;
    content: "";
    background: #999;
    display: inline-block;
    margin-bottom: 2px;
    margin-right: 10px;
}
#kiss-title-aesthetic b {
    font-weight: 400;
    color: #8A535E
}
</style>
[/html]

[html]<link href="https://fonts.googleapis.com/css2?family=Trocchi&display=swap" rel="stylesheet">

<div id="vox-angeli">
  <div class="va-line">
    &nbsp;
  </div>

  <div class="va-name">
    first middle last
  </div>

  <div class="va-board">

    <div class="va-pic">
      <img class="tall wide center" src="https://i.imgur.com/JLJIJn2.gif" alt="pic 1" />
    </div>

    <div class="va-pic">
      <img class="tall wide center" src="https://placehold.co/120.png" alt="pic 2" />
    </div>

    <div class="va-pic">
      <img class="tall wide center" src="https://placehold.co/120.png" alt="pic 3" />
    </div>

    <div class="va-pic">
      <img class="tall wide center" src="https://placehold.co/120.png" alt="pic 4" />
    </div>

    <div class="va-pic">
      <p>
        a quote block! keep it 7-10 words.
      </p>
    </div>

    <div class="va-pic">
      <img class="tall wide center" src="https://placehold.co/120.png" alt="pic 6" />
    </div>

    <div class="va-pic">
      <img class="tall wide center" src="https://placehold.co/120.png" alt="pic 7" />
    </div>

    <div class="va-pic">
      <img class="tall wide center" src="https://placehold.co/120.png" alt="pic 8" />
    </div>

    <div class="va-pic">
      <img class="tall wide center" src="https://placehold.co/120.png" alt="pic 9" />
    </div>
  </div>

  <div class="va-quote">
    bottom quote / notes
  </div>
</div>
<div class="va-cred">
  <a href="https://shadowplayers.jcink.net/index.php?showuser=4893" title="ty lily">✿</a>
</div>

<style>:root {
  --va-white: rgb(249,248,246);
  --va-white2: rgb(246, 255, 248);
  --va-main: rgb(107, 144, 128);
  --va-medium: rgb(164, 195, 178);
  --va-pad: 40px;
  --va-npad: -40px;
  --va-serif: 'Trocchi', serif;
}

#vox-angeli {
  background: var(--va-white);
  color: var(--va-main);
  box-sizing: border-box;
  width: 500px;
  padding: var(--va-pad);
  margin: 0 auto;
  font-family: var(--va-serif);
  position: relative;
}

.va-line {
  border: 1px solid var(--va-medium);;
  height: 1px;
  width: calc(100% - 20px);
  height: 100px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.va-name {
  font-family: var(--va-serif);
  letter-spacing: 0.5px;
  text-align: center;
  font-size: 36px;
  background: var(--va-main);
  color: var(--va-white2);
  width: calc(100% + 80px);
  margin-left: var(--va-npad);
  margin-top: var(--va-npad);
  height: 120px;
  line-height: 120px;
}

.va-board {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 20px 0;
}

.va-pic img {
  object-fit: cover;
}

.va-pic img.center {
  object-position: -50px;
}

.va-pic img.tall {
  max-width: 120px;
}

.va-pic img.wide {
  max-height: 120px;
}

.va-pic {
  overflow: hidden;
  margin: 15px 0;
  background: var(--va-medium);
  color: var(--va-white2);
  width: 120px;
  height: 120px;
}

.va-pic p {
  padding: 20px 15px;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.5px;
  text-align: center;
}

.va-quote {
  font-family: var(--va-serif);
  text-align: center;
  color: var(--va-medium);
  text-transform: lowercase;
  letter-spacing: 2px;
  font-size: 10px;
  line-height: 1.8;
  width: calc(100% - 44px);
  margin-left: 2px;
  padding: calc(var(--va-pad)/2);
  border: 1px solid var(--va-medium);
  outline: 1px solid var(--va-medium);
  outline-offset: 2px;
}

.va-cred {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
}

.va-cred a {
  color: var(--va-medium);
  text-decoration: none;
  transition: ease 0.4s;
}

.va-cred a:hover {
  color: var(--va-main);
}</style>[/html]

[html]<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500|Playfair+Display:400,700,700i&display=swap" rel="stylesheet">

<style>
.stevie-mood {
  margin: 0 auto;
  width: 500px;
  height: 500px;
  background-color: #A8C0D8;
  border: 4px solid #fff;
  outline: 1px solid #6E99C4;
}

.stevie-top {
   height: 12px;
   background-color: #6e99c4;
   font: 9px source code pro;
   text-transform: uppercase;
   padding: 7px;
   text-indent: 5px;
   color: #eee;
   border-bottom: 1px solid #5681AD;
}

.stevie-top a {
text-decoration: none;
color: #eee;
}

.stevie-pics {
  padding: 20px;
  height: 120px;
  margin-top: 0px;
  display: flex;
  justify-content: space-around;
}

.stevie-pics img {
   width: 140px;
   height: 140px;
   border: 1px solid #6e99c4;
   padding: 3px;
}

.stevie-picz {
  padding: 20px;
  height: 140px;
  display: flex;
  justify-content: space-around;
}

.stevie-picz img {
  width: 140px;
  height: 140px;
  border: 1px solid #6e99c4;
  padding: 3px;
}

.stevie-bottom {
  background-color: #6e99c4;
  height: 92px;
  padding: 20px;
  font: 32px playfair display;
  text-align: right;
  color: #eee;
  font-weight: bold;
  letter-spacing: 1px;
  border-top: 1px solid #5681AD;
}

.stevie-bottom h3 {
   font: 10px source code pro;
   text-align: right;
   margin-top: 0px;
   
}

</style>

<div class="stevie-mood">
<div class="stevie-top"><a href="https://shadowplayers.jcink.net/index.php?showuser=51">krista @ sp</a></div>
<div class="stevie-pics"><img src="img link here"> <img src="img link here"> <img src="img link here">
</div>
<div class="stevie-picz"><img src="img link here"> <img src="img link here"> <img src="img link here"></div>
<div class="stevie-bottom">first last
   <h3>subtitle here</h3>
</div>
</div>[/html]

[html]<carolinacontainer>
  <carolina>
    <img src="https://i.imgur.com/kuIihl9.png">
    <img src="https://placehold.it/200">
    <img src="https://placehold.it/200">

    <img src="https://placehold.it/200">
    <img src="https://placehold.it/200">
    <img src="https://placehold.it/200">

    <img src="https://placehold.it/200">
    <img src="https://placehold.it/200">
    <img src="https://placehold.it/200">
  </carolina>
  <textbar>i know how to make the devil cry</textbar>
</carolinacontainer><div style="width:auto; margin:0px auto; position:relative; font:10pt sans-serif; text-align:center; opacity:0.4;"><a href="https://deviantart.com/dauntss" target="_blank"> ♠</a>&nbsp;<a href="https://cttw.jcink.net/index.php?showuser=7452" target="_blank">♥</a>&nbsp;<a href="https://shadowplayers.jcink.net/index.php?showuser=3841" target="_blank">♣</a>&nbsp;<a href="https://atfjcink.jcink.net/index.php?showuser=790" target="_blank">♦</a></div><style type=text/css>carolinacontainer {display:block; width:520px;  height:550px;  box-sizing:border-box;  overflow:hidden;  margin:0px auto;  background:#fff;  position:relative;}
textbar {display:flex;  align-items:center;  justify-content:center;  width:90%;  height:25px;  margin:0px auto; 
 
  background-color:slategray; 
 
  text-align:center; font:bold 8px arial, sans-serif;  color:#fff;  letter-spacing:4px;  text-transform:uppercase;  position:relative;  bottom:20px;}
carolina {width:520px; height:520px;  box-sizing:border-box;  display:flex;  align-items:center;  justify-content:space-between;  flex-wrap:wrap;  padding:28px 35px;  position:relative;}
carolina img {width:100px; height:100px; transition-duration:0.5s; margin:0px 20px; padding:0px;position:relative;filter:grayscale(70%) contrast(125%);object-fit:cover;}
carolina img:hover {transform:scale(2); filter:grayscale(0%);}</style>[/html]

[html]<center><a href="https://fanfics.me/user54883"><img src="https://fanfics.me/images/member_banners/54883.png" width="400" height="110"/></align></a>[/html]