Toyhousr
created by:HTMLobster
Custom ColorsHTMLCharacter
Copy
<!----------------------------------------------------------------
TOYHOUSR - Character Profile
Profile by HTMLobster (noll), comments by 8byte (thank you)
TOS:
Do not remove my credit. You may edit it, however.
You may edit code/frankenstein with others as long as their TOS allows!
Turn off WYSIWYG and turn on Code Editor.
Do not redistribute edits.
------------------------------------------------------------------>
<div class="container rounded p-0" style="background:#36465d; color:#333;">
<!--- top header bar --->
<div class="row no-gutters align-items-center sticky-top" style="background:#36465d; font-family:HelveticaNeue,'Helvetica Neue',Helvetica,Arial,sans-serif; border-bottom:1px solid #586476;">
<div class="col-md row no-gutters align-items-center mr-3 mr-md-0">
<!--- "logo" --->
<div class="col-auto" style="color:rgba(191, 191, 191,.85); margin:0 20px; font-size:40px; font-family:'Bookman Old Style'; font-weight:bold;">th</div>
<!--- search bar --->
<div class="col rounded" style="color:rgba(191, 191, 191,.85); background:rgba(191, 191, 191,.25); padding:5px 5px 5px 12px;"><i class="fas fa-search" style="margin-right:3px;"></i> Search</div>
</div>
<div class="col-md mb-2 mb-md-0" style="font-size:23px; color:rgba(191, 191, 191,.85);">
<!--- the tumblr "navs", these are purely decorative --->
<div class="row no-gutters justify-content-md-end justify-content-center">
<div class="col-auto" style="margin:0 16px;">
<i class="fas fa-home-lg-alt"></i>
</div>
<div class="col-auto" style="margin:0 16px;">
<i class="far fa-compass"></i>
</div>
<div class="col-auto" style="margin:0 16px;">
<i class="fas fa-envelope"></i>
</div>
<div class="col-auto" style="margin:0 16px;">
<i class="fas fa-comment-smile"></i>
</div>
<div class="col-auto" style="margin:0 16px;">
<i class="fas fa-bolt"></i>
</div>
<div class="col-auto" style="margin:0 16px;">
<i class="fas fa-user"></i>
</div>
<div class="col-auto">
<a class="rounded" style="padding:5px 12px; background:rgb(82, 158, 204); margin:0 16px; color:#36465d;" href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="theme by noll"><i class="fas fa-code"></i></a>
</div>
</div>
</div>
</div>
<div class="container p-3" style="font-family:HelveticaNeue,Helvetica,Arial,sans-serif;">
<div class="row no-gutters container">
<!--- tumblr "posts" --->
<div class="col row no-gutters" style="max-width:620px;">
<div class="col row no-gutters w-100">
<!--- profile picture --->
<div class="col-auto mr-3 hidden-sm-down">
<!--- profile picture image --->
<img class="rounded" style="width:64px;" src="https://i.imgur.com/HqeNhYl.png">
</div>
<!--- top "make a post" bar, this is purely decorative --->
<div class="col rounded" style="background:#fff; padding:15px 5px;">
<div class="row no-gutters">
<div class="col text-center" style="width:75px; height:74px; padding:5px 0px;">
<!--- text post --->
<h1 style="color:rgb(68, 68, 68);">
<i class="fas fa-font-case" style="font-size:1.6em;"></i>
<div class="mt-2" style="font-size:1.2em;">Text</div>
</h1>
</div>
<div class="col text-center" style="width:75px; height:74px; padding:5px 0px;">
<!--- photo post --->
<h1 style="color:rgb(68, 68, 68);">
<i class="fas fa-camera" style="font-size:1.6em; color:rgb(217, 94, 64);"></i>
<div class="mt-2" style="font-size:1.2em;">Photo</div>
</h1>
</div>
<div class="col text-center" style="width:75px; height:74px; padding:5px 0px;">
<!--- quote post --->
<h1 style="color:rgb(68, 68, 68);">
<i class="fas fa-quote-left" style="font-size:1.6em; color:rgb(242, 153, 46);"></i>
<div class="mt-2" style="font-size:1.2em;">Quote</div>
</h1>
</div>
<div class="col text-center" style="height:74px; padding:5px 0px;">
<!--- link post --->
<h1 style="color:rgb(68, 68, 68);">
<i class="fas fa-link rounded-circle" style="padding:8px; background:rgb(86, 188, 138); font-size:19px; color:#fff;"></i>
<div class="mt-2" style="font-size:1.2em;">Link</div>
</h1>
</div>
<div class="col text-center" style="width:75px; height:74px; padding:5px 0px;">
<!--- chat post --->
<h1 style="color:rgb(68, 68, 68);">
<i class="fas fa-comment-alt" style="font-size:1.6em; color:rgb(82, 158, 204);"></i>
<div class="mt-2" style="font-size:1.2em;">Chat</div>
</h1>
</div>
<div class="col text-center" style="width:75px; height:74px; padding:5px 0px;">
<!--- audio post --->
<h1 style="color:rgb(68, 68, 68);">
<i class="fas fa-headphones" style="font-size:1.6em; color:rgb(167, 125, 194);"></i>
<div class="mt-2" style="font-size:1.2em;">Audio</div>
</h1>
</div>
<div class="col text-center" style="width:75px; height:74px; padding:5px 0px;">
<!--- video post --->
<h1 style="color:rgb(68, 68, 68);">
<i class="fas fa-camera-movie" style="font-size:1.6em; color:rgb(116, 128, 137);"></i>
<div class="mt-2" style="font-size:1.2em;">Video</div>
</h1>
</div>
</div>
</div>
<!--- end top bar --->
</div>
<!--- actual posts begin here --->
<!--- reblog example post --->
<div class="row no-gutters mt-3 w-100" style="color:rgba(68, 68, 68);">
<div class="col-auto mr-3 hidden-sm-down">
<!--- profile image --->
<img class="rounded" style="width:64px;" src="https://i.imgur.com/8l8YLiE.png">
</div>
<div class="col rounded" style="background:#fff; padding:15px 0;">
<div class="row no-gutters" style="border-bottom:1px solid #e7e7e7; padding-bottom:7px;">
<div class="col" style="padding:0 20px;">
<!--- reblog header/reblog-from --->
<h2 style="font-size:13px; font-weight:bold;">username<i class="fas fa-retweet mx-2" style="color:rgba(68, 68, 68,.65);"></i><span style="color:rgba(68, 68, 68,.65);">username2</span></h2>
</div>
<div class="col-auto" style="padding:0 20px;"><i class="fas fa-ellipsis-h" style="color:rgba(68, 68, 68,.65);"></i></div>
</div>
<!--- the reblogged post --->
<div style="font-weight:bold; padding:0 20px; margin:15px 0; font-size:13px;">
<!--- OP's profile picture --->
<img class="rounded" width="25px" src="https://i.imgur.com/z7gSLZ8.png"> username2
</div>
<!--- post contents --->
<div style="font-size:14px; margin:10px 0; padding:0 20px;">
<p>text goes here.</p>
</div>
<div style="color:rgba(68, 68, 68,.65); margin:5px 0px; padding:0 20px;">
<!--- post's tags --->
<!--- when copy/pasting, use the first tag --->
<span style="margin-right:11px;">#tag</span>
<span style="margin-right:11px;">#tag</span>
<span>#tag</span>
</div>
<div class="row no-gutters align-items-center" style="color:rgba(68, 68, 68,.65); padding:0 20px;">
<!--- number of notes (reblogs/likes) --->
<div class="col" style="font-size:14px; font-weight:bold;">
1 note
</div>
<div class="col-auto text-right" style="font-size:23px;">
<!--- reblog/like/etc links, these are purely decorative --->
<i class="far fa-external-link" style="margin-right:20px;"></i>
<i class="far fa-comment" style="margin-right:20px;"></i>
<i class="far fa-retweet" style="margin-right:20px;"></i>
<i class="far fa-heart"></i>
</div>
</div>
</div>
</div>
<!--- text post example --->
<div class="row no-gutters mt-3 w-100" style="color:rgba(68, 68, 68);">
<div class="col-auto mr-3 hidden-sm-down">
<!--- profile picture image --->
<img class="rounded" style="width:64px;" src="https://i.imgur.com/HqeNhYl.png">
</div>
<div class="col rounded" style="background:#fff;">
<div class="row no-gutters" style="padding-top:15px;">
<div class="col" style="padding:0 20px;">
<!--- your "username" --->
<h2 style="font-size:13px; font-weight:bold;">username3</h2>
</div>
<div class="col-auto" style="padding:0 20px;"><i class="fas fa-ellipsis-h" style="color:rgba(68, 68, 68,.65);"></i></div>
</div>
<div style="font-size:14px; margin:10px 0; padding:0 20px;">
<!--- post contents --->
<p>text goes here.</p>
</div>
<div style="color:rgba(68, 68, 68,.65); margin:5px 0px; padding:0 20px;">
<!--- post's tags --->
<!--- when copy/pasting, use the first tag --->
<span style="margin-right:11px;">#tag</span>
<span style="margin-right:11px;">#tag</span>
<span>#tag</span>
</div>
<div class="row no-gutters align-items-center" style="color:rgba(68, 68, 68,.65); padding:0 20px 15px;">
<!--- number of notes (reblogs/likes) --->
<div class="col" style="font-size:14px; font-weight:bold;">
1 note
</div>
<div class="col-auto text-right" style="font-size:23px;">
<!--- reblog/like/etc links, these are purely decorative --->
<i class="far fa-external-link" style="margin-right:20px;"></i>
<i class="far fa-comment" style="margin-right:20px;"></i>
<i class="far fa-retweet" style="margin-right:20px;"></i>
<i class="far fa-heart" style="margin-right:20px;"></i>
<i class="far fa-trash-alt" style="margin-right:20px;"></i>
<i class="far fa-pen"></i>
</div>
</div>
</div>
</div>
<!--- image post example --->
<div class="row no-gutters mt-3 w-100" style="color:rgba(68, 68, 68);">
<div class="col-auto mr-3 hidden-sm-down">
<!--- profile picture --->
<img class="rounded" style="width:64px;" src="https://i.imgur.com/8l8YLiE.png">
</div>
<div class="col rounded" style="background:#fff; padding:15px 0;">
<div class="row no-gutters" style="padding:0 20px;">
<div class="col">
<!--- poster's username --->
<h2 style="font-size:13px; font-weight:bold;">username</h2>
</div>
<div class="col-auto"><i class="fas fa-ellipsis-h" style="color:rgba(68, 68, 68,.65);"></i></div>
</div>
<div style="margin:10px 0;">
<!--- image --->
<img src="https://images.unsplash.com/photo-1511044568932-338cba0ad803?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80">
</div>
<div style="font-size:14px; margin:10px 0; padding:0 20px;">
<!--- image caption/related text --->
<!--- this is a good section for image IDs! --->
<p>text goes here.</p>
</div>
<div style="color:rgba(68, 68, 68,.65); margin:5px 0px; padding:0 20px;">
<!--- post's tags --->
<!--- when copy/pasting, use the first tag --->
<span style="margin-right:11px;">#tag</span>
<span style="margin-right:11px;">#tag</span>
<span>#tag</span>
</div>
<div class="row no-gutters align-items-center" style="color:rgba(68, 68, 68,.65); padding:0 20px;">
<!--- number of notes (reblogs/likes) --->
<div class="col" style="font-size:14px; font-weight:bold;">
1 note
</div>
<div class="col-auto text-right" style="font-size:23px;">
<!--- reblog/like/etc links, these are purely decorative --->
<i class="far fa-external-link" style="margin-right:20px;"></i>
<i class="far fa-comment" style="margin-right:20px;"></i>
<i class="far fa-retweet" style="margin-right:20px;"></i>
<i class="far fa-heart"></i>
</div>
</div>
</div>
<!--- multi-image post example --->
<div class="row no-gutters mt-3 w-100" style="color:rgba(68, 68, 68);">
<div class="col-auto mr-3 hidden-sm-down">
<!--- profile image --->
<img class="rounded" style="width:64px;" src="https://i.imgur.com/8l8YLiE.png">
</div>
<div class="col rounded" style="background:#fff; padding:15px 0;">
<div class="row no-gutters" style="border-bottom:1px solid #e7e7e7; padding-bottom:7px;">
<div class="col" style="padding:0 20px;">
<!--- reblog header/reblog-from --->
<h2 style="font-size:13px; font-weight:bold;">username<i class="fas fa-retweet mx-2" style="color:rgba(68, 68, 68,.65);"></i><span style="color:rgba(68, 68, 68,.65);">username2</span></h2>
</div>
<div class="col-auto" style="padding:0 20px;"><i class="fas fa-ellipsis-h" style="color:rgba(68, 68, 68,.65);"></i></div>
</div>
<!--- the reblogged post --->
<div style="font-weight:bold; padding:0 20px; margin:15px 0; font-size:13px;">
<img class="rounded" width="25px" src="https://i.imgur.com/z7gSLZ8.png"> username2
</div>
<!--- tumblr multi-images can be in one, two, or three columns (or a mix!) --->
<!--- three column example --->
<div class="row no-gutters">
<!--- image 1 --->
<div class="col mr-1" style="height:177px; background:url(https://images.unsplash.com/photo-1529912626516-e58b23f44f1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80) center; background-size:cover;"></div>
<!--- image 2 --->
<div class="col mr-1" style="height:177px; background:url(https://images.unsplash.com/photo-1545231097-c046d9dcc2f6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60) center; background-size:cover;"></div>
<!--- image 3 --->
<div class="col" style="height:177px; background:url(https://images.unsplash.com/photo-1566055909643-a51b4271aa47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1050&q=80) center; background-size:cover;"></div>
</div>
<!--- two column example --->
<div class="row no-gutters mt-1">
<!--- image 1 --->
<div class="col mr-1" style="height:268px; background:url(https://images.unsplash.com/photo-1529912626516-e58b23f44f1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80) center; background-size:cover;"></div>
<!--- image 2 --->
<div class="col" style="height:268px; background:url(https://images.unsplash.com/photo-1545231097-c046d9dcc2f6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60) center; background-size:cover;"></div>
</div>
<!--- one column example --->
<div class="mt-1">
<!--- image --->
<div style="height:540px; background:url(https://images.unsplash.com/photo-1566055909643-a51b4271aa47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1050&q=80) center; background-size:cover;"></div>
</div>
<div style="font-size:14px; margin:10px 0; padding:0 20px;">
<!--- image caption/related text --->
<!--- this is a good section for image IDs! --->
<p>text goes here.</p>
</div>
<div style="color:rgba(68, 68, 68,.65); margin:5px 0px; padding:0 20px;">
<!--- post's tags --->
<!--- when copy/pasting, use the first tag --->
<span style="margin-right:11px;">#tag</span>
<span style="margin-right:11px;">#tag</span>
<span>#tag</span>
</div>
<div class="row no-gutters align-items-center" style="color:rgba(68, 68, 68,.65); padding:0 20px;">
<!--- number of notes (reblogs/likes) --->
<div class="col" style="font-size:14px; font-weight:bold;">
1 note
</div>
<div class="col-auto text-right" style="font-size:23px;">
<!--- reblog/like/etc links, these are purely decorative --->
<i class="far fa-external-link" style="margin-right:20px;"></i>
<i class="far fa-comment" style="margin-right:20px;"></i>
<i class="far fa-retweet" style="margin-right:20px;"></i>
<i class="far fa-heart"></i>
</div>
</div>
</div>
</div>
<!--- audio post example --->
<div class="row no-gutters mt-3 w-100" style="color:rgba(68, 68, 68);">
<div class="col-auto mr-3 hidden-sm-down">
<!--- profile image --->
<img class="rounded" style="width:64px;" src="https://i.imgur.com/8l8YLiE.png">
</div>
<div class="col rounded" style="background:#fff; padding:15px 0;">
<div class="row no-gutters" style="border-bottom:1px solid #e7e7e7; padding-bottom:7px;">
<div class="col" style="padding:0 20px;">
<!--- reblog header/reblog-from --->
<h2 style="font-size:13px; font-weight:bold;">username<i class="fas fa-retweet mx-2" style="color:rgba(68, 68, 68,.65);"></i><span style="color:rgba(68, 68, 68,.65);">username2</span></h2>
</div>
<div class="col-auto" style="padding:0 20px;"><i class="fas fa-ellipsis-h" style="color:rgba(68, 68, 68,.65);"></i></div>
</div>
<!--- the reblogged post --->
<div style="font-weight:bold; padding:0 20px; margin:15px 0; font-size:13px;">
<!--- OP's profile picture --->
<img class="rounded" width="25px" src="https://i.imgur.com/z7gSLZ8.png"> username2
</div>
<div class="row no-gutters" style="margin:10px 0;">
<div class="col row no-gutters" style="background:rgb(167, 125, 194);">
<div class="col-auto" style="padding:29px 25px;">
<!--- youtube link to audio --->
<a href="https://www.youtube.com/watch?v=fuGrInjgG7U" target="_blank"><i class="fas fa-play" style="color:#fff; font-size:25px;"></i></a>
</div>
<div class="col" style="color:#fff; line-height:18px; padding:14px 0;">
<!--- song information --->
<span style="font-weight:bold; font-size:15px;">Song Title</span>
<br>
<span style="font-size:13px; font-weight:light; color:rgba(255,255,255,.65);">Album Title</span>
<br>
<span style="font-size:13px; font-weight:light; color:rgba(255,255,255,.65);">Artist</span>
</div>
</div>
<div class="col-auto">
<!--- album/song cover --->
<img style="height:85px;" src="https://i.imgur.com/lLfPBVB.png">
</div>
</div>
<div style="font-size:14px; margin:10px 0; padding:0 20px;">
<!--- song caption --->
<p>text goes here.</p>
</div>
<div style="color:rgba(68, 68, 68,.65); margin:5px 0px; padding:0 20px;">
<!--- post's tags --->
<!--- when copy/pasting, use the first tag --->
<span style="margin-right:11px;">#tag</span>
<span style="margin-right:11px;">#tag</span>
<span>#tag</span>
</div>
<div class="row no-gutters align-items-center" style="color:rgba(68, 68, 68,.65); padding:0 20px;">
<!--- number of notes (reblogs/likes) --->
<div class="col" style="font-size:14px; font-weight:bold;">
1 note
</div>
<div class="col-auto text-right" style="font-size:23px;">
<!--- reblog/like/etc links, these are purely decorative --->
<i class="far fa-external-link" style="margin-right:20px;"></i>
<i class="far fa-comment" style="margin-right:20px;"></i>
<i class="far fa-retweet" style="margin-right:20px;"></i>
<i class="far fa-heart"></i>
</div>
</div>
</div>
</div>
<!--- example ask post --->
<div class="row no-gutters mt-3 w-100" style="color:rgba(68, 68, 68);">
<div class="col-auto mr-3 hidden-sm-down">
<!--- profile picture --->
<img class="rounded" style="width:64px;" src="https://i.imgur.com/8l8YLiE.png">
</div>
<div class="col rounded" style="background:#fff; padding:15px 0;">
<div class="row no-gutters" style="padding:0 20px;">
<div class="col">
<!--- username of person receiving ask --->
<h2 style="font-size:13px; font-weight:bold;">username</h2>
</div>
<div class="col-auto"><i class="fas fa-ellipsis-h" style="color:rgba(68, 68, 68,.65);"></i></div>
</div>
<div style="margin:10px 0; padding:0 20px;">
<div class="row no-gutters">
<div class="col" style="background:rgba(68,68,68,.07); padding:15px 0 18px; border-radius:3px;">
<!--- the asker --->
<span style="padding:0 20px; font-size:13px; color:rgba(68,68,68,.65);"><strong>Anonymous</strong> asked:</span>
<!--- the question being asked --->
<div style="padding:0 20px; margin-top:20px;">
What is the best animal?
</div>
</div>
<div class="col-auto">
<div style="border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:8px solid rgba(68,68,68,.07); margin-top:10px;"></div>
</div>
<div class="col-auto">
<div style="height:40px; width:40px; margin-left:18px; border-radius:3px; background:rgba(68,68,68,.07); overflow:hidden;">
<!--- the asker's profile picture --->
<img src="https://i.imgur.com/isoZy5Q.png">
</div>
</div>
</div>
</div>
<div style="font-size:14px; margin:10px 0; padding:0 20px;">
<!--- the response --->
<p>answer text goes here.</p>
<p>it is lobsters.</p>
</div>
<div style="color:rgba(68, 68, 68,.65); margin:5px 0px; padding:0 20px;">
<!--- post's tags --->
<!--- when copy/pasting, use the first tag --->
<span style="margin-right:11px;">#tag</span>
<span style="margin-right:11px;">#tag</span>
<span>#tag</span>
</div>
<div class="row no-gutters align-items-center" style="color:rgba(68, 68, 68,.65); padding:0 20px;">
<!--- number of notes (reblogs/likes) --->
<div class="col" style="font-size:14px; font-weight:bold;">
1 note
</div>
<div class="col-auto text-right" style="font-size:23px;">
<!--- reblog/like/etc links, these are purely decorative --->
<i class="far fa-external-link" style="margin-right:20px;"></i>
<i class="far fa-comment" style="margin-right:20px;"></i>
<i class="far fa-retweet" style="margin-right:20px;"></i>
<i class="far fa-heart"></i>
</div>
</div>
</div>
</div>
<!--- example chat post --->
<div class="row no-gutters mt-3 w-100" style="color:rgba(68, 68, 68);">
<div class="col-auto mr-3 hidden-sm-down">
<!--- profile image --->
<img class="rounded" style="width:64px;" src="https://i.imgur.com/z7gSLZ8.png">
</div>
<div class="col rounded" style="background:#fff; padding:15px 0;">
<div class="row no-gutters" style="padding:0 20px;">
<div class="col">
<!--- poster's username --->
<h2 style="font-size:13px; font-weight:bold;">username2</h2>
</div>
<div class="col-auto"><i class="fas fa-ellipsis-h" style="color:rgba(68, 68, 68,.65);"></i></div>
</div>
<div style="font-size:14px; margin:10px 0; padding:0 20px; font-family:Courier,monospace;">
<!--- the "dialogue" --->
<p><strong>me:</strong> make chat post here</p>
<p><strong>you:</strong> hello</p>
<p><strong>me:</strong> hello to you</p>
</div>
<div style="color:rgba(68, 68, 68,.65); margin:5px 0px; padding:0 20px;">
<!--- post's tags --->
<!--- when copy/pasting, use the first tag --->
<span style="margin-right:11px;">#tag</span>
<span style="margin-right:11px;">#tag</span>
<span>#tag</span>
</div>
<div class="row no-gutters align-items-center" style="color:rgba(68, 68, 68,.65); padding:0 20px;">
<!--- number of notes (reblogs/likes) --->
<div class="col" style="font-size:14px; font-weight:bold;">
1 note
</div>
<div class="col-auto text-right" style="font-size:23px;">
<!--- reblog/like/etc links, these are purely decorative --->
<i class="far fa-external-link" style="margin-right:20px;"></i>
<i class="far fa-comment" style="margin-right:20px;"></i>
<i class="far fa-retweet" style="margin-right:20px;"></i>
<i class="far fa-heart"></i>
</div>
</div>
</div>
</div>
<!--- example quote post --->
<div class="row no-gutters mt-3 w-100" style="color:rgba(68, 68, 68);">
<div class="col-auto mr-3 hidden-sm-down">
<!--- profile image --->
<img class="rounded" style="width:64px;" src="https://i.imgur.com/HqeNhYl.png">
</div>
<div class="col rounded" style="background:#fff; padding:15px 0;">
<div class="row no-gutters" style="padding:0 20px;">
<div class="col">
<!--- poster's username --->
<h2 style="font-size:13px; font-weight:bold;">username3</h2>
</div>
<div class="col-auto"><i class="fas fa-ellipsis-h" style="color:rgba(68, 68, 68,.65);"></i></div>
</div>
<div style="font-size:36px; line-height:42px; margin:10px 0; padding:0 20px; font-family:Georgia, serif;">
<!--- the quote --->
<p>“Quote goes here.”</p>
</div>
<div style="font-size:14px; margin:10px 0; padding:0 20px;">
<!--- cite the source --->
<p>— Source</p>
</div>
<div style="color:rgba(68, 68, 68,.65); margin:5px 0px; padding:0 20px;">
<!--- post's tags --->
<!--- when copy/pasting, use the first tag --->
<span style="margin-right:11px;">#tag</span>
<span style="margin-right:11px;">#tag</span>
<span>#tag</span>
</div>
<div class="row no-gutters align-items-center" style="color:rgba(68, 68, 68,.65); padding:0 20px;">
<!--- number of notes (reblogs/likes) --->
<div class="col" style="font-size:14px; font-weight:bold;">
1 note
</div>
<div class="col-auto text-right" style="font-size:23px;">
<!--- reblog/like/etc links, these are purely decorative --->
<i class="far fa-external-link" style="margin-right:20px;"></i>
<i class="far fa-comment" style="margin-right:20px;"></i>
<i class="far fa-retweet" style="margin-right:20px;"></i>
<i class="far fa-heart" style="margin-right:20px;"></i>
<i class="far fa-trash-alt" style="margin-right:20px;"></i>
<i class="far fa-pen"></i>
</div>
</div>
</div>
</div>
<!--- example video post --->
<div class="row no-gutters mt-3 w-100" style="color:rgba(68, 68, 68);">
<div class="col-auto mr-3 hidden-sm-down">
<!--- profile image --->
<img class="rounded" style="width:64px;" src="https://i.imgur.com/z7gSLZ8.png">
</div>
<div class="col rounded" style="background:#fff; padding:15px 0;">
<div class="row no-gutters" style="border-bottom:1px solid #e7e7e7; padding-bottom:7px;">
<div class="col" style="padding:0 20px;">
<!--- reblog header/reblog-from --->
<h2 style="font-size:13px; font-weight:bold;">username2<i class="fas fa-retweet mx-2" style="color:rgba(68, 68, 68,.65);"></i><span style="color:rgba(68, 68, 68,.65);">username3</span></h2>
</div>
<div class="col-auto" style="padding:0 20px;"><i class="fas fa-ellipsis-h" style="color:rgba(68, 68, 68,.65);"></i></div>
</div>
<!--- the reblogged post --->
<div style="font-weight:bold; padding:0 20px; margin:15px 0; font-size:13px;">
<!--- OP's username --->
<img class="rounded" width="25px" src="https://i.imgur.com/HqeNhYl.png"> username3
</div>
<div style="font-size:14px; margin:10px 0;">
<!--- the video --->
<iframe style="width:100%; height:315px;" src="https://www.youtube.com/embed/SKnLfirc2Sg" title="YouTube video player" frameborder="0"></iframe>
</div>
<div style="color:rgba(68, 68, 68,.65); margin:5px 0px; padding:0 20px;">
<!--- post's tags --->
<!--- when copy/pasting, use the first tag --->
<span style="margin-right:11px;">#tag</span>
<span style="margin-right:11px;">#tag</span>
<span>#tag</span>
</div>
<div class="row no-gutters align-items-center" style="color:rgba(68, 68, 68,.65); padding:0 20px;">
<!--- number of notes (reblogs/likes) --->
<div class="col" style="font-size:14px; font-weight:bold;">
1 note
</div>
<div class="col-auto text-right" style="font-size:23px;">
<!--- reblog/like/etc links, these are purely decorative --->
<i class="far fa-external-link" style="margin-right:20px;"></i>
<i class="far fa-comment" style="margin-right:20px;"></i>
<i class="far fa-retweet" style="margin-right:20px;"></i>
<i class="far fa-heart"></i>
</div>
</div>
</div>
</div>
<!-- posts end - put new posts above this line -->
</div>
<!-- post container end -->
</div>
<!--- tumblr sidebar "stats" --->
<!--- feel free to change to stats that make sense for you/your character --->
<div class="col-auto hidden-sm-down ml-4" style="width:320px; color:rgb(191, 191, 191); font-size:16px;">
<div style="padding:5px 10px;">
<!--- your "username" --->
username<br>
<!--- subtitle --->
<span style="color:rgba(191, 191, 191,.65);">blog title</span>
</div>
<!--- post count --->
<div class="row no-gutters" style="background:rgba(191, 191, 191,.07); padding: 15px 10px;">
<div class="col">Posts</div>
<div class="col text-right">1,000</div>
</div>
<!--- follower count --->
<div class="row no-gutters" style="padding:10px;">
<div class="col">Followers</div>
<div class="col text-right">400</div>
</div>
<!--- your activity graph, this is purely decorative --->
<div class="row no-gutters" style="padding:10px;">
<div class="col">Activity</div>
<div class="col text-right"><i class="fas fa-heart-rate"></i></div>
</div>
<!--- drafts count --->
<div class="row no-gutters" style="padding:10px;">
<div class="col">Drafts</div>
<div class="col text-right">10</div>
</div>
<!--- queued posts count --->
<div class="row no-gutters" style="padding:10px;">
<div class="col">Queue</div>
<div class="col text-right">1</div>
</div>
<!--- redirect link for editing blog appearance, purely decorative --->
<div class="row no-gutters" style="padding:10px;">
<div class="col">Edit Appearance</div>
<div class="col text-right"><i class="fas fa-chevron-right"></i></div>
</div>
</div>
</div>
</div>
</div>