145 lines
5.3 KiB
HTML
145 lines
5.3 KiB
HTML
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
|
||
|
|
<title>The HTML5 Herald</title>
|
||
|
|
<meta name="description" content="The HTML5 Herald">
|
||
|
|
<meta name="author" content="SitePoint">
|
||
|
|
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||
|
|
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
|
||
|
|
<link rel="stylesheet" href="css/style.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body style="background-color: #f0f0f1;">
|
||
|
|
|
||
|
|
<nav class="navbar fixed-top navbar-light bg-light shadow">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<a class="navbar-brand" href="#"><img style="max-height: 40px;" src="logo2.png"
|
||
|
|
class="rounded mx-auto d-block" alt="logo"></a>
|
||
|
|
<div style="max-width: 40%; margin-right: auto;" class="input-group">
|
||
|
|
<span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
|
||
|
|
<input id="search-title" type="text" class="form-control" placeholder="Wyszukaj film..." aria-describedby="basic-addon1">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
<div style="margin-top: 200px;" class="container">
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-3"></div>
|
||
|
|
<div class="col-9">
|
||
|
|
<div class="number-of-entries">
|
||
|
|
<span>Znaleziono: </span><span id="number-of-entries">22</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-3 p-2">
|
||
|
|
<div class="bg-white">
|
||
|
|
|
||
|
|
<div class="p-3">
|
||
|
|
<p class="categories">
|
||
|
|
Kategorie:
|
||
|
|
</p>
|
||
|
|
<div id="categories">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<div class="p-3">
|
||
|
|
<p class="filters">
|
||
|
|
Filtry:
|
||
|
|
</p>
|
||
|
|
<div id="filters">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-9 p-2">
|
||
|
|
<div style="min-height: 300px;" id="entry-list" class="bg-white">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<ul class="pagination justify-content-center mt-4">
|
||
|
|
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
|
||
|
|
<li class="page-item"><a class="page-link" >1</a></li>
|
||
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||
|
|
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<template id='entry-template'>
|
||
|
|
<div class="entry p-4">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-10">
|
||
|
|
<div class="mb-4">
|
||
|
|
<div class="primary-title">Tutuł główny</div>
|
||
|
|
<div class="original-title">Tytuł oryginalny</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-2">
|
||
|
|
<div class="rating-cat">
|
||
|
|
Ocena:
|
||
|
|
</div>
|
||
|
|
<div class="rating-val">
|
||
|
|
<i class="bi bi-star-fill"></i>
|
||
|
|
<i class="bi bi-star-fill"></i>
|
||
|
|
<i class="bi bi-star-fill"></i>
|
||
|
|
<i class="bi bi-star-half"></i>
|
||
|
|
<i class="bi bi-star"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-4">
|
||
|
|
<div class="entry-cat">
|
||
|
|
Rok premiery:
|
||
|
|
</div>
|
||
|
|
<div class="entry-val val-start-year">
|
||
|
|
2020
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-4">
|
||
|
|
<div class="entry-cat">
|
||
|
|
Gatunki:
|
||
|
|
</div>
|
||
|
|
<div class="entry-val val-genres">
|
||
|
|
<div>
|
||
|
|
Drama
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
Comdey
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-4">
|
||
|
|
<div class="entry-cat">
|
||
|
|
Czas trwania:
|
||
|
|
</div>
|
||
|
|
<div class="entry-val">
|
||
|
|
<span class='val-runtime-minutes'>120</span><span> min</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
|
||
|
|
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
|
||
|
|
crossorigin="anonymous"></script>
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||
|
|
<script src="js/script.js"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|