Tessisamess - Mockup: Instagram

You're viewing

tesscodes's journal
Create a Dreamwidth Account Learn More

Reload page in style: site light

Profile

tessisamess

The Sanity Extension

Title Here

Vivamus gravida eros et arcu tempus, eget tempus risus fringilla. Ut porttitor lorem ut nibh interdum convallis. Ut fermentum in ipsum vel volutpat. Fusce eget ligula ut est semper pretium ut nec tellus.

Donec felis lectus, ullamcorper eget elit cursus, viverra consequat purus. Ut tincidunt nec odio in elementum. Phasellus sagittis vestibulum lorem, quis faucibus mauris lacinia non.

Navigation

July 2024

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

View all Archives

Links List

Resources

Layout By

Powered by Dreamwidth Studios

Previous | Next

Mockup: Instagram

Sep. 19th, 2016

💖 LIVE PREVIEW 💖

information

Welcome to another code from Tessisamess!

I've been wanting to recode my Instagram page for a while now to match the new Instagram, so here it is, as accurate as I could possibly make it! This code is a full HTML page that works on both IJ styles and offsite hosting, and features an image overlay function when you click on gallery images! I know the real Instagram allows non-square pictures, but for simplicity of use I'd say stick to squares. I have not included appearance replacements for obvious reasons, and I've hosted the CSS outside of the code for ease of editing. Enjoy! ♥

NOTE: When adding extra images and their corresponding overlays make sure the a href and the id number match. Ex. a href="#1" would be on the first photo grid picture and div id="1" would be on the first post overlay. Keep your numbers matching for each picture and its overlay, and you can make as big a gallery as you like! To insert fake links into photo comments just wrap things like @username and #hashtag in italic tags.

the coding

Oh, yeah. These are the goods!

Paste your code into a code tester, then follow the directions below to get your code rolling!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Yourname (@yourusername) &bull; Instagram photos and videos</title>
<link rel="shortcut icon" href="http://i.imgur.com/0nEt29E.png" type="image/ico" />
<link rel="stylesheet" href="https://dl.dropbox.com/s/28iw1r88tjglf94/instagram-tessisamess.css" type="text/css" />

</head>

<body>

<div id="header"><div><img src="http://i.imgur.com/plINmgz.png" id="logo"><img src="http://i.imgur.com/IKW6MsQ.png" id="buttons"></div></div>

<div id="content">
<div id="account-info"><div id="avatar" class="account-block">
<img src="YOURAVATAR"></div><div id="details" class="account-block">
<h1>yourusername</h1><br>
<div id="stats">
<div><b>0</b> posts</div>
<div><b>0</b> followers</div>
<div><b>0</b> following</div>
</div>
<b>Yourname</b> blurb <a href="http://journalname.insanejournal.com/">journalname.insanejournal.com</a>
</div></div>

<a href="#1"><div class="post">
<img src="URL1" class="img"><div class="post-info">
<div class="likes">00</div>
<div class="comments">00</div>
</div></div></a>

<a href="#2"><div class="post">
<img src="URL2" class="img"><div class="post-info">
<div class="likes">00</div>
<div class="comments">00</div>
</div></div></a>

<a href="#3"><div class="post">
<img src="URL3" class="img"><div class="post-info">
<div class="likes">00</div>
<div class="comments">00</div>
</div></div></a>

<a href="#4"><div class="post">
<img src="URL4" class="img"><div class="post-info">
<div class="likes">00</div>
<div class="comments">00</div>
</div></div></a>

<a href="#5"><div class="post">
<img src="URL5" class="img"><div class="post-info">
<div class="likes">00</div>
<div class="comments">00</div>
</div></div></a>

<a href="#6"><div class="post">
<img src="URL6" class="img"><div class="post-info">
<div class="likes">00</div>
<div class="comments">00</div>
</div></div></a>

<div id="1" class="overlay"><a href="#" class="close">&times;</a><div class="full-post">
<img src="URL1" class="max-img">
<div class="post-content">

<div class="post-head">
<img src="YOURAVATAR">
yourusername
</div>
<div class="likes-date"><b>00 likes</b><i>1d</i></div>
<div class="post-comments">

<div class="comment"><b>yourusername</b> POST DESCRIPTION</div>

<div class="comment"><b>anotherusername</b> COMMENT1</div>
<div class="comment"><b>anotherusername</b> COMMENT2 WITH <i>FAKELINK</i></div>

</div>

<img src="http://i.imgur.com/ivJifd2.png"></div>
</div>
</div>

<div id="2" class="overlay"><a href="#" class="close">&times;</a><div class="full-post">
<img src="URL2" class="max-img">
<div class="post-content">

<div class="post-head">
<img src="YOURAVATAR">
yourusername
</div>
<div class="likes-date"><b>00 likes</b><i>1d</i></div>
<div class="post-comments">

<div class="comment"><b>yourusername</b> POST DESCRIPTION</div>

