<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>PZI - Vježba 10</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="./styles/stil.css" />
<link
href="https://fonts.googleapis.com/css?family=Mali"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous"
/>
<!-- Učitavanje jQuery-ja -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"
></script>
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header: Logo tekst i navigacija -->
<header>
<div class="container flex-container">
<h2>Pizza Bar</h2>
<div class="icons">
<a id="history" title="Povijest narudžbi" href="history.html">
<i class="fas fa-history"></i>
</a>
<div id="shopping-card" title="Košarica">
<i class="fas fa-shopping-cart"></i>
<div id="shopping-count">0</div>
</div>
</div>
<nav>
<a class="nav-links" href="./">Početna</a>
<a class="nav-links" href="#akcije">Akcije</a>
<a class="nav-links" href="#cjenik">Cjenik</a>
<a class="nav-links" href="#kontakt">Kontakt</a>
</nav>
</div>
</header>
<!-- Cover slika -->
<section id="cover">
<img src="./slike/Pizza-cover.png" alt="Pizza Cover" />
<div id="bg-gradient"></div>
<div id="cover-text" class="container">
<h1>Najbolja pizza u gradu</h1>
<small>Dostava na Vašu adresu</small>
<a class="action-btn" href="#">Naruči odmah</a>
</div>
</section>
<!-- Akcije -->
<section id="akcije" class="section-box">
<h2 class="section-title">Odaberi najbolju pizzu</h2>
<span class="title-underline"></span>
<div id="pizzas-holder" class="container">
<article class="pizza-card">
<img
class="pizza-image"
src="./slike/pizzas/margherita.png"
alt="Pizza Margherita"
/>
<h3 class="pizza-name">Margherita</h3>
<p class="pizza-description">
Vestibulum tincidunt a erat ac pretium. Sed efficitur aliquet
consequat. Pellentesque tellus massa, maximus nec mi ut, laoreet
feugiat libero. In feugiat rutrum elementum. Fusce ornare ex a
massa tempor posuere.
</p>
<span class="pizza-price">Već od: <em>22,00 kn</em></span>
<button class="pizza-button">Naruči</button>
</article>
<article class="pizza-card">
<img
class="pizza-image"
src="./slike/pizzas/capricciosa.png"
alt="Pizza Capricciosa"
/>
<h3 class="pizza-name">Capricciosa</h3>
<p class="pizza-description">
Vestibulum tincidunt a erat ac pretium. Sed efficitur aliquet
consequat. Pellentesque tellus massa, maximus nec mi ut, laoreet
feugiat libero. In feugiat rutrum elementum. Fusce ornare ex a
massa tempor posuere.
</p>
<span class="pizza-price">Već od: <em>23,00 kn</em></span>
<button class="pizza-button">Naruči</button>
</article>
<article class="pizza-card">
<img
class="pizza-image"
src="./slike/pizzas/pancetta.png"
alt="Pizza Pancetta"
/>
<h3 class="pizza-name">Pancetta</h3>
<p class="pizza-description">
Vestibulum tincidunt a erat ac pretium. Sed efficitur aliquet
consequat. Pellentesque tellus massa, maximus nec mi ut, laoreet
feugiat libero. In feugiat rutrum elementum. Fusce ornare ex a
massa tempor posuere.
</p>
<span class="pizza-price">Već od: <em>24,00 kn</em></span>
<button class="pizza-button">Naruči</button>
</article>
<article class="pizza-card">
<img
class="pizza-image"
src="./slike/pizzas/romagna.png"
alt="Pizza Romagna"
/>
<h3 class="pizza-name">Romagna</h3>
<p class="pizza-description">
Vestibulum tincidunt a erat ac pretium. Sed efficitur aliquet
consequat. Pellentesque tellus massa, maximus nec mi ut, laoreet
feugiat libero. In feugiat rutrum elementum. Fusce ornare ex a
massa tempor posuere.
</p>
<span class="pizza-price">Već od: <em>25,00 kn</em></span>
<button class="pizza-button">Naruči</button>
</article>
<article class="pizza-card">
<img
class="pizza-image"
src="./slike/pizzas/americana.png"
alt="Pizza Americana"
/>
<h3 class="pizza-name">Americana</h3>
<p class="pizza-description">
Vestibulum tincidunt a erat ac pretium. Sed efficitur aliquet
consequat. Pellentesque tellus massa, maximus nec mi ut, laoreet
feugiat libero. In feugiat rutrum elementum. Fusce ornare ex a
massa tempor posuere.
</p>
<span class="pizza-price">Već od: <em>26,00 kn</em></span>
<button class="pizza-button">Naruči</button>
</article>
<article class="pizza-card">
<img
class="pizza-image"
src="./slike/pizzas/vegana.png"
alt="Pizza Vegana"
/>
<h3 class="pizza-name">Vegana</h3>
<p class="pizza-description">
Vestibulum tincidunt a erat ac pretium. Sed efficitur aliquet
consequat. Pellentesque tellus massa, maximus nec mi ut, laoreet
feugiat libero. In feugiat rutrum elementum. Fusce ornare ex a
massa tempor posuere.
</p>
<span class="pizza-price">Već od: <em>27,00 kn</em></span>
<button class="pizza-button">Naruči</button>
</article>
</div>
</section>
<!-- Tablica cjenika -->
<section id="cjenik" class="section-box">
<h3 class="section-title">Cjenik</h3>
<span class="title-underline"></span>
<div class="container">
<table>
<thead>
<tr class="table-header-row">
<th>Pizza</th>
<th>Veličina</th>
<th>Cijena</th>
</tr>
</thead>
<tbody>
<!-- Prva pizza -->
<tr class="table-body-row">
<td class="table-pizza-name">Margherita</td>
<td>Mala</td>
<td>22,00 kn</td>
<td>Velika</td>
<td>34,00 kn</td>
<td>Jumbo</td>
<td>60,00 kn</td>
</tr>
<!-- Druga pizza -->
<tr class="table-body-row">
<td class="table-pizza-name">Capricciosa</td>
<td>Mala</td>
<td>23,00 kn</td>
<td>Velika</td>
<td>36,00 kn</td>
<td>Jumbo</td>
<td>64,00 kn</td>
</tr>
<!-- Treća pizza -->
<tr class="table-body-row">
<td class="table-pizza-name">Pancetta</td>
<td>Mala</td>
<td>24,00 kn</td>
<td>Velika</td>
<td>38,00 kn</td>
<td>Jumbo</td>
<td>66,00 kn</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Kontakt forma -->
<section id="kontakt" class="section-box">
<h2 class="section-title">Kontaktirajte nas</h2>
<span class="title-underline"></span>
<div class="container">
<form>
<label for="mail">Email</label>
<input
type="email"
name="email"
id="mail"
placeholder="Email"
required
/>
<label for="naslov">Naslov</label>
<input
type="text"
name="subject"
id="naslov"
placeholder="Naslov poruke"
required
/>
<label for="poruka">Poruka</label>
<textarea
id="poruka"
name="message"
cols="8"
rows="4"
placeholder="Vaša poruka..."
required
></textarea>
<button type="submit" class="pizza-button">Pošalji</button>
</form>
</div>
</section>
<!-- Footer: Social media links i copyright -->
<footer>
<div id="footer-box" class="container">
<ul id="social-media-list">
<!-- Ubaciti "title" atribute na <li> elemente -->
<li title="Facebook">
<a
class="social-media-links"
href="https://www.facebook.com/"
target="_blank"
>
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li title="Instagram">
<a
class="social-media-links"
href="https://www.instagram.com/"
target="_blank"
>
<i class="fab fa-instagram"></i>
</a>
</li>
<li title="Email">
<a class="social-media-links" href="mailto:myemail@fesb.hr">
<i class="fas fa-envelope"></i>
</a>
</li>
</ul>
<h4>Pizza Bar</h4>
<p id="copyright">
©<em> 2018, Sva prava pridržana</em> <br />
<strong>Ime Prezime</strong>
</p>
</div>
</footer>
<!-- Preuređeni 'shopping-side-menu' -->
<div id="shopping-side-menu">
<div id="side-menu-items"></div>
<div id="side-menu-action">
<div class="total-price">
<span>Ukupna cijena:</span> <em>0,00</em>
</div>
<button>Naruči</button>
</div>
<div id="info"></div>
</div>
</div>
<!-- JavaScript skripte -->
<script src="./js/skripta.js"></script>
<script src="./js/add-order.js"></script>
</body>
</html>
