[ Expediente ] Jeamy and Lilliane

VERSIÓN CLARA
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.11.2/css/pro.min.css"/><link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap" rel="stylesheet"> <div class="profile-tin"> <div class="ava-prof" style="background-image: url(https://i.imgur.com/BUkNAtf.png);"></div> <div class="porta-prof" style="background-image:url(https://i.imgur.com/fo7tkSF.png);"></div> <div class="profdates"> <div class="profname">Lilliane Shea Volkov</div> <div class="profname" style="background:#842976;"><span class="fas fa-heart"></span> Follow</div> <div class="datesss"><span class="fas fa-map-marker-alt"></span> Neptune</div> <div class="datesss" style="padding-top: 5px;">Lorem ipsum dolor sit amet consectetur adipiscing elit erat dis, maecenas rhoncus ante ultrices ornare curabitur. Maecenas rhoncus ante ultrices ornare. <span class="hashpro">#curabitur</span></div> </div> <div class="gallprof">Gallery</div> <div class="gallcarrete"> <div class="gallshow" style="margin-left:0; background-image:url(https://i.imgur.com/ar1L77y.png);"></div> <div class="gallshow" style="background-image:url(https://i.imgur.com/IvO5Vig.png);"></div> <div class="gallshow" style="background-image:url(https://i.imgur.com/1bAof2j.png);"></div> <div class="gallshow" style="margin-left:0; background-image:url(https://i.imgur.com/swpelzp.png);"></div> <div class="gallshow" style="background-image:url(https://i.imgur.com/igIsSd7.png);"></div> <div class="gallshow" style="background-image:url(https://66.media.tumblr.com/c9bdd55c8f8f3ea6bc556e71804d4b75/tumblr_owtfbdhORS1r3thx5o1_1280.png);"></div> <div class="gallshow" style="margin-left:0; background-image:url(https://i.imgur.com/l3RvFgu.png);"></div> <div class="gallshow" style="background-image:url(https://i.imgur.com/3Ytd0Ms.png);"></div> <div class="gallshow" style="background-image:url(https://i.imgur.com/BHEIRZU.png);"></div> <div style="clear:both;"></div> </div> </div><center><h5 id="cyala-sign"><a href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.profile-tin {background: #eee; height: auto; width: 400px; margin: auto; padding-top: 1px; position: relative; font-family: 'Noto Sans', sans-serif; padding-bottom: 15px; border-bottom: 15px solid #842976;} .ava-prof {height: 200px; width: 200px; border-radius: 100%; left: 50%;  top: 40px; background-size: cover; position: absolute; margin-left: -110px; z-index: 1; border: 10px solid #eee;} .porta-prof {height: 150px; width: 380px; left: 10px;  top: 10px; background-size: cover; position: absolute;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;} .profdates {height: auto; position: absolute; top: 280px; right: 15px; left: 15px;} .profname {background: #2b266c; color: #d6daec; padding: 5px 15px; display: inline; border-radius: 20px; font-size: 14px; margin-right: 5px;} .datesss {color: #777; padding: 15px 0 0 5px; font-size: 13px;} .datesss .fa-map-marker-alt {font-size: 12px;} .gallprof {position: absolute; top: 400px; padding: 10px 20px; font-size: 12px; text-transform:uppercase; font-weight: 700; letter-spacing: 0.5px; color: #999;} .gallcarrete {height: auto; width: 370px; margin-top: 435px; margin-left: 15px;} .gallshow {height: 120px; width: 120px; float: left; margin-left: 5px; margin-top: 5px; background-size: cover;} .hashpro {color: #842976; font-style: italic; font-weight: 700;}</style>

VERSIÓN OSCURA
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.11.2/css/pro.min.css"/><link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap" rel="stylesheet"> <div class="profile-tin"> <div class="ava-prof" style="background-image: url(https://i.imgur.com/W337E1g.png);"></div> <div class="porta-prof" style="background-image:url(https://i.imgur.com/w2N9zf9.png);"></div> <div class="profdates"> <div class="profname">Jeamy Laika Stevens</div> <div class="profname" style="background:#b23d58;"><span class="fas fa-heart"></span> Follow</div> <div class="datesss"><span class="fas fa-map-marker-alt"></span> Mars</div> <div class="datesss" style="padding-top: 5px;">Lorem ipsum dolor sit amet consectetur adipiscing elit erat dis, maecenas rhoncus ante ultrices ornare curabitur. Maecenas rhoncus ante ultrices ornare. <span class="hashpro">#curabitur</span></div> </div> <div class="gallprof">Gallery</div> <div class="gallcarrete"> <div class="gallshow" style="margin-left:0; background-image:url(https://i.imgur.com/MisdSxY.png);"></div> <div class="gallshow" style="background-image:url(https://i.imgur.com/maQQQsC.png);"></div> <div class="gallshow" style="background-image:url(https://i.imgur.com/szAoJsU.png);"></div> <div style="clear:both;"></div> </div> </div> <center><h5 id="cyala-sign"><a href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.profile-tin {background: #111; height: auto; width: 400px; margin: auto; padding-top: 1px; position: relative; font-family: 'Noto Sans', sans-serif; padding-bottom: 15px; border-bottom: 15px solid #b23d58;} .ava-prof {height: 200px; width: 200px; border-radius: 100%; left: 50%;  top: 40px; background-size: cover; position: absolute; margin-left: -110px; z-index: 1; border: 10px solid #111;} .porta-prof {height: 150px; width: 380px; left: 10px;  top: 10px; background-size: cover; position: absolute;} .profdates {height: auto; position: absolute; top: 280px; right: 15px; left: 15px;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;} .profname {background: #3c1a30; color: #e6c0c1; padding: 5px 15px; display: inline; border-radius: 20px; font-size: 14px; margin-right: 5px;} .datesss {color: #777; padding: 15px 0 0 5px; font-size: 13px;} .datesss .fa-map-marker-alt {font-size: 12px;} .gallprof {position: absolute; top: 400px; padding: 10px 20px; font-size: 12px; text-transform:uppercase; font-weight: 700; letter-spacing: 0.5px; color: #999;} .gallcarrete {height: auto; width: 370px; margin-top: 435px; margin-left: 15px;} .gallshow {height: 120px; width: 120px; float: left; margin-left: 5px; margin-top: 5px; background-size: cover;} .hashpro {color: #b23d58; font-style: italic; font-weight: 700;}</style>