bothy | CODE: MSN MESSENGER (Reply)

mockup: msn messenger

hi, i really wanted a early 00's msn inspired mock up for a rp inbox code! so, here's this.

STATIC PREVIEW - CHATBOX

✦
CODE
✖
<raw-code>





<! -- GENERAL NOTES: DO NOT EDIT IMAGES EXCEPT ICONS OR YOU WANT TO REPLACE THE INTERFACE IMAGES --> 

<! -- BEGIN HEADER! --> 

<fieldset style="max-width:550px;margin:0 auto 10px auto;border:1px solid rgba(0,0,0,0.15);border-radius:10px;background: #6e76a6;font-family:monospace;font-size:11px;line-height:1;text-align:left; color: #fff; padding-top: 5px;"><div><img src="https://medals.dreamwidth.org/file/931.png" width=20px>•]••´º´•» J E M «•´º´••[• - Conversation</div> <div style="width: 20px; height: 20px; border:2px solid white;border-radius:5px; text-align: center; padding: 2px; padding:-top: 3px; font-size: 15px; float: right; margin-top: -25px; margin-right: 0px; background: #d97052;">X</div> <div style="width: 20px; height: 20px; border:2px solid white;border-radius:5px; text-align: center; padding: 2px; padding:-top: 3px; font-size: 15px; float: right; margin-top: -25px; margin-right: 26px;"><img src="https://medals.dreamwidth.org/file/4055.png" width="13px;"></div> <div style="width: 20px; height: 20px; border:2px solid white;border-radius:5px; text-align: center; padding-bottom: 9px; padding:-top: 2px; font-size: 15px; float: right; margin-top: -25px; margin-right: 56px; font-size: 12pt;">_</div>

<! -- END HEADER! --> 

<! -- SECONDARY HEADER --> 

<! -- //YOU CAN MAKE THESE LINKS IF YOU WANT! --> 

<article style="background: #f3eddc; text-align: left; padding: 3px; color:#000; margin-top: 5px;"> file edit actions tools <A HREF="HTTP://BOTHY.DREAMWIDTH.ORG" STYLE="TEXT-DECORATION:NONE; COLOR:#000;">help</A>  </article>
<article style="background: linear-gradient(to bottom,#f3f6fb, #b7c7e6
); width: auto; height: 500px; border-radius: 8px; border: solid 2px #d0d0db; padding: 10px; margin-right: -2px; margin-left: -2px;">

<section style="border-bottom: 2px solid #d0d0db; margin: -10px; height: 50px; background: linear-gradient(to bottom,#f3f6fb, #b7c7e6,  #f3f6fb); padding: 2px; border-radius: 10% 10% 70% 10%; height:60px;"> <img src="https://medals.dreamwidth.org/file/2209.png" width="40px" style="margin-left: 10px;"> <img src="https://medals.dreamwidth.org/file/2011.png" width="40px" style="margin-left: 25px;"> <img src="https://medals.dreamwidth.org/file/1339.png" width="40px" style="margin-left: 20px;"><img src="https://medals.dreamwidth.org/file/1671.png" width="40px;" style="margin-left: 25px;"><img src="https://medals.dreamwidth.org/file/1075.png" width="40px" style="margin-left: 25px;"><img src="https://medals.dreamwidth.org/file/2509.png" width="40px" style="margin-left: 30px;"><div style="float:right;"><img src="https://medals.dreamwidth.org/file/2716.png" width="60px" style="padding-left: px;"></div>br>
<span style="padding-left:18px; color:#000;">invite</span> <span style="padding-left:10px; color:#000;">send files</span> <span style="padding-left:5px; color:#000;">webcam</span> <span style="padding-left:20px; color:#000;">audio</span><span style="padding-left:18px; color:#000;">activities</span><span style="padding-left:18px; color:#000;">games</span></section>

<! -- END ! --> 
<br>

