MODELE ❞ profil + poste + commentaire + follow + like

On ne va pas se mentir, aujourd'hui que serions-nous sans les réseaux et surtout Instagram ? Que ça soit pour vivre ou en tant qu'hobby, ce réseau vous servira à poster vos plus beaux clichés du moment ! Comment en ouvrir un ? Rien de plus simple, une fois votre profil posté (avec en titre @username), vous pourrez aller montrer aux autres votre attrait pour leurs profils mais aussi publier de nouvelles choses ou encore commenter celles de vos abonnements. Nous remercions particulièrement hyangsu pour avoir mis son code en libre-service.

Code "Profil"

Code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css"><link href="https://cdn.jsdelivr.net/gh/hyang5u/CODES/IG_DUPE/insta_main-layout_alt.css" rel="stylesheet">
<center><div class="IG-main-container--alt"><div class="IG-bg-main--alt"><div class="IG-header"><div class="HD-box-img"><div class="HD-gradient-bg"><img src="https://via.placeholder.com/80" class="HD-img-profil"></div></div><div class="HD-box-rest">
<div class="HD-first-line"><div class="HD-username">username</div>
<div class="HD-follow-button">Suivre</div></div><div class="HD-infos"><div class="HD-info"><b>4,974</b> publications</div><div class="HD-info"><b>339M</b> followers</div><div class="HD-info"><b>576</b> suivi(e)s</div></div>
<div class="HD-descri"><b>Username/Nom</b><br>description</div>
<div class="HD-followed-by">Suivi(e) par <igb>username1</igb>, <igb>username2</igb>, <igb>username3</igb> et 3 autres personnes</div></div></div>

<div class="HL-box"><!-- DEBUT HIGHLIGHT --><div class="HL-cont"><div class="HL-cont-un"><div class="HL-bg-img"><img src="https://via.placeholder.com/42" class="HL-img"></div></div><div class="HL-cont-deux"><div class="HL-titre">:black_heart:</div></div></div><!-- FIN HIGHLIGHT --></div><div class="MID-nav"><div class="MID-nav-onglet" id="nav-onglet-actif"><div class="MID-black-line"></div><i class="bi-grid-3x3 icon-nav IGblack"></i> publications</div><div class="MID-nav-onglet"><i class="bi-camera-video-fill icon-nav"></i> reels</div><div class="MID-nav-onglet"><i class="bi-person-square icon-nav"></i> identifié(e)</div></div>

<div class="PIC-main"><!-- DEBUT FEED PRINCIPAL --><div class="PIC-pic-cont"><img src="https://via.placeholder.com/145" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 1,111 <i class="bi-chat-fill right-icon"></i> 1k11</div></div><div class="PIC-pic-cont"><img src="https://via.placeholder.com/146" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 2,222 <i class="bi-chat-fill right-icon"></i> 2k22</div></div><div class="PIC-pic-cont"><img src="https://via.placeholder.com/147" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 3,333 <i class="bi-chat-fill right-icon"></i> 3k33</div></div><div class="PIC-pic-cont"><img src="https://via.placeholder.com/148" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 4,444 <i class="bi-chat-fill right-icon"></i> 4k44</div></div><div class="PIC-pic-cont"><img src="https://via.placeholder.com/149" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 5,555 <i class="bi-chat-fill right-icon"></i> 5k55</div></div><div class="PIC-pic-cont"><img src="https://via.placeholder.com/150" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 6,666 <i class="bi-chat-fill right-icon"></i> 6k66</div></div><div class="PIC-pic-cont"><img src="https://via.placeholder.com/151" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 7,777 <i class="bi-chat-fill right-icon"></i> 7k77</div></div><div class="PIC-pic-cont"><img src="https://via.placeholder.com/152" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 8,888 <i class="bi-chat-fill right-icon"></i> 8k88</div></div><div class="PIC-pic-cont"><img src="https://via.placeholder.com/153" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 9,999 <i class="bi-chat-fill right-icon"></i> 9k99</div></div><!-- FIN FEED PRINCIPAL --></div></div></div><div class="credit">code by hyangsu</div></center>

Code "Profil" pour compte certifié (avec une certaine notoriété, permettant de confirmer qu'il s'agit du compte officielle de la personne)

Code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css"><link href="https://cdn.jsdelivr.net/gh/hyang5u/CODES/IG_DUPE/insta_main-layout_alt.css" rel="stylesheet">
<center><div class="IG-main-container--alt"><div class="IG-bg-main--alt"><div class="IG-header"><div class="HD-box-img"><div class="HD-gradient-bg"><img src="https://via.placeholder.com/80" class="HD-img-profil"></div></div><div class="HD-box-rest">
<div class="HD-first-line"><div class="HD-username">username <img src="https://tinyurl.com/IG-verif-check" class="verif-check"></div>
<div class="HD-follow-button">Suivre</div></div><div class="HD-infos"><div class="HD-info"><b>4,974</b> publications</div><div class="HD-info"><b>339M</b> followers</div><div class="HD-info"><b>576</b> suivi(e)s</div></div>
<div class="HD-descri"><b>Username/Nom</b><br>description</div>
<div class="HD-followed-by">Suivi(e) par <igb>username1</igb>, <igb>username2</igb>, <igb>username3</igb> et 3 autres personnes</div></div></div>