<div class="comment"><b>anotherusername</b> COMMENT1</div>
<div class="comment"><b>anotherusername</b> COMMENT2 WITH <i>FAKELINK</i></div>

</div>

<img src="http://i.imgur.com/ivJifd2.png"></div>
</div>
</div>

<div id="3" class="overlay"><a href="#" class="close">&times;</a><div class="full-post">
<img src="URL3" class="max-img">
<div class="post-content">

<div class="post-head">
<img src="YOURAVATAR">
yourusername
</div>
<div class="likes-date"><b>00 likes</b><i>1d</i></div>
<div class="post-comments">

<div class="comment"><b>yourusername</b> POST DESCRIPTION</div>

<div class="comment"><b>anotherusername</b> COMMENT1</div>
<div class="comment"><b>anotherusername</b> COMMENT2 WITH <i>FAKELINK</i></div>

</div>

<img src="http://i.imgur.com/ivJifd2.png"></div>
</div>
</div>

<div id="4" class="overlay"><a href="#" class="close">&times;</a><div class="full-post">
<img src="URL4" class="max-img">
<div class="post-content">

<div class="post-head">
<img src="YOURAVATAR">
yourusername
</div>
<div class="likes-date"><b>00 likes</b><i>1d</i></div>
<div class="post-comments">

<div class="comment"><b>yourusername</b> POST DESCRIPTION</div>

<div class="comment"><b>anotherusername</b> COMMENT1</div>
<div class="comment"><b>anotherusername</b> COMMENT2 WITH <i>FAKELINK</i></div>

</div>

<img src="http://i.imgur.com/ivJifd2.png"></div>
</div>
</div>

<div id="5" class="overlay"><a href="#" class="close">&times;</a><div class="full-post">
<img src="URL5" class="max-img">
<div class="post-content">

<div class="post-head">
<img src="YOURAVATAR">
yourusername
</div>
<div class="likes-date"><b>00 likes</b><i>1d</i></div>
<div class="post-comments">

<div class="comment"><b>yourusername</b> POST DESCRIPTION</div>

<div class="comment"><b>anotherusername</b> COMMENT1</div>
<div class="comment"><b>anotherusername</b> COMMENT2 WITH <i>FAKELINK</i></div>

</div>

<img src="http://i.imgur.com/ivJifd2.png"></div>
</div>
</div>

<div id="6" class="overlay"><a href="#" class="close">&times;</a><div class="full-post">
<img src="URL6" class="max-img">
<div class="post-content">

<div class="post-head">
<img src="YOURAVATAR">
yourusername
</div>
<div class="likes-date"><b>00 likes</b><i>1d</i></div>
<div class="post-comments">

<div class="comment"><b>yourusername</b> POST DESCRIPTION</div>

<div class="comment"><b>anotherusername</b> COMMENT1</div>
<div class="comment"><b>anotherusername</b> COMMENT2 WITH <i>FAKELINK</i></div>

</div>

<img src="http://i.imgur.com/ivJifd2.png"></div>
</div>
</div>

<div id="footer"><a href="http://tessisamess.insanejournal.com/" id="cred" title="Coding by Tessisamess. Design by Instagram.">&copy;TESSISAMESS</a><b>FOR ROLE-PLAY & FICTIONAL USE ONLY. YOU ARE NOT ON THE REAL INSTAGRAM.</b></div>

</div>
</body>
</html>

installation guide

Everything you need to know about editing this code!

INFORMATION REPLACEMENTS
YOURNAME for your first name.
YOURUSERNAME for your username.
YOURAVATAR for your avatar.
JOURNALNAME for your bio link.
URL1 through URL6 for your grid and overlay photos.
The above fields show up in multiple places, so Replace All is best for them.

BLURB for your bio.
<b>0</b> posts, <b>0</b> followers, and <b>0</b> following for your account stats.
00 and 00 (x6) for your post stats.
00 likes and 1d (x6) for your post info.
POST DESCRIPTION for your photo blurb (use the i tag to make fake hashtags and @ links.)
anotherusername and COMMENT1/COMMENT2 for your user comments (use the i tag to make fake hashtags and @ links.)

terms of use

Please respect my usage agreement; thank you!

♥ Keep credit backlink in place.
♥ Do not redistribute my codes in part or in whole.
♥ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♥ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!

notes

Just some things to keep in mind!

♥ Most of my in-entry codes utilize lj-raw, which means things like line breaks need to be done with the HTML <br> tag.
♥ Some of my codes look great without using an lj-cut! But be aware, some of them (very large codes, or any code that utilizes tables) really should be behind a cut; spare your friends' f-pages and give it a look after posting! If it stretches out your journal entry or cuts off on the side, chances are it's going to warp other people's styles as well.

PURCHASE • FREE LAYOUTS • FREE IN-ENTRY CODES • MY TUTORIALS • PB ICONS

Tags: codes, codes: gallery, codes: other, html page