Код:
<!--HTML-->
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
#search_title {background: #5f618e;
position: absolute;
left: 40px;
top: 250px;
width: 255px;
height: 15px;
text-align: center;
font-weight: bold;
color: white;
font-family: oswald;
text-transform: uppercase;
font-size: 12px;
}
#search_img {
position: absolute;
left:18px;
right:70px;
top:17px;
}
#search_img img {
width:300px;
height:300px;
object-fit: cover;
}
#search_img_link {
display: none;
}
#search_link {
background:white;
position: absolute;
width:200px;
max-height:30px;
left:65px;
top:170px;
font-size:9px;
font-family: 'Proxima Nova Rg';
opacity: 0.4;
overflow: hidden;
}
#search_link_button{background: #5f618e;
position: absolute;
width: 200px;
max-height: 30px;
left: 65px;
top: 200px;
color: white;
cursor: pointer;
font-family: oswald;
text-transform: uppercase;
font-size: 12px;
}
#search_link_input {
font-size: 10px;
width:200px;
}
</style>
<body>
<center>
<div id="search_wrapper">
<div id="search_link">
<input type="text" id="search_link_input" title="title" size="18" placeholder="введите ссылку на обложку альбома ">
</div>
<div id="search_link_button">загрузить</div>
<div id="search_img">
<img src="" id="search_img_link">
</div>
<div id="search_title" contentEditable="true">название плейлиста</div>
<div id ="search_content" contentEditable="true">Название песни</div>
<div id ="search_content2" contentEditable="true">Имя исполнителя</div>
<div id ="search_content3" contentEditable="true">Название песни</div>
<div id ="search_content4" contentEditable="true">Имя исполнителя</div>
<div id ="search_content5" contentEditable="true">Название песни</div>
<div id ="search_content6" contentEditable="true">Имя исполнителя</div>
<div id ="search_content7" contentEditable="true">Название песни</div>
<div id ="search_content8" contentEditable="true">Имя исполнителя</div>
<div id ="search_content9" contentEditable="true">Название песни</div>
<div id ="search_content10" contentEditable="true">Имя исполнителя</div>
</div></center>
<script>
$( document ).ready(function() {
$("#search_copyhtml").click(function(){
element = $('#search_wrapper').clone();
element .find('*').attr('contenteditable','false');
element = element.html();
$('.search_copyhtml_content').val('<!--post--> <center> <div id="search_wrapper">' + element + '</div></center> ');
});
});
</script>
<div id="post-form" class="formal" style="visibility:visible">
<form id="post" class="container" style="background:transparent; border:0px;" method="post" action="/post.php?tid=30" onsubmit="return RusffCore.TopicPostHandler(this)">
<fieldset>
<div class="fs-box hashelp">
<div id="formkey"></div>
<div id="formetc" style="display:none"></div>
<input type="hidden" name="form_sent" value="1">
<input type="hidden" name="form_user" id="store_unique_login" value="">
<p class="areafield required">
<span class="input"><textarea class="search_copyhtml_content" id="main-reply" style="display:none;" name="req_message" rows="13">s</textarea></span></p><p class="formsubmit"><input type="submit" id="search_copyhtml" class="button" name="submit" value="Отправить" accesskey="s" title="Accesskey:s"></p>
</div>
</fieldset>
</form>
</div>
<style>
#search_content {position: absolute;
top: 338px;
color: white;
font-family: 'Roboto Condensed';
text-transform: none;
left: 65px;
width: 250px;
height: 15px;
text-align: justify;
font-size: 14px;
font-weight: bold
overflow: hidden;
letter-spacing: 1px;
}
#search_content2 {position: absolute;
top: 353px;
color: white;
font-family: 'Roboto Condensed';
text-transform: none;
left: 65px;
width: 250px;
height: 15px;
text-align: justify;
font-size: 14px;
opacity: 0.5;
font-weight: bold
overflow: hidden;
letter-spacing: 0.5px;
}
#search_content3 {position: absolute;
top: 390px;
color: white;
font-family: 'Roboto Condensed';
text-transform: none;
left: 65px;
width: 250px;
height: 15px;
text-align: justify;
font-size: 14px;
font-weight: bold
overflow: hidden;
letter-spacing: 1px;
}
#search_content4 {position: absolute;
top: 405px;
color: white;
font-family: 'Roboto Condensed';
text-transform: none;
left: 65px;
width: 250px;
height: 15px;
text-align: justify;
font-size: 14px;
opacity: 0.5;
font-weight: bold
overflow: hidden;
letter-spacing: 0.5px;
}
#search_content5 {position: absolute;
top: 441px;
color: white;
font-family: 'Roboto Condensed';
text-transform: none;
left: 65px;
width: 250px;
height: 15px;
text-align: justify;
font-size: 14px;
font-weight: bold
overflow: hidden;
letter-spacing: 1px;
}
#search_content6 {position: absolute;
top: 457px;
color: white;
font-family: 'Roboto Condensed';
text-transform: none;
left: 65px;
width: 250px;
height: 20px;
text-align: justify;
font-size: 15px;
opacity: 0.5;
font-weight: bold
overflow: hidden;
letter-spacing: 0.5px;
}
#search_content7 {position: absolute;
top: 492px;
color: white;
font-family: 'Roboto Condensed';
text-transform: none;
left: 65px;
width: 250px;
height: 15px;
text-align: justify;
font-size: 14px;
font-weight: bold
overflow: hidden;
letter-spacing: 1px;
}
#search_content8 {position: absolute;
top: 507px;
color: white;
font-family: 'Roboto Condensed';
text-transform: none;
left: 65px;
width: 250px;
height: 15px;
text-align: justify;
font-size: 14px;
opacity: 0.5;
font-weight: bold
overflow: hidden;
letter-spacing: 0.5px;
}
#search_content9 {position: absolute;
top: 543px;
color: white;
font-family: 'Roboto Condensed';
text-transform: none;
left: 65px;
width: 250px;
height: 15px;
text-align: justify;
font-size: 14px;
font-weight: bold
overflow: hidden;
letter-spacing: 1px;
}
#search_content10 {position: absolute;
top: 558px;
color: white;
font-family: 'Roboto Condensed';
text-transform: none;
left: 65px;
width: 250px;
height: 15px;
text-align: justify;
font-size: 14px;
opacity: 0.5;
font-weight: bold
overflow: hidden;
letter-spacing: 0.5px;
}
#search_wrapper {
position: relative;
width:336px;
height:646px;
background-image: url('https://i.ibb.co/BTj1zC4/playlist.png');
}
</style>
</body>
</html>