<div class="HL-box"><!-- DEBUT HIGHLIGHT --><div class="HL-cont"><div class="HL-cont-un"><div class="HL-bg-img"><img src="https://via.placeholder.com/42" class="HL-img"></div></div><div class="HL-cont-deux"><div class="HL-titre">:black_heart:</div></div></div><!-- FIN HIGHLIGHT --></div><div class="MID-nav"><div class="MID-nav-onglet" id="nav-onglet-actif"><div class="MID-black-line"></div><i class="bi-grid-3x3 icon-nav IGblack"></i> publications</div><div class="MID-nav-onglet"><i class="bi-camera-video-fill icon-nav"></i> reels</div><div class="MID-nav-onglet"><i class="bi-person-square icon-nav"></i> identifié(e)</div></div>

<div class="PIC-main"><!-- DEBUT FEED PRINCIPAL --><div class="PIC-pic-cont"><img src="https://via.placeholder.com/145" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 1,111 <i class="bi-chat-fill right-icon"></i> 1k11</div></div><div class="PIC-pic-cont"><img src="https://via.placeholder.com/146" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 2,222 <i class="bi-chat-fill right-icon"></i> 2k22</div></div><div class="PIC-pic-cont"><img src="https://via.placeholder.com/147" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 3,333 <i class="bi-chat-fill right-icon"></i> 3k33</div></div><div class="PIC-pic-cont"><img src="https://via.placeholder.com/148" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 4,444 <i class="bi-chat-fill right-icon"></i> 4k44</div></div><div class="PIC-pic-cont"><img src="https://via.placeholder.com/149" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 5,555 <i class="bi-chat-fill right-icon"></i> 5k55</div></div><div class="PIC-pic-cont"><img src="https://via.placeholder.com/150" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 6,666 <i class="bi-chat-fill right-icon"></i> 6k66</div></div><div class="PIC-pic-cont"><img src="https://via.placeholder.com/151" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 7,777 <i class="bi-chat-fill right-icon"></i> 7k77</div></div><div class="PIC-pic-cont"><img src="https://via.placeholder.com/152" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 8,888 <i class="bi-chat-fill right-icon"></i> 8k88</div></div><div class="PIC-pic-cont"><img src="https://via.placeholder.com/153" class="PIC-pic"><div class="PIC-hover"><i class="bi-heart-fill left-icon"></i> 9,999 <i class="bi-chat-fill right-icon"></i> 9k99</div></div><!-- FIN FEED PRINCIPAL --></div></div></div><div class="credit">code by hyangsu</div></center>

Code "Poster une publication"

Code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hyang5u/CODES/IG_DUPE/insta_single-post.css">
<center><div class="IGP-main-bg"><div class="TOP-infos"><div class="TOP-left"><div class="TOP-bg-grad"><img src="https://via.placeholder.com/80" class="TOP-img-profil"></div></div><div class="TOP-mid"><user>username</user><br><pc>localisation</pc></div><div class="TOP-right"><i class="bi-three-dots TOP-icon txt-black"></i></div></div><!-- DEBUT POST --><div class="IGP-post"><img src="https://via.placeholder.com/500x650" class="PST-main-img" style="object-fit: cover;height: 450px;"></div><!-- FIN POST -->
<div class="BTM-icons"><div class="BTM-icon-un"><i class="bi-heart BTM-icon txt-black"></i></div><div class="BTM-icon-deux"><i class="bi-chat BTM-icon txt-black"></i></div><div class="BTM-icon-trois"><i class="bi-send BTM-icon txt-black"></i></div><div class="BTM-icon-quatre"><i class="bi-bookmark BTM-icon txt-black"></i></div></div>
<div class="IGP-caption"><b><pc>1,234 J'aime</pc></b>
<b><pc>username</pc></b> caption here
<div class="CAP-time">IL Y A X HEURES</div></div>
<div class="IGP-add-comment"><div class="COM-left"><i class="bi-emoji-smile BTM-icon txt-black"></i></div><input class="COM-add-comment" type="text" name="inputBox" placeholder="Ajouter un commentaire..."></input><div class="COM-publish">Publier</div></div></div><div class="credit-post">code by hyangsu</div></center>

Code "Poster une publication" pour compte certifié

