yuff | Phone CR Code (2023 Upgrade!)

Back in 2017, I made a Phone CR code. Since then, phones have changed a good amount, so I decided to make an upgrade!

CONTACTS

NAME MCNAME

USERNAME

♫

MESSAGE

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A pellentesque sit amet porttitor eget dolor morbi. Velit laoreet id donec ultrices tincidunt arcu non. Cursus turpis massa tincidunt dui ut ornare lectus. Massa sed elementum tempus egestas. Pulvinar pellentesque habitant morbi tristique. Et netus et malesuada fames ac turpis egestas maecenas. Sit amet cursus sit amet dictum sit amet justo. Gravida arcu ac tortor dignissim convallis aenean et tortor. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Blandit aliquam etiam erat velit scelerisque. Gravida rutrum quisque non tellus orci ac auctor. Id leo in vitae turpis massa sed elementum. Condimentum lacinia quis vel eros donec ac odio tempor. Id ornare arcu odio ut sem.

Facilisis sed odio morbi quis commodo odio aenean. Dui nunc mattis enim ut. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Ornare massa eget egestas purus viverra accumsan in nisl. Nibh sit amet commodo nulla facilisi. Purus non enim praesent elementum facilisis. Sem et tortor consequat id porta nibh venenatis cras. Nunc faucibus a pellentesque sit amet porttitor eget. Laoreet sit amet cursus sit amet. Facilisis magna etiam tempor orci eu lobortis elementum nibh tellus. Laoreet non curabitur gravida arcu ac tortor. Eget lorem dolor sed viverra.

Viverra orci sagittis eu volutpat. Convallis posuere morbi leo urna molestie at. Euismod quis viverra nibh cras pulvinar. Vel pharetra vel turpis nunc. Nulla at volutpat diam ut venenatis. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. A lacus vestibulum sed arcu non odio euismod. Ante in nibh mauris cursus mattis molestie. Eget nullam non nisi est sit. Enim facilisis gravida neque convallis a cras semper. Nulla facilisi cras fermentum odio. Diam volutpat commodo sed egestas egestas fringilla phasellus.

NAME MCNAME

USERNAME

♫

MESSAGE

NAME MCNAME

USERNAME

♫

MESSAGE

Enter stuff here

NAME MCNAME

USERNAME

♫

MESSAGE

❤️❤️❤️❤️❤️

Title

Code by Yuff

This code comes with four different styles for the character page. There's a full single text box, a text box + image, two text boxes, and a text box + emoji area. All of these can be previewed in the live preview above. When you use the code, just grab the main code and then for the character entries, use the code for the style you want to use!

MAIN CODE:

<raw-code>

<div style="display: block; background: url(https://i.imgur.com/DKE6Nax.png); height: 813px; width: 400px; margin: auto;">

<div style="display: inline-block; height: 782px; width: 360px; background: url(PHONE-BACKGROUND-URL); overflow: hidden; border-radius: 40px; margin-left: 20px; margin-top: 16px;  background-repeat: no-repeat; background-size: cover;">

<div style="display: block; height: 25px; width: 360px; margin-left: 15px; margin-top: 15px;"><img src="https://i.imgur.com/TQKYQnk.png" style="height: 25px;"></div>

<div style="display: inline-block; height: 700px; width: 360px; overflow: hidden;">

<div style="display: inline-block; height: 700px; width: 360px;">
<a name="HOME"></a>
<div style="display: block; width: 340px; height: 50px; text-align: center; padding: 10px 0px 5px 0px; margin: 0px 10px 0px; 10px; border-bottom: 1px solid #900aa2;">
<span style="font-size: 25px; font-family: Palatino, helvetica; color:#f4f9fc; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #00040e 0px 1px 1px;">
CONTACTS
<br/></span></div>

<a href="#CHAR1"><img src="USERPIC-URL" style="height: 60px; width: 60px; border-radius: 10px; border: 1px solid #900aa2" alt="NAME"></a>

		

<a href="#CHAR2"><img src="USERPIC-URL" style="height: 60px; width: 60px; border-radius: 10px; border: 1px solid #900aa2" alt="NAME"></a>

		

<a href="#CHAR3"><img src="USERPIC-URL" style="height: 60px; width: 60px; border-radius: 10px; border: 1px solid #900aa2" alt="NAME"></a>

