Cikkajánló
Több kérdést kaptam már arról, hogy meg lehet-e csinálni azt, hogy a címkék vesszővel vagy ponttal vagy valamivel el legyenek választva egymástól. Ehhez a G-Portáltól kértem segítséget, mert ha
Elég régen nem hoztam már menüstílusokat és project dobozokat, így ma mivel volt némi időm hoztam két-két darabot. Nekem nagyon tetszik mindegyik :) A két project doboz majdhogynem megegyezik
A mai napra végre sikeresen bekódoltam kettő darab G-portálra való blogos kinézetet. Előre már vannak készen kinézetek, amiket elképzelek, csak a bekódolásuk várat magára, mert nem mindig van rá
Emma Roberts G-Portálos téma Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák
Képes project szövegdoboz 16.

 

Ikon kódja

 

<script src="https://use.fontawesome.com/9f3339f954.js"></script>

 

Szövegdoboz kódja
A perjel helyére mennek a linkek. (Hivatalos, Imdb, Képek, stb-nél)

 

<div id="box">
<div class="projects"><img src="IDE JÖN A KÉP URL CÍME" />
<div class="info">
<h1>Taylor Swift</h1>
<i class="fa fa-user" aria-hidden="true"></i> <b>Karaktere: Lorem ipsum</b><br>
<i class="fa fa-calendar" aria-hidden="true"></i> <b>Évad: Lorem ipsum</b><br>
<i class="fa fa-television" aria-hidden="true"></i> <b>TV csatorna: Lorem ipsum</b><br>
IDE JÖN A SZÖVEG
<br>
<center><a class="project-link" href="/"><i class="fa fa-info-circle" aria-hidden="true"></i> IMDB</a> <a class="project-link" href="/" target="_blank"><i class="fa fa-check-circle" aria-hidden="true"></i> Hivatalos</a> <a class="project-link" href="/" target="_blank"><i class="fa fa-picture-o" aria-hidden="true"></i> Képek</a></center>
</div>
</div>
</div>

 

CSS kód

 

<style>
#box {
margin: 0px auto;
width: 350px;
}
.projects img {
padding:0px;
}
.projects .info h1 {
padding: 0 0 10px 0;
text-align: center;
color: #C26C45 !important;
background: transparent !important;
}
.projects .info {
width: 310px;
font-size: 12px;
line-height: 18px !important;
text-alig: justify;
background:#F8F8F8!important;
border: 1px solid #E6E3E3;
padding:10px;
padding-bottom: 10px;
position: relative;
margin-left: 10px;
margin-top: -100px;
}
.projects .info .fa, .projects .info .project-link .fa {
margin-right:4px;
font-size:11px !important;
color:#C26C45 !important;
font-style: normal !important;
}
a.project-link:link, a.project-link:visited { /* linkek a doboz alatt */
background: #FEEEE7 !important;
color: #995233 !important;
padding: 8px 0 8px 0;
margin: 1px;
font-family: Arial;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
border-bottom: 3px solid #EAAF84;
line-height: 10px;
display: inline-block;
width: 90px;
}
a.project-link:hover {
background: #E3E3E3 !important;
color: #C26C45 !important;
text-decoration: none;
border-bottom: 3px solid #5E5F61;
}
</style>

lindadesign Hozzászólások
1 024 megtekintés

Hozzászólások