Készítettem egy új projektdobozt, amiben az a különleges, hogy most .gif képet tettem bele, mert így szerintem nem olyan sablonos. Kicsit így különlegesebb lehet a munkálatok modul. De azért nem kell nagy és sok .gif-et alkalmazni, mert attól lassabban tölt be az oldal, de egy-kettő bőven belefér :) A kódot a demó alatt találjátok. Ha valami nem lenne egyértelmű kérdezzetek nyugodtan.

Gilmore girls
Amerikai sorozat | 42 perces
Bemutató: 2000. október 5.

► galéria
► hírek
► hivatalos

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.

DIV kód

 
<div class="projektdoboz">
<div class="cim">
<b>Gilmore girls</b>
<i>Amerikai sorozat | 42 perces</i>
Bemutató: 2000. október 5.
</div>
<div class="kep"><img src="IDE JÖN A KÉP URL CÍME" style="outline: 1px solid #ffffff; outline-offset: -5px;"></div>
<div class="linkek">
<a href="/" target="new">► galéria</a>
<a href="/" target="new">► hírek</a>
<a href="/" target="new">► hivatalos</a>
</div>
<div class="leiras">
IDE JÖN A TARTALMI RÉSZ
</div>
</div>
 

CSS kód

 
<style>
.projektdoboz {
font-size: 12px;
width: 400px;
line-height: 17px!important;
margin: 0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: table; /* fix, ne módosítsd */
}
.cim {
color: #ffffff!important;
margin: 160px 0 0 20px;
position: absolute;
}
.cim b {
color: #ffffff!important;
font-size: 18px;
}
.cim i {
color: #ffffff!important;
font-weight: bold;
}
.kep {
width: 100%;
height: auto;
}
.linkek {
width: 30%;
float: left;
display: flex;
justify-content: center;
flex-direction: column;
}
.linkek a {
padding: 10px 5px;
background: #f0f0f0;
width: 100%;
margin-bottom: 5px;
}
.leiras {
padding: 3px 0 0 10px;
width: 70%;
float: right;
}
</style>