</div></center></div></div>

 
COPY & PASTE CHARACTER ENTRY CODE HERE

</div>

<div style="height: 30px; margin-left: 80px; width: 200px; margin-top: 5px;">
<div id="MENU-BUTTON" style="display: inline-block;"><a href="#HOME"><img src="https://i.imgur.com/VX4SrBB.png" alt="Menu Button"></a></div>
<div id="HOME-BUTTON" style="display: inline-block; margin-left: 50px;">
<a href="#HOME"><img src="https://i.imgur.com/q1zJEYY.png" alt="Home Button"></a></div>
<div id="BACK-BUTTON" style="display: inline-block; margin-left: 50px;">
<a href="#HOME"><img src="https://i.imgur.com/yiwKBed.png" alt="Back Button"></a></div>
</div>

</div></div></div>
<div style="display: block; clear: both; height: 10px; text-align: center; font-variant: small-caps; padding: 5px;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div>
</raw-code>

HTML Editor-Friendly Version

One Text Box	Text Box + Image	Two Text Boxes	Text Box + Emoji
<!--START ONE TEXT BOX ENTRY--> <div style="display: inline-block; width: 360px; height: 700px; overflow: auto;"> <a name="CHAR1"></a> <!--START ICON--> <div style="width: 360px; margin-top: 10px;"> <img src="USERPIC-URL" style="border-radius: 50px; border: 2px solid #900aa2; margin-left: 125px;" alt="NAME"></div> <!--END ICON--> <!--START NAME--> <div style="width: 350px; border-bottom: 1px solid #900aa2; margin: 5px; height: 40px; text-align: center;"> <span style="font-size: 22px; font-family: Palatino, helvetica; color:#f4f9fc; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #00040e 0px 1px 1px;"> NAME MCNAME <br/></span></div> <!--END NAME--> <!--START LINK BAR--> <div style="display: block;"> <!--START USERNAME--> <div style="display: inline-block; margin-left: 10px; float: left; width: 140px;"><span style="font-family: Palatino, helvetica, arial, sans-serif; font-size:10px; color:#f4f9fc; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;"> <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #f4f9fc;">USERNAME</a></span> </div> <!--END USERNAME--> <!--START SONG--> <div style="display: inline-block; text-align: center; width: 55px;"> <span style="font-size: 20px; font-family: Palatino, helvetica; color: #A6A6A6; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #747474 0px 1px 1px;"> <a href="SONG-URL" style="color: #fda8fd; text-decoration: none;" target="_blank">♫</a></span></div> <!--END SONG--> <!--START INBOX--> <div style="display: inline-block; float: right; margin-right: 10px;"> <span style="font-family: Palatino, helvetica, arial, sans-serif; font-size:10px; color:#f4f9fc; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;"> <a href="INBOX-URL" style="text-decoration: none; color: #f4f9fc;">MESSAGE</a></span></div> <!--END INBOX--> </div> <!--END LINK BAR--> <!--START TEXT AREA--> <div style="width: 340px; height: 470px; margin: 10px; background-color: rgba(47, 5, 89, 0.5); overflow: auto;"><div style="text-align: left; padding: 5px; font-family: Palatino, helvetica, arial, sans-serif; color:#f4f9fc; font-size: 10px; letter-spacing: 0.5px;"> <p>Text goes here, use "p" code for separating paragraphs</p> </div></div> <!--END TEXT AREA--> </div> <!--END ONE TEXT BOX ENTRY-->	<!--START TEXT + IMAGE ENTRY--> <div style="display: inline-block; width: 360px; height: 700px; overflow: auto;"> <a name="CHAR1"></a> <!--START ICON--> <div style="width: 360px; margin-top: 10px;"> <img src="USERPIC-URL" style="border-radius: 50px; border: 2px solid #900aa2; margin-left: 125px;" alt="NAME"></div> <!--END ICON--> <!--START NAME--> <div style="width: 350px; border-bottom: 1px solid #900aa2; margin: 5px; height: 40px; text-align: center;"> <span style="font-size: 22px; font-family: Palatino, helvetica; color:#f4f9fc; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #00040e 0px 1px 1px;"> NAME MCNAME <br/></span></div> <!--END NAME--> <!--START LINK BAR--> <div style="display: block;"> <!--START USERNAME--> <div style="display: inline-block; margin-left: 10px; float: left; width: 140px;"><span style="font-family: Palatino, helvetica, arial, sans-serif; font-size:10px; color:#f4f9fc; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;"> <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #f4f9fc;">USERNAME</a></span> </div> <!--END USERNAME--> <!--START SONG--> <div style="display: inline-block; text-align: center; width: 55px;"> <span style="font-size: 20px; font-family: Palatino, helvetica; color: #A6A6A6; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #747474 0px 1px 1px;"> <a href="SONG-URL" style="color: #fda8fd; text-decoration: none;" target="_blank">♫</a></span></div> <!--END SONG--> <!--START INBOX--> <div style="display: inline-block; float: right; margin-right: 10px;"> <span style="font-family: Palatino, helvetica, arial, sans-serif; font-size:10px; color:#f4f9fc; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;"> <a href="INBOX-URL" style="text-decoration: none; color: #f4f9fc;">MESSAGE</a></span></div> <!--END INBOX--> </div> <!--END LINK BAR--> <!--START TEXT AREA--> <div style="width: 340px; height: 230px; margin: 10px; background-color: rgba(47, 5, 89, 0.5); overflow: auto;"> <div style="text-align: left; padding: 5px; font-family: Palatino, helvetica, arial, sans-serif; color:#f4f9fc; font-size: 10px; letter-spacing: 0.5px;"> <p>Text goes here, use "p" code for separating paragraphs</p> </div></div> <!--END TEXT AREA--> <!--START IMAGE AREA--> <div style="width: 340px; height: 230px; margin: 10px;"> <img src="IMAGE-URL" style="margin: 10px 20px 10px 20px; padding: 2px; background-color: #AAAAAA; width: 300px; height: 200px;"></div> <!--END IMAGE AREA--> </div> <!--END TEXT + IMAGE ENTRY-->	<!--START TWO TEXT BOX ENTRY--> <div style="display: inline-block; width: 360px; height: 700px; overflow: auto;"> <a name="CHAR1"></a> <!--START ICON--> <div style="width: 360px; margin-top: 10px;"> <img src="USERPIC-URL" style="border-radius: 50px; border: 2px solid #900aa2; margin-left: 125px;" alt="NAME"></div> <!--END ICON--> <!--START NAME--> <div style="width: 350px; border-bottom: 1px solid #900aa2; margin: 5px; height: 40px; text-align: center;"> <span style="font-size: 22px; font-family: Palatino, helvetica; color:#f4f9fc; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #00040e 0px 1px 1px;"> NAME MCNAME <br/></span></div> <!--END NAME--> <!--START LINK BAR--> <div style="display: block;"> <!--START USERNAME--> <div style="display: inline-block; margin-left: 10px; float: left; width: 140px;"><span style="font-family: Palatino, helvetica, arial, sans-serif; font-size:10px; color:#f4f9fc; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;"> <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #f4f9fc;">USERNAME</a></span> </div> <!--END USERNAME--> <!--START SONG--> <div style="display: inline-block; text-align: center; width: 55px;"> <span style="font-size: 20px; font-family: Palatino, helvetica; color: #A6A6A6; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #747474 0px 1px 1px;"> <a href="SONG-URL" style="color: #fda8fd; text-decoration: none;" target="_blank">♫</a></span></div> <!--END SONG--> <!--START INBOX--> <div style="display: inline-block; float: right; margin-right: 10px;"> <span style="font-family: Palatino, helvetica, arial, sans-serif; font-size:10px; color:#f4f9fc; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;"> <a href="INBOX-URL" style="text-decoration: none; color: #f4f9fc;">MESSAGE</a></span></div> <!--END INBOX--> </div> <!--END LINK BAR--> <!--START TEXT AREA 1--> <div style="width: 340px; height: 230px; margin: 10px; background-color: rgba(47, 5, 89, 0.5); overflow: auto;"> <div style="text-align: left; padding: 5px; font-family: Palatino, helvetica, arial, sans-serif; color:#f4f9fc; font-size: 10px; letter-spacing: 0.5px;"> <p>Text goes here, use "p" code for separating paragraphs</p> </div></div> <!--END TEXT AREA--> <!--START TEXT AREA 2--> <div style="width: 340px; height: 230px; margin: 10px; background-color: rgba(47, 5, 89, 0.5); overflow: auto;"> <div style="text-align: left; padding: 5px; font-family: Palatino, helvetica, arial, sans-serif; color:#f4f9fc; font-size: 10px; letter-spacing: 0.5px;"> <p>Text goes here, use "p" code for separating paragraphs</p> </div></div> <!--END NOTE AREA--> </div> <!--END TWO TEXT BOX ENTRY-->	<!--START TEXT + EMOJI ENTRY--> <div style="display: inline-block; width: 360px; height: 700px; overflow: auto;"> <a name="CHAR1"></a> <!--START ICON--> <div style="width: 360px; margin-top: 10px;"> <img src="USERPIC-URL" style="border-radius: 50px; border: 2px solid #900aa2; margin-left: 125px;" alt="NAME"></div> <!--END ICON--> <!--START NAME--> <div style="width: 350px; border-bottom: 1px solid #900aa2; margin: 5px; height: 40px; text-align: center;"> <span style="font-size: 22px; font-family: Palatino, helvetica; color:#f4f9fc; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #00040e 0px 1px 1px;"> NAME MCNAME <br/></span></div> <!--END NAME--> <!--START LINK BAR--> <div style="display: block;"> <!--START USERNAME--> <div style="display: inline-block; margin-left: 10px; float: left; width: 140px;"><span style="font-family: Palatino, helvetica, arial, sans-serif; font-size:10px; color:#f4f9fc; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;"> <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #f4f9fc;">USERNAME</a></span> </div> <!--END USERNAME--> <!--START SONG--> <div style="display: inline-block; text-align: center; width: 55px;"> <span style="font-size: 20px; font-family: Palatino, helvetica; color: #A6A6A6; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #747474 0px 1px 1px;"> <a href="SONG-URL" style="color: #fda8fd; text-decoration: none;" target="_blank">♫</a></span></div> <!--END SONG--> <!--START INBOX--> <div style="display: inline-block; float: right; margin-right: 10px;"> <span style="font-family: Palatino, helvetica, arial, sans-serif; font-size:10px; color:#f4f9fc; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;"> <a href="INBOX-URL" style="text-decoration: none; color: #f4f9fc;">MESSAGE</a></span></div> <!--END INBOX--> </div> <!--END LINK BAR--> <!--START TEXT AREA--> <div style="width: 340px; height: 380px; margin: 10px; background-color: rgba(47, 5, 89, 0.5); overflow: auto;"> <div style="text-align: left; padding: 5px; font-family: Palatino, helvetica, arial, sans-serif; color:#f4f9fc; font-size: 10px; letter-spacing: 0.5px;"> <p>Text goes here, use "p" code for separating paragraphs</p> </div></div> <!--END TEXT AREA--> <!--START EMOJI + TITLE AREA--> <div style="width: 340px; height: 80px; margin: 10px; background-color: rgba(47, 5, 89, 0.5); overflow: auto;"> <!--START EMOJI AREA--> <div style="display: block; text-align: center; font-size: 25px;"> ❤️❤️❤️❤️❤️ </div> <!--END EMOJI AREA--> <!--START TITLE AREA--> <div style="text-align: left; padding: 5px; font-family: Palatino, helvetica, arial, sans-serif; color:#f4f9fc; font-size: 20px; letter-spacing: 0.5px; text-align: center; font-style: italic;"> Title </div> <!--END TITLE AREA--> </div> <!--END NOTE AREA--> </div> <!--END TEXT + EMOJI ENTRY-->
HTML Editor Version	HTML Editor Version	HTML Editor Version	HTML Editor Version

NOTES:

The bottom buttons are fully functional! They are how you return to the navigation screen.

The phone model used for this code was a Samsung Galaxy s23.

Phone background image is made to fit a image with a height of 782px and width of 360px. It will automatically resize images to fit it, so don't worry too much if your desired wallpaper isn't exactly that. If you want to use the example background, the url is https://i.imgur.com/xdMDT7t.png.

On the character entry page with images, the best image resolution is a height of 200px and a width of 300px. It will automatically resize any images put in there.

The main colors used were #900aa2, #fda8fd, #f4f9fc, and rgba(47, 5, 89, 0.5) for the text boxes. Go ahead and swap them out for colors that fit your own layout.

Modifications are totally fine. I'd love to see what you do with it though!

Comments are nice but not necessary. However, please leave the credit line on!

EDIT @ 9/26/23: A small error was caught with the lining up of the username/song/message bar, it has since been fixed!