[nobr]
[class="container1"]
max-width: 350px;
height: 61px;
background: transparent;
margin: auto;
overflow: hidden;
[/class]
[class="background1"]
max-width: 350px;
height: auto;
background: white;
cursor: default;
overflow: hidden;
[/class]
[COMMENT]these 2 ^^^ are for the top part of the code (i.e. the phone + insta bar)[/COMMENT]
[class="phonebar"]
color: black;
width: 100%;
height: 20px;
display: flex;
align-items: center;
background: #ededed;
[/class]
[class="igbar"]
color: black;
width: 100%;
height: 40px;
display: flex;
align-items: center;
background: #ededed;
[/class]
[class="igbar_2"]
color: black;
width: 100%;
height: 40px;
display: flex;
align-items: center;
background: #ededed;
[/class]
[class="back"]
font-size: 17px;
line-height: 17px;
cursor: pointer;
display: inline-block;
[/class]
[COMMENT]these ^^^ are the contents of container + background 1[/COMMENT]
[class="container2"]
max-width: 350px;
height: 539px;
background: transparent;
margin: auto;
overflow: hidden;
[/class]
[class="background2"]
max-width: 350px;
height: auto;
background: white;
cursor: default;
overflow: hidden;
[/class]
[COMMENT]these 2 ^^^ are for the instagram part of the code (the insta post + likes etc)[/COMMENT]
[class="postbar"]
color: black;
width: 100%;
height: 50px;
display: flex;
align-items: center;
background: white;
[/class]
[class="post"]
--instagram-post: url('URL');
width: 100%;
height: 350px;
background: var(--instagram-post);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
[/class]
[class="postoptions"]
color: black;
width: 100%;
height: 40px;
display: flex;
align-items: center;
background: white;
[/class]
[class="whiteheart"]
width: 23px;
height: 21px;
background: url('https://i.imgur.com/MnrUy3i.png');
background-size: cover;
background-position: top;
background-repeat: no-repeat;
cursor: pointer;
position: relative;
margin-left: -23px;
[/class]
[class="redheart"]
width: 23px;
height: 21px;
background: url('https://i.imgur.com/StDpI98.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
position: relative;
[/class]
[class="whitebookmark"]
height: 22px;
width: 22px;
background: url('https://i.imgur.com/KhQx69o.png'), white;
background-size: cover;
background-position: center;
position: relative;
float: right;
cursor: pointer;
margin-right: -22px;
[/class]
[class="blackbookmark"]
height: 22px;
width: 22px;
background: url('https://i.imgur.com/puDUxns.png'), white;
background-size: cover;
background-position: center;
position: relative;
float: right;
cursor: pointer;
[/class]
[class="likes"]
color: black;
width: 100%;
height: 20px;
background: white;
position: relative;
box-sizing: border-box;
padding-left: 10px;
[/class]
[class="likesbefore"]
position: absolute;
font-weight: bold;
font-size: 12px;
line-height: 12px;
background: white;
[/class]
[class="likesafter"]
position: absolute;
font-weight: bold;
font-size: 12px;
line-height: 12px;
background: white;
[/class]
[class="caption"]
color: black;
width: 100%;
min-height: 40px;
background: white;
position: relative;
box-sizing: border-box;
padding: 0 10px 0 10px;
font-size: 12px;
[/class]
[class="comments"]
color: #969696;
width: 100%;
height: auto;
background: white;
position: relative;
box-sizing: border-box;
padding: 5px 10px 10px 10px;
font-size: 13px;
[/class]
[class="viewcomments"]
cursor: pointer;
display: inline-block;
transition: 0.2s all ease-out;
[/class]
[class="more"]
cursor: pointer;
display: inline-block;
transition: 0.2s all ease-out;
color: #969696;
[/class]
[COMMENT]these ^^^ are the contents of container + background 2[/COMMENT]
[class="container3"]
max-width: 350px;
height: 539px;
background: transparent;
margin: auto;
overflow: hidden;
[/class]
[class="background3"]
max-width: 350px;
height: auto;
background: white;
cursor: default;
overflow: hidden;
[/class]
[COMMENT]these 2 ^^^ are for the comment section part of the code (the mood + mentions + interactions etc)[/COMMENT]
[class="details"]
color: black;
width: 100%;
min-height: 600px;
background: white;
font-size: 12px;
box-sizing: border-box;
padding: 10px;
[/class]
[class="credit"]
color: #3c8be6;
transition: 0.2s all ease-out;
display: inline-block;
cursor: pointer;
[/class]
[COMMENT]these ^^^ are the contents of container + background 3[/COMMENT]
[class="container4"]
max-width: 350px;
height: 42px;
background: transparent;
margin: auto;
overflow: hidden;
[/class]
[class="background4"]
max-width: 350px;
height: auto;
background: white;
cursor: default;
overflow: hidden;
[/class]
[COMMENT]these 2 ^^^ are for the "options" part of the insta page (the home + search + add + likes + profile bar)[/COMMENT]
[class="bottombar"]
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
background: #ededed;
box-sizing: border-box;
padding: 0 25px 0 25px;
[/class]
[COMMENT]these ^^^ are the contents of container + background 4[/COMMENT]
[class="container5"]
max-width: 350px;
height: 42px;
background: transparent;
margin: auto;
overflow: hidden;
[/class]
[class="background5"]
max-width: 350px;
height: auto;
background: white;
cursor: default;
overflow: hidden;
[/class]
[COMMENT]these 2 ^^^ are for the bottom part of the comment section (the "add a comment" part)[/COMMENT]
[class="bottombar_2"]
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
background: #ededed;
box-sizing: border-box;
padding: 0 15px 0 15px;
[/class]
[COMMENT]these ^^^ are the contents of container + background 5[/COMMENT]
[class="hidden1"]
width: 200%;
height: 100%;
overflow: hidden;
position: relative;
background: transparent;
[/class]
[class="hidden2"]
width: 100%;
height: 100%;
overflow: auto;
background: transparent;
[/class]
[class="hidden3"]
box-sizing: border-box;
width: 50%;
height: auto;
cursor: default;
background: white;
[/class]
[class="none"]
display: none;
[/class]
[class="border"]
background: #bdbdbd;
width: 100%;
height: 2px;
[/class]
[COMMENT]a few miscellaneous classes ^^^[/COMMENT]
[script class="whiteheart" on="click"]
hide whiteheart
hide likesbefore
[/script]
[script class="redheart" on="click"]
show whiteheart
show likesbefore
[/script]
[script class="whitebookmark" on="click"]
hide whitebookmark
[/script]
[script class="blackbookmark" on="click"]
show whitebookmark
[/script]
[class name="viewcomments" state="hover"]
color: #4d4d4d;
[/class]
[script class="viewcomments" on="click"]
hide container2
hide container4
hide igbar
show none
[/script]
[class name="more" state="hover"]
color: #4d4d4d;
[/class]
[script class="more" on="click"]
hide container2
hide container4
hide igbar
show none
[/script]
[script class="back" on="click"]
hide none
show igbar
show container2
show container4
[/script]
[class name="credit" state="hover"]
color: #154985;
[/class]
[COMMENT]^^^ scripts and other functions[/COMMENT]
[class="a"]
flex: 1;
background: transparent;
box-sizing: border-box;
padding-left: 5px;
[/class]
[class="b"]
display: flex;
align-items: center;
position: relative;
[/class]
[class="signal"]
font-size: 12px;
line-height: 12px;
position: relative;
margin-right: 5px;
[/class]
[class="mobnetwrk"]
font-size: 11px;
line-height: 11px;
position: relative;
margin-right: 5px;
font-weight: 700;
[/class]
[class="wifi"]
font-size: 11px;
line-height: 11px;
[/class]
[class="time"]
flex: 1;
background: transparent;
text-align: center;
font-size: 11px;
line-height: 11px;
font-weight: 800;
[/class]
[class="c"]
flex: 1;
background: transparent;
text-align: right;
box-sizing: border-box;
padding-right: 5px;
[/class]
[class="d"]
display: flex;
align-items: center;
justify-content: flex-end;
[/class]
[class="percentage"]
font-size: 11px;
line-height: 11px;
position: relative;
margin-right: 5px;
font-weight: 700;
[/class]
[class="battery"]
font-size: 14px;
line-height: 14px;
position: relative;
margin-right: 5px;
[/class]
[class="charging"]
font-size: 12px;
line-height: 12px;
[/class]
[class="photo"]
flex: 1;
text-align: center;
font-weight: 800;
font-size: 14px;
line-height: 14px;
[/class]
[class="e"]
flex: 1;
box-sizing: border-box;
padding-right: 15px;
[/class]
[class="refresh"]
height: 17px;
width: 17px;
background: url('https://i.imgur.com/UWxahMS.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
float: right;
[/class]
[class="kcab"]
flex: 1;
box-sizing: border-box;
padding-left: 15px;
font-size: 17px;
line-height: 17px;
[/class]
[class="k"]
flex: 1;
box-sizing: border-box;
padding-left: 15px;
[/class]
[class="dm"]
height: 15px;
width: 17px;
background: url('https://i.imgur.com/KC5AisA.png');
background-size: cover;
background-position: center;
position: relative;
float: right;
[/class]
[class="f"]
flex: 2;
box-sizing: border-box;
padding-left: 10px;
position: relative;
[/class]
[class="bigpfp"]
--insta-profile-picture: url('URL');
height: 30px;
width: 30px;
border-radius: 100%;
background: var(--insta-profile-picture);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative;
margin-right: 10px;
[/class]
[class="ellipsis"]
flex: 1;
text-align: right;
box-sizing: border-box;
padding-right: 10px;
font-size: 12px;
line-height: 12px;
[/class]
[class="commentsign"]
width: 23px;
height: 21px;
background: url('https://i.imgur.com/gPrjlBZ.png');
background-size: cover;
background-position: center;
position: relative;
margin-left: 11px;
[/class]
[class="dmsign"]
height: 20px;
width: 23px;
background: url('https://i.imgur.com/KC5AisA.png'), white;
background-size: cover;
background-position: center;
position: relative;
margin-left: 10px;
[/class]
[class="g"]
flex: 1;
border-box;
padding-right: 8px;
position: relative;
[/class]
[class="h"]
display: flex;
position: relative;
[/class]
[class="username"]
display: inline-block;
font-weight: bold;
position: relative;
margin-right: 5px;
[/class]
[class="ago"]
font-variant: small-caps;
[/class]
[class="j"]
position: relative;
margin-bottom: 25px;
display: flex;
align-items: flex-start;
box-sizing: border-box;
border-bottom: 1px solid #ededed;
padding-bottom: 25px;
[/class]
[class="notherpfp"]
--insta-profile-picture: url('URL');
height: 25px;
width: 25px;
border-radius: 100%;
background: var(--insta-profile-picture);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative;
margin-right: 10px;
[/class]
[class="i"]
flex: 1;
[/class]
[class="l"]
position: relative;
margin-bottom: 25px;
display: flex;
align-items: flex-start;
[/class]
[class="mdpfp"]
--profile-picture-for-mood: url('URL');
height: 25px;
width: 25px;
border-radius: 100%;
background: var(--profile-picture-for-mood);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative;
margin-right: 10px;
[/class]
[class="mntnspfp"]
--profile-picture-for-mentions: url('URL');
height: 25px;
width: 25px;
border-radius: 100%;
background: var(--profile-picture-for-mentions);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative;
margin-right: 10px;
[/class]
[class="ntrctnspfp"]
--profile-picture-for-interactions: url('URL');
height: 25px;
width: 25px;
border-radius: 100%;
background: var(--profile-picture-for-interactions);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative;
margin-right: 10px;
[/class]
[class="lctnpfp"]
--profile-picture-for-location: url('URL');
height: 25px;
width: 25px;
border-radius: 100%;
background: var(--profile-picture-for-location);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative;
margin-right: 10px;
[/class]
[class="tftpfp"]
--profile-picture-for-outfit: url('URL');
height: 25px;
width: 25px;
border-radius: 100%;
background: var(--profile-picture-for-outfit);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative;
margin-right: 10px;
[/class]
[class="pstpfp"]
--profile-picture-for-your-text-post: url('URL');
height: 25px;
width: 25px;
border-radius: 100%;
background: var(--profile-picture-for-your-text-post);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative;
margin-right: 10px;
[/class]
[class="line"]
height: 1px;
width: 100%;
background: #bdbdbd;
[/class]
[class="home"]
height: 21px;
width: 20px;
background: url('https://i.imgur.com/zfaceu8.png');
background-size: cover;
background-position: center;
[/class]
[class="search"]
height: 21.5px;
width: 21px;
background: url('https://i.imgur.com/K1jPpBO.png');
background-size: cover;
background-position: center;
[/class]
[class="add"]
height: 22px;
width: 22px;
background: url('https://i.imgur.com/jwKfqZH.png');
background-size: cover;
background-position: center;
[/class]
[class="m"]
height: 20px;
width: 22px;
background: url('http://icons.iconarchive.com/icons/iconsmind/outline/512/Heart-2-icon.png');
background-size: cover;
background-position: center;
[/class]
[class="circlea"]
height: 25px;
width: 25px;
border-radius: 100%;
background: black;
display: flex;
align-items: center;
justify-content: center;
[/class]
[class="circleb"]
height: 23px;
width: 23px;
border-radius: 100%;
background: rgba(237, 237, 237, 1);
display: flex;
align-items: center;
justify-content: center;
[/class]
[class="circlec"]
height: 21px;
width: 21px;
border-radius: 100%;
background: url('https://wallpapercave.com/wp/wp2139824.jpg');
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
[/class]
[class="ddcmmnt"]
height: 30px;
background: transparent;
border-radius: 20px;
box-sizing: border-box;
border: 1px solid #bdbdbd;
display: flex;
align-items: center;
font-size: 12px;
color: #bdbdbd;
padding: 0 10px 0 10px;
overflow: hidden;
cursor: auto;
[/class]
[div="max-width: 350px; font-size: 8px; text-align: left; margin: auto;"]code by @fudgecakez[/div]
[div class="container1"]
[div class="hidden1"]
[div class="hidden2"]
[div class="hidden3"]
[div class="background1"]
[div class="phonebar"]
[div class="a"]
[div class="b"]
[div class="signal"][fa]fa-signal[/fa][/div]
[div class="mobnetwrk"][font='Open Sans'] MOBILE-NETWORK-NAME-HERE [/font][/div]
[div class="wifi"][fa]fa-wifi[/fa][/div]
[/div]
[/div]
[div class="time"][font='Open Sans'] TIME-IN-12/24-HOUR-CLOCK-FORMAT-HERE [/font][/div]
[div class="c"]
[div class="d"]
[div class="percentage"][font='Open Sans'] BATTERY-%-HERE [/font][/div]
[div class="battery"] BATTERY-ICON [/div]
[div class="charging"][fa]fa-bolt[/fa][/div]
[/div]
[/div]
[/div]
[COMMENT]so y'all see that "BATTERY-ICON" ?
there are a few other options available that you can substitute in for it:
[fa]fa-battery-empty[/fa]
[fa]fa-battery-quarter[/fa]
[fa]fa-battery-half[/fa]
[fa]fa-battery-three-quarters[/fa]
[fa]fa-battery-full[/fa][/COMMENT]
[div class="igbar"]
[div class="kcab"][fa]fa-chevron-left[/fa][/div]
[div class="photo"]Photo[/div]
[div class="e"][div class="refresh"][/div][/div]
[/div]
[div class="none"]
[div class="igbar_2"]
[div class="k"][div class="back"][fa]fa-chevron-left[/fa][/div][/div]
[div class="photo"]Comments[/div]
[div class="e"][div class="dm"][/div][/div]
[/div]
[/div]
[div class="border"][/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[div class="container2"]
[div class="hidden1"]
[div class="hidden2"]
[div class="hidden3"]
[div class="background2"]
[div class="postbar"]
[div class="f"]
[div class="b"]
[div class="bigpfp"][/div]
[div class="charging"][font='Open Sans'][B] CHARACTER_NAME_OR_ROLE_HERE [/B][/font][/div]
[/div]
[/div]
[div class="ellipsis"][fa]fa-ellipsis-h[/fa][/div]
[/div]
[div class="post"][/div]
[div class="postoptions"]
[div class="f"]
[div class="b"]
[div class="redheart"][/div]
[div class="whiteheart"][/div]
[div class="commentsign"][/div]
[div class="dmsign"][/div]
[/div]
[/div]
[div class="g"]
[div class="blackbookmark"][/div]
[div class="whitebookmark"][/div]
[/div]
[/div]
[div class="likes"]
[div class="h"]
[div class="likesafter"][font='Open Sans'] # + 1 likes [/font][/div]
[div class="likesbefore"][font='Open Sans'] # likes [/font][/div]
[/div]
[/div]
[COMMENT]here ^^^ if your "#" of likes are 10, then your "# + 1" of likes should be 11[/COMMENT]
[div class="caption"]
[div class="username"][font='Open Sans'] CHARACTER_NAME_OR_ROLE_HERE [/font][/div]
[font='Open Sans']
INSTAGRAM CAPTION HERE. DON'T FORGET TO ADD [br][/br] FOR LINE-BREAKS...
[div class="more"]more[/div]
[/font]
[/div]
[COMMENT]don't remove that "..." there ^^^[/COMMENT]
[div class="comments"]
[div class="viewcomments"][font='Open Sans']View all 6 comments[/font][/div]
[div class="ago"][font='Open Sans'] [SIZE=2]#[/SIZE] minutes ago [/font][/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[div class="none"]
[div class="container3"]
[div class="hidden1"]
[div class="hidden2"]
[div class="hidden3"]
[div class="background3"]
[div class="details"]
[font='Open Sans']
[div class="j"]
[div class="notherpfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans'] CHARACTER_NAME_OR_ROLE_HERE [/font][/div]
[font='Open Sans']
INSTAGRAM CAPTION HERE. DON'T FORGET TO ADD [br][/br] FOR LINE-BREAKS
[br][/br]
[user=YOUR-USER-CODE-HERE][div class="credit"] #YOUR_USERNAME_HERE [/div][/user]
[div class="credit" style="cursor: default;"] #YOUR_CHARACTER'S_NAME_HERE [/div]
[/font]
[/div]
[/div]
[COMMENT]here ^^^ the "#" does not mean you have to replace it with a number. that's literally just being used as an instagram hashtag.
for the "YOUR-USER-CODE-HERE" part, the easiest way to find out yours is by tagging yourself > posting reply > clicking "reply" or "quote" on the post > viewing the quoted text on the rich-text-editor > there, it should say what your user code is[/COMMENT]
[div class="l"]
[div class="mdpfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']mood[/font][/div]
YC'S MOOD HERE
[/div]
[/div]
[div class="l"]
[div class="mntnspfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']mentions[/font][/div]
MENTIONS HERE
[/div]
[/div]
[div class="l"]
[div class="ntrctnspfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']interactions[/font][/div]
INTERACTIONS AND TAGS HERE
[/div]
[/div]
[div class="l"]
[div class="lctnpfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']location[/font][/div]
LOCATION HERE
[/div]
[/div]
[div class="l"]
[div class="tftpfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']outfit[/font][/div]
[url="YC'S-OUTFIT'S-PICTURE'S-LINK-HERE"]SOME WORDS HERE, I SUPPOSE[/url]
[/div]
[/div]
[div class="l"]
[div class="pstpfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']post[/font][/div]
THE IC POST GOES HERE. DON'T FORGET TO ADD [br][/br] FOR LINE BREAKS.
[/div]
[/div]
[/font]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[div class="container4"]
[div class="hidden1"]
[div class="hidden2"]
[div class="hidden3"]
[div class="background4"]
[div class="border"][/div]
[div class="bottombar"]
[div class="home"][/div]
[div class="search"][/div]
[div class="add"][/div]
[div class="m"][/div]
[div class="circlea"][div class="circleb"][div class="circlec"][/div][/div][/div]
[/div]
[div class="line"][/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[div class="none"]
[div class="container5"]
[div class="hidden1"]
[div class="hidden2"]
[div class="hidden3"]
[div class="background5"]
[div class="border"][/div]
[div class="bottombar_2"]
[div class="bigpfp"][/div]
[div class="i"][div class="ddcmmnt"]Add a comment...[/div][/div]
[/div]
[div class="line"][/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/nobr]