LS For Everyone
LS for everyone

Forum de Libre Service - Codage et Graphisme


    Tweets (Twitter)

    Partagez
    avatar
    Adèlys
    Admin

    Messages : 34
    Date d'inscription : 08/03/2018

    Tweets (Twitter)

    Message par Adèlys le Mer 31 Oct - 13:56

    Avec le fond gris :

    Le Pseudo @lepseudotoutcollé • en heure ou la date type 00/00/00

    Le tweet de moins de 140 caractères (en gros, pas plus de 3 lignes).

    xx xx xx




    Code:
    <div style="background:#E6ECF0;padding:10px;"><div class="corTWEET"><div class="vavaTWEET"><!-- AVATAR --><img src="URL DE L'AVATAR"/></div><div class="droTWEET"><!-- Le pseudo  --><span class="pseTWEET">Le Pseudo</span> <!--  Le @ du compte et le tweet posté il y a... --><span class="altTWEET">@lepseudotoutcollé • en heure ou la date type 00/00/00</span><!--  Contenu du tweet (moins de 140 caractères) -->
    <p>Le tweet de moins de 140 caractères (en gros, pas plus de 3 lignes).</p><div class="icTWEET"><!-- Laissez l'espace entre le <span> et le chiffre --><!-- Les réponses au tweet  --><span> xx</span><!-- Les retweets  --><span> xx</span><!-- Le nombre de favoris  --><span> xx</span><!-- Envoyer un DM (pas de nombres) --><span> </span><div class="clear"></div></div></div><div class="clear"></div></div></div>

    <style>.corTWEET{width:570px;padding:10px;margin:auto;background:white;border-bottom:1px solid #E6ECF0;cursor:pointer;transition:all 0s ease;min-height:51px;}.corTWEET:hover {background:#F5F8FA;}.vavaTWEET{width:48px;height:48px;border-radius:50%;float:left;overflow:hidden;}.vavaTWEET img{width:48px;height:auto;}.droTWEET{float:left;width:88%;margin:0px 10px;font-family:'Segoe UI';font-size:13px;}.pseTWEET{color:black;font-weight:bold;transition:all 0s ease;}.pseTWEET:hover{text-decoration:underline;}.altTWEET{color:#657786;}.droTWEET p{margin:0;}.icTWEET span{color:#657786;transition:all 0s ease;display:block;word-spacing:5px;float:left;width:15%;overflow:hidden;margin-top:10px;font-weight:bold;}.icTWEET span::before {font-family: "edgeicons";font-size:20px;font-weight:normal;}.icTWEET span:nth-child(1)::before {content: "\f151";}.icTWEET span:nth-child(1):hover {color:#42BDF6;}.icTWEET span:nth-child(2)::before {content: "\f152";}.icTWEET span:nth-child(2):hover {color:#17C47D;}.icTWEET span:nth-child(3)::before {content: "\f148";}.icTWEET span:nth-child(3):hover {color:#EA4E5E;}.icTWEET span:nth-child(4)::before {content: "\f054";}.icTWEET span:nth-child(4):hover {color:black;}</style>
    <style>@font-face {font-family: "edgeicons"; src: url("https://abs.twimg.com/a/1533755696/font/edge-icons-Regular.woff") format("woff"), url("../../font/edge-icons-Regular.ttf") format("truetype"); }</style>

    Sans le fond gris :

    Le Pseudo @lepseudotoutcollé • en heure ou la date type 00/00/00

    Le tweet de moins de 140 caractères (en gros, pas plus de 3 lignes).

    xx xx xx





    Code:
    <div class="corTWEET"><div class="vavaTWEET"><!-- AVATAR --><img src="URL DE L'AVATAR"/></div><div class="droTWEET"><!-- Le pseudo  --><span class="pseTWEET">Le Pseudo</span> <!--  Le @ du compte et le tweet posté il y a... --><span class="altTWEET">@lepseudotoutcollé • en heure ou la date type 00/00/00</span><!--  Contenu du tweet (moins de 140 caractères) -->
    <p>Le tweet de moins de 140 caractères (en gros, pas plus de 3 lignes).</p><div class="icTWEET"><!-- Laissez l'espace entre le <span> et le chiffre --><!-- Les réponses au tweet  --><span> xx</span><!-- Les retweets  --><span> xx</span><!-- Le nombre de favoris  --><span> xx</span><!-- Envoyer un DM (pas de nombres) --><span> </span><div class="clear"></div></div></div><div class="clear"></div></div>

    <style>.corTWEET{width:570px;padding:10px;margin:auto;background:white;border-bottom:1px solid #E6ECF0;cursor:pointer;transition:all 0s ease;min-height:51px;}.corTWEET:hover {background:#F5F8FA;}.vavaTWEET{width:48px;height:48px;border-radius:50%;float:left;overflow:hidden;}.vavaTWEET img{width:48px;height:auto;}.droTWEET{float:left;width:88%;margin:0px 10px;font-family:'Segoe UI';font-size:13px;}.pseTWEET{color:black;font-weight:bold;transition:all 0s ease;}.pseTWEET:hover{text-decoration:underline;}.altTWEET{color:#657786;}.droTWEET p{margin:0;}.icTWEET span{color:#657786;transition:all 0s ease;display:block;word-spacing:5px;float:left;width:15%;overflow:hidden;margin-top:10px;font-weight:bold;}.icTWEET span::before {font-family: "edgeicons";font-size:20px;font-weight:normal;}.icTWEET span:nth-child(1)::before {content: "\f151";}.icTWEET span:nth-child(1):hover {color:#42BDF6;}.icTWEET span:nth-child(2)::before {content: "\f152";}.icTWEET span:nth-child(2):hover {color:#17C47D;}.icTWEET span:nth-child(3)::before {content: "\f148";}.icTWEET span:nth-child(3):hover {color:#EA4E5E;}.icTWEET span:nth-child(4)::before {content: "\f054";}.icTWEET span:nth-child(4):hover {color:black;}</style>
    <style>@font-face {font-family: "edgeicons"; src: url("https://abs.twimg.com/a/1533755696/font/edge-icons-Regular.woff") format("woff"), url("../../font/edge-icons-Regular.ttf") format("truetype"); }</style>

      La date/heure actuelle est Mer 14 Nov - 3:33


      Partenaires