Vietove sarme
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<title>Stupčasti graf</title>
<!-- Pozadina -->
<rect x="50" y="50" width="200" height="200" fill="#eee" />
<!-- Osi -->
<line x1="50" y1="50" x2="50" y2="250" stroke="black" />
<text x="45" y="50" text-anchor="end">2000</text>
<text x="45" y="100" text-anchor="end">1500</text>
<text x="45" y="150" text-anchor="end">1000</text>
<text x="45" y="200" text-anchor="end">500</text>
<text x="45" y="250" text-anchor="end">0</text>
<line x1="50" y1="250" x2="250" y2="250" stroke="black" />
<!-- Stupci s različitim visinama -->
<g transform="translate(75, 250)">
<!-- Prvi stupac -->
<rect x="0" y="-875" width="30" height="875" fill="steelblue" />
<text x="15" y="20" text-anchor="middle">Ime 1</text>
</g>
<g transform="translate(125, 250)">
<!-- Drugi stupac -->
<rect x="0" y="-1350" width="30" height="1350" fill="orange" />
<text x="15" y="20" text-anchor="middle">Ime 2</text>
</g>
<g transform="translate(175, 250)">
<!-- Treći stupac -->
<rect x="0" y="-1100" width="30" height="1100" fill="green" />
<text x="15" y="20" text-anchor="middle">Ime 3</text>
</g>
</svg>
<title>Matematički zadaci - Generiranje zadataka</title>
<!-- Uključivanje Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Navigacija -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Matematički zadaci</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Početna</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">O nama</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pretplata</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="bg-primary text-white text-center py-5">
<div class="container">
<h1 class="display-4">Generirajte matematičke zadatke za sve razrede</h1>
<p class="lead">Za učenike od 1. do 13. razreda. Započnite učenje sada!</p>
<a href="#" class="btn btn-light btn-lg">Započnite generirati</a>
</div>
</header>
<!-- Sekcija s odabirom razreda -->
<section class="container py-5">
<h2 class="text-center mb-4">Odaberite razred</h2>
<div class="row text-center">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">1. Razred</h5>
<p class="card-text">Zadaci za početnike, jednostavno zbrajanje i oduzimanje.</p>
<a href="#" class="btn btn-primary">Generiraj zadatke</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">5. Razred</h5>
<p class="card-text">Zadaci uključuju razlomke, množenje i dijeljenje.</p>
<a href="#" class="btn btn-primary">Generiraj zadatke</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">9. Razred</h5>
<p class="card-text">Složeni zadaci s algebrama, geometrijom i funkcijama.</p>
<a href="#" class="btn btn-primary">Generiraj zadatke</a>
</div>
</div>
</div>
</div>
</section>
<!-- Sekcija s informacija o pretplati -->
<section class="bg-light py-5">
<div class="container text-center">
<h2 class="mb-4">Postanite Premium korisnik</h2>
<p class="lead mb-4">Nabavite pristup dodatnim funkcijama, uključujući rješenja zadataka i PDF ispis.</p>
<a href="#" class="btn btn-success btn-lg">Prijavite se za Premium</a>
</div>
</section>