09. ponavljanje

Objasni mi box model

Cemu sluzi property box-sizing?

Kolika ce biti sirina ovog diva?

div {
  width: 200px;
  padding: 20px;
}

Zadatak 1

1. Odaberi jednu sliku

https://www.pexels.com/search/texture/

2. Stavi ju kao bg image u div

3. Neka se raširi po cijelom divu

4. Slika se treba pokazati samo jednom

5. Div treba biti 500px sirok i visok

6. Slika treba biti centrirana

Quiz

https://quizizz.com/admin/quiz/start_new/62d668216377f1001ee8ae34

Zadatak 2

1. dodaj jedan h1 element

2. neka samo taj h1 element ima font family Open Sans

3. Nadi Open Sans family na google fonts

Zadatak 3

1. Napravi 4 div elementa

2. Neka budu visoki i siroki 100px

3. Svaki neparni div treba biti zelen

4. Svaki parni div treba biti crven

Zadatak 4

1. Napravi section element

2. Dodaj mu aside element

3. Unutar aside elementa dodaj tri paragrafa

4. Oboji sve paragrafe koji su ugnijezdeni u section u zeleno

5. Omotaj jednu rijec u paragrafu u span

6. Selektiraj span koji je direktan child od paragrafa i stavi mu font na 30px

Zadatak 5

Sto je pogresno u ovom kodu?

<div id="the best id ever"></div>

Sto je pogresno u ovom kodu?

<div id="one">
  <div id="one">
    <p id="one">
      Some cool text
    </p>
  </div>
</div>

Sto je pogresno u ovom kodu?

<div class="green-background" class="purple-background">
  
</div>

Zadatak 6

Selektiraj treći anchor

<ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Select me!</a></li>
</ul>

Selektiraj treći anchor koji je u ul listi

<ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Select me!</a></li>
</ul>

<ol>
 <li><a href="#">One</a></li>
 <li><a href="#">Two</a></li>
 <li><a href="#">Three</a></li>
</ol>

Selektiraj zadnji anchor koji je u listi u footeru

<section>
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
  </ul>

  <ol>
    <li>
      <a href="#">One</a>
	  <a href="#">Two</a>
      <a href="#">Last</a>
    </li>
  </ol>
</section>

<aside>
 <ol>
    <li>
      <a href="#">One</a>
	  <a href="#">Two</a>
      <a href="#">Last</a>
    </li>
  </ol>
</aside>

<footer>
 <ol>
    <li>
      <a href="#">One</a>
    </li>
    <li>
      <a href="#">two</a>
    </li>  
    <li>
      <a href="#">three</a>
    </li>
  </ol>
</footer>

U istom kodu selektiraj footer koji je direktna sestra od <aside>

Zadatak 7

<div>
  Some cool div
</div>

<div>
  Some really cool div
</div>

Postavi dva diva jedan pored drugog

Quiz

https://quizizz.com/admin/quiz/62d66b9507915e001db873af/css-selectors

Zadatak 8

Koja je vrijednost #292929 u hsla?

koristi developer tools

Zadatak 9

Što je CSS reset?

Zadatak 10

1. Napravi navigaciju s tri linka

2. Linkovi trebaju biti jedni pored drugog

3. Oboji treci link u plavo koristeći class

Kako vjezbati CSS?