Cikkajánló
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
Sziasztok! Kicsit megkésve, de most hozom a Facebook-os szavazás egy darab közönségnyertesét és a három darab oldalt, akik sorsolás által nyertek mindannyian 50-50-50 kreditet :) A fő végeredményt a
Kellemes estét :) Hoztam mára még négyféle project szövegdobozt és kilencféle elit csere ikon effektet. Az összes egyesével megnézhető az alábbi linkeken. Válogassatok :) A project dobozoknál és az
Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló Apró tippek weboldal szerkesztőknek
Oldal info szövegdoboz 2.

 

Oldal info doboz kódja

 

<div class="infobox-doboz">
<div class="infobox">
<div class="sorok">
<div class="lista"><i class="fa fa-info-circle" aria-hidden="true"></i> Lorem ipsum dolor</div>
</div>
<div class="sorok">
<div class="lista"><i class="fa fa-info-circle" aria-hidden="true"></i> Lorem ipsum dolor</div>
</div>
<div class="sorok">
<div class="lista"><i class="fa fa-info-circle" aria-hidden="true"></i> Lorem ipsum dolor</div>
</div>
<div class="sorok">
<div class="lista"><i class="fa fa-info-circle" aria-hidden="true"></i> Lorem ipsum dolor</div>
</div>
<div class="sorok">
<div class="lista"><i class="fa fa-info-circle" aria-hidden="true"></i> Lorem ipsum dolor</div>
</div>
</div>
</div>
<div class="info">
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>

 

CSS kód

 

/* oldal info doboz */
.infobox-doboz {
display: table;
width: 100%;
border-collapse: separate;
border-spacing: 3px;
}
.sorok {
display: table-row;
}
.lista .fa { /* ikon kinézete */
font-size: 14px !important;
color: #4A6A9B !important;
font-style: normal !important;
}
.lista { /* felsorolás kinézete */
background: #161616;
display: table-cell;
padding: 6px 10px;
}
.info { /* leírás kinézete */
font-size: 13px;
padding: 6px;
}
.infobox {
display: table-row-group;
}

lindadesign Hozzászólások
912 megtekintés

Hozzászólások