Tessisamess

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

PREVIEW: Default | PREVIEW: Dim | PREVIEW: Lights Out

Information

Hey guys! OH BOY THIS TOOK DAYS!! Enjoy this faithful recreation of a Twitter timeline--this time as a full HTML page for those of you with paid accounts or offsite hosting! It features templates for all tweet types and a header for retweeted tweets.💖

Coding: Default

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Dispay Name (@username / Twitter)</title>
	<link rel="shortcut icon" href="https://i.imgur.com/lOc9kVi.png">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">

<style>

/*--- TWITTER MOCKUP [DEFAULT] - TESSISAMESS - 2020 ---*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/* REPLACEMENTS */

:root{
	--background: #fff;
	--borders: #E6ECF0;

--text: #14171A;
	--alt-text: #657786;
	--accent: #1DA1F2;

--main-font: Open Sans,trebuchet ms,sans-serif;

--verified: none; /* CHANGE TO block IF VERIFIED USER */

--profile-pic: url(PROFILE_PIC)center;
	/* MUST BE AT LEAST 134px by 134px; any size/dimension at or above that will work */

--header-bg: url(HEADER_BG)center;
	/* MUST BE AT LEAST 600px by 200px; any size/dimension at or above that will work */
}

/* GENERAL */

::selection{background:var(--accent);color:var(--lightest);}
::-moz-selection{background:var(--accent);color:var(--lightest);}

