Cikkajánló
Készítettem pihenésképpen egy teljesen egyszerű G-Portálos CSS kódot. Semmi csicsa nincsen benne, sem színkavalkád :) Tök egyszerű, letisztult téma. Fejléc adható hozzá, ha úgy jobban tetszik majd. :) Innen
Megrendezésre kerül A tél oldala honlapverseny itt az oldalon. Rengeteg kredit és nyeremény vár rád és az oldaladra :) Összes kredit nyeremény ismét 2.000 kredit. Nem csak a három
Régebben többen kérdeztétek, hogyan lehet megoldani azt, hogy a szöveg nem, de a képek vagy videók viszont végigérnek a modulban. Kicsit összetett a megvalósítása, de ha értitek a CSS
Prémium téma | Ellie Goulding G-Portálos téma WordPress | Bejegyzés nem jelenik meg a főoldalon Gal Gadot G-Portálos téma Emilia Clarke G-Portálos téma Cole Sprouse G-Portálos téma
2017. szeptember. 07.
Képes project szövegdoboz 21.

Ú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 kerek, hanem hosszúkás a kép felül. A másik doboz kódját itt találjátok meg: Képes project szövegdoboz 22.

 


Studio Album 2015 / Confident / Dátum: 2015. október 16.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

DIV kód
A kerek kép bármekkora pixelű lehet, és nem kell kerekre megcsinálni, mert a kód lekerekíti maga. Annyi, hogy négyzet alakú legyen a kép, mert különben nem kerek lesz a dobozban a fotó.

 

<div class="project">
<center><img class="alignleft" src="IDE JÖN A KÉP URL CÍME" width="80" /></center>
<center><b>Studio Album 2015</b> / <u>Confident</u> / <b>Dátum:</b> 2015. október 16.</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-shopping-cart"></i> BUY</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;
-webkit-border-radius: 900px;
-moz-border-radius: 900px;
border-radius: 900px;
margin-bottom: -25px; /* kép és alatta a tartalom közti táv */
}
.project {
margin:0 auto;
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>

Kapcsolódó bejegyzések

lindadesign
103 megtekintés

Előző, következő cikk

Képes project szövegdoboz 22.

Ú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

Új szavazás az oldalsávban

Új szavazást készítettem, amit már ki is tettem az oldalsávba de itt ebben a modulban is lehet szavazni. Azért írok róla külön bejegyzést is, mert nagyon kíváncsi vagyok a véleményetekre ezzel kapcsolatban, hogy ki melyik szolgáltatót vagy szerkesztőt, vagy

 

Hozzászólások