HTML i CSS predlošci

Jednom kad se počnete upoznavati sa CSS-om, sjajna je ideja vježbati odabir teme koja ima potpuno osnovni dizajn, na kojoj ćete unositi promjene.

Važno je razumjeti kako jednostavne promjene ponekad mogu drastično utjecati na izgled vaše stranice, a ponekad ne toliko.

U konačnici, vježbanje sa izmjenom HTML i CSS koda, će najbolje pomoći da vizualno vidite promjene koje unosite.

Stoga korištenjem Uređivača na ovoj stranici pokušajte eksperimentirati s nekoliko HTML i CSS predložaka

HTML predložak

<!DOCTYPE html>
<html lang="en">
<head>
<title>Moja stranica</title>
</head>
<body>

<div class="header">
  <h1>Moja stranica</h1>
  <p>Stranica koju sam kreirao.</p>
</div>

<div class="navbar">
  <a href="#">Poveznica</a>
  <a href="#">Poveznica</a>
  <a href="#">Poveznica</a>
  <a href="#" class="right">Poveznica</a>
</div>

<div class="row">
  <div class="side">
    <h2>O Meni</h2>
    <h5>Moja slika:</h5>
    <div class="fakeimg" style="height:200px;">Slika</div>
    <p>Neki obični tekst..</p>
    <h3>Još dodatnog teksta</h3>
    <p>Ovdje ću staviti još dodatnog teksta.</p>
    <div class="fakeimg" style="height:60px;">Slika</div><br>
    <div class="fakeimg" style="height:60px;">Slika</div><br>
    <div class="fakeimg" style="height:60px;">Slika</div>
  </div>
  <div class="main">
    <h2>VELIKI NASLOV</h2>
    <h5>Opis naslova</h5>
    <div class="fakeimg" style="height:200px;">Slika</div>
    <p>Još teksta..</p>
    <p>Dodatni tekst na mojoj stranici.</p>
    <br>
    <h2>Veliki naslov</h2>
    <h5>Opis naslova</h5>
    <div class="fakeimg" style="height:200px;">Slika</div>
    <p>Još teksta..</p>
    <p>Još dodatnog teksta.</p>
  </div>
</div>

<div class="footer">
  <h2>Podnožje</h2>
</div>

</body>
</html>

CSS predložak

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

/* Stilizirajte zaglavlje */
.header {
  padding: 80px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* Povećajte veličinu fonta elementa h1 */
.header h1 {
  font-size: 40px;
}

/* Stilizirajte gornju navigacijsku traku */
.navbar {
  overflow: hidden;
  background-color: #333;
}

/* Stilizirajte veze navigacijske trake */
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

/* Desno poravnata poveznica*/
.navbar a.right {
  float: right;
}

/* Promjena boje kada mišom pređeš preko elementa*/
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Spremnik stupca */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* Napravite dva nejednaka stupca koji se nalaze jedan do drugog */
/* Bočna traka/lijevi stupac */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Glavni stupac */
.main {   
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Lažna slika, samo za ovaj primjer */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Podnožje*/
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Responzivni izgled - kada je zaslon manji od 700px širok, neka dva stupca budu naslagana jedan na drugi umjesto jedan pored drugog */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Responzivni izgled - kada je zaslon manji od 400 px širok, neka se navigacijske veze slažu jedna na drugu umjesto jedna pored druge */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width:100%;
  }
}

Nastavi tečaj – Osnove JavaScripta

Related Posts

Osnove CSS-aOsnove CSS-a

HTML nam omogućuje mnoge mogućnosti, kao što su ubacivanje naslova, stiliziranog teksta, videozapisa i fotografija, no iako se i korištenjem samog HTML-a stranica može stilizirati, najčešće se za stil stranice

READ MOREREAD MORE

CSS selektoriCSS selektori

Svaki od elemenata koji je dodan na web stanicu može biti oblikovan pomoću CSS-a. CSS selektor služi kao veza između HTML elementa i njegovog CSS oblikovanja (kao što je boja,

READ MOREREAD MORE