fauxstagram code

[shipping]

Decided to give Erik an instagram at duplicitynet with a sticky header and images that resize with the window. When I was done making it I thought why not share with everyone! ♥ Originally I also tried making a gradient border for recently posted stories but that was a trainwreck and a half.

PREVIEW

Fauxstagram

▲

• soaring
• ✓
• Following
• ▼
• ...

• 30 posts
• 104 followers
• 62 following

Carol Danvers
🛩let's show these boys how it's done.

code shipping

• ▦ POSTS
• ▣ TAGGED

HEADER

Make sure to replace anything demarcated with square brackets. There are: [FAUXSTAGRAM] (for whatever you want to call the "app"), [AVATARURL], [USERNAME], [NAME] & [DESCRIPTION] as well as 3 [#] for posts, followers and following. You should not have any brackets left when you are done replacing.
<raw-code><div style="width: 100%;"><div style="position: sticky; top: -1px; padding: 15px;background: white; border-bottom: 1px solid #ddd;"><div style="height: 20px; width: 20px; border-radius: 5px; border: #000 solid 2px; display: inline-block; margin-right: 10px;"><div style="height: 10px; width: 10px; border-radius: 10px; border: 2px solid #000; margin-left: 3px; margin-top: 3px;"></div></div> <div style="border-left: 1px solid #ddd; display: inline-block; padding-left: 10px; font-size: 30px; letter-spacing: -1px; font-family: brush script mt">[FAUXSTAGRAM]</div><div style="float: right;"><a href="#top" style="color:#000; text-decoration: none; font-size: 25px;">▲</a></div></div><div style="display: inline-block"><img src="[AVATARURL]" style="float:left; margin: 40px; width: 150px; height: 150px; vertical-align: top;border-radius: 150px; border: 1px solid #ddd;"><div style=" margin-top: 40px; overflow: hidden;"><ul style="margin-left: -2px;"><li style="list-style-type: none; display: inline-block; font-size: 25px; padding: 5px;">[USERNAME]</li> <li style="list-style-type: none; display: inline-block; height: 12px; width: 12px;background: #458eff; color: #fff; border: 1px dotted #eee; border-radius: 20px;margin-right: 15px; font-size: 12px; text-align: center; line-height: 12px; padding: 3px;">✓</li><li style="list-style-type: none; display: inline-block;"><div style="font-size; 15px; border: 1px solid #ddd; border-radius: 5px;padding: 3px 25px;margin:5px; font-weight: bold; font-family: arial; font-size: 15px; margin-top: -2px;">Following</div></li><li style="list-style-type: none;display: inline-block;"><div style="font-size: 14px; border: 1px solid #ddd; border-radius: 5px;padding: 4px 15px;margin:5px;">▼</div></li><li style="list-style-type: none; display: inline-block; font-size: 30px; font-family: times new roman;padding: 5px;padding-left: 15px;">...</li></ul><ul style="font-size: 17px; font-family: arial; margin-left: 0px;"><li style="list-style-type: none; display: inline-block; padding-right: 30px;"><b>[#]</b> posts</li><li style="list-style-type: none; display: inline-block; padding-right: 30px;"><b>[#]</b> followers</li><li style="list-style-type: none; display: inline-block; padding-right: 30px;"><b>[#]</b> following</li></ul><ul style="margin-left: 0px; font-size: 15px; font-family: arial;"><b>[NAME]</b><br>[DESCRIPTION]</ul></div><div style="clear: both;"/><div align="right" style="font-size: 7px; text-transform: uppercase; letter-spacing: 2px;">code <user name="shipping"></div> <div style="width: 100%; border-top: 1px solid #ddd; text-align: center;"><ul style="font-size: 14px; font-family: arial; margin-top: -1px;"><li style="list-style-type: none; display: inline-block; border-top: 1px solid #000; margin-right: 30px; padding-top: 10px;">▦ POSTS</li><li style="list-style-type: none; display: inline-block; margin-right: 30px; color: #aaa; padding-top: 10px;">▣ TAGGED</li></ul></div></div><div style="clear: both;"></div><!--POST IMAGES AFTER THIS LINE-->

ADD IMAGES

Add one of these per image to the bottom of the code after <!--POST IMAGES AFTER THIS LINE--> You will need at least 3 to start with but you can have as many as you want, and it will automatically make 3 columns*. Replace [IMAGEURL] with your image. It will automatically resize to square but originally square images will work best.
<img src="[IMAGEURL]" height="30%" width="30%" style="padding: 1.4%">
*if your viewport is extremely small, it will shrink to a 2-column layout.

OPTIONAL: FOOTER

If you want to include things underneath your Instagram post on the same entry, make sure to add this underneath all your images. Otherwise, the sticky Instagram header will automatically stop once you reach the comment section of your post.
</div></div></raw-code>