Code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hyang5u/CODES/IG_DUPE/insta_single-post.css">
<center><div class="IGP-main-bg"><div class="TOP-infos"><div class="TOP-left"><div class="TOP-bg-grad"><img src="https://via.placeholder.com/80" class="TOP-img-profil"></div></div><div class="TOP-mid"><user>username</user> <img src="https://tinyurl.com/IG-verif-check" class="TOP-verif-check"><br><pc>localisation</pc></div><div class="TOP-right"><i class="bi-three-dots TOP-icon txt-black"></i></div></div><!-- DEBUT POST --><div class="IGP-post"><img src="https://via.placeholder.com/500x650" class="PST-main-img" style="object-fit: cover;height: 450px;"></div><!-- FIN POST -->
<div class="BTM-icons"><div class="BTM-icon-un"><i class="bi-heart BTM-icon txt-black"></i></div><div class="BTM-icon-deux"><i class="bi-chat BTM-icon txt-black"></i></div><div class="BTM-icon-trois"><i class="bi-send BTM-icon txt-black"></i></div><div class="BTM-icon-quatre"><i class="bi-bookmark BTM-icon txt-black"></i></div></div>
<div class="IGP-caption"><b><pc>1,234 J'aime</pc></b>
<b><pc>username</pc></b> caption here
<div class="CAP-time">IL Y A X HEURES</div></div>
<div class="IGP-add-comment"><div class="COM-left"><i class="bi-emoji-smile BTM-icon txt-black"></i></div><input class="COM-add-comment" type="text" name="inputBox" placeholder="Ajouter un commentaire..."></input><div class="COM-publish">Publier</div></div></div><div class="credit-post">code by hyangsu</div></center>

Code "Poster un commentaire"

Code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hyang5u/CODES/IG_DUPE/insta_comms.css"><center><div class="IGC-bg"><div class="CM-comment"><div class="CM-pp"><div class="CM-bg-grad"><img src="https://via.placeholder.com/80" class="CM-img-profil"></div></div><div class="CM-main-comment"><user>username </user> a commenté votre publication : <cm>commentaire juste ici, commentaire juste ici commentaire juste ici</cm> :fire:
<div class="CM-time">IL Y A 5 HEURES</div></div></div></div></center>

Code "Poster un commentaire" pour compte certifié

Code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hyang5u/CODES/IG_DUPE/insta_comms.css"><center><div class="IGC-bg"><div class="CM-comment"><div class="CM-pp"><div class="CM-bg-grad"><img src="https://via.placeholder.com/80" class="CM-img-profil"></div></div><div class="CM-main-comment"><user>username </user> <img src="https://tinyurl.com/IG-verif-check" class="CM-verif-check"> a commenté votre publication : <cm>commentaire juste ici, commentaire juste ici commentaire juste ici</cm> :fire:
<div class="CM-time">IL Y A 5 HEURES</div></div></div></div></center>

Code "Follow"

Code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hyang5u/CODES/IG_DUPE/insta_comms.css"><center><div class="IGC-bg"><div class="CM-comment"><div class="CM-pp"><div class="CM-bg-grad"><img src="https://via.placeholder.com/80" class="CM-img-profil"></div></div><div class="CM-main-comment"><user>username </user> a commencé à vous suivre.
<div class="CM-time">IL Y A 5 HEURES</div></div></div></div></center>

Code "Follow" pour compte certifié

Code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hyang5u/CODES/IG_DUPE/insta_comms.css"><center><div class="IGC-bg"><div class="CM-comment"><div class="CM-pp"><div class="CM-bg-grad"><img src="https://via.placeholder.com/80" class="CM-img-profil"></div></div><div class="CM-main-comment"><user>username </user> <img src="https://tinyurl.com/IG-verif-check" class="CM-verif-check"> a commencé à vous suivre.
<div class="CM-time">IL Y A 5 HEURES</div></div></div></div></center>

Code "Like"

Code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hyang5u/CODES/IG_DUPE/insta_comms.css"><center><div class="IGC-bg"><div class="CM-comment"><div class="CM-pp"><div class="CM-bg-grad"><img src="https://via.placeholder.com/80" class="CM-img-profil"></div></div><div class="CM-main-comment"><user>username </user> a aimé votre publication.
<div class="CM-time">IL Y A QUELQUES INSTANTS</div></div></div></div></center>

Code "Like" pour compte certifié

Code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hyang5u/CODES/IG_DUPE/insta_comms.css"><center><div class="IGC-bg"><div class="CM-comment"><div class="CM-pp"><div class="CM-bg-grad"><img src="https://via.placeholder.com/80" class="CM-img-profil"></div></div><div class="CM-main-comment"><user>username </user> <img src="https://tinyurl.com/IG-verif-check" class="CM-verif-check"> a aimé votre publication.
<div class="CM-time">IL Y A QUELQUES INSTANTS</div></div></div></div></center>