Cikkajánló
Készítettem egy új G-Portálos kinézetet. Nagyon szeretem az Univerzumos képeket, így most egy ilyen kinézet született. A téma átalakítható bárhogyan, de mivel az alap kód tőlem van, így ha
Sziasztok :) A mai frissítésem kettő darab G-Portálos teljes kinézet kódolással és részletes leírással együtt. Az egyik témán Selena Gomez, a másikon pedig Emilia Clarke van. A témákat innen
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
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
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
982 megtekintés

Hozzászólások