Код:
<!--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>