Vježba - CSS prikaz u tri stupca

Vježba 2.3 - Cilj vježbe je primjeniti css svojstva modela kutije za oblikovanje izgleda web stranice.

Vježba 2.3

Vjezba 2.3: CSS - prikaz u tri stupca.zip

Preuzmite i raspakirajte .zip datoteku, pomoću gornje poveznice.
Mapu slike iz raspakirane datoteke prekopirajte u mapu Vjezba 2.
Preuzmite i spremite u mapu Vjezba 2 html datoteku:

css-prikaz-u-tri-stupca.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>CSS prikaz u tri stupca</title>
  <style>
* {
  padding: 0;
  margin: 0;
}
body {
  float: left;
  width: 100%;  
  height: 100vh;
  background: linear-gradient(to top, #1F4E79 0%, #1F4E79 50%, #ddd 50%, #ddd 100%);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 20px;
  text-align:center;    
}
h1 {

  color: #F9E79F;
  background-color: gray;
  font-weight: 100;
  text-shadow: 2px 2px #2E4053;
}
h2 {
  width: 50%;

  background-color: hsla(14, 88%, 40%, 0.3);  
  font-weight: 100;
  text-shadow: 2px 2px #2E4053;
}
h3 {

  font-weight: 100;
}
section {

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
article {

  color: #F9E79F;
  background-color: gray;
}
img {
  width: 100%;
}
p {

  color: tan;
  letter-spacing: 1px;
  text-shadow: 1px 1px #2E4053;
}
p > span {
  color: #333;
  text-shadow: none;
}
footer {

  background-color: #ddd;
}
  </style>
</head>
<body>
  <h1>CSS prikaz u tri stupca</h1>
  <section>
    <article>
      <h2>Stupac 1</h2>
      <img src="slike/img1.jpg" alt="Slika 1" />
      <h3>U mom kraju sad je proljeće</h3>
    </article>
    <article>
      <h2>Stupac 2</h2>
      <img src="slike/img2.jpg" alt="Slika 2" />
      <h3>Moja draga kuha najbolje</h3>
    </article>
    <article>
      <h2>Stupac 3</h2>
      <img src="slike/img3.jpg" alt="Slika 3" />
      <h3>Najljepše je kad si kraj mene</h3>
    </article>	
  </section>
  <footer>
    <p>Copyright © 2023. <span>Bartol plus</span>. Sva prava pridržana.</p>
  </footer></body>
</html>

Preuzeti html kôd ne smijete mijenjati! Radite po predlošku sa slike 2.3.
Izgled web stranice, treba oblikovati za punu visinu prozora na zaslonu! Za ostale visine nije ispravno prikazana podjela pozadine u dva vodoravna dijela!
Potrebno je vizualno oblikovati web stranicu, rabeći samo css svojstva za skupno dodjeljivanje vrijednosti modela kutije (engl. padding, border i margin) unutar postojećih selektora koji se već nalaze u <style> elementu.
Boje koje možete rabiti za obrub (engl. border) su: #555 i hsla(14, 88%, 40%, 1).
Spremite html dokument u mapu Vjezba 2, pod imenom css-prikaz-u-tri-stupca.html.
Otvorite web stranicu css-prikaz-u-tri-stupca.html u web pregledniku i provjerite radi li dobro i je li izgled web stranice istovjetan onom na slici 2.3.
Slika 2.3
Pogledajte izvorni kôd načinjenih web stranice (html dokumenta) u web pregledniku, korištenjem prečaca na tipkovnici Ctrl + U.