| | |
| | Dim 27 Oct - 17:58 Cette application est adorée par des millions d'habitants de notre bonne vieille planète. Ils aiment y publier ce qu'ils font au quotidien, ce qu'ils capturent comme paysages fabuleux, ce qu'ils jugent utiles pour leurs abonnés... Un vrai lieu de partage où, pour beaucoup, Instagram est devenue leur patron et gagne leur vie grâce à elle. Que ce soit la gastronomie, l'art culinaire dans toutes ses formes, la pâtisserie, les voyages ou encore la mode, difficile de ne pas trouver son bonheur auprès de cette ingéniosité. Fonctionnement Il te suffit d'ouvrir un nouveau sujet par personnage avec, comme titre, @(username) pour que tu puisses ouvrir/poster ton fil d'actualité et où tu pourras, ensuite, commenter et/ou liker les différents posts que posteront tes amis. Pour que tu puisses faire cela, il faudra que tu te rendes directement dans leur sujet! Credits Les mises en pages d'Instagram ont été créées par heresy et chaussette. Nous les remercions infiniment pour leur travail hors-pair! - note importante d'heresy:
je me suis amusée y'a quelques jours à faire un code insta en onglets (posts pour le feed/les photos postées et tagged pour les publications sur lesquelles le personnage a été mentionné). j'ai glissé des annotations autour des codes des images histoire d'aérer un peu tout ça instagram - code instagram. 4013745979 attention du coup à ne pas écrire à l'intérieur des balises commentaires, à savoir :
< ! --
lalalala
-- >
(sans les espaces). dunno si ce s'ra utile à qqun mais well, si oui ça m'fera plaisir alors enjoy instagram - code instagram. 4073216716
+ postez à la suite pour voir s'afficher le code ; + pensez à changer le nombre de likes et de commentaires sur chaque image (les stats s'affichent au survol) ; + les images se redimensionnent automatiquement ; + j'ai mis 9 images dans le premier onglet et 4 dans le deuxième, mais vous pouvez en enlever ou en ajouter librement.
< formulaire > - page d'accueil - Code:
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> <link rel="stylesheet" href="https://www.aht.li/3282401/insta.css" /> <link rel="stylesheet" href="https://www.aht.li/3282530/insta_onglets.css" /> <div class="insta"> <div class="profil"><img class="profil-image" src="https://via.placeholder.com/200x200" /> <div class="perso more"> <div class="pseudo">username</div> <div class="profil-btn">Following</div> <div class="profil-btn">▾</div></div> <div class="stat"><span class="posts">349</span><span class="followers">834</span><span class="following">238</span></div> <div class="bio"><strong>Nom Prénom</strong> Long nights, daydreams, sugar and smoke rings [img]http://twemoji.maxcdn.com/16x16/1f48e.png[/img] [img]http://twemoji.maxcdn.com/16x16/1f48b.png[/img] <a href="https://www.youtube.com/watch?v=PYI0E_Wr1gM" target="_blank">youtu.be/PYI0E_Wr1gM</a>
<span class="followed">Followed by <strong>username</strong>, <strong>username</strong>, <strong>username</strong> + 1 more</span></div></div>
<div class="tabs"><input class="input" name="tabs" type="radio" id="tab-1" checked="checked" /> <label class="label published" for="tab-1">Posts</label> <div class="panel"><div class="galerie"><!--
code ajout d'une image
--><div class="feed"><div class="feed-info"><span><i class="fas fa-heart" aria-hidden="true"></i> 89</span> <span><i class="fas fa-comment" aria-hidden="true"></i> 5</span></div> <img src="https://via.placeholder.com/200x150" /></div><!--
code ajout nouvelle image
--><div class="feed"><div class="feed-info"><span><i class="fas fa-heart" aria-hidden="true"></i> 89</span> <span><i class="fas fa-comment" aria-hidden="true"></i> 5</span></div> <div class="feed-type"><i class="fas fa-clone" aria-hidden="true"></i></div> <img src="https://via.placeholder.com/350x200" /></div><!--
code ajout nouvelle image
--><div class="feed"><div class="feed-info"><span><i class="fas fa-heart" aria-hidden="true"></i> 89</span> <span><i class="fas fa-comment" aria-hidden="true"></i> 5</span></div> <img src="https://via.placeholder.com/160x160" /></div><!--
code ajout nouvelle image
--><div class="feed"><div class="feed-info"><span><i class="fas fa-heart" aria-hidden="true"></i> 89</span> <span><i class="fas fa-comment" aria-hidden="true"></i> 5</span></div> <div class="feed-type"><i class="fas fa-video" aria-hidden="true"></i></div> <img src="https://via.placeholder.com/230x180" /></div><!--
code ajout nouvelle image
--><div class="feed"><div class="feed-info"><span><i class="fas fa-heart" aria-hidden="true"></i> 89</span> <span><i class="fas fa-comment" aria-hidden="true"></i> 5</span></div> <img src="https://via.placeholder.com/300x150" /></div><!--
code ajout nouvelle image
--><div class="feed"><div class="feed-info"><span><i class="fas fa-heart" aria-hidden="true"></i> 89</span> <span><i class="fas fa-comment" aria-hidden="true"></i> 5</span></div> <div class="feed-type"><i class="fas fa-clone" aria-hidden="true"></i></div> <img src="https://via.placeholder.com/350x150" /></div><!--
code ajout nouvelle image
--><div class="feed"><div class="feed-info"><span><i class="fas fa-heart" aria-hidden="true"></i> 89</span> <span><i class="fas fa-comment" aria-hidden="true"></i> 5</span></div> <div class="feed-type"><i class="fas fa-clone" aria-hidden="true"></i></div> <img src="https://via.placeholder.com/300x150" /></div><!--
code ajout nouvelle image
--><div class="feed"><div class="feed-info"><span><i class="fas fa-heart" aria-hidden="true"></i> 89</span> <span><i class="fas fa-comment" aria-hidden="true"></i> 5</span></div> <div class="feed-type"><i class="fas fa-video" aria-hidden="true"></i></div> <img src="https://via.placeholder.com/400x200" /></div><!--
code ajout nouvelle image
--><div class="feed"><div class="feed-info"><span><i class="fas fa-heart" aria-hidden="true"></i> 89</span> <span><i class="fas fa-comment" aria-hidden="true"></i> 5</span></div> <img src="https://via.placeholder.com/300x150" /></div><!--
FIN DU FEED INSTA
--></div></div><!--
DÉBUT DES IMAGES "MENTIONNÉ"
--><input class="input" name="tabs" type="radio" id="tab-2" /> <label class="label tagged" for="tab-2">Tagged</label> <div class="panel"> <div class="galerie"><!--
code ajout d'une image
--><div class="feed"><div class="feed-info"><span><i class="fas fa-heart" aria-hidden="true"></i> 89</span> <span><i class="fas fa-comment" aria-hidden="true"></i> 5</span></div> <img src="https://via.placeholder.com/200x150" /></div><!--
code ajout d'une image
--><div class="feed"><div class="feed-info"><span><i class="fas fa-heart" aria-hidden="true"></i> 89</span> <span><i class="fas fa-comment" aria-hidden="true"></i> 5</span></div> <img src="https://via.placeholder.com/200x150" /></div><!--
code ajout d'une image
--><div class="feed"><div class="feed-info"><span><i class="fas fa-heart" aria-hidden="true"></i> 89</span> <span><i class="fas fa-comment" aria-hidden="true"></i> 5</span></div> <img src="https://via.placeholder.com/200x150" /></div><!--
code ajout d'une image
--><div class="feed"><div class="feed-info"><span><i class="fas fa-heart" aria-hidden="true"></i> 89</span> <span><i class="fas fa-comment" aria-hidden="true"></i> 5</span></div> <img src="https://via.placeholder.com/200x150" /></div><!--
FIN DES MENTIONS
--></div></div> </div>
<div class="loader"></div></div> <credit>cr: HERESY.</credit> < formulaire > - poster une image - Code:
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> <link rel="stylesheet" href="https://www.aht.li/3282993/insta-comm.css" /> <div class="insta-post"><div class="insta-id"><a href="http://www.bazzart.org/u7256" target="_blank"><img class="insta-id-pic" src="https://via.placeholder.com/200x200" /></a> <div class="id-pseudo">username • following</div></div><!--
--><img class="post-pic" src="https://via.placeholder.com/400x450" /><div class="post-like"><strong>439 Likes</strong> <strong>username</strong> message ici <hr /> <!-- la partie comms est facultative et peut être supprimée --><strong>username</strong> commentaire <strong>username</strong> commentaire <strong>username</strong> commentaire <hr /> <div class="date">June 15</div></div></div> < formulaire > - liker une image - Code:
-
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'><style>.fondinstagr{width:400px; height: auto;margin:auto; text-align:justify;background:white;padding:10px;} .fondhautinstag{width:395px; margin-left:-10px;height: 25px;margin-top:-10px;background:#f9f9f9!important;border-bottom:solid #dbdbdb 2px;text-align:left;padding:5px;padding-left:15px;padding-top:15px; padding-right:10px;} .imagehaut{height: 30px;margin-top:-7px;margin-right:10px;border-right:solid #dbdbdb 1px;} .titrecom{font-family: 'Roboto', sans-serif;color:#262626;font-size: 13px;} </style>
<center><div class="fondinstagr"> <div class="fondhautinstag"><img src="https://nsa38.casimages.com/img/2016/05/27//160527032208186863.png" class="imagehaut" align="left"><span class="titrecom">[b]Liker une photo[/b]</span></div> @"username" a aimé votre publication <br></div></div></center> < formulaire > - commenter un post - Code:
-
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'><style>.fondinstagr{width:400px; height: auto;margin:auto; text-align:justify;background:white;padding:10px;} .fondhautinstag{width:395px; margin-left:-10px;height: 25px;margin-top:-10px;background:#f9f9f9!important;border-bottom:solid #dbdbdb 2px;text-align:left;padding:5px;padding-left:15px;padding-top:15px; padding-right:10px;} .imagehaut{height: 30px;margin-top:-7px;margin-right:10px;border-right:solid #dbdbdb 1px;} .titrecom{font-family: 'Roboto', sans-serif;color:#262626;font-size: 13px;} </style>
<center><div class="fondinstagr"> <div class="fondhautinstag"><img src="https://nsa38.casimages.com/img/2016/05/27//160527032208186863.png" class="imagehaut" align="left"><span class="titrecom">[b]Commentaires[/b]</span></div> Quelques mots pour écrire le commentaire <br></div></div></center> | The Lust Soul | |
| |
|