main.css - NASLOVNA STRANA STVARANJE IZGLEDA
body{
}
.gornje_zaglavlje{
width:100%;
height:400px;
background-image: url("../images/pozadina.png");
background-size: contain;
}
.donje_zaglavlje{
width:100%;
height:300px;
background:#aaaaff;
color:#fff;
}
.sadrzaj{
width:100%;
height: auto;
background:#ffffff;
}
.logo_primeri img{
width:32%;
height:28vw;
background-size: contain;
padding:4vw;
}
.logo_primeri{
padding-top:20px;
text-align:center;
}
.traka{
background: #dd0022;
background-image: linear-gradient(to right, #dd0022 , #ffaaaa);
opacity:0.9;
color: white;
font-family:"Roboto Tachoma";
font-size:1.5vw;
width:100%;
height:15vw;
text-align:center;
}
.polje{
width:30%;
height:100%;
}
.linkovi{
text-align:center;
}
.linkovi a{
margin:15px;
color:#fff;
font-size:1.2vw;
font-weight:bold;
}
nav.icon{
width:32px;
height:32px;
}
body{
}
.gornje_zaglavlje{
width:100%;
height:400px;
background-image: url("../images/pozadina.png");
background-size: contain;
}
.donje_zaglavlje{
width:100%;
height:300px;
background:#aaaaff;
color:#fff;
}
.sadrzaj{
width:100%;
height: auto;
background:#ffffff;
}
.logo_primeri img{
width:32%;
height:28vw;
background-size: contain;
padding:4vw;
}
.logo_primeri{
padding-top:20px;
text-align:center;
}
.traka{
background: #dd0022;
background-image: linear-gradient(to right, #dd0022 , #ffaaaa);
opacity:0.9;
color: white;
font-family:"Roboto Tachoma";
font-size:1.5vw;
width:100%;
height:15vw;
text-align:center;
}
.polje{
width:30%;
height:100%;
}
.linkovi{
text-align:center;
}
.linkovi a{
margin:15px;
color:#fff;
font-size:1.2vw;
font-weight:bold;
}
nav.icon{
width:32px;
height:32px;
}
Objašnjenje CSS-a
Ovaj CSS kod definiše stilove za različite elemente na početnoj stranici web sajta. Evo detaljnog objašnjenja svakog segmenta koda:
- body:
- Trenutno, telo stranice (body) nema definisane stilove. Stilovi za telo obično sadrže osnovne atribute kao što su fontovi, margine i boje pozadine, ali ovde su izostavljeni.
- .header:
- Element sa klasom header zauzima celu širinu stranice (width:100%) i visinu od 400 piksela.
- Pozadina header-a je slika (background-image: url("../images/pozadina.png")), sa podešenom veličinom koja se prilagođava u potpunosti (background-size: contain), zadržavajući proporcije slike.
- .footer:
- footer takođe zauzima celu širinu stranice i ima visinu od 300 piksela.
- Pozadina footer-a je jednobojna (background:#aaaaff), svetlo plava nijansa, dok je tekst bele boje (color:#fff).
- .content:
- content je glavni deo stranice, sa širinom od 100% i automatskom visinom, što znači da se visina prilagođava sadržaju.
- Pozadina content-a je bela (background:#ffffff).
- .logo_examples img:
- Stilovi za slike u okviru .logo_examples uključuju širinu od 32% i visinu određenu pomoću jedinice vw (view width), što je 28% širine ekrana.
- Slike imaju background-size: contain, što znači da će se slike prilagoditi kako bi stale u okvir bez izobličavanja.
- Tu je i padding od 4% širine ekrana (padding:4vw), koji obezbeđuje razmak oko slika.
- .logo_example:
- Ovaj stil primenjuje padding od 20 piksela na vrh (padding-top:20px) i centrira sadržaj (text-align:center).
- .ribbon:
- ribbon je stilizovana traka sa gradijentnom pozadinom koja se proteže od tamno crvene (#dd0022) do svetlije nijanse roze (#ffaaaa).
- Traka ima transparentnost od 90% (opacity:0.9), beli tekst (color: white), i koristi font "Roboto Tachoma" sa veličinom od 1.5% širine ekrana (font-size:1.5vw).
- Širina je 100%, a visina 15% širine ekrana (height:15vw), dok je tekst centriran (text-align:center).
- .field:
- field element zauzima 30% širine stranice (width:30%) i ima visinu koja pokriva celu visinu roditeljskog elementa (height:100%).
- .links:
- Ovaj stil centrira sve linkove (text-align:center).
- .links a:
- Linkovi unutar .links imaju marginu od 15 piksela (margin:15px), bele su boje (color:#fff), sa fontom veličine 1.2% širine ekrana (font-size:1.2vw) i podebljanim tekstom (font-weight:bold).
- nav.icon:
- Ikone unutar nav elementa imaju fiksiranu veličinu od 32x32 piksela.