Votre navigateur ne supporte pas cette démonstration
John Smith
@johnsmith
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac nisi dapibus, congue ex quis, commodo lorem. Nunc volutpat est non sapien varius consequat.
16:15 PM - 09 Jan 2022
625
245
1K
<div class="grid">
<div class="carte-tweet">
<svg class=avatar viewBox="0 0 122.88 110.44">...</svg>
<div class="nom-tweet">John Smith</div>
<div class="arobase">@johndoe</div>
<svg class="twitter-logo" viewBox="0 0 32 32">...</svg>
<div class=texte-tweet>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac nisi dapibus, congue ex quis, commodo lorem. Nunc volutpat est non sapien varius consequat. </p>
</div>
<div class=date-tweet>16:15 PM - 09 Jan 2022</div>
<span>
<svg width="22" height="22" viewBox="0 0 217.762 217.762">
</svg>625</span>
<span>
<svg width="22" height="22" viewBox="0 0 21 21">
</svg>245
</span>
<span>
<svg width="22" height="22" viewBox="0 0 51.997 51.997">
</svg>1K
</span>
</div>
</div>
*,
*::before,
*::after{
box-sizing: border-box
}
.grid {
margin:auto;
display: grid;
grid-template-columns: repeat(6,1fr);
gap: .5rem;
max-width:500px;
}
.date-tweet{
grid-column:span 6;
margin:1rem 0
}
.carte-tweet{
display: grid;
grid-column: 1/-1;
grid-template-columns: subgrid;
align-items: center;
}
.avatar {
grid-row: 1 / 3;
grid-column:1/ 2;
width: 48px;
aspect-ratio:1;
border-radius: 50%;
background:#6753ea
}
.twitter-logo{
width: 24px;
aspect-ratio:1;
justify-self:center;
grid-column:6;
grid-row:span 2
}
.carte-tweet span {
justify-self:center;
display:grid;
grid-auto-flow: column;
gap:.5rem
}
.header__text {
font-size: 1.5em;
margin: 0;
}
.carte-tweet {
background-color: #fff;
border-radius: 10px;
padding: 10px;
box-shadow: 20px 20px 20px -20px rgba(0,0,0,0.75);
border: 1px solid rgba(0,0,0,0.25);
}
.carte-tweet p{
margin-top:1rem;
}
.texte-tweet{
grid-column:span 6
}
.nom-tweet {
grid-column: 2 / 6;
font-size: 1em;
margin: 0;
font-weight: 700;
}
.arobase{
grid-column: 2 / 6;
grid-row: 2
}