KoalaVolant
Dim 2 Oct 2022 - 19:18
Vous suivez
60 j'aimeDescription de la photo #vivelescookies #cyberlife #youpidou
HTML / CSS
Pour le html de tous les éléments, c'est ça :
- Code:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet"><div class="feedinsta"><div class="feedliens"><em>Vous suivez</em>
<img src="https://i.imgur.com/rcMmikf.jpg"/>
<img src="https://i.imgur.com/s97ClRY.jpg"/>
<img src="https://i.imgur.com/SFBqe5Q.jpg"/>
<img src="https://i.imgur.com/tVDvhtI.jpg"/>
<img src="https://i.imgur.com/sYixMNk.jpg"/>
<img src="https://i.imgur.com/pjAFkUI.jpg"/>
</div>
<div class="feedcontent">
<div><img src="https://images.pexels.com/photos/12128381/pexels-photo-12128381.jpeg"/>
<span><strong>60 j'aime</strong>Description de la photo <em>#vivelescookies #cyberlife #youpidou</em></span></div>
</div></div>
<div class="feedcomment"><img src="https://i.ibb.co/D9NrBv4/Film-Affiche7.jpg"><div><strong>nominsta</strong> Comment bonjour j'écris youpidou
<em>#vivelescookies #cyberlife #youpidou</em></div></div>
Pour le CSS :
- Code:
/* Instagram */
.feedinsta{ width:400px; margin:0 auto; font-family:'Inter', sans-serif;}
.feedinsta, .feedinsta *{ box-sizing:border-box; }
.feedinsta img{ object-fit:cover; }
/* Gens qu'on suis */
.feedinsta .feedliens{ background:#fff; border:1px solid #dedede; border-radius:10px;
display:flex; flex-wrap:wrap; padding:10px;}
.feedinsta .feedliens em{ width:45px; display:flex; align-items:center; font-family:Trebuchet MS; font-size:10px; line-height:10px; font-weight:bold; text-align:center; color:#828282;}
.feedinsta .feedliens img{ width:50px; height:50px; margin:0 2px; border-radius:50%; outline:1px solid #dedede; outline-offset:2px; }
/* Contenu */
.feedcontent br{ display:none; }
.feedcontent{background:#fff; border:1px solid #dedede; border-radius:10px; padding:10px;width:400px; margin:0 auto; }
.feedcontent img{ width:100%; height:320px; object-fit:cover; }
.feedcontent span br{ display:block; }
.feedcontent span{ display:block; margin-top:10px; }
.feedcontent strong{ display:block; margin-bottom:10px; }
.feedcontent em{ font-style:normal; margin-top:10px;display:block; color:#27507a; }
/* Commentaire */
.feedcomment{ width:400px; margin:0 auto; background:#fff; border:1px solid #dedede; border-radius:10px;
display:flex; align-items:flex-start; padding:10px; }
.feedcomment img{ width:35px; height:35px; border-radius:50%; margin-right:10px;}
Et pour la documentation pour vos membres :
Comment installer dans un nouveau sujet
Il vous suffit de copier coller le code suivant, et d'ajouter vos images de gens que vous suivez (les amis de votre perso ?)
- Code:
<div class="feedinsta"><div class="feedliens"><em>Vous suivez</em>
<img src="https://i.imgur.com/rcMmikf.jpg"/>
<img src="https://i.imgur.com/s97ClRY.jpg"/>
<img src="https://i.imgur.com/SFBqe5Q.jpg"/>
<img src="https://i.imgur.com/tVDvhtI.jpg"/>
<img src="https://i.imgur.com/sYixMNk.jpg"/>
<img src="https://i.imgur.com/pjAFkUI.jpg"/>
</div>
<div class="feedcontent">
<div><img src="https://images.pexels.com/photos/12128381/pexels-photo-12128381.jpeg"/>
<span><strong>60 j'aime</strong>Description de la photo <em>#vivelescookies #cyberlife #youpidou</em></span></div>
</div></div>
Pour ajouter une image que ça soit en réponse, ou dans un nouveau sujet, il suffit de C/C ce code :
- Code:
<div class="feedcontent">
<div><img src="https://images.pexels.com/photos/12128381/pexels-photo-12128381.jpeg"/>
<span><strong>60 j'aime</strong>Description de la photo <em>#vivelescookies #cyberlife #youpidou</em></span></div>
</div>
Comment répondre à un post de quelqu'un
Pour ça il vous suffit de C/C ça comme réponse et de le remplir :
- Code:
<div class="feedcomment"><img src="https://i.ibb.co/D9NrBv4/Film-Affiche7.jpg"><div><strong>nominsta</strong> Comment bonjour j'écris youpidou
<em>#vivelescookies #cyberlife #youpidou</em></div></div>
|
|
#vivelescookies #cyberlife #youpidou