Magyarázat:

#howineubd-nél tudod kicserélni a képet

rtoinas: project felirat fenn vörös csíkkal

ajiebd: dátum tulajdonságai szürke csíkkal

youesuebd: a szöveg, van külön része a linkekre és a bekezdés első betű formázására is

A többi átírását haladóknak ajánlom csak 

Kód:

<center>

<div class="rtoinas">

Project</div>

<div class="aokadined">

<div class="ajieibd">

2016 06. 10.</div>

<div class="youwsuebd">

<p>

Pársoros leírás arról, hogy milyen filmről /sorozatról/ szerepről van szó</p>

</div>

<div class="youwsuebd">

<a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a></div>

</div>

<div class="aokadined">

<div id="howineubd">

<div class="plaonsed">

&nbsp;</div>

<div class="lpmbuhaued">

karakter neve</div>

</div>

</div>

<style type="text/css">

.rtoinas {width: 200px; padding: 0px; background-color: transaprent; line-height: 100%;

text-shadow: 1px 0px 1px #000; font-size: 30px; color: #fff; text-align: center; text-transform: uppercase;

font-family: raleway; font-weight: bold; font-style: italic; letter-spacing: -1px; border-bottom: 3px solid #701C1C;}

.aokadined {background-color: #f4f4f4; padding: 5px; width: 290px; border-bottom: 1px dashed #ddd;  }

 

.ajieibd {width: 260px; background-color: transparent; border-top:1px solid #ddd; padding:3px; font-family:'Arimo'; font-size:8px; text-transform:uppercase; letter-spacing:3px; font-weight:900; color:#000!important;}

 

.youwsuebd { padding-top: 0px; padding-left:25px; padding-right: 25px; text-align: justify; line-height: 80%; letter-spacing: 0px; overflow: hidden; font-size: 12px; color: #941F1F; line-height:17px; font-family: 'Arimo'; font-weight:500; 

}

.youwsuebd a:link,.youwsuebd a:visited,.youwsuebd a:active {letter-spacing:3px; text-decoration:none; font-size:8px!important; font-weight:900!important; text-transform:uppercase!important; color:#000!important; padding:4px; background:#ddd; }

.youwsuebd a:hover {color:#000!important; background:#C7C7C7;}

.youwsuebd p:first-letter {background:#701C1C; padding:8px; float: left; display: block; margin: 3px; color: #eee; font-weight: bold; text-transform: uppercase; font-size: 30px; text-shadow: 2px 2px 0px #000; -webkit-box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.75);-moz-box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.75);box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.75);}

.apleidsuch p:first-letter {float: left; display: block; margin: 20px; color: #7B9971; font-weight: bold; text-transform: uppercase; font-size: 70px; text-shadow: 1px 1px 1px #000; }

#howineubd {width: 250px; height: 105px; border: 5px solid #fff; background-image: url(IDE ÍRD A KÉPED URL CÍMÉT); overflow: hidden; position: relative;  }

#howineubd .plaonsed {width: 250px; height: 105px; background-color: #941F1F; opacity: .5; position: absolute; top: -105px; transform: all .3s ease-in-out; 

-o-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out; }

#howineubd:hover .plaonsed {width:250px; height: 105px; background-color: #941F1F; opacity: .6; top: 0px; transition: all 1s ease-in-out; 

-o-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out; }

#howineubd .lpmbuhaued {position: absolute; top: 40px;  opacity: 0; width: 300px; height: 20px; text-shadow: 1px 0px 1px #000; font-size: 20px; color: #fff; text-align: center; text-transform: uppercase;

font-family: raleway; font-weight: bold; font-style: italic; letter-spacing: -1px;  }

#howineubd:hover .lpmbuhaued {opacity: 1; transition: .3s .3s ease-in-out;  -o-transition: .3s .3s ease-in-out; -ms-transition: .3s .3s ease-in-out; 

-moz-transition: .3s .3s ease-in-out; -webkit-transition: .3s .3s ease-in-out;  }

 

 

 

#plaunclied {width: 148px; height: 105px; border: 5px solid #fff; background-image: url(xxx); overflow: hidden; position: relative; }

.monied {padding: 15px; width: 240px;  height: 190px; }

#plaunclied .kainds {width: 148px; height: 105px; background-color: #941F1F; opacity: .5; position: absolute; top: -105px; transform: all .3s ease-in-out; 

-o-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out; }

#plaunclied:hover .kainds {width: 148px; height: 105px; background-color: #941F1F; opacity: .6; top: 0px; transition: all 1s ease-in-out; 

-o-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out; }

#plaunclied .feihasihd {position: absolute; top: 40px;  opacity: 0; width: 148px; height: 20px; text-shadow: 1px 0px 1px #000; font-size: 20px; color: #fff; text-align: center; text-transform: uppercase;

font-family: raleway; font-weight: bold; font-style: italic; letter-spacing: -1px;  }

#plaunclied:hover .feihasihd {opacity: 1; transition: .3s .3s ease-in-out;  -o-transition: .3s .3s ease-in-out; -ms-transition: .3s .3s ease-in-out; 

-moz-transition: .3s .3s ease-in-out; -webkit-transition: .3s .3s ease-in-out;  }

 

 

 

.apleidsuch {padding-right: 5px; width: 355px; height: 190px; overflow: auto; text-transform: lowercase; color: #000; line-height: 95%; text-align: justify; font-size: 10px;

font-family: calibri; background:#eee;} 

 

.apleidsuch::-webkit-scrollbar { width: 7px; }

.apleidsuch::-webkit-scrollbar-track { background-clip: content-box; background-color: #941F1F; border: 3px solid transparent; }

.apleidsuch::-webkit-scrollbar-thumb { background-color: #941F1F; } </style>

</center>

Font:

<link href='https://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>