Дорогие друзья,рамочки,которые я выставила в пост, с аудиоплеером , но в окошечке,где находится код самой рамочки, самого плеера нет,т.к. искажается код рамочки, который становится бесконечным и с непонятными иероглифами..Если нужно с музыкой, то берите код рамочки с плеером из редактора..
Анимационные картинки забрала с Pinterest

***ваш текст***ВАШ ТЕКСТ*** Прокрутка появится в том случае, если Вы вставите большой текст.

<center><table style="width: 700px;background:#BAB6B7; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 7px, -7px 18px 36px -20px #000000; border-radius: 20px;" background="" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" zzz="zzz" align="center"><div style="float:left; margin-top: 5px; margin-right:10px; margin-bottom: 5px; margin-left: 0px; "> <table width="300" height="450" style=" box-shadow: inset 1px 1px 10px #000000; border-radius: 20px;" background="https://www.yapfiles.ru/files/3204862/edade5f9290294348944ebe5b9e58dd1.gif" cellspacing="0" cellpadding="0"><tr><td style="padding:0px" zzz="zzz" align="center"></td></tr></table></div><div style="width: 282; height: 470px; margin-top: 0px; overflow: auto"><span style="font-size:22px;"><span style="font-family:arial;color:#140800;font-size:18px; text-shadow: 0px -0px #000;"><br /> ***ваш текст***ВАШ ТЕКСТ***<br /> Прокрутка появится в том случае, если Вы вставите большой текст.<br /> </span></span></div></td></tr></table></center>

***ваш текст***ВАШ ТЕКСТ*** Прокрутка появится в том случае, если Вы вставите большой текст.

<center><table style="width: 750px;background:#E4CC73; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 7px, -7px 18px 36px -20px #000000; border-radius: 20px;" background="" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" zzz="zzz" align="center"><div style="float:left; margin-top: 5px; margin-right:10px; margin-bottom: 5px; margin-left: 0px; "> <table width="300" height="450" style=" box-shadow: inset 1px 1px 10px #000000; border-radius: 20px;" background="https://www.yapfiles.ru/files/3204877/e46871ab3ad979e79b981248756697ef.gif" cellspacing="0" cellpadding="0"><tr><td style="padding:0px" zzz="zzz" align="center"></td></tr></table></div><div style="width: 282; height: 470px; margin-top: 0px; overflow: auto"><span style="font-size:22px;"><span style="font-family:arial;color:#341D19;font-size:18px; text-shadow: 2px -1px #E9CBE5;"><br /> ***ваш текст***ВАШ ТЕКСТ***<br /> Прокрутка появится в том случае, если Вы вставите большой текст.<br /> </span></span></div></td></tr></table></center><center></center>

***ваш текст***ВАШ ТЕКСТ Прокрутка появится в том случае, если Вы вставите большой текст.

<center><table style="width: 750px;background:#334434; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 7px, -7px 18px 36px -20px #000000; border-radius: 20px;" background="" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" zzz="zzz" align="center"><div style="float:left; margin-top: 5px; margin-right:10px; margin-bottom: 5px; margin-left: 0px; "> <table width="300" height="450" style=" box-shadow: inset 1px 1px 10px #000000; border-radius: 20px;" background="https://www.yapfiles.ru/files/3204858/136b06e8bdad5731d3d733f319803bc9.gif" cellspacing="0" cellpadding="0"><tr><td style="padding:0px" zzz="zzz" align="center"></td></tr></table></div><div style="width: 282; height: 470px; margin-top: 0px; overflow: auto"><span style="font-size:22px;"><span style="font-family:Times;color:#DBE1D2;font-size:21px; text-shadow: 2px -1px #000;"><br /> ***ваш текст***ВАШ ТЕКСТ<br /> Прокрутка появится в том случае, если Вы вставите большой текст.<br /> </span></span></div></td></tr></table></center>