Découvrir le conceptSans inscriptionMettez les créditsCommandes ouvertes
-40%
Le deal à ne pas rater :
Tefal Ingenio Emotion – Batterie de cuisine 10 pièces (induction, ...
59.99 € 99.99 €
Voir le deal

KoalaVolant
KoalaVolant
Dim 2 Oct 2022 - 19:18


CREDITS

Codage de Koalavolant
Icons affiches autres et animaux par Koalavolant



Vous suivez









60 j'aimeDescription de la photo #vivelescookies #cyberlife #youpidou



nominsta Comment bonjour j'écris youpidou

#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>
Revenir en haut

Nos amis proches

Instagram n°1 Parto512 Logo WyvArtem