ls
Код:
<!--HTML-->
<style>
#modwindow {
position: relative;
background-position: center;
margin-top: 0px;
margin-left: -100px;
padding: 20px 15px;
border: 1px solid #30303b !important;
width: 800px;
height:500px;
background: url(https://forumstatic.ru/files/001b/12/12/90893.png) #404055;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
text-align: center;
left:-100px;
top:20px;
}
.mod_left { position: absolute; width: 500px; border: 1px solid #30303b !important; height:500px;}
.mod_right{ position: absolute; width: 300px; border: 1px solid #30303b !important; height:480px; left: 520px; top:50px; z-index: 1;}
#modwindow h1 {
background:# ;
opacity: 1;
color:#d0c9c1;
text-align:center;
font-family: 'Playfair Display', serif;
font-size: 20px;
margin-top:-10px;
padding-top:15px;
height:30px;
letter-spacing: 2px;
text-shadow: 1px 1px 0 #4c4450;
font-weight:500;
}
#modwindow h2 {
background:# ;
opacity: 1;
color:#d0c9c1;
text-align:center;
font-family: 'Playfair Display', serif;
font-size: 8px;
height:30px;
letter-spacing: 1px;
text-shadow: 1px 1px 0 #4c4450;
font-weight:500;
}
.mod_left img {
border: 5px;
border-style: double;
border-color:#2a2a38;
background: url("") repeat;
text-align: center;
margin-top:15px;
}
.text {
background:# ;
opacity: 1;
height:180px;
width: 480px;
border: 0px;
border-style: double;
border-color:#2a2a38;
text-align: center;
padding:10px;
margin: 2px 10px;
}
.mod_left .block {
display:inline-block;
background:# ;
opacity: 1;
height:40px;
width: 200px;
border: 4px;
border-style: double;
border-color:#2a2a38;
padding:8px;
margin: -5px 4px 5px 4px;
Vertical-align:top;
text-align: center;
color:#d0c9c1;
text-align: center;
font-family: 'Lora', serif;
font-size: 9px;
letter-spacing: 1px;
text-shadow: 0px 0px 0 #4c4450;
font-weight:100;
line-height: 15px;
}
.text span, .mod_left span {
background:# ;
opacity: 1;
color:#c1c3d0;
text-align: center;
font-family: 'Lora', serif;
font-size: 10px;
height:30px;
letter-spacing: 1px;
text-shadow: 0px 0px 0 #4c4450;
font-weight:100;
width: 500px;
line-height: 12px;
}
#modwindow .block span2 {
background:# ;
opacity: 1;
color:#d0c9c1;
text-align: center;
font-family: 'Lora', serif;
font-size: 9px;
height:30px;
letter-spacing: 1px;
text-shadow: 0px 0px 0 #4c4450;
font-weight:100;
width: 500px;
}
.mod_left .text span a {
background:# ;
opacity: 1;
color:#b8b1c3;
text-align: center !important;
font-family: 'Playfair Display', serif;
font-size: 10px;
height:30px;
letter-spacing: 1px;
text-shadow: 0px 0px 0 #4c4450;
font-weight:100;
width: 500px;
}
.mod_right .box {
display:block;
width: 250px;
height: 430px;
background:/* url(https://forumstatic.ru/files/001b/12/12/92196.png?v=1)*/ #a5a5a6;
border: 4px;
border-style: solid;
border-color:#414163;
padding:10px;
margin: 15px 8px;
line-height: 1.5em;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
overflow: auto;
Vertical-align:top;
}
.mod_right .box span {
color:#2c2c41;
text-align:center;
font-family: 'Old Standard TT', serif;
font-size: 8px;
height:18px;
letter-spacing: 1px;
text-shadow: 0px 0px 0 #36333a;
font-weight:500;
margin-top: 4px;
}
#modwindow .spoiler-box {
width: 188px;
margin-top: 8px;
margin-left: 40px;
position: absolute;
left: 540px;
display:block;
z-index: 2;
color:#d0c9c1; }
#modwindow .spoiler-box > div {
font-family: 'Lora', serif;
text-transform: none;
font-style: normal;
padding: 7px;
font-size: 10px;
letter-spacing: 0.5px;
text-align: center;
/* background:#746e67 !important;*/
box-shadow: 0 0 5px #33374a inset;
border: 1px solid #41455b !important;
border-bottom: 1px solid #41455b !important;
text-shadow: 1px 1px 0 #4c4450;
background: #292d3e;
}
#modwindow .spoiler-box > div.visible {
background: #292d3e;
}
#modwindow.quote-box cite, #modwindow .code-box strong.legend, #modwindow .code-box strong.legend a, #modwindow.code-box strong.legend a:hover {
font-weight: 300;
color: #9a9da9;
}
#modwindow blockquote {
width: 185px !important;
background:/* url(https://forumstatic.ru/files/001b/12/12/92196.png?v=1)*/ #a5a5a6;
border: 3px;
border-style: solid;
border-color:#414163;
margin: 3px -2px;
line-height: 1.5em;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
overflow: auto;
height:400px;
Vertical-align:top;
}
</style>
<div id="modwindow"> <div class="mod_left"><h2> название песни (по желанию) </h2>
<center><img src="https://via.placeholder.com/200x120"> <img src="https://via.placeholder.com/200x120"></center>
<h1>ИМЯ ФАМИЛИЯ</h1>
<div class="text"><span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu luctus tellus. Vestibulum varius tristique elit. Nullam id vehicula velit. Duis eros lorem, rhoncus tempor convallis nec, accumsan eu lacus. Aenean et porta eros, in iaculis ante. Pellentesque venenatis convallis mi. Aenean mattis risus sed risus porta sagittis. Praesent fermentum lobortis lorem, consequat ultricies sem rhoncus non. Aliquam id euismod felis, vitae cursus velit. Duis dolor purus, luctus a rhoncus id, efficitur dictum enim. Pellentesque dictum mauris lorem, eu faucibus nunc dapibus vitae. In consectetur tincidunt eleifend. Pellentesque velit dui, euismod at hendrerit eget, dignissim vitae augue. Nam et dui et dolor euismod tempor mollis vel sem.
<br> </span></div>
<div class="block"><span>Род деятельности:<br> </span>
укажите род деятельности
</div>
<div class="block"><span>Семейное положение: <br> </span>
укажи семейное положение
</div>
<div class="text"><span>
ВАШ ОТВЕТ. ваша цитата (по желанию)
<br> </span></div>
</div>
<div class="spoiler-box"><div onclick="$(this).toggleClass('visible'); $(this).next().toggleClass('visible');" class="">ПЛАШКИ</div><blockquote class="">
<img src="https://via.placeholder.com/145x26" ><br>
<img src="https://via.placeholder.com/145x26" ><br>
<img src="https://via.placeholder.com/145x26" ><br>
<img src="https://via.placeholder.com/145x26" ><br>
<img src="https://via.placeholder.com/145x26" ><br>
<img src="https://via.placeholder.com/145x26" ><br>
<img src="https://via.placeholder.com/145x26" ><br>
</div>
</blockquote>
<div class="mod_right">
<div class="box">
<div class="ex">
подарки, награды
</div>
</div>
</div>
</div>
</div>
