Hero2
<style>
body {
scroll-behavior: smooth;
}
.hero-section {
background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
padding: 110px 0;
}
.hero-badge {
background: #e7f1ff;
color: #0d6efd;
font-weight: 600;
border-radius: 50px;
padding: 6px 14px;
display: inline-block;
margin-bottom: 20px;
}
.feature-icon {
font-size: 2.2rem;
color: #0d6efd;
}
section {
padding: 80px 0;
}
.card {
border: none;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
.trust-strip span {
background: #f1f3f5;
border-radius: 20px;
padding: 8px 16px;
margin: 6px;
display: inline-block;
font-size: .9rem;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom sticky-top">
<div class="container">
<a class="navbar-brand fw-bold" href="#">Pametna Matematika</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="#kako-radi">Kako radi</a></li>
<li class="nav-item"><a class="nav-link" href="#primjeri">Primjeri</a></li>
<li class="nav-item">
<a class="btn btn-primary ms-lg-3 px-4" href="#">Započni vježbanje</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="hero-section text-center">
<div class="container">
<span class="hero-badge">Bez prijave • Besplatno • Trenutno</span>
<h1 class="display-4 fw-bold mt-3">
Matematički zadaci<br class="d-none d-md-block"> točno po mjeri učenika
</h1>
<p class="lead text-muted mt-4 mx-auto" style="max-width: 720px;">
Generirajte neograničen broj matematičkih zadataka za osnovnu školu.
Idealno za vježbu kod kuće, u učionici ili kao dodatni materijal.
</p>
<div class="mt-5">
<a href="#" class="btn btn-primary btn-lg px-5 me-md-3">
Kreni s vježbanjem
</a>
<a href="#primjeri" class="btn btn-outline-secondary btn-lg px-4">
Pogledaj primjer
</a>
</div>
<div class="trust-strip mt-5">
<span>➕ Zbrajanje</span>
<span>➖ Oduzimanje</span>
<span>✖️ Množenje</span>
<span>➗ Dijeljenje</span>
<span>📐 Jednadžbe</span>
<span>🎒 1.–8. razred</span>
</div>
</div>
</header>
<section id="o-projektu">
<div class="container">
<div class="row g-4 text-center">
<div class="col-md-4">
<div class="card p-4 h-100">
<div class="feature-icon mb-3">🎓</div>
<h4>Za učenike</h4>
<p class="text-muted">
Svaki put novi zadaci, prilagođeni razini znanja.
Idealno za samostalnu vježbu i ponavljanje.
</p>
</div>
</div>
<div class="col-md-4">
<div class="card p-4 h-100">
<div class="feature-icon mb-3">🏠</div>
<h4>Za roditelje</h4>
<p class="text-muted">
Bez traženja radnih listova.
Jedan klik i imate spremne zadatke za domaću vježbu.
</p>
</div>
</div>
<div class="col-md-4">
<div class="card p-4 h-100">
<div class="feature-icon mb-3">🏫</div>
<h4>Za učitelje</h4>
<p class="text-muted">
Brzo generirajte različite verzije zadataka
za cijeli razred ili ispite.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="kako-radi" class="bg-light">
<div class="container">
<h2 class="text-center fw-bold mb-5">Kako funkcionira?</h2>
<div class="row g-4 text-center">
<div class="col-md-4">
<div class="card p-4 h-100">
<span class="badge bg-primary rounded-circle p-3 fs-5 mb-3">1</span>
<p>Odaberite vrstu zadataka i razred.</p>
</div>
</div>
<div class="col-md-4">
<div class="card p-4 h-100">
<span class="badge bg-primary rounded-circle p-3 fs-5 mb-3">2</span>
<p>Postavite težinu i broj zadataka.</p>
</div>
</div>
<div class="col-md-4">
<div class="card p-4 h-100">
<span class="badge bg-primary rounded-circle p-3 fs-5 mb-3">3</span>
<p>Rješavajte online ili ispišite PDF.</p>
</div>
</div>
</div>
</div>
</section>
<section id="primjeri">
<div class="container text-center">
<h2 class="fw-bold mb-5">Kako izgledaju zadaci?</h2>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card p-4 text-start">
<ul class="list-group list-group-flush">
<li class="list-group-item">1. 347 + 586 = _____</li>
<li class="list-group-item">2. 9 × 7 = _____</li>
<li class="list-group-item">3. x − 38 = 124</li>
<li class="list-group-item text-center text-muted small">
Svaki put drugačiji brojevi
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<footer class="bg-dark text-white text-center py-4">
<div class="container">
<p class="mb-1 fw-semibold">Pametna Matematika</p>
<p class="mb-0 small text-muted">
Jednostavno vježbanje matematike za svakoga © 2026
</p>
</div>
</footer>