[html]<table class="iksweb">
<tbody>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
</tbody>
</table>[/html]

[html]<style>
.table_component {
    overflow: fixed;
    width: 100%;
}

.table_component table {
    border: 1px dotted #dededf;
    height: 100%;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 1px;
    text-align: center;
}

.table_component caption {
    caption-side: top;
    text-align: left;
}

.table_component th {
    border: 1px dotted #dededf;
    background-color: #297500;
    color: #000000;
    padding: 30px;
}

.table_component td {
    border: 1px dotted #dededf;
    background-color: #ffffff;
    color: #000000;
    padding: 30px;
}
</style>
<div class="table_component" role="region" tabindex="0">
<table>

        <tr>
            <th>Понедельник</th>
            <th>Вторник</th>
            <th>Среда</th>
            <th>Четверг</th>
            <th>Пятница</th>
            <th>Суббота</th>
            <th>Воскресенье</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>1</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>8</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>15</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>22</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>29</td>
        </tr>
        <tr>
            <td>30</td>
            <td>31</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
[/html]

[table layout=fixed width=100%]
[tr]
[td][html]<link href="https://fonts.googleapis.com/css?family=Hind+Siliguri&display=swap" rel="stylesheet"><center><div id="basic-template"><div class="basic-inside"><h1>a title</h1>
<p>INFO GOES HERE THIS IS UPPERCASE, this is lowercase <span>this is a span</span> <b>this is bold</b> and <a href="">this is a link</a>.</p>

<ul><li><span>title</span> list item, explain your title and or rules for that area here and it should stretch between list tags.</li>
   <li><span>title</span> list item</li>
   <li><span>title</span> list item</li>
   <li><span>title</span> list item</li></ul>
</div><a href="http://wecode.jcink.net/index.php?showuser=3065">Supergirl</a></div></center>

