fbpx

Uređivanje logo i hero područja

Share on facebook
Share on google
Share on twitter
Share on linkedin
Letibo web dizajn - izrada internet stranica iz Našica.
- IMATE DOBAR PROIZVOD, ALI NITKO NE ZNA ZA NJEGA ?
- IMATE DUGU TRADICIJU I ŽELITE SE TIME POHVALITI ?
- ILI STE PAK NOVA TVRTKA KOJA ŽELI NEŠTO JEDNOSTAVNO ALI KREATIVNO ?
Mi ne izrađujemo samo vaše web stranice, mi izrađujemo vaš uspjeh.
uređivanje logo-a

Prije svega postaviti ću html kod kako bi se imao uvid u ono što uređujemo css-om. 

<div id=”page”>

<header>
<a class=”logo” title=”everyday things” href=”#”>everyday things</a>
<div class=”hero”>
<h1>Add interest of with natural textures</h1>
<a class=”btn” title=”Get advice from top designers” href=”#”>Get advice from top designers</a>
</div><!–/hero–>
</header>

<section class=”main”>

Dakle trebamo urediti unutar head taga logo i hero područje. 

CSS ZA LOGO

header a.logo {
position: absolute;
display: block; width: 160px; height: 66px;
background: url(../images/logo.svg) no-repeat 0 0; background-size: contain;
background-repeat: no-repeat;
top: 15px; left: 20px;
}

Postavili smo vrijednost background-size na vrijednost contain zato što želimo da pozadinska grafika odgovara visini i širini. A pošto smo visinu i širinu postavili  proporcionalnim na temelju veličine logotipa SVG koji je 160  X 66  ovo će proporcionalno razmjerima i ispuniti cijeli element logotipom. Ako sada pogledamo u pregledniku dobijemo ovo:

uređivanje logo-a

Vidimo da se naslov kao i a href element povukao preko loga-a, zbog njegova position: absolute  css svojstva. 

To ćemo riješiti tako da odemo u <hedaer></header> područje i dodamo span element naslovu loga.  

<header>
<a class=”logo” title=”everyday things” href=”#”><span>everyday things</span></a>
<div class=”hero”>

Sada kada imamo span element vratimo se u css i tamo dodamo novo pravilo: 

header a.logo span {display: none;}

CSS ZA HEADER LOGO I HERO GLASI:

header a.logo {
position: absolute;
display: block; width: 160px; height: 66px;
background: url(../images/logo.svg) no-repeat 0 0; background-size: contain;
background-repeat: no-repeat;
top: 15px; left: 20px;
}
header a.logo span {display: none;}

header div.hero {
position: absolute;
width: 42%;
left: 55%;
top: 130px;
}
header div.hero h1{
line-height: 1em;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 0px;
color: rgba(255,255,255,1);
}

admin

admin

Leave a Replay

ADRESA:

Letibo j.d.o.o. za računalne usluge
– izrada web stranica –
Franje Kuhača 4
31500 Našice
Mob: 091/923-9837
OIB: 51140756305
IBAN: HR4224020061100671367

ZATRAŽITE BESPOVRATNA SREDSTVA ZA IZRADU VAŠE WEB STRANICE

Ministarstvo gospodarstva poduzetništva i obrta objavilo je javni Poziv za bespovratna sredstva za unaprjeđenje ili izradu web stranica te izradu web shopa.
prilika !

Zadnje objave