Cikkajánló
Új kategóriával bővült a galéria Vectoros grafika címmel. Amikor időm van, vagy kedvem akkor töltögetem fel a design kellékeket is a galériába, amik eddig az aranymeli.gp-n voltak elérhetőek. Persze
Kicsit azt hiszem színesre sikeredett az új kinézet. Most valahogy ilyen kedvem van. Ebből kifolyólag a következő design jóval letisztultabb lesz, mert sokáig nem tudom elnézni a túl csicsás
A napokban volt egy kevéske időm, így hoztam a listámról egy jó pár leírást és kódot. A listámon mindig van valami csak időm nem mindig van, hogy megosszam veletek.
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
Képes project szövegdoboz 13.

 

Ikon kódja

 

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

 

Szövegdoboz kódja

 

<div class="project1">
<div class="project1-navibar">
<center><a href="/"><i class="fa fa-photo" aria-hidden="true"></i> Galéria</a> <a href="/"><i class="fa fa-laptop" aria-hidden="true"></i> Hivatalos</a> <a href="/"><i class="fa fa-newspaper-o" aria-hidden="true"></i> Hírek</a> <a href="/"><i class="fa fa-twitter" aria-hidden="true"></i>Twitter</a></center>
</div>
<div class="project1-content"><img class="project1-icon" src="IDE JÖN AZ IKON URL CÍME" align="left"><span class="project1-title">Kit Harington</span><br><span class="project1-subtitle">Alcím, dátum vagy bármi helye</span>
<div class="project1-blockquote">TARTALOM HELYE</div>
</div>
</div>

 

CSS kód

 

<style>
div.project1 { /* a teljes doboz és háttere */
background: url("IDE JÖN A HÁTTÉRKÉP URL CÍME");
background-position: center;
background-repeat:no-repeat;
width: 378px;
height: 400px;
margin: 0px auto;
}
div.project1-content { /* ikon, cím, szöveg elhelyezkedése a háttéren */
position: relative;
left: 0;
top: 180px;
}
.project1-icon { /* ikon kép kinézete */
border: 4px solid #ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px;
padding: 0px;
margin: -76px 5px 0 6px;
}
.project1-title { /* cím kinézete */
font-family: Arial;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
color: #d3d3d3;
text-shadow: 1px 1px 3px #000000;
}
.project1-subtitle { /* alcím kinézete */
font-family: Arial;
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
color: #ffffff;
}
div.project1-blockquote { /* leírás kinézete */
text-align: justify;
background: rgba(44,72,94,0.7);
font-family: Arial;
font-weight: normal;
line-height: 16px !important;
font-size: 11px;
padding: 7px;
color: #f2f2f2;
}
/* ikonok felül kinézete a sornak */
div.project1-navibar {
background: #2C485E;
padding: 5px 0px 5px 0px;
}
.project1 .project1-navibar .fa {
margin-right:5px;
font-size:11px;
font-style: normal !important;
color:#fafafa !important;
}
.project1-navibar a:link,
.project1-navibar a:visited,
.project1-navibar a:active {
color: #ffffff!important;
font-size: 10px!important;
padding: 0px 6px 0px 6px!important;
font-family: Arial!important;
font-weight: bold!important;
-webkit-transition: opacity 0.4s linear!important;
-webkit-transition: all 0.4s ease-out!important;
-moz-transition: all 0.4s ease-out!important;
transition: all 0.4s ease-out!important;
text-decoration: none!important;
text-transform: uppercase!important;
}
.project1-navibar a:hover {
color: #C4D6E3!important;
background: transparent !important;
}
</style>

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

Hozzászólások