Web programiranje → HTML, CSS i JavaScript → Projekat Logo kreator: naslovna strana (HTML i Bootstrap 5)

Projekat Logo kreator: naslovna strana (HTML i Bootstrap 5)

Lekcija 14 od 17 · HTML, CSS i JavaScript

Po skici iz prethodne lekcije pravimo naslovnu stranu deo po deo: meni, glavni deo sa formom, traku sa koracima, galeriju primera i podnožje. Strukturu i raspored daje Bootstrap 5, a izgled po kome je sajt prepoznatljiv dodajemo u sledećoj lekciji.

Pre nego što počneš: potrebno predznanje – plan projekta, Bootstrap komponente.
Kako da učiš: zadatke na kraju prvo uradi sam/a u svom editoru; uputstvo i rešenje otvori tek posle toga. Svaki primer ima kod i živi rezultat ispod njega; kod prekucaj u svoj fajl i menjaj ga.

2. Meni: od čistog HTML-a do Bootstrap-a

Meni je lista linkova. Samo sa HTML-om izgleda kao obična lista, a sa nekoliko CSS pravila postaje traka:

Navigacioni meni bez CSS stilova (čist HTML prikaz)
Slika 1: Meni samo u HTML-u – bez stilova i rasporeda.
nav { background-color: #333; padding: 10px; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav li { display: inline-block; margin-right: 15px; }
nav a { color: white; text-decoration: none; font-weight: bold; }
nav a:hover { color: #4CAF50; }
Navigacioni meni sa primenjenim CSS stilovima i rasporedom
Slika 2: Isti meni posle dodavanja CSS stilova.

Ovakav meni na telefonu ne staje u jedan red. Bootstrap-ov navbar to rešava: na uskom ekranu stavke se skupljaju u dugme. Isti kod kao u lekciji Bootstrap komponente, sa našim stavkama:

<nav class="navbar navbar-expand-md bg-dark" data-bs-theme="dark">
    <div class="container">
      <a class="navbar-brand fw-bold" href="naslovna.html">LOGO KREATOR</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#meni" aria-label="Otvori meni">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="meni">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="naslovna.html">Naslovna</a></li>
          <li class="nav-item"><a class="nav-link" href="#koraci">Kako radi</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Primeri</a>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><a class="dropdown-item" href="#primeri">Poslovni</a></li>
              <li><a class="dropdown-item" href="#primeri">Edukacija</a></li>
              <li><a class="dropdown-item" href="#primeri">Sport</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

3. Glavni deo: naslov i forma

<header class="hero text-center text-white">
    <div class="container py-5">
      <h1 class="display-4 fw-bold">Logo Kreator</h1>
      <p class="lead mb-4">Napravi jednostavan logo za minut – besplatno.</p>
      <form class="row g-2 justify-content-center" action="generator.html" method="get">
        <div class="col-12 col-sm-8 col-md-6">
          <label for="naziv" class="visually-hidden">Naziv logoa</label>
          <input type="text" class="form-control form-control-lg" id="naziv" name="naziv"
                 placeholder="Upiši naziv, npr. Sekcija Pupin" maxlength="20" required>
        </div>
        <div class="col-12 col-sm-auto">
          <button type="submit" class="btn btn-danger btn-lg w-100">Kreiraj logo</button>
        </div>
      </form>
    </div>
  </header>
Deo kodaObjašnjenje
display-4, leadveliki naslov i istaknut podnaslov
action="generator.html" method="get"forma šalje naziv na stranu generatora: generator.html?naziv=Sekcija+Pupin – generator ga čita u lekciji 16
row g-2 + col-12 col-sm-8 col-md-6na telefonu polje i dugme jedno ispod drugog, od 576px u istom redu
visually-hiddennatpis koji se ne vidi, ali ga čita čitač ekrana (polje ima samo placeholder)
maxlength="20", requiredprovera unosa u pregledaču

4. Traka sa koracima

<section id="koraci" class="traka text-white text-center">
      <div class="container py-4">
        <div class="row g-3">
          <div class="col-md-4"><div class="korak"><h2 class="h4">1. Upiši naziv</h2><p class="mb-0">Ime, škola ili klub.</p></div></div>
          <div class="col-md-4"><div class="korak"><h2 class="h4">2. Izaberi stil</h2><p class="mb-0">Boja, oblik i font.</p></div></div>
          <div class="col-md-4"><div class="korak"><h2 class="h4">3. Preuzmi</h2><p class="mb-0">Slika u formatu PNG ili SVG.</p></div></div>
        </div>
      </div>
    </section>

Tri kolone col-md-4 su jedna pored druge od 768px, a na telefonu jedna ispod druge. Naslovi su h2 (to su poglavlja stranice), a klasa h4 ih samo smanjuje – značenje i veličina su razdvojeni, kao što je objašnjeno u prvoj lekciji.

Crvena traka sa tri koraka izrade logoa iz prve verzije projekta
Slika 3: Traka sa koracima u prvoj verziji projekta.

5. Galerija primera

<section id="primeri" class="container py-5 text-center">
      <h2 class="mb-4">Primeri kreiranih logoa</h2>
      <div class="row g-4 justify-content-center">
        <div class="col-6 col-md-4 col-lg-3"><img src="images/logo1.png" class="img-fluid rounded logo-primer" alt="Crveni okrugli logo sa slovima SP"></div>
        <div class="col-6 col-md-4 col-lg-3"><img src="images/logo2.png" class="img-fluid rounded logo-primer" alt="Plavi četvrtasti logo sa slovima IT"></div>
        <div class="col-6 col-md-4 col-lg-3"><img src="images/logo3.png" class="img-fluid rounded logo-primer" alt="Zeleni okrugli logo sa slovima FK"></div>
      </div>
    </section>

col-6 col-md-4 col-lg-3: dva logoa u redu na telefonu, tri od tableta; img-fluid smanjuje sliku sa kolonom. Svaka slika ima opis u alt.

Deo sa primerima kreiranih logoa iz prve verzije projekta
Slika 4: Primeri logoa u prvoj verziji projekta.

Kompletna strana

Ceo kod naslovna.html. U rezultatu su umesto pravih slika privremeni logotipi, a main.css za sada sadrži samo četiri pravila za boje (ceo stil je u sledećoj lekciji). Suzi prozor da vidiš kako se meni, forma, koraci i galerija preslažu.

<!DOCTYPE html>
<html lang="sr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Logo Kreator – napravi svoj logo</title>
  <meta name="description" content="Besplatan generator jednostavnih logoa: upiši naziv, izaberi boju i oblik i preuzmi sliku.">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <!-- 1. MENI -->
  <nav class="navbar navbar-expand-md bg-dark" data-bs-theme="dark">
    <div class="container">
      <a class="navbar-brand fw-bold" href="naslovna.html">LOGO KREATOR</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#meni" aria-label="Otvori meni">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="meni">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="naslovna.html">Naslovna</a></li>
          <li class="nav-item"><a class="nav-link" href="#koraci">Kako radi</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Primeri</a>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><a class="dropdown-item" href="#primeri">Poslovni</a></li>
              <li><a class="dropdown-item" href="#primeri">Edukacija</a></li>
              <li><a class="dropdown-item" href="#primeri">Sport</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 2. GLAVNI DEO (hero): naslov i forma -->
  <header class="hero text-center text-white">
    <div class="container py-5">
      <h1 class="display-4 fw-bold">Logo Kreator</h1>
      <p class="lead mb-4">Napravi jednostavan logo za minut – besplatno.</p>
      <form class="row g-2 justify-content-center" action="generator.html" method="get">
        <div class="col-12 col-sm-8 col-md-6">
          <label for="naziv" class="visually-hidden">Naziv logoa</label>
          <input type="text" class="form-control form-control-lg" id="naziv" name="naziv"
                 placeholder="Upiši naziv, npr. Sekcija Pupin" maxlength="20" required>
        </div>
        <div class="col-12 col-sm-auto">
          <button type="submit" class="btn btn-danger btn-lg w-100">Kreiraj logo</button>
        </div>
      </form>
    </div>
  </header>

  <main>
    <!-- 3. TRAKA SA KORACIMA -->
    <section id="koraci" class="traka text-white text-center">
      <div class="container py-4">
        <div class="row g-3">
          <div class="col-md-4"><div class="korak"><h2 class="h4">1. Upiši naziv</h2><p class="mb-0">Ime, škola ili klub.</p></div></div>
          <div class="col-md-4"><div class="korak"><h2 class="h4">2. Izaberi stil</h2><p class="mb-0">Boja, oblik i font.</p></div></div>
          <div class="col-md-4"><div class="korak"><h2 class="h4">3. Preuzmi</h2><p class="mb-0">Slika u formatu PNG ili SVG.</p></div></div>
        </div>
      </div>
    </section>

    <!-- 4. PRIMERI LOGOA -->
    <section id="primeri" class="container py-5 text-center">
      <h2 class="mb-4">Primeri kreiranih logoa</h2>
      <div class="row g-4 justify-content-center">
        <div class="col-6 col-md-4 col-lg-3"><img src="images/logo1.png" class="img-fluid rounded logo-primer" alt="Crveni okrugli logo sa slovima SP"></div>
        <div class="col-6 col-md-4 col-lg-3"><img src="images/logo2.png" class="img-fluid rounded logo-primer" alt="Plavi četvrtasti logo sa slovima IT"></div>
        <div class="col-6 col-md-4 col-lg-3"><img src="images/logo3.png" class="img-fluid rounded logo-primer" alt="Zeleni okrugli logo sa slovima FK"></div>
      </div>
    </section>
  </main>

  <!-- 5. PODNOŽJE -->
  <footer class="podnozje text-white">
    <div class="container py-4">
      <div class="row text-center text-md-start g-3">
        <div class="col-md-4"><h3 class="h6 text-uppercase">Logo Kreator</h3><p class="small mb-0">Projekat iz kursa HTML, CSS i JavaScript.</p></div>
        <div class="col-md-4"><h3 class="h6 text-uppercase">Učenje</h3>
          <a href="https://svetprogramiranja.com">Svet programiranja</a><br><a href="https://petlja.org">Petlja</a></div>
        <div class="col-md-4"><h3 class="h6 text-uppercase">Alati</h3>
          <a href="https://getbootstrap.com">Bootstrap</a><br><a href="https://developer.mozilla.org/sr/">MDN</a></div>
      </div>
      <p class="text-center small mt-3 mb-0">&copy; 2026 Logo Kreator</p>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Rezultat:

/* privremeni minimalni stil – detaljno u sledećoj lekciji */
.hero    { background: linear-gradient(135deg, #1f2a44, #dd0022); }
.traka   { background: #dd0022; }
.podnozje { background: #1f2a44; }
.podnozje a { color: #ffd6dc; }

Zadaci za vežbu

Za svaki zadatak postoji primer, uputstvo i rešenje. Rešenja su provereno ispravna u pregledaču.

ZADATAK 01Težina: srednje

Dodaj deo „Kontakt“

Ispod galerije dodaj deo sa naslovom „Pitanja?“ i formom (ime, email, poruka, dugme „Pošalji“) u Bootstrap stilu, širine najviše 600px i centrirano. Dodaj i stavku „Kontakt“ u meni koja vodi do ovog dela.

Česte greške i saveti
  • Svaki deo stranice proveri u pregledaču čim ga dodaš – lakše je naći grešku u 10 novih redova nego u 100.
  • id u data-bs-target="#meni" i id="meni" moraju biti isti.
  • Ako slike ne postoje, prikazuje se alt tekst – proveri putanju images/logo1.png.
  • Ne piši ceo dizajn klasama u HTML-u – boje i efekti pripadaju main.css.

Proveri znanje

Otvori kviz

Naslovna strana

1. Kuda forma šalje upisani naziv?




2. Šta radi klasa visually-hidden?




3. Koliko logoa je u redu na telefonu sa col-6?