<style>#basic-template {width:100px; height:100px; padding:20px; background:#1B2028;}
#basic-template a {color:#888; font-size:9pt; text-transform:uppercase; text-decoration:none;}
.basic-inside {width:90px; height:90px; padding:10px; text-align:justify; background:#E3E3E3; font:10pt calibri; color:#141414; text-transform:normal;} .basic-inside h1 {background:#1B2028; color:#e3e3e3; text-transform:uppercase; text-align:center; font:15pt 'Hind Siliguri', sans-serif; padding:10px;}
.basic-inside span {font-size:9pt; text-transform:uppercase; font-family:calibri; color:#281b20;
}
.basic-inside b {color:#20281b;}
.basic-inside a {color:#0c1037; text-decoration:none; font-size:9pt; font-family:'Hind Siliguri'; text-transform:uppercase; font-weight:bold; letter-spacing:1px;}
.basic-inside li {list-style:none;}
.basic-inside li span {font-weight:900; float:left; margin-right:10px; text-transform:uppercase;}</style>[/html][/td]
[td][html]<link href="https://fonts.googleapis.com/css?family=Hind+Siliguri&display=swap" rel="stylesheet"><center><div id="basic-template"><div class="basic-inside"><h1>a title</h1>
<p>INFO GOES HERE THIS IS UPPERCASE, this is lowercase <span>this is a span</span> <b>this is bold</b> and <a href="">this is a link</a>.</p>

<ul><li><span>title</span> list item, explain your title and or rules for that area here and it should stretch between list tags.</li>
   <li><span>title</span> list item</li>
   <li><span>title</span> list item</li>
   <li><span>title</span> list item</li></ul>
</div><a href="http://wecode.jcink.net/index.php?showuser=3065">Supergirl</a></div></center>

<style>#basic-template {width:250px; padding:20px; background:#1B2028;}
#basic-template a {color:#888; font-size:9pt; text-transform:uppercase; text-decoration:none;}
.basic-inside {width:200px; padding:20px; text-align:justify; background:#E3E3E3; font:10pt calibri; color:#141414; text-transform:normal;} .basic-inside h1 {background:#1B2028; color:#e3e3e3; text-transform:uppercase; text-align:center; font:15pt 'Hind Siliguri', sans-serif; padding:10px;}
.basic-inside span {font-size:9pt; text-transform:uppercase; font-family:calibri; color:#281b20;
}
.basic-inside b {color:#20281b;}
.basic-inside a {color:#0c1037; text-decoration:none; font-size:9pt; font-family:'Hind Siliguri'; text-transform:uppercase; font-weight:bold; letter-spacing:1px;}
.basic-inside li {list-style:none;}
.basic-inside li span {font-weight:900; float:left; margin-right:10px; text-transform:uppercase;}</style>[/html][/td]
[/table]

			[shadow=#1ca7c0]Жуки[/shadow]			11
	текст 11		текст 22		текст 33
	текст 1		текст 2		текст 3.

[/hide]

[html]<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<style>
.ewsocial {
height: 630px;
width: 650px;
position: relative;
background: #fafafa;
border: 2px solid #eee;
border-radius: 20px;
margin: 20px auto 0px;
}

.ewinbox {
position: absolute;
height: 600px;
width: 620px;
border: 1px solid #e9e9e9;
top: 14px;
left: 14px;
border-radius: 15px;
background: white;
}

.ewicon {
position: absolute;
height: 100px;
width: 100px;
border-radius: 100%;
border: 10px solid #fafafa;
background-size: cover;
box-shadow: 0 0 1pt 1pt #eee;
box-shadow: 0 0 0 1pt #eee;
top: 20px;
left:20px;
}

.ewname {
position: absolute;
width: 600px;
font-family: roboto;
color: #262626;
font-size: 23px;
top: 50px;
left: 180px;
line-height: 100%;
letter-spacing: 0.5px;
font-weight:500;
}

.eweditbutton {
font-size: 13px;
background: #fafafa;
padding: 3px;
border-radius: 3px;
border: 1px solid #eee;
margin: 0px 5px;
font-weight: 300;
position: relative;
top: -3px;
}

.ewlinestuff {
width: 300px;
font-size: 15px;
top: 82px;
position: absolute;
left: 170px;
font-family: roboto;
color: #262626;
line-height: 140%;
}

.ewsocial num {
font-weight: 700;
margin-left: 10px;
}

.ewsocial name {
font-weight: 700;
margin-right: 5px;
display: block;
}

.ewinfo {
height: 50px;
width: 300px;
left: 180px;
position: absolute;
width: 300px;
top: 105px;
font-family: roboto;
font-weight: 300;
font-size: 14px;
line-height: 140%;
}

.ewimgbox {
position: absolute;
width: 590px;
height: 550px;
border-top: 1px solid rgba(0,0,0,0.1);
top: 100px;
left: 40px;
overflow: auto;
display: flex;
align-items: flex-start;
justify-content: space-around;
flex-wrap: wrap;
padding-bottom: 40px;
}

.ewsocial hover {
position: absolute;
padding: 20px 0px;
width: 100px;
height: 0px;
background: rgba(0,0,0,0.8);
top: 30px;
left: 0px;
font-size: 10px;
color: #fafafa;
text-align: center;
font-family: roboto;
font-weight: 700;
line-height: 200%;
opacity: 0;
z-index: 1;
transition: 0.3s;
border-radius: 4px;
}

.ewblocker {
height: 160px;
width: 120px;
display: block;
position: relative;
}

.ewsocial hover:hover {
opacity: 1;
}

.ewimgbox img {
height: 100px;
width:100px;
object-fit: cover;
position: absolute;
top: 20px;
border-radius: 4px;
}

.ewsocial heart {
margin-right: 5px;
}

.ewsocial ::-webkit-scrollbar{display: none;}

</style>
<div class="ewsocial"><div class="ewinbox"></div>

<div class="ewname"> <span class="eweditbutton"></span> <span class="th th-settings-o" style="position: relative;top: 3px;"></span></div>
<div class="ewlinestuff"><num>#</num> posts <num>#</num> followers <num>#</num> following</div>
<div class="ewinfo"><name>NAME</name> PROFILE JUNK</div>
<div class="ewimgbox">

   <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
   
<div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>

<div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>

<div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>

<div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
<div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
<div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
   <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
<div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
</div>
  <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
  <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
  <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
  <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
  <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
</div><center><a href="http://wecode.jcink.net/index.php?showuser=4933" style="color:#ccc;font-size:7px;letter-spacing:5px;">MONTY</a></center>[/html]

[html]<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<style>
.ewsocial {
height: 770px;
width: 650px;
position: relative;
background: #fafafa;
border: 2px solid #eee;
border-radius: 20px;
margin: 20px auto 0px;
}

.ewinbox {
position: absolute;
height: 740px;
width: 620px;
border: 1px solid #e9e9e9;
top: 14px;
left: 14px;
border-radius: 15px;
background: white;
}

.ewicon {
position: absolute;
height: 100px;
width: 100px;
border-radius: 100%;
border: 10px solid #fafafa;
background-size: cover;
box-shadow: 0 0 1pt 1pt #eee;
box-shadow: 0 0 0 1pt #eee;
top: 20px;
left:20px;
}

.ewname {
position: absolute;
width: 600px;
font-family: roboto;
color: #262626;
font-size: 23px;
top: 50px;
left: 180px;
line-height: 100%;
letter-spacing: 0.5px;
font-weight:500;
}

.eweditbutton {
font-size: 13px;
background: #fafafa;
padding: 3px;
border-radius: 3px;
border: 1px solid #eee;
margin: 0px 5px;
font-weight: 300;
position: relative;
top: -3px;
}

.ewlinestuff {
width: 300px;
font-size: 15px;
top: 82px;
position: absolute;
left: 170px;
font-family: roboto;
color: #262626;
line-height: 140%;
}

.ewsocial num {
font-weight: 700;
margin-left: 10px;
}

.ewsocial name {
font-weight: 700;
margin-right: 5px;
display: block;
}

.ewinfo {
height: 50px;
width: 300px;
left: 180px;
position: absolute;
width: 200px;
top: 105px;
font-family: roboto;
font-weight: 300;
font-size: 14px;
line-height: 140%;
}

.ewimgbox {
position: absolute;
width: 580px;
height: 600px;
border-top: 1px solid rgba(0,0,0,0.1);
top: 150px;
left: 40px;
overflow: auto;
display: flex;
align-items: flex-start;
justify-content: space-around;
flex-wrap: wrap;
padding-bottom: 40px;
}

.ewsocial hover {
position: absolute;
padding: 25px 0px;
width: 100px;
height: 50px;
background: rgba(0,0,0,0.8);
top: 10px;
left: 0px;
font-size: 10px;
color: #fafafa;
text-align: center;
font-family: roboto;
font-weight: 700;
line-height: 200%;
opacity: 0;
z-index: 1;
transition: 0.3s;
border-radius: 4px;
}

.ewblocker {
height:0px;
width:100px;
display: block;
position: relative;
}

.ewsocial hover:hover {
opacity: 1;
}

.ewimgbox img {
height:100px;
width:100px;
object-fit: cover;
position: absolute;
top: 10px;
border-radius: 4px;
}

.ewsocial heart {
margin-right: 5px;
}

.ewsocial ::-webkit-scrollbar{display: none;}

</style>
<div class="ewsocial"><div class="ewinbox"></div>

<div class="ewname"> </div>
<div class="ewimgbox">

   <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
   
<div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>

<div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>

<div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>

<div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
<div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
<div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
   <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
<div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
<div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
<div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
  <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
  <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
  <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
  <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
  <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
  <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
  <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
  <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
  <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
  <div class="ewblocker">
   <img src="ANY IMAGE">
   <hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>
   </div>
</div>
</div><center><a href="http://wecode.jcink.net/index.php?showuser=4933" style="color:#ccc;font-size:7px;letter-spacing:5px;">MONTY</a></center>[/html]

[html]
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
        .container {
          width: 950px;
        }
      body {
        background-color: #f6f5f1;
      }
      .current-image {
        position: absolute;
        z-index:2;
        width:100%;
      }

      .next-image {
        position: absolute;
        z-index:1;
        width:100%;
      }

      .back-image {
        position: absolute;
        z-index:0;
        width:100%;
      }

    </style>
  </head>
  <body>
    <div class="container" style="background-color:#f6f5f1">
      {% load staticfiles %}
      <div class="row">
        <div class="col-xs-2">
          <img src="{% static "tinder/icon-top-left.jpg" %}" style="width:100%; margin-top:20px;">
        </div>
        <div class="col-xs-8">
          <img src="{% static "tinder/logo.jpg" %}" width="60%" class="img-responsive center-block">
        </div>
        <div class="col-xs-2">
          <img src="{% static "tinder/icon-top-right.svg" %}" style="margin-top:20px; width:100%">
        </div>
      </div>
      <div class="row" style="margin-top:48px" id="photobox">
        <div class="col-xs-10 col-xs-offset-1">
          <div class="current-image">
            <img src="/static/{{image0}}" width="100%" class="img-responsive center-block">
          </div>
          <div class="next-image">
            <img src="/static/{{image1}}" width="100%" class="img-responsive center-block">
          </div>
          {% for image in images %}
          <div class="back-image">
            <img src="/static/{{image}}" width="100%" class="img-responsive center-block">
          </div>
          {% endfor %}
        </div>
      </div>
      <div class="row">
        <div class="col-xs-10 col-xs-offset-1" style="margin-top:780px">
          <img src="{% static "tinder/logo-bottom.jpg" %}" width="100%">
        </div>
      </div>
    </div>
  <script type="text/javascript">
    var current_image = $(".current-image")[0];
    var next_images = $(".next-image, .back-image").toArray();
    $(function() {
      $("#photobox").on("swipe", function(event) {
        var swipe_type = event.swipestart.coords[0] < event.swipestop.coords[0] ? "swiperight" : "swipeleft";
        var swipe_offset = swipe_type == "swiperight" ? "+1000px" : "-1000px";

        $(".current-image").animate({ "left": swipe_offset }, complete = function() {
          $(this).removeClass("current-image").addClass("back-image").css({left: ""});
          next_images.push($(this)[0]);
          current_image = next_images.shift();
          $(current_image).removeClass("next-image").addClass("current-image");
          $(next_images[0]).removeClass("back-image").addClass("next-image");
        });
      });
    });
  </script>
  </body>
</html>[/html]

[html]<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<scr[/dohtml][dohtml]ipt src="https://use.fontawesome.com/6bccbdfdd9.js"></script>

<div class="pierrottinder">

<div class="pierrottindertitle"><i class="fa fa-arrow-left" aria-hidden="true" style="color:rgb(255, 108, 76);display:inline-block; "></i>

<div class="tinderinfo">
<a href="http://wecode.jcink.net/index.php?showuser=454"><img class="tinderpic" src="http://www.elegantexpressions.us/wc/sora-100x100-gif.gif"></a> Sora
</div>

<span style="float:right;font-size:20px; display:inline-block; padding-top:12px;"> <i class="fa fa-ellipsis-h" aria-hidden="true" style="color:rgb(255, 108, 76);"></i> </span></div>

<div class="pierrottindercontent">
<span class="pierrottinderbubble">this is a chat bubble</span>

<span class="pierrottinderbubble"> this is a large bubble<br>
for your pickup lines<Br>
that span several sentences? </span>
</div>

</div>

<style>

.pierrottinder {
   width:300px;
   min-height:500px;
   background:white;
   border:1px solid #ccc;
   margin:0 auto; 
}

.pierrottindertitle {
   padding:15px;
   font-family: 'Lora', serif;
   font-size:15px;
   color:silver;
   border-bottom:1px solid silver;
}
.profilepic {
   width:300px;
   height:300px;
   background:url(http://www.elegantexpressions.us/wc/sora.png) center center;
}
.pierrottindercontent {
padding:15px;
   font-family: 'Open Sans', sans-serif;
font-size:15px;
color: #888;
}
.pierrottindername { font-size:18px; color:black; }
.pierrottinderdistance { color:silver; font-size:12px; margin-bottom:10px; }
.pierrottinderdistance b { margin-right:5px; }
.tinderpic {
width:40px; height:40px;
   -webkit-border-radius: 40px;
   -moz-border-radius: 40px;
   border-radius: 40px;
}
.tinderinfo {
float: center;
text-align: center;
display: inline-block;
margin: 0 auto;
width: 150px;
margin-left: 50px;
}
.pierrottinderbubble {
background: rgb(132, 194, 255);
color:white;
padding:7px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
margin:10px;
display: block;
}
</style>[/html]

[html]<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<div class="pierrottinder">

<div class="pierrottindertitle"><i class="fa fa-angle-left" aria-hidden="true"></i> Park Sora <span style="float:right;font-size:14px;"><i class="fa fa-times fa-fw" aria-hidden="true" style="font-size:20px; color:rgb(255, 108, 76);"></i><i class="fa fa-heart fa-fw" aria-hidden="true" style="font-size:16px; color:rgb(110, 227, 90);"></i></span></div>
<a href="http://wecode.jcink.net/index.php?showuser=454">

<div class="profilepic">
</div></a>

<div class="pierrottindercontent">
<div class="pierrottindername"><b>Aleksandr,</b> 25</div>
<div class="pierrottinderdistance"><b>5 км от вас</b>  Active 10 hours ago</div>

ENTP | Loves Cats |  Swipe right???? lmao idk what to put here tbh. my tinder game suxx lmao!! jk but like jk not jk this has a min height of 500px but will extend forever..... idk maybe i'll add a scroll
</div>

</div>

<style>
.pierrottinder {
   width:400px;
   min-height:600px;
   background:white;
   border:1px solid silver;
   margin:0 auto; 
}

.pierrottindertitle {
   padding:15px;
   font-family: 'Lora', serif;
   font-size:15px;
   color:silver;
}
.profilepic {
   width:400px;
   height:400px;
   background:url(https://forumupload.ru/uploads/0018/1f/c9/4/756415.png) center center;
<hover># <heart><span class="th th-heart-1"></span></heart> # <span class="th th-chat-bubble"></span></hover>

}
.pierrottindercontent {
padding:15px;
   font-family: 'Open Sans', sans-serif;
font-size:15px;
color: #888;
}
.pierrottindername { font-size:18px; color:black; }
.pierrottinderdistance { color:silver; font-size:12px; margin-bottom:10px; }
.pierrottinderdistance b { margin-right:5px; }
</style>[/html]

[html]<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cousine:400,400i,700,700i" rel="stylesheet">

<div id="pins">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://use.fontawesome.com/6bccbdfdd9.js"></script>

<div class="pierrottinder">

<div class="pierrottindertitle"><i class="fa fa-angle-left" aria-hidden="true"></i> Park Sora <span style="float:right;font-size:14px;"><i class="fa fa-times fa-fw" aria-hidden="true" style="font-size:20px; color:rgb(255, 108, 76);"></i><i class="fa fa-heart fa-fw" aria-hidden="true" style="font-size:16px; color:rgb(110, 227, 90);"></i></span></div>
<a href="http://wecode.jcink.net/index.php?showuser=454">

<div class="profilepic">
</div></a>

<div class="pierrottindercontent">
<div class="pierrottindername"><b>Aleksandr,</b> 25</div>
<div class="pierrottinderdistance"><b>5 км от вас</b> был в сети 10 часов назад</div>

ENTP | Loves Cats |  Swipe right???? lmao idk what to put here tbh. my tinder game suxx lmao!! jk but like jk not jk this has a min height of 500px but will extend forever..... idk maybe i'll add a scroll
</div>

</div>

<style>

.pierrottinder {
   width:400px;
   min-height:600px;
   background:white;
   border:1px solid silver;
   margin:0 auto; 
}

.pierrottindertitle {
   padding:15px;
   font-family: 'Lora', serif;
   font-size:15px;
   color:silver;
}
.profilepic {
   width:400px;
   height:400px;
   background:url(https://forumupload.ru/uploads/0018/1f/c9/4/756415.png) center center;

}
.pierrottindercontent {
padding:15px;
   font-family: 'Open Sans', sans-serif;
font-size:15px;
color: #888;
}
.pierrottindername { font-size:18px; color:black; }
.pierrottinderdistance { color:silver; font-size:12px; margin-bottom:10px; }
.pierrottinderdistance b { margin-right:5px; }
</style>
<input type="radio" name="pinsts" id="pinst1" checked>
<label for="pinst1">Главная </label>
   <input type="radio" name="pinsts" id="pinst2">
<label for="pinst2">Предпочтения</label>
   <input type="radio" name="pinsts" id="pinst3">
<label for="pinst3">Фото</label>
<bg1></bg1>

<div id="pinscont1"> ваши  грязные секретики и не оч грязные, можно писать все от ориентации до ожиданий от игры (свидания, только поцелуи, интрижка и тд)

</div>

<div id="pinscont2">
<link href="https://fonts.googleapis.com/css?family=Gothic+A1|Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gothic+A1|Roboto" rel="stylesheet">
<style>

#foolforyou {
   width: auto;
   height: auto;
}

.ffyinbox {
   height: 200px;
   background: #eee;
   width: 330px;
   box-shadow: -2px 2px 5px #ccc;
   margin: 15px;
   border: 1px solid white;
   outline: 5px solid #eee;
   overflow: hidden;
   margin-bottom: 5px;
}

.ffyicon {
   width: 150px;
   height: 150px;
   border: 10px solid #eee;
   box-shadow: 0 0 1pt 1pt #b3cad3;
   box-shadow: 0 0 0 1pt #fff;
   float: left;
   margin: 15px;
}

.ffyicon img {
   height: 150px;
   width: 150px;
}

.ffytraittext {
   height: 15px;
   width: 300px;
   padding: 10px;
   margin-left: 10px;
   padding-top: 15px;
   font-family: 'Roboto', sans-serif;
   font-size: 16px;
   color: #558b99;
   letter-spacing: 3px;
   text-transform: uppercase;
   text-align: left;
   border-bottom: 1px solid white;
   line-height: 80%;
}

.ffytraittext .ffytraittext2 {
   font-size: 10px;
   color: #aaa;
}
  .ffytextbox {
   height: 135px;
   overflow: 100px;
   width:300px;
   color: #aaa;
   font-family: 'Gothic A1', sans-serif;
   float: right;
   text-align: justify;
   margin-right: 15px;
   margin-top: 10px;
   font-size: 10px;
   line-height: 100%;
   padding-right: 5px;
} 

</style><center>
<div id="foolforyou">

<div class="ffyinbox"><div style="position:relative">
   <div class="ffyicon"><img src="https://forumupload.ru/uploads/0018/1f/c9/8/132099.png"></div>
   <div class="ffytraittext">Имя Фамилия<br>
     <span class="ffytraittext2">дата</span>
      <div class="ffytextbox">
   
описаниhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
     
   
</div>
   </div>
</div></div>

</div>
<a href="http://wecode.jcink.net/index.php?showuser=4933" style="color:#ccc;font-size:7px;letter-spacing:7px;"></a>
</center>
</div>

<a href="http://wecode.jcink.net/index.php?showuser=4918"><div style="width: 420px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">liv's codes</div></a>
<style>#pins {height: 617px; width: 500px; border: 1px solid #192520; outline: 1px solid #C27489; outline-offset: 10px; margin: 20px auto; position: relative; background: #FF7158}
#pins bg {position: absolute; bottom: 0; right: 0; background-size: cover; height: 617px; width: 450px; filter: grayscale(100%)}
#pins sc1 {background: #C27489; position: absolute; bottom: 0; right: 0; height: 617px; width: 450px; mix-blend-mode: darken;}
#pins h1 {font-family: poppins; text-transform: uppercase; color: #192520; position: absolute; left: 50px; font-size: 20px; height: 0; line-height:65px; letter-spacing: 1px;}
#pinst1+label, #pinst2+label, #pinst3+label, #pinst4+label, #pinst5+label {font-family: poppins; position: absolute; text-transform: uppercase; font-weight: 700; font-size: 12px; letter-spacing: 1px; color: #192520; transform: rotate(-90deg); height: 30px; line-height: 30px; width: 50px; cursor: crosshair; }
#pins input {display: none;}
#pinst1+label {top: 70px}
#pinst2+label {top: 215px}
#pinst3+label {top: 285px}
#pinst1:checked+label, #pinst2:checked+label, #pinst3:checked+label, #pinst4:checked+label, #pinst5:checked+label {color: #C27489; font-style: italic; font-weight: 900; }
#pins bg1 {background: rgba(0,0,0,0.5); height: 600px; width: 400px; opacity: 0; position: absolute; bottom: 0; right: 0; transition: 0.4s ease}
#pinst1:checked+label ~ bg1 {opacity: 0}
#pinscont1, #pinscont2, #pinscont3, #pinscont4 {height: 617px; width: 400px; background: #ffffff; box-sizing: border-box; position: absolute; bottom: 0px; right: 50px; border-width: 20px 15px 20px 20px; border-color: #ffffff; border-style: solid; padding-right: 5px; font-family: cousine; color: ; font-size: 10px; line-height: 1.6; text-align: justify; overflow: auto; transition: 0.5s ease; opacity: 0}
#pinst2:checked+label ~ #pinscont1 {opacity: 1; z-index: 5}
#pinst3:checked+label ~ #pinscont2 {opacity: 1; z-index: 5}

#pins b {font-family: poppins; color: #C27489; font-size: 14px}
#pinst1:checked+label:before, #pinst2:checked+label:before, #pinst3:checked+label:before, #pinst4:checked+label:before, #pinst5:checked+label:before {height: 10px; width: 1px; background: #C27489; content: ""; display: block; position: absolute; top: -10px}
#pinst1:checked+label:before {left: 20px}
#pinst2:checked+label:before, #pinst3:checked+label:before, #pinst5:checked+label:before {left: 25px}
#pinst4:checked+label:before {left: 30px}
#pins h2 {font-family: poppins; color: #C27489; text-transform: uppercase; font-weight: 700; margin: 0px 0px 10px 0px}
#pinscont1::-webkit-scrollbar, #pinscont2::-webkit-scrollbar, #pinscont3::-webkit-scrollbar, #pinscont4::-webkit-scrollbar {width: 5px}
#pinscont1::-webkit-scrollbar-thumb, #pinscont2::-webkit-scrollbar-thumb, #pinscont3::-webkit-scrollbar-thumb, #pinscont4::-webkit-scrollbar-thumb {background: #C27489; border: 2px solid #eee}
#pinscont1::-webkit-scrollbar-track, #pinscont2::-webkit-scrollbar-track, #pinscont3::-webkit-scrollbar-track, #pinscont4::-webkit-scrollbar-track {background: #eee!important; border: none!important}
</style>[/html]