Код:
<!--HTML--><link href="https://fonts.googleapis.com/css?family=Crimson+Text|Montserrat|Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<style>
#phantomhive-thread {
position: relative;
width: 342px;
height: auto;
padding: 10px;
background-color: #;
background-image: url("<img src="http://s2.uplds.ru/70gka.png">");
border: 1px solid #ccc;
}
.cpbg { position: relative; margin: 0px; width: 340px; height: auto; background-color: #ddd; border: 1px solid #ccc; }
.cp-icons { position: absolute top: -8px; left: 8px; margin: auto; height: auto; width: 350px; }
.cp-icons p {
display: block;
float: left;
width: 104px;
height: 80px;
object-fit: cover;
z-index: 3;
overflow: hidden;
background-image: url(http://placehold.it/100x100);
background-blend-mode: multiply!important;
background-position: center;
filter: brightness(140%);
margin-right: 3px;
border: 1px solid #aaa;
}
.cp-icon1 { background-color: #5f337e!important; background-image: url( IMAGE URL )!important; }
.cp-icon2 { background-color: #733F7D!important; background-image: url( IMAGE URL )!important; }
.cp-icon3 { background-color: #5e2482!important; background-image: url( IMAGE URL )!important; }
.cp-h1 {
position: relative;
top: 85px;
left: -6px;
display: block;
width: 352px;
height: 8px;
padding: 5px 0px;
color: #733F7D;
font-family: Crimson Text;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
}
.cp-h1:before, .cp-h1:after { content: ""; width: 61px; height: 1px; background-color: #3E174C; display: inline-block; vertical-align: 20%; margin: 0px 5px; opacity: 0.4;}
.cp-text {
margin-top: 100px;
margin-bottom: 15px;
width: 300px;
height: auto;
color: #444;
font-size: 8px;
font-family: Poppins;
text-align: justify;
letter-spacing: 1px;
line-height: 13px;
}
.cp-text i, .cp-text b, .cp-text u, .cp-text s { font-family: Crimson Text; color: #6a0b7c; font-size: 11px; }
.cp-links { position: absolute; float: left; top: 127; left: 140px; z-index: 8; }
.cp-link a { display: block; float: left; margin-right: 30px; height: 8px; width: 8px; background-color: none; border-radius: 20px; }
.cp-link i { color: #733F7D; font-size: 6px; }
#phantomhive-thread blockquote {
position: relative;
margin: 0px;
width: 300px;
height: auto;
background-color: #ddd;
border: 1px solid #ccc;
margin-top: 10px;
padding: 20px;
color: #444;
font-size: 8px;
font-family: Poppins;
text-align: justify;
letter-spacing: 1px;
line-height: 13px;
}
#phantomhive-thread blockquote .fa-quote-left { display: inline-block; font-size: 16px; margin-right: 4px; color: #733F7D; }
</style>
<center><div id="phantomhive-thread">
<div class="cp-links"><div class="cp-link">
<a class="1"><i class="fa fa-certificate" aria-hidden="true"></i></a>
<a class="2"><i class="fa fa-certificate" aria-hidden="true"></i></a>
<a class="3"><i class="fa fa-certificate" aria-hidden="true"></i></a>
</div></div>
<div class="cpbg">
<div class="cp-icons"><p class="cp-icon1"></p><p class="cp-icon2"></p><p class="cp-icon3"></p></div>
<h1 class="cp-h1">HEADER</h1>
<div class="cp-text">
TEXT GOES HERE
</div>
</div>
<blockquote><i class="fa fa-quote-left" aria-hidden="true"></i>
QUOTE
</blockquote>
</div><span style="font-size:6px; color: #aaa !important; letter-spacing: 1px; font-family: Montserrat; margin-left: 300PX;">THANKS <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=19921" style="color: #a83bbf; font-weight: bold;">SYL ❤</a></span></center>
















657796379
Shvepskeks




165
210
45 














