/ EXPLICATIONS ET FORMULAIRES.

save the queens ---- / INSTAGRAM

---- / share your life

instagram, l'application la plus connue, la plus rapide et la plus aimée pour exposer son quotidien au monde entier ou encore pour montrer la trouvaille de l'année en matière de mode ou de gastronomie. en résumé, c'est un partage sur tous les plans et dans tous les domaines possibles et imaginables. ici, on en trouve des vertes et des pas mûres : des plus belles photographies aux astuces les plus insolites, tout se passe sur cette appli. alors vous aussi amusez-vous avec les filtres et montrez-nous vos plus belles photos !

comment faire ? il suffit d'ouvrir un sujet par personnage (titré @username) afin de poster votre propre fil d'actualité, suite à quoi vous aurez la possibilité de commenter et/ou liker les posts de vos amis en vous rendant directement dans leurs topics.

explications de la codeuse :

/ merci à heresy et chaussette pour les codes.

/ formulaire pour la 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="IMAGE DE PROFIL ICI" /> <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>
Petite bio ici
<a href="LIEN VERS UNE VIDEO YOUTUBE ICI" 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"><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="IMAGE ICI" /></div><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="IMAGE ICI" /></div><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="IMAGE ICI" /></div><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="IMAGE ICI" /></div><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="IMAGE ICI" /></div><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="IMAGE ICI" /></div><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="IMAGE ICI" /></div><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="IMAGE ICI" /></div><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="IMAGE ICI" /></div></div></div><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"><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="IMAGE ICI" /></div><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="IMAGE ICI" /></div><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="IMAGE ICI" /></div><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="IMAGE ICI" /></div></div></div> </div>

<div class="loader"></div></div> <credit>cr: HERESY.</credit>

/ formulaire pour poster une photo

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="IMAGE DE PROFIL ICI" /></a> <div class="id-pseudo">username • following</div></div><img class="post-pic" src="IMAGE DU POST ICI" /><div class="post-like"><strong>439 Likes</strong>
<strong>username</strong> légende de la photo ici
<hr />
<div class="date">June 15</div></div></div>

/ formulaire pour liker une photo

Code:: <center><link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<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="fondinsta"> <div class="fondhautinsta"><center><img src="https://nsa38.casimages.com/img/2016/05/27//16052711280072955.png" style=" height: 30px;margin-top:-5px;margin-right:-15px;" align="center"></div>
<div style="width:375px; height:20px; padding:5px;padding-left:15px; padding-right:10px;background-color: #fff;"><div style="margin-left:3px;margin-top:-9px; margin-bottom:7px; font-size: 13px;font-family: 'open sans', sans-serif; text-align:justify; color:#000;"><b>username</b> a aimé votre publication</div></center>

/ formulaire pour commenter un post

Code:: <center><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 style="margin-top:-35px;"><div class="fondinstagr"> <div class="fondhautinstag"><img src="https://nsa38.casimages.com/img/2016/05/27//160527032208186863.png" class="imagehaut" align="left"><b>Commentaires</b></div>
<div style="width:375px; padding:5px;padding-left:15px; padding-right:10px;background-color: #fff;"><div style="margin-left:3px;margin-top:-9px; margin-bottom:7px; font-size: 13px;font-family: 'open sans', sans-serif; text-align:justify; color:#000;"><b>username</b> ECRIRE UN COMMENTAIRE ICI</div></div></div></center>

» / EXPLICATIONS ET FORMULAIRES.
» / EXPLICATIONS ET FORMULAIRES.
» / FORMULAIRES.
» / EXPLICATIONS.
» / RÈGLES ET EXPLICATIONS.