tesscodes | Biosheet: Smartphone

Entry tags:

Biosheet: Smartphone

—

10:55 am

Name

Name

00

Age

Gender

Gender

Sexuality

Sexuality

About

Nam dapibus lacinia consequat. Morbi nisi arcu, rhoncus eu mi quis, molestie porta mi. Mauris dictum augue et dolor dignissim, vitae ullamcorper orci dictum. Curabitur id enim non elit efficitur porttitor ac a massa.

Vivamus nec elit facilisis, sagittis nunc vitae, tempor nisl. Integer rutrum orci in nibh luctus, id dictum mi euismod. Aenean quis augue quis dolor tempus aliquam ac vel diam.

Name & Name Date

Name & Name Date

Name & Name Date

Name & Name Date

Songtitle
Songartist

Songtitle
Songartist

Songtitle
Songartist

Songtitle
Songartist

Songtitle
Songartist

Songtitle
Songartist

Songtitle
Songartist

Songtitle
Songartist

Information

I got a comment on my very old phone code post and it inspired me to create a new one since I've come so far since then! This one isn't as in-character as the old one (it's lowkey a bio lmao) but you could easily use the threads for faux text previews and play around to make it more of an IC phone if you like!

I've also included a single-screen phone with standard links for the icons if you'd like to use a lighter version of this as a nav/contact code! Now, here's the best part: This phone uses exactly no images to create the actual phone (wallpaper and icons only!) so you can resize it and change the phone's color to suit your needs with no hassle! Enjoy! ♥

Coding: Multiple Screens

<lj-raw><div style="margin:0 auto;width:330px;background:#fafafa;border-radius:20px/10px;padding:0 5px;font-family:century gothic,helvetica,arial,sans-serif;font-size:14px;text-align:left;color:#fff;line-height:1.3;text-shadow:1px 1px 1px rgba(0,0,0,0.2);box-shadow:inset -2px -2px 3px 0 rgba(0,0,0,0.05), 1px 1px 3px 0.5px rgba(0,0,0,0.2);">
	<div style="height:20px;line-height:17px;font-size:25px;color:rgba(0,0,0,0.1);text-shadow:none;text-align:center;">&mdash;</div>

<div style="background:#ddd url(WALLPAPERHERE)center;background-size:cover;height:580px;overflow:hidden;border-radius:5px/3px;">

<a name="home"></a><div style="height:580px;overflow:hidden;border-radius:5px/3px;display:flex;flex-wrap:wrap;align-content:space-between;text-align:center;">

<div style="width:100%;">

<div style="padding:5% 20px 12% 0;filter:invert(100%);text-align:right;letter-spacing:4px;">
					<img src="https://i.imgur.com/bP4bBRT.png">
					<img src="https://i.imgur.com/rLKLBuz.png">
					<img src="https://i.imgur.com/NWxfTjz.png">
				</div>

<div style="font-size:55px;">
					10:55 am
				</div>
			</div>

<div style="width:100%;padding-bottom:5%;display:flex;justify-content:space-evenly;flex-wrap:wrap;filter:invert(100%);">
				<a href="#one"><img src="https://i.imgur.com/2LykKSS.png"></a>
				<a href="#two"><img src="https://i.imgur.com/lZSPDJe.png"></a>
				<a href="#three"><img src="https://i.imgur.com/jMPUIVI.png"></a>
				<a href="#four"><img src="https://i.imgur.com/UwfRp5s.png"></a>
				<a href="#five"><img src="https://i.imgur.com/Pnzz3xg.png"></a>
			</div>

</div>

<a name="one"></a><div style="background:rgba(0,0,0,0.7);height:540px;border-radius:5px/3px;padding:20px;overflow:auto;">

<div style="float:left;width:150px;height:230px;background:#fff url(INFOPICHERE)center;background-size:cover;"></div>

<div style="margin-left:165px;">
				<span style="font-size:20px;">Namehere</span>
				<div style="border-top:1px solid rgba(255,255,255,0.6);font-size:12px;">Name</div><br>

<span style="font-size:20px;">00</span>
				<div style="border-top:1px solid rgba(255,255,255,0.6);font-size:12px;">Age</div><br>

<span style="font-size:20px;">Genderhere</span>
				<div style="border-top:1px solid rgba(255,255,255,0.6);font-size:12px;">Gender</div><br>

<span style="font-size:20px;">Sexualityhere</span>
				<div style="border-top:1px solid rgba(255,255,255,0.6);font-size:12px;">Sexuality</div><br>
			</div>

<span style="font-size:22px;">About</span>
			<div style="border-top:1px solid rgba(255,255,255,0.6);font-size:12px;padding-top:10px;text-align:justify;line-height:1.5;">

Aboutinfohere

</div>

</div>

<a name="two"></a><div style="background:rgba(0,0,0,0.7);height:580px;border-radius:5px/3px;overflow:auto;">

<a href="THREADURL" style="display:flex;align-items:center;height:60px;border-bottom:1px solid rgba(255,255,255,0.6);color:#fff;text-decoration:none;padding:0 10px;">
				<img src="ICONURL" style="height:40px;width:40px;margin-right:10px;border-radius:100%;background:#fff;">

<div style="width:100%;">
				Thread Title
					<div style="font-size:11px;">
					Name & Name
					<span style="float:right;">Date</span>
					</div>
				</div>
			</a>

</div>

<a name="three"></a><div style="background:rgba(0,0,0,0.7);height:540px;border-radius:5px/3px;padding:20px;overflow:auto;text-align:center;display:flex;align-content:flex-start;justify-content:space-between;flex-wrap:wrap;">

<a href="JOURNALURL" style="display:inline-block;color:#fff;text-decoration:none;">
				<img src="ICONURL" style="height:80px;width:80px;border-radius:100%;margin-bottom:8px;background:#fff;"><br>
				Name Here
					<div style="font-size:11px;">
					relationship
					</div>
			</a>

</div>

<a name="four"></a><div style="background:rgba(0,0,0,0.7);height:580px;border-radius:5px/3px;overflow:auto;">

<a href="SONGURL" style="padding:10px;border-bottom:1px solid rgba(255,255,255,0.6);text-decoration:none;color:#fff;display:flex;align-items:center;justify-content:space-between;">
				<img src="ALBUMIMG" style="width:50px;height:50px;background:#fff;">
					<div style="width:100%;margin:0 10px;">
					Songtitle<br>
						<i style="font-size:11px;">Songartist</i></div>
						<div style="float:right;">0:00</div>
			</a>

</div>

<a name="five"></a><div style="background:rgba(0,0,0,0.7);height:580px;overflow:auto;border-radius:5px/3px;">

<div style="-webkit-column-count:3;-webkit-column-gap:0;-moz-column-count:3;-moz-column-gap:0;column-count:3;column-gap:0;">

<img src="URL" style="width:100%!important;height:auto!important;">
					<img src="URL" style="width:100%!important;height:auto!important;">
					<img src="URL" style="width:100%!important;height:auto!important;">

</div>

</div>

</div>

<div style="padding:15px 0;">
		<a href="#home" style="margin:0 auto;display:block;width:55px;height:20px;background:rgba(255,255,255,0.1);border-radius:30px;border-top:1px solid rgba(0,0,0,0.07);border-left:1px solid rgba(0,0,0,0.07);border-bottom:1px solid rgba(0,0,0,0.12);border-right:1px solid rgba(0,0,0,0.12);"></a>
	</div>

</div><a href="http://tessisamess.insanejournal.com/" style="display:block;width:330px;margin:5px auto 0 auto;font-family:century gothic,helvetica,arial,sans-serif;font-size:9px;text-decoration:none;color:#bbb;text-align:right;">CODE BY</a></lj-raw>

Coding: Single Screen

<lj-raw><div style="margin:0 auto;width:330px;background:#fafafa;border-radius:20px/10px;padding:0 5px;font-family:century gothic,helvetica,arial,sans-serif;font-size:14px;text-align:left;color:#fff;line-height:1.3;text-shadow:1px 1px 1px rgba(0,0,0,0.2);box-shadow:inset -2px -2px 3px 0 rgba(0,0,0,0.05), 1px 1px 3px 0.5px rgba(0,0,0,0.2);">
	<div style="height:20px;line-height:17px;font-size:25px;color:rgba(0,0,0,0.1);text-shadow:none;text-align:center;">&mdash;</div>

<div style="background:#ddd url(WALLPAPERHERE)center;background-size:cover;height:580px;overflow:hidden;border-radius:5px/3px;display:flex;flex-wrap:wrap;align-content:space-between;text-align:center;">

<div style="width:100%;">
				<div style="padding:5% 20px 12% 0;filter:invert(100%);text-align:right;letter-spacing:4px;">
					<img src="https://i.imgur.com/bP4bBRT.png">
					<img src="https://i.imgur.com/rLKLBuz.png">
					<img src="https://i.imgur.com/NWxfTjz.png">
				</div>

<div style="font-size:55px;">
					10:55 am
				</div>
			</div>

<div style="width:100%;padding-bottom:5%;display:flex;justify-content:space-evenly;flex-wrap:wrap;filter:invert(100%);">
				<a href="URL1" title="Bio"><img src="https://i.imgur.com/2LykKSS.png"></a>
				<a href="URL2" title="Threads"><img src="https://i.imgur.com/lZSPDJe.png"></a>
				<a href="URL3" title="CR Chart"><img src="https://i.imgur.com/jMPUIVI.png"></a>
				<a href="URL4" title="Playlist"><img src="https://i.imgur.com/UwfRp5s.png"></a>
				<a href="URL5" title="Aesthetics"><img src="https://i.imgur.com/Pnzz3xg.png"></a>
			</div>

</div>

<div style="padding:15px 0;">
		<div style="margin:0 auto;display:block;width:55px;height:20px;background:rgba(255,255,255,0.1);border-radius:30px;border-top:1px solid rgba(0,0,0,0.07);border-left:1px solid rgba(0,0,0,0.07);border-bottom:1px solid rgba(0,0,0,0.12);border-right:1px solid rgba(0,0,0,0.12);"></div>
	</div>

</div><a href="http://tessisamess.insanejournal.com/" style="display:block;width:330px;margin:5px auto 0 auto;font-family:century gothic,helvetica,arial,sans-serif;font-size:9px;text-decoration:none;color:#bbb;text-align:right;">CODE BY</a></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

MULTIPLE SCREENS
WALLPAPERHERE - Phone screen wallpaper
10:55 am - To reset the time to a different time
INFOPICHERE - Bio picture; can be any dimensions
Namehere through Aboutinfohere - Bio info

The rest should be pretty straightforward, but let me know if anything is unclear!

SINGLE SCREEN
WALLPAPERHERE - Phone screen wallpaper
10:55 am - To reset the time to a different time
URL1 through URL5 - Your nav links these also have link titles that show up on hover, so you may want to edit those too)

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

century gothic - Overall font

IMAGES

A Note: To change all icons from white to black for a darker theme, simply remove both instances of filter:invert(100%); from the phone code and your icons will swap with no need to replace the images!

https://i.imgur.com/bP4bBRT.png - Wifi icon
https://i.imgur.com/rLKLBuz.png - Signal icon
https://i.imgur.com/NWxfTjz.png - Battery icon

https://i.imgur.com/2LykKSS.png - Info icon
https://i.imgur.com/lZSPDJe.png - Messages icon
https://i.imgur.com/jMPUIVI.png - Contacts icon
https://i.imgur.com/UwfRp5s.png - Music icon
https://i.imgur.com/Pnzz3xg.png - Images icon

COLORS

255,255,255 Info borders on screens; home button background (semi-transparent rgba value)

#fff Text and links

#fafafa Phone color

0,0,0 All shadows on outer phone; top speaker color; home button borders; active screen backgrounds (semi-transparent rgba value)

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!

Flat | Top-Level Comments Only