<div id="tinder"><div class="tp-tin"><p>tinder</p><span class="th th-tinder"></span></div>
<div class="im-tin" style="background: url(https://via.placeholder.com/250x300)"></div>
<div class="tx-tin">
<h1><b>Nombre Personaje</b> 00</h1>
<p>Aquí puedes poner tu descripción. No te preocupes sobre qué tan grande sea, la tablilla se ajustará a ella para que puedas escribir cómodx. :)
</p></div><div class="buts-tin"><span class="th th-reload"></span><span class="th th-cross"></span><span class="th th-star"></span><span class="th th-heart-1"></span><span class="th th-flash"></span></div></div><div class="crdts"><a href="http://illmakegaycodesforu.tumblr.com/">— gitano;</a></div>

<style>#tinder {--gradient: linear-gradient(152deg, #8ecfbf 0%, #c8d6d3 100%);}#tinder br {display: none;}#tinder {width:300px; min-height: 300px; border: 1px solid #eaeaea; border-radius: 25px; margin: 0 auto; margin-top: 30px; overflow: hidden; background: #f9f9f9; order: 1;}.tp-tin {position: relative; height: 100px; background: var(--gradient); border-radius: 0px 00px 100% 100%; margin-left: -1px; margin-right: -1px}.tp-tin span {border-radius: 100%; height: 60px; width: 60px; margin: 0 auto; display: block; color: #fff; background: var(--gradient); position: relative; top: 13px; font-size: 30px; display: flex; align-items: center; justify-content: center; border: 5px solid #fff;}.tp-tin p {margin: 0 auto; position: absolute; top:15px; left: 10px; right: 10px; color: #fff; text-align: center; font: 50px 'Montserrat', sans-serif; text-transform: uppercase; font-weight: 600; letter-spacing: 2px; font-weight: 900; font-style: italic; opacity: .6}.tx-tin p br {display: block; margin: 5px}.im-tin {height: 300px; margin: 25px;}.tx-tin {margin: 25px; color: #555; font: 11px 'Montserrat', sans-serif;}.tx-tin h1 {margin: 0px; font-weight: 300; font-size: 21px;}.tx-tin b {color: #95D0C2;}.tx-tin p {margin-top: 5px; text-align: justify;}.buts-tin {margin: 25px; display: flex; justify-content: space-between;align-items: center;}.buts-tin span {background: #fff; display block; border-radius: 100%; display: flex; align-items: center; justify-content: center; box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.1); cursor: crosshair; transform: scale(1); transition: .3s}.buts-tin span:hover {transform: scale(1.1)}.buts-tin span:nth-child(1n) {height: 30px; width: 30px; font-size: 15px;}.buts-tin span:nth-child(2n) {height: 50px; width: 50px; font-size: 20px;}.buts-tin span:nth-child(1) {color: #FDC620}.buts-tin span:nth-child(2){color: #F54F6A}.buts-tin span:nth-child(3) {color: #02ECB8}.buts-tin span:nth-child(4) {color: #C851F3}.buts-tin span:nth-child(5) {color: #04B5F4}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center}</style><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">

<div id="tinder"><div class="tp-tin"><p>tinder</p><span class="th th-tinder"></span></div>
<div class="im-tin" style="background: url(https://via.placeholder.com/250x300)"></div>
<div class="tx-tin">
<h1><b>Nombre Personaje</b> 00</h1>
<p>Aquí puedes poner tu descripción. No te preocupes sobre qué tan grande sea, la tablilla se ajustará a ella para que puedas escribir cómodx. :)
</p></div><div class="buts-tin"><span class="th th-reload"></span><span class="th th-cross"></span><span class="th th-star"></span><span class="th th-heart-1"></span><span class="th th-flash"></span></div></div><div class="crdts"><a href="http://illmakegaycodesforu.tumblr.com/">— gitano;</a></div>

