Vježba - CSS prikaz u dva stupca

Vježba 2.2 - Cilj vježbe je naučiti oblikovati izgled web stranice pomoću css svojstava modela kutije.

Vježba 2.2

Vjezba 2.2: CSS - prikaz u dva stupca.zip

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

css-prikaz-u-dva-stupca.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>CSS prikaz u dva stupca</title>
  <style>
* {
  padding: 0;
  margin: 0;
}
body {
  float: left;
  width: 100%;  
  height: 100vh;
  background: linear-gradient(to left, #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 {

  background-color: hsla(14, 88%, 40%, .7);  
  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 {

  background-color: #1F4E79;  
  color: #F9E79F;
}
article + article {

  background-color: #ddd;  
}
article + article h2 {

  background-color: hsla(14, 88%, 40%, 0.3);  
}
article + article h3 {
  color: #1F4E79;
}
article + article img {
  background-color: #1F4E79;
}     
img {
  padding: 1px;
  background-color: #ddd;
  width: 100%;
}
p {

  color: tan;
  letter-spacing: 1px;
  text-shadow: 1px 1px #2E4053;
}
p > span {
  color: #ddd;
  text-shadow: none;
}
footer {
  margin: 20px;
  background-color: gray;
}

@media screen and (max-width: 1200px) {
  body {
    background: #ccc!important;
  }
  article {
    margin: 30px 10px;
  }
}
  </style>
</head>
<body>
  <h1>CSS prikaz u dva stupca</h1>
  <section>
    <article>
      <h2>Stupac 1</h2>
      <img src="slike/vatreni.jpg" alt="Vatreni" />
      <h3>Vatreni heroji!</h3>
    </article>
    <article>
      <h2>Stupac 2</h2>
      <img src="slike/hrvatska.png" alt="Hrvatska" />
      <h3>Moja domovina!</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.2.
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.
Radi ljepšeg prikaza na različitim širinama zaslona, možete koristiti uz vrijednosti u px i vrijednosti u postotcima %.
Za vodoravno poravnanje po sredini, koristite vrijednost auto.
Boje koje možete rabiti za obrub (engl. border) su: #555, #ddd, #1F4E79 i hsla(14, 88%, 40%, 1).
Spremite html dokument u mapu Vjezba 2, pod imenom css-prikaz-u-dva-stupca.html.
Otvorite web stranicu css-prikaz-u-dva-stupca.html u web pregledniku i provjerite radi li dobro i je li izgled web stranice istovjetan onom na slici 2.2.
Slika 2.2
Pogledajte izvorni kôd načinjenih web stranice (html dokumenta) u web pregledniku, korištenjem prečaca na tipkovnici Ctrl + U.