Modelo de Twitter

por **Elvendork Gambon** Jue Mayo 04, 2017 12:44 am

•• Modelo de Twitter ••

Estos son modelos sugeridos tomados de Alexei y Jinx a través de Shine, pero su uso no es obligatorio y pueden usar otros modelos que encuentren.

La imagen de fondo del perfil es de 500x250 px. La imagen del avatar es de 75x75 en el perfil y 70x70 en el Tweet, pero puede usarse una imagen mas grande pues se redimensionarán automáticamente para alcanzar el tamaño necesario.

Perfil de Twitter:

TWEETS

1542

Following

1

Followers

∞

Edit profile

THANKS TO LOUIS AT SHINE!

Código:: <link href='http://fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' type='text/css'><center><div id='twittercontainer'><div class='header' style=' background-image:url(http://placehold.it/500x250);'><div class='icon'><img src='http://placehold.it/75X75' width='75px'></div> <div class='name'>NOMBRE AQUÍ</div><div class='handle'>@NOMBREDEUSUARIOAQUÍ</div><div class='description'>DESCRIPCIÓN AQUÍ</div></div><div class='bottombarthing'><div class='boxes'><div class='words'>TWEETS</div><div class='bolded'>###</div></div><div class='boxes'><div class='words'>Following</div><div class='bolded'>###</div></div><div class='boxes'><div class='words'>Followers</div><div class='bolded'>###</div></div><div style='margin-left:40px; display:inline-block; width:108px; height:35px; padding-top:0px; padding-bottom:7px; padding-left:23px; padding-right:23px;'><div style='width:106px; height:33px; line-height:33px; border:1px solid #e2e8ee; border-radius:4px; text-transform:none; font-family: arial; font-size:12px; color:#677580; letter-spacing-2px; font-weight:bold;'>Edit profile</div></div></div></div><div style='margin-top:8px; width:450px; text-align:center; font-family:calibri; font-size:8px; color:#777; line-height:100%; letter-spacing:4px;'>[url=http://shine.b1.jcink.com/index.php?showuser=599] THANKS TO LOUIS AT SHINE![/url]</div></center> <style type='text/css'>#twittercontainer { width:500px; height:308px; -moz-box-shadow: 2px 2px 5px #333; -webkit-box-shadow: 2px 2px 5px #333; box-shadow: 2px 2px 5px #333; border-radius:4px; text-transform:none; } #twittercontainer .header { width:460px; height:210px; padding:20px; border-radius:4px 4px 0px 0px; } #twittercontainer .icon { width:75px; height:75px; border:5px solid #fff; border-radius:4px 4px; -moz-box-shadow: 2px 2px 5px #333; -webkit-box-shadow: 2px 2px 5px #333; box-shadow: 2px 2px 5px #333; } #twittercontainer .name { margin-top:5px; font-family: arial; font-size:25px; color:#fff; letter-spacing-1px; text-shadow:1px 1px 1px #333; line-height:100%; font-weight:bold; } #twittercontainer .handle { margin-top:5px; font-family:arial; font-size:18px; color:#fff; letter-spacing:0px; text-shadow:1px 1px 1px #333; line-height:100%; } #twittercontainer .description { margin-top:5px; font-family:arial; font-size:15px; color:#fff; letter-spacing:0px; text-shadow:1px 1px 1px #333; line-height:100%; padding-left:25px; padding-right:25px; } #twittercontainer .bottombarthing { width:500px; height:58px; background-color:#fff; border-radius:0px 0px 4px 4px; } #twittercontainer .boxes { width:90px; height:58px; padding-left:10px; display:inline-block; } #twittercontainer .words { line-height:15px; padding-top:8px; height:15px; text-align:justify; font-family:lato; color:#acafac; font-size:10px; font-weight:100; letter-spacing:-1px; text-transform:uppercase; } #twittercontainer .bolded { text-align:justify; height:18px; padding-bottom:5px; font-family:lato; font-weight:700; color:#2e8cb1; font-size:18px; line-height:18px; } </style>

Post de Twitter:

Kingsley Shacklebolt
@TioKings

Following

En una reunión con el 1er ministro muggle y Elvy no para de enviarme mensajes

7:42 AM - 5 Jan 2015

Código:: <center><div id="jinxsevenb"><table cellspacing="15" cellpadding="0" width="450" style="float: left;"><tr><td class="avatarb"><a href="http://shine.b1.jcink.com/index.php?showuser=13521"><img src="http://placehold.it/70x70"></a></td><td class="handle"><span style="color: #000; font: bold 15px arial;">NOMBRE</span><br>@NOMBREDEUSUARIO</td><td><div class="follow">Following</div></td></tr></table><p><div class="tweet">TWEET DE 140 PALABRAS O MENOS AQUÍ<p> <img src="http://i.imgur.com/VIGC0CN.png"><p><span class="handle">[right][size=10]7:42 AM - 5 Jan 2015[/size][/right]</div></table></div></center> <style type="text/css">#jinxsevenb { position: relative; width: 420px; height: 245px; padding: 15px; background: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 1px solid #ccc; overflow: hidden; } .avatarb img { width: 70px; height: 70px; -webkit-border-radius: 5%; -moz-border-radius: 5%; border-radius: 5%; } .handle { width: 225px; color: #aaa; font: 11px arial; text-align: left; } .follow { width: 75px; height: 5px; padding: 10px; background: #54aaec; color: #fff; font: bold 13px/5px arial; display: inline-block; text-align: center; -webkit-border-radius: 5%; -moz-border-radius: 5%; border-radius: 5%; border: 1px solid #3b88c3; } .tweet { width: 410px; height: 100px; color: #000; font: 20px/22px georgia; text-align: left; } .tweet img { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } </style>