<style>#tinder {--gradient: linear-gradient(152deg, #8ecfbf 0%, #c8d6d3 100%);}#tinder br {display: none;}#tinder {width:300px; min-height: 300px; border: 1px solid #eaeaea; border-radius: 25px; margin: 0 auto; margin-top: 30px; overflow: hidden; background: #f9f9f9; order: 1;}.tp-tin {position: relative; height: 100px; background: var(--gradient); border-radius: 0px 00px 100% 100%; margin-left: -1px; margin-right: -1px}.tp-tin span {border-radius: 100%; height: 60px; width: 60px; margin: 0 auto; display: block; color: #fff; background: var(--gradient); position: relative; top: 13px; font-size: 30px; display: flex; align-items: center; justify-content: center; border: 5px solid #fff;}.tp-tin p {margin: 0 auto; position: absolute; top:15px; left: 10px; right: 10px; color: #fff; text-align: center; font: 50px 'Montserrat', sans-serif; text-transform: uppercase; font-weight: 600; letter-spacing: 2px; font-weight: 900; font-style: italic; opacity: .6}.tx-tin p br {display: block; margin: 5px}.im-tin {height: 300px; margin: 25px;}.tx-tin {margin: 25px; color: #555; font: 11px 'Montserrat', sans-serif;}.tx-tin h1 {margin: 0px; font-weight: 300; font-size: 21px;}.tx-tin b {color: #95D0C2;}.tx-tin p {margin-top: 5px; text-align: justify;}.buts-tin {margin: 25px; display: flex; justify-content: space-between;align-items: center;}.buts-tin span {background: #fff; display block; border-radius: 100%; display: flex; align-items: center; justify-content: center; box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.1); cursor: crosshair; transform: scale(1); transition: .3s}.buts-tin span:hover {transform: scale(1.1)}.buts-tin span:nth-child(1n) {height: 30px; width: 30px; font-size: 15px;}.buts-tin span:nth-child(2n) {height: 50px; width: 50px; font-size: 20px;}.buts-tin span:nth-child(1) {color: #FDC620}.buts-tin span:nth-child(2){color: #F54F6A}.buts-tin span:nth-child(3) {color: #02ECB8}.buts-tin span:nth-child(4) {color: #C851F3}.buts-tin span:nth-child(5) {color: #04B5F4}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center}</style><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">

<div id="tinder"><div class="tp-msj"><div class="im-msj" style="background: url(https://via.placeholder.com/100)"></div>
<h1>Ashley Holat</h1>
</div><div class="out-msj">
<span>¡Hola! Me encantaron tus fotos, pero creo que lo que me enamoró fue tu descripción.</span>
<span>Y si po', yo también apruebo ;)</span>
</div></div><div class="crdts"><a href="http://illmakegaycodesforu.tumblr.com/">— gitano;</a></div>
 
<style>#tinder { --gradient: linear-gradient(152deg, #8ecfbf 0%, #c8d6d3 100%);}#tinder br {display: none;}#tinder {width:300px; min-height: 300px; border: 1px solid #eaeaea; border-radius: 25px; margin: 0 auto; margin-top: 30px; overflow: hidden; background: #f9f9f9; order: 1;} #tinder .tp-msj {position: relative; height: 250px; background: var(--gradient); border-radius: 0px 00px 20% 20%; margin-left: -1px; margin-right: -1px; display: flex; flex-direction: column; align-items: center; justify-content: center;}#tinder .im-msj {height: 100px; width: 100px; border-radius: 100px; border: 10px solid #fff;}#tinder .tp-msj h1 {text-align: center; color: #fff; font: 20px 'Montserrat', sans-serif; font-weight: 700; font-style: italic; opacity: .6; margin-bottom: -5px;}#tinder .out-msj br{display: block!important}#tinder .out-msj {margin: 25px; text-align: right; font: 13px 'Montserrat', sans-serif;}#tinder .out-msj span {background: var(--gradient); color: #fff; display: inline-block; border-radius: 10px 10px 0px 10px; margin-top: 5px; padding: 10px;}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center}</style><link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet"><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">