<! -- CHATBOX --> 
<section style="border: 2px solid #d0d0db; margin-top: 10px; height: 20px; background: #f0f0fb; padding: 2px; border-top-left-radius: 7px; border-top-right-radius: 7px; color: #000; width:350px; padding-left: 5px; padding-top: 5px;">To: USERNAME  [EMAIL@DOMAIN.co.uk] </section>

<section style="border: 2px solid #d0d0db; background: #fff; width: 350px; height: 270px; padding: 2px; padding-left: 5px; padding-top: 5px; overflow: auto; color: #000;"> <b>USERNAME says:</b><br>
can u  bring some chocolate<br><br>
<b>USERNAME says:</b> <br>
Get your own.<br><br>
<b>USERNAME says:</b><br>
:(((<br><br>
</section>

<! -- END CHATBOX! --> 

<! -- USERPIC #1! --> 

<div style="float:right; width: 110px; height: 150px; margin-top: -290px; margin-right: 25px; padding: 10px 10px 10px 10px; border-radius: 10px; position:relative; border: 3px solid #c1c1ca;  color:#000;"><center><img src="ICON1HERE" style="margin-left: -10px; padding-bottom: 40px;"></center><span style="float: right; font-size:20pt; margin-top: -20px;">🢓<br></span></div>


<! -- END USERPIC #1! --> 

<! -- BEGIN SENDBOX SECTION --> 

<section style="border: 2px solid #d0d0db; margin-top: 4px; height: 20px; background: linear-gradient(to bottom,#f3f6fb,  #b7c7e6); padding: 2px; border-top-left-radius: 7px; border-top-right-radius: 7px; color: #000; width:350px; padding-left: 5px; padding-top: 2px; overflow: font-size: 13pt; padding-botton: 10px; font-size: 6pt;"><img src="https://medals.dreamwidth.org/file/3053.png" width="15px"> Font 😊 Emoticons🢓😉Winks🢓 <img src="https://medals.dreamwidth.org/file/3208.png" width="15px"> Backgrounds🢓 <img src="https://medals.dreamwidth.org/file/3465.png" width="15px"> Gifts🢓</section>
<section style="border: 2px solid #d0d0db; background: #fff; width: 350px; height: 50px; padding: 2px; padding-left: 5px; padding-top: 5px; overflow: visible; color: #000;">SENT MSG HERE<div style="margin-left: 298px;margin-top: -10px; width:35px; height: 35px; border: 2px solid #d0d0db; background:linear-gradient(100deg, white, white, #dbdff3 ); color: grey; border-radius: 3px; padding: 2px 2px 2px 2px; text-align: center;"><br>send</span> </div>
</section>
<section style="border: 2px solid #d0d0db; margin-top: 0px; height: 15px; background: linear-gradient(to bottom, #f3f6fb,  #b7c7e6); padding: 2px; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; color: #000; width:350px; padding-left: 5px; padding-top: 5px;"> </section>

<! -- END SENDBOX SECTION --> 


<! -- END SENDBOX SECTION --> 

<! -- BEGIN USERPIC #2 --> 

<div style="float:right; width: 100px; height: 1115px; margin-top: -110px; margin-right: 25px; padding: 10px 10px 10px 10px; border-radius: 10px; position:relative; border: 3px solid #c1c1ca;  color:#000; background:#eeeff9;"><center><img src="ICON2HERE" style="width: 80px;"></center><<span style="float: right; font-size:20pt; margin-top: 0px;">🢓<br></span></div>
</article></FIELDSET>

<! -- END! --> 

STATIC PREVIEW - CR LIST

✦
CODE
✖
<Raw-code>

<fieldset style="max-width:350px;margin:0 auto 22px auto;border:1px solid rgba(0,0,0,0.15);border-radius:10px;background: #6e76a6;font-family:monospace;font-size:13px;line-height:1;text-align:left; color: #fff; padding-top: 5px;"><div><img src="https://medals.dreamwidth.org/file/931.png" width=20px>MSN Messenger</div> <div style="width: 20px; height: 20px; border:2px solid white;border-radius:5px; text-align: center; padding: 2px; padding:-top: 3px; font-size: 15px; float: right; margin-top: -25px; margin-right: px; background: #d97052;">X</div> <div style="width: 20px; height: 20px; border:2px solid white;border-radius:5px; text-align: center; padding: 2px; padding:-top: 3px; font-size: 15px; float: right; margin-top: -25px; margin-right: 6px;"><img src="https://medals.dreamwidth.org/file/4055.png" width="13px;"></div> <div style="width: 20px; height: 20px; border:2px solid white;border-radius:5px; text-align: center; padding: 2px; padding:-top: 3px; font-size: 15px; float: right; margin-top: -25px; margin-right: 6px;">_</div>

<article style="background: #f3eddc; text-align: left; padding: 3px; color:#000; margin-top: 5px;"> file edit actions tools <A HREF="HTTP://BOTHY.DREAMWIDTH.ORG" STYLE="TEXT-DECORATION:NONE; COLOR:#000;">help</A>  </article>
<article style="background: linear-gradient(to bottom,#f3f6fb, #b1bad7, #f3f6fb
); width: auto; height: 570px; border-radius: 8px; border: solid 2px #d0d0db; padding: 10px; margin-right: -2px; margin-left: -2px;"><section style="border: 2px solid #d0d0db; margin: -10px; height: 50px; background: linear-gradient(to bottom,#f3f6fb, #b7c7e6,  #f3f6fb); padding: 2px; border-radius: 10px; height:60px; color:#000;"><b style="color:#000;">⦾</b> <img src="https://medals.dreamwidth.org/file/2716.png" width="40px" style="padding-left:0px;"> <b style="color:#000;">Messenger</b><br>
<img src="ICON HERE" style="border-radius: 4px; border: 2px solid darkgrey; width: 35px; box-shadow: 0 4px 2px -2px lightgray;float: left;"> <b>USERNAME</b> <span style="color: #ececec;">(Online)</span><BR>
<span style="color: #ececec; margin-left: 20px;">🎵LISTENING TO: SONG - BAND</span>

</section>
<br><br>

<section style="border: 2px solid #d0d0db; margin: -10px; height: 50px; background: linear-gradient(to bottom,  #f3f6fb, #b7c7e6, #f3f6fb, #b7c7e6); padding: 2px; border-radius: 10% 10% 10% 100%; height: 65px; color: #000;"> <img src="https://motherfuckers.dreamwidth.org/file/820.png" width="30px" style="padding-left: 10px;"> <img src="https://motherfuckers.dreamwidth.org/file/1357.png" style="width: 17px;"> Add a contact
<section style="border: 2px solid #d0d0db; background: #fff; width: auto; height: 380px; padding: 2px; padding-left: 22px; padding-top: 5px; overflow: auto; color: #000; margin-left: 50px; margin-top: 7px;border-radius: 0% 0% 0% 0%; color: #000; font-size: 10pt;"> <img src="https://motherfuckers.dreamwidth.org/file/1691.png" width="18px"> 
USERNAME <span style="color: lightgray;">(Online)</span><br>
<img src="https://motherfuckers.dreamwidth.org/file/2011.png" width="18px"> 
 USERNAME <span style="color: lightgray;">(Offline)</span>
</section>

<section style="border: 2px solid #d0d0db; background: #fff; width: auto; height: 60px; padding: 2px; padding-left: 5px; padding-top: 5px; overflow: auto; color: #000; margin-left: 50px; margin-top: px;border-radius: 0% 0% 0% 0%;"><img src="https://medals.dreamwidth.org/file/2716.png" width="100px" style="float: left;"> <b style="color:#000; font-size:20pt; line-height: 50px;"> Messenger</b>
</section></section></article> </fieldset>  

notes:

credit to @bothy is linked via the HELP text in code, pls don't remove this.
ui icons from flaticon
textarea by @10billionghosts
tested in Tess' Code Tester

CODE: MSN MESSENGER

Post a comment in response: