
Újabb project szövegdobozokkal bővült a lindadesign kínálata :) Próbálok azért egyszerűbbeket létrehozni, de mégis mutatós kinézetű dobozokat. A mostaniak is megint nagyon szuperek lettek szerintem. A kiemelt képen mind a kettő látható, bár ebben a modulban csak az egyik kódja van benne. A másik project kódban annyi különbözik, hogy nem hosszúkás, hanem kerek a kép felül. A másik doboz kódját itt találjátok meg: Képes project szövegdoboz 21.

DIV kód
A kép mérete 392×75 pixel jelenleg.
<div class="project"><center><img class="alignleft" src="IDE JÖN A KÉP URL CÍME" width="392" height="75" /></center>
<center><b>A Year In The Life</b> / <u>Gilmore girls</u> / <b>Dátum:</b> 2016. november 25.</center>
<div class="projectinfo">IDE JÖN A TARTALMI RÉSZ</div>
<div class="project-links"><center><a href="LINK CÍME"><i class="fa fa-info"></i> INFOS</a> <a href="LINK CÍME"><i class="fa fa-camera"></i> PHOTOS</a> <a href="LINK CÍME"><i class="fa fa-imdb"></i> IMDB</a></center></div>
</div>
CSS kód
<style>
.project img { /* a kép kinézete és helyzete */
border: 1px solid #ddd;
box-shadow: 0px 0px 5px #f1f1f1;
padding:4px;
background: #ffffff;
opacity: 1;
margin-bottom: -30px; /* kép és alatta a tartalom közti táv */
}
.project {
margin:0 auto 15px;
padding:0;
width:400px; /* a doboz szélessége */
font-size: 11px;
font-family: Arial;
}
.project u { /* a középső adat kinézete */
background: #ACD3DD;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
color: #ffffff !important;
padding: 3px;
}
.project b { /* cím, dátum kinézete */
color: #000000;
}
.projectinfo { /* tartalom kinézete */
background: #f3f3f3;
font-family: Arial;
color: #3f3f3f;
text-align: justify;
line-height: 18px !important;
border-left: 10px solid #ACD3DD;
padding: 10px;
}
.project .project-links .fa { /* ikon kinézete */
margin-right:4px;
font-size:11px;
}
.project .project-links {
margin:5px 0 15px;
padding:0;
font-weight:700;
color:#fff;
text-align:center;
text-transform:uppercase;
width:auto;
}
.project .project-links a, .project .project-links a:visited { /* linkek kinézete */
display: inline-block;
margin:0;
padding:3px 0;
width:32%;
color: #ACD3DD !important;
background:#ffffff;
border: 1px solid #eeeeee;
}
.project .project-links a:hover {
background:#202020;
color:#ffffff;
text-decoration: none;
}</style>
Előző, következő cikk
Ez is egy olyan leírás, amiről már érkezett hozzám kérdés. Hogyan lehet megoldani, hogy a Youtube videók egy adott perctől kezdődjenek és ne a legelejéről? Biztos sokan tudják a választ, de olyan is akad, aki nincs ezzel tisztában. Kettőféle
Újabb project szövegdobozokkal bővült a lindadesign kínálata :) Próbálok azért egyszerűbbeket létrehozni, de mégis mutatós kinézetű dobozokat. A mostaniak is megint nagyon szuperek lettek szerintem. A kiemelt képen mind a kettő látható, bár ebben a modulban csak az egyik