*{box-sizing:border-box;}
html{background:var(--accent);}
body{margin:0;background:rgba(0,0,0,0.7) url(https://i.imgur.com/myWSG57.png)center fixed;background-size:200px;font-family:var(--main-font);color:var(--text);font-size:14px;min-height:100vh;line-height:1.5;}

img{max-width:100%;}
h1,h2,h3,h4,h5,h6{margin:0;}

a{text-decoration:none;color:var(--accent);-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
a:hover{color:var(--accent);}

.alt{color:var(--alt-text);}

#credit{position:fixed;left:10px;bottom:10px;display:block;font-weight:bold;font-size:8px;text-transform:uppercase;letter-spacing:3px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;color:var(--background);}

/* CONTAINER */

#twitter{width:600px;margin:0 auto;background:var(--background);border:1px solid var(--borders);border-bottom:none;color:var(--text);box-shadow:0 0 10px 0 rgba(0,0,0,0.4);}
.verified{margin:0 0 0 3px;display:var(--verified);}

/* HEADER */

#profile-header{height:200px;background:var(--borders) var(--header-bg);background-size:cover;display:flex;align-items:flex-end;}

#profile-pic{width:134px;height:134px;margin:0 0 calc((134px / 2) * -1) 15px;background:var(--accent) var(--profile-pic);background-size:cover;border-radius:100%;border:2px solid var(--background);}

#follow{background:var(--accent);color:#fff;margin:0 15px -54px auto;padding:0 25px;height:39px;line-height:39px;border-radius:30px;}

/* PROFILE */

#profile{padding:calc((134px / 2) + 10px) 15px 15px 15px;line-height:1.2;}
#display-name{font-size:18px;display:flex;align-items:center;}
#bio{margin:10px 0;}
#account-details{margin:10px 0;display:flex;align-items:center;flex-wrap:wrap;}
#account-details img{margin:0 5px;}
#account-details img:first-of-type, #account-details img:last-of-type{margin:0 5px 0 0;}
#divide{width:100%;height:5px;}

/* VIEWBAR */

#viewbar{display:flex;align-items:center;text-align:center;height:52px;border-bottom:1px solid var(--borders);}
.selected{border-bottom:3px solid var(--accent);color:var(--accent);}
.option{height:49px;line-height:52px;width:100%;margin:0 0 -1px 0;}

/* TWEETS */

.tweet{padding:15px;border-bottom:1px solid var(--borders);display:flex;justify-content:space-between;flex-wrap:wrap;}

.pfp{width:49px;height:49px;margin:0;background:var(--accent) var(--profile-pic);background-size:cover;border-radius:100%;}

.t-body{width:calc(100% - 49px - 10px);}

.t-head{display:flex;align-items:center;}
.user-time{color:var(--alt-text);margin:0 0 0 5px;}
.options{margin:0 0 0 auto;}

.t-footer{display:flex;align-items:center;justify-content:center;color:var(--alt-text);font-size:12px;margin:10px 0 0 0;}
.stat{margin:0 auto 0 5px;}
.share{margin:0 auto 0 0;}

.sm-head{width:100%;margin:0 0 5px 40px;font-size:11px;color:var(--alt-text);display:flex;align-items:center;}
.sm-head img{margin:0 5px 0 0;}

/* PINNED TWEET */

.pinned{margin:0 0 10px 0;box-shadow:0 10px 0 0 var(--borders);}

/* QUOTE TWEET */

.quoted{display:block;border:1px solid var(--borders);border-radius:20px;padding:10px;margin:10px 0 0 0;quotes:'' '';}
.quote-head{display:flex;align-items:center;}
.quoted-pfp{width:20px;height:20px;margin:0;border-radius:100%;margin:0 5px 0 0;background-size:cover!important;}
.quoted-pfp[style*='QUOTED_PFP']{background:var(--accent)!important;}
.q-usertime{color:var(--alt-text);margin:0 0 0 5px;}

/* IMAGE TWEETS */

.images, .image{border:1px solid var(--borders);border-radius:20px;overflow:hidden;height:265px;margin:10px 0 0 0;}
.image[style*='TWEET_PIC'], .images div[style*='TWEET_PIC']{background:var(--borders)!important;}
.images{display:flex;justify-content:space-between;}
.images div, .image{background-size:cover!important;}
.two div{height:100%;width:calc(50% - 1px);}
.three{flex-direction:column;flex-wrap:wrap;}
.three .side{height:100%;width:calc(50% - 1px);margin:0 2px 0 0;}
.three .stack{height:calc(50% - 1px);width:calc(50% - 1px);}
.four{flex-wrap:wrap;}
.four div{width:calc(50% - 1px);height:calc(50% - 1px);margin:0 0 2px 0;}

/* LINK TWEETS */

.tweet-link{border:1px solid var(--borders);border-radius:20px;overflow:hidden;color:var(--alt-text);margin:10px 0 0 0;}
.link-head{background-size:cover!important;height:265px;}
.link-head[style*='LINK_PIC']{background:var(--borders)!important;}
.link-content{padding:10px;}
.link-title{color:var(--text);}

</style>

</head>

<body>

<header id="profile-header">
			<div id="profile-pic"></div>
			<b id="follow">Follow</b>
		</header>

<h1 id="display-name">Display Name <img src="https://i.imgur.com/PjyRt6d.png" class="verified"></h1>
			<div class="alt">@username</div>
			<div id="bio">account profile bio</div>

<div id="account-details">
				<img src="https://i.imgur.com/6Mm6NuX.png"> Location
				<img src="https://i.imgur.com/XVx9dI2.png"> <a href="">website.com</a>
				<img src="https://i.imgur.com/OtC7jsU.png"> Born Month 0, 0000
				<span id="divide"></span>
				<img src="https://i.imgur.com/Tqoplgs.png"> Joined Month 0000
			</div>

<b>###</b> <span class="alt">Following</span>
			<b>###</b> <span class="alt">Followers</span>

</main>

<nav id="viewbar">
			<b class="selected option">Tweets</b>
			<b class="option">Tweets & Replies</b>
			<b class="option">Media</b>
			<b class="option">Likes</b>
		</nav>

<div class="sm-head">
				<img src="https://i.imgur.com/5bxnRkd.png"> Pinned Tweet
			</div>

<header class="t-head">
					<b>Display Name</b><img src="https://i.imgur.com/PjyRt6d.png" class="verified">
					<div class="user-time">@username · Month 00</div>
					<img src="https://i.imgur.com/vFdgDXR.png" class="options">
				</header>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

</main>

</section>

<div class="sm-head">
				<img src="https://i.imgur.com/e1lV50m.png"> Display Name Retweeted
			</div>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

<div class="link-title">Link Page Title</div>
						Link_Preview_Text

<br><img src="https://i.imgur.com/4B9Ban5.png"> website.com
					</div>
				</div>

</main>

</section>

TWEET_CONTENT

<b>Display Name</b>
							<span class="q-usertime">
								@username · Month 00
							</span>
					</header>

QUOTED_TWEET_CONTENT

</q>

</main>

</section>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

</main>

</section>

</article>

<a href="http://tessisamess.insanejournal.com/" id="credit">TESSISAMESS</a>

</body>
</html>

Coding: Dim

<style>

/*--- TWITTER MOCKUP [DIM] - TESSISAMESS - 2020 ---*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/* REPLACEMENTS */

:root{
	--background: #15202B;
	--borders: #38444D;

--text: #fff;
	--alt-text: #8899A6;
	--accent: #1DA1F2;

--main-font: Open Sans,trebuchet ms,sans-serif;

--verified: none; /* CHANGE TO block IF VERIFIED USER */

--profile-pic: url(PROFILE_PIC)center;
	/* MUST BE AT LEAST 134px by 134px; any size/dimension at or above that will work */

--header-bg: url(HEADER_BG)center;
	/* MUST BE AT LEAST 600px by 200px; any size/dimension at or above that will work */
}

/* GENERAL */

::selection{background:var(--accent);color:var(--lightest);}
::-moz-selection{background:var(--accent);color:var(--lightest);}

img{max-width:100%;}
h1,h2,h3,h4,h5,h6{margin:0;}

.alt{color:var(--alt-text);}

/* CONTAINER */

/* HEADER */

#profile-header{height:200px;background:var(--borders) var(--header-bg);background-size:cover;display:flex;align-items:flex-end;}

#profile-pic{width:134px;height:134px;margin:0 0 calc((134px / 2) * -1) 15px;background:var(--accent) var(--profile-pic);background-size:cover;border-radius:100%;border:2px solid var(--background);}

#follow{background:var(--accent);color:#fff;margin:0 15px -54px auto;padding:0 25px;height:39px;line-height:39px;border-radius:30px;}

/* PROFILE */

/* VIEWBAR */

/* TWEETS */

.tweet{padding:15px;border-bottom:1px solid var(--borders);display:flex;justify-content:space-between;flex-wrap:wrap;}

.pfp{width:49px;height:49px;margin:0;background:var(--accent) var(--profile-pic);background-size:cover;border-radius:100%;}

.t-body{width:calc(100% - 49px - 10px);}

.t-head{display:flex;align-items:center;}
.user-time{color:var(--alt-text);margin:0 0 0 5px;}
.options{margin:0 0 0 auto;}

.t-footer{display:flex;align-items:center;justify-content:center;color:var(--alt-text);font-size:12px;margin:10px 0 0 0;}
.stat{margin:0 auto 0 5px;}
.share{margin:0 auto 0 0;}

.sm-head{width:100%;margin:0 0 5px 40px;font-size:11px;color:var(--alt-text);display:flex;align-items:center;}
.sm-head img{margin:0 5px 0 0;}

/* PINNED TWEET */

.pinned{margin:0 0 10px 0;box-shadow:0 10px 0 0 var(--borders);}

/* QUOTE TWEET */

/* IMAGE TWEETS */

/* LINK TWEETS */

</style>

</head>

<body>

<header id="profile-header">
			<div id="profile-pic"></div>
			<b id="follow">Follow</b>
		</header>

<h1 id="display-name">Display Name <img src="https://i.imgur.com/njNUFAd.png" class="verified"></h1>
			<div class="alt">@username</div>
			<div id="bio">account profile bio</div>

<div id="account-details">
				<img src="https://i.imgur.com/ejvNjdp.png"> Location
				<img src="https://i.imgur.com/54oLz7r.png"> <a href="">website.com</a>
				<img src="https://i.imgur.com/RVj54aG.png"> Born Month 0, 0000
				<span id="divide"></span>
				<img src="https://i.imgur.com/BTpXAlC.png"> Joined Month 0000
			</div>

<b>###</b> <span class="alt">Following</span>
			<b>###</b> <span class="alt">Followers</span>

</main>

<nav id="viewbar">
			<b class="selected option">Tweets</b>
			<b class="option">Tweets & Replies</b>
			<b class="option">Media</b>
			<b class="option">Likes</b>
		</nav>

<div class="sm-head">
				<img src="https://i.imgur.com/7BwcVfi.png"> Pinned Tweet
			</div>

<header class="t-head">
					<b>Display Name</b><img src="https://i.imgur.com/njNUFAd.png" class="verified">
					<div class="user-time">@username · Month 00</div>
					<img src="https://i.imgur.com/Lc5C5KJ.png" class="options">
				</header>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

</main>

</section>

<div class="sm-head">
				<img src="https://i.imgur.com/BFhZ0U0.png"> Display Name Retweeted
			</div>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

<div class="link-title">Link Page Title</div>
						Link_Preview_Text

<br><img src="https://i.imgur.com/0tOoMPM.png"> website.com
					</div>
				</div>

</main>

</section>

TWEET_CONTENT

<b>Display Name</b>
							<span class="q-usertime">
								@username · Month 00
							</span>
					</header>

QUOTED_TWEET_CONTENT

</q>

</main>

</section>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

</main>

</section>

</article>

<a href="http://tessisamess.insanejournal.com/" id="credit">TESSISAMESS</a>

</body>
</html>

Coding: Lights Out

<style>

/*--- TWITTER MOCKUP [LIGHTS OUT] - TESSISAMESS - 2020 ---*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/* REPLACEMENTS */

:root{
	--background: #000;
	--borders: #2F3336;

--text: #D9D9D9;
	--alt-text: #6E767D;
	--accent: #1DA1F2;

--main-font: Open Sans,trebuchet ms,sans-serif;

--verified: none; /* CHANGE TO block IF VERIFIED USER */

--profile-pic: url(PROFILE_PIC)center;
	/* MUST BE AT LEAST 134px by 134px; any size/dimension at or above that will work */

--header-bg: url(HEADER_BG)center;
	/* MUST BE AT LEAST 600px by 200px; any size/dimension at or above that will work */
}

/* GENERAL */

::selection{background:var(--accent);color:var(--lightest);}
::-moz-selection{background:var(--accent);color:var(--lightest);}

img{max-width:100%;}
h1,h2,h3,h4,h5,h6{margin:0;}

.alt{color:var(--alt-text);}

/* CONTAINER */

/* HEADER */

#profile-header{height:200px;background:var(--borders) var(--header-bg);background-size:cover;display:flex;align-items:flex-end;}

#profile-pic{width:134px;height:134px;margin:0 0 calc((134px / 2) * -1) 15px;background:var(--accent) var(--profile-pic);background-size:cover;border-radius:100%;border:2px solid var(--background);}

#follow{background:var(--accent);color:#fff;margin:0 15px -54px auto;padding:0 25px;height:39px;line-height:39px;border-radius:30px;}

/* PROFILE */

/* VIEWBAR */

/* TWEETS */

.tweet{padding:15px;border-bottom:1px solid var(--borders);display:flex;justify-content:space-between;flex-wrap:wrap;}

.pfp{width:49px;height:49px;margin:0;background:var(--accent) var(--profile-pic);background-size:cover;border-radius:100%;}

.t-body{width:calc(100% - 49px - 10px);}

.t-head{display:flex;align-items:center;}
.user-time{color:var(--alt-text);margin:0 0 0 5px;}
.options{margin:0 0 0 auto;}

.t-footer{display:flex;align-items:center;justify-content:center;color:var(--alt-text);font-size:12px;margin:10px 0 0 0;}
.stat{margin:0 auto 0 5px;}
.share{margin:0 auto 0 0;}

.sm-head{width:100%;margin:0 0 5px 40px;font-size:11px;color:var(--alt-text);display:flex;align-items:center;}
.sm-head img{margin:0 5px 0 0;}

/* PINNED TWEET */

.pinned{margin:0 0 10px 0;box-shadow:0 10px 0 0 var(--borders);}

/* QUOTE TWEET */

/* IMAGE TWEETS */

/* LINK TWEETS */

</style>

</head>

<body>

<header id="profile-header">
			<div id="profile-pic"></div>
			<b id="follow">Follow</b>
		</header>

<h1 id="display-name">Display Name <img src="https://i.imgur.com/TWmRW2c.png" class="verified"></h1>
			<div class="alt">@username</div>
			<div id="bio">account profile bio</div>

<div id="account-details">
				<img src="https://i.imgur.com/zfRcMRL.png"> Location
				<img src="https://i.imgur.com/OG5he7A.png"> <a href="">website.com</a>
				<img src="https://i.imgur.com/xen0R9s.png"> Born Month 0, 0000
				<span id="divide"></span>
				<img src="https://i.imgur.com/OSyakyH.png"> Joined Month 0000
			</div>

<b>###</b> <span class="alt">Following</span>
			<b>###</b> <span class="alt">Followers</span>

</main>

<nav id="viewbar">
			<b class="selected option">Tweets</b>
			<b class="option">Tweets & Replies</b>
			<b class="option">Media</b>
			<b class="option">Likes</b>
		</nav>

<div class="sm-head">
				<img src="https://i.imgur.com/15dTCKU.png"> Pinned Tweet
			</div>

<header class="t-head">
					<b>Display Name</b><img src="https://i.imgur.com/TWmRW2c.png" class="verified">
					<div class="user-time">@username · Month 00</div>
					<img src="https://i.imgur.com/E40hkHV.png" class="options">
				</header>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

</main>

</section>

<div class="sm-head">
				<img src="https://i.imgur.com/MUSXHvM.png"> Display Name Retweeted
			</div>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

<div class="link-title">Link Page Title</div>
						Link_Preview_Text

<br><img src="https://i.imgur.com/gPRpzVQ.png"> website.com
					</div>
				</div>

</main>

</section>

TWEET_CONTENT

<b>Display Name</b>
							<span class="q-usertime">
								@username · Month 00
							</span>
					</header>

QUOTED_TWEET_CONTENT

</q>

</main>

</section>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

</main>

</section>

TWEET_CONTENT

</main>

</section>

</article>

<a href="http://tessisamess.insanejournal.com/" id="credit">TESSISAMESS</a>

</body>
</html>

Installation Guide

Paste into a custom style (or off-site equivalent if you don't have a paid account) after running a Replace All on the following!

HEADER_BG - Cover image
Display Name - Your account display name (this can have spaces and/or emojis)
username - Your account name (this is the URL name)
PROFILE_PIC - Header and tweet avatar; this should be at least 134x134 but can be any size as long as it's above this.
YOUR_JOURNAL - Profile website link

ACCENT COLOR OPTIONS

#1DA1F2 Default accent (run Replace All on this color code to one of the below colors to change your accent color)

#FFAD1F Yellow accent

#E0245E Pink accent

#794BC4 Purple accent

#F45D22 Orange accent

#17BF63 Green accent

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ 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!

Tags: codes: mockups, html page

Profile

Title Here

Navigation

July 2024

Links List

Resources

Tags

Layout By

HTML Page: Twitter Timeline

Information

Coding: Default

Coding: Dim

Coding: Lights Out

Installation Guide

Terms of Use