Magyarázat:

Kép piros hatásának megváltoztatása: .reggie1-ben a background-color színét változtasd meg ha más színt szeretnél, ha sima képet állítsd a blend-mode-ot normal-ra multiplyról. 

XXX text fejlécet a .ronnie1-ben tudod megváltoztatni 

A tartalomhoz beírt hosszú szöveget formázni a .ronnie2-nél tudod

Az Emily alatti szöveget formázni a .reggie2 p: után tudod megváltoztatni. 

Font:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" ,300,300italic,400italic,700italic'="" rel="stylesheet" type="text/css">

Kódja:

<div id="kray">

<div class="reggie">

<div class="reggie1" style="background-image: url(HÁTTÉRKÉPED URL CÍME)">

&nbsp;</div>

<div class="reggie2">

<b><font style="color: #cf655b">E</font>mily</b>

<p>

I watch the sun fall down to kill the day, Another part of me just went up in flames. Then you explode in my head, And now you're all over me.</p>

</div>

</div>

<div class="ronnie">

<div class="ronnie2">

A karaktered története, személyisége és tulajdonságai.</div>

<div class="ronnie1">

XXX TEXT</div>

</div>

</div>

 

<style type="text/css">

#kray {height: 300px; width: 500px; border: 10px solid #fcfcfc; position: relative; margin: auto; background: white; box-shadow: 0 0 10px rgba(0,0,0,0.3)}

.reggie {height: 300px; width: 200px; position: absolute; left: 0; top: 0; background: #1D1D1D; overflow: hidden}

.reggie1 {height: 210px; width: 200px; position: absolute; left: 0; top: 0; background-color: #cf655b; background-blend-mode: multiply; background-size: cover; background-repeat: no-repeat}

.reggie2 {height: 86px; width: 196px; position: absolute; bottom: 0; border: 2px solid transparent; text-align: center}

.reggie2 b {font-family: roboto condensed; text-align: center; font-size: 57px; text-transform: uppercase; color: #cbcfc8!important; letter-spacing: 0px; line-height: 52px;background:transparent!important;}

.reggie2 p {font-family: calibri; text-transform: uppercase; line-height: 10px; color: #cbcfc8; margin-top: -8px; font-size: 8px; line-height: 8px; text-align: justify; padding: 5px; letter-spacing: 1px; }

.ronnie {height: 300px; width: 300px; position: absolute; right: 0; }

.ronnie1 {height: 30px; width: 300px; line-height: 30px; font-family: roboto condensed; text-transform: uppercase; font-weight: 700; background: #1D1D1D; color: #cf655b; text-align: center; font-size: 12px; position: absolute; top: 0}

.ronnie2 {height: 250px; width: 280px; border-color: white; border-style: solid; border-width: 10px 5px 10px 10px; padding-right: 5px; position: absolute; bottom: 0; font-family: calibri; font-size: 11px; line-height: 11px; text-align: justify; overflow: auto; color: 1d1d1d}

.ronnie2::-webkit-scrollbar {width: 2px}

.ronnie2::-webkit-scrollbar-track {background: white}

.ronnie2::-webkit-scrollbar-thumb {background: #cbcfc8}

.ronnie2 b {font-family: roboto condensed; color: #cf655b; text-transform: uppercase; font-size: 12px; letter-spacing: -0.2px}</style>

<p>