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:
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);
}
