Added new design
[wolnelektury.git] / src / wolnelektury / static / 2022 / index.html
1 <!doctype html>
2 <html class="no-js">
3   <head>
4     <meta charset="utf-8">
5     <meta name="description" content="">
6     <meta name="viewport" content="width=device-width,initial-scale=1">
7     <title>WolneLektury.pl</title>
8     <link rel="apple-touch-icon" href="apple-touch-icon.png">
9     
10     <link rel="stylesheet" href="styles/main.css">
11     <script src="scripts/modernizr.js"></script>
12
13     <link rel="preconnect" href="https://fonts.googleapis.com">
14     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15     <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap" rel="stylesheet">
16   </head>
17   <body>
18
19     <nav class="l-navigation">
20       <div class="l-container">
21         <a href="/" class="l-navigation__logo">
22           <img src="images/logo.png" alt="WolneLektury.pl">
23         </a>
24         <div class="l-naviagion__search">
25           <input type="text" placeholder="szukaj tytułu, autora, motywów…">
26         </div>
27         <div class="l-navigation__actions">
28           <a href="#"><i class="icon icon-liked"></i></a>
29           <button class="l-navigation__button js-menu" aria-label="Menu">
30             <span class="c-hamburger">
31                 <span class="bar"></span>
32             </span>
33           </button>
34         </div>
35       </div>
36     </nav>
37
38     <div class="l-container">
39       <div class="l-breadcrumb">
40         <a href="#"><span>Strona główna</span></a>
41         <a href="#"><span>Literatura</span></a>
42         <a href="#"><span>romantyzm</span></a>
43       </div>
44     </div>
45
46     <main class="l-main">
47       <section class="l-section">
48         <aside class="l-aside">
49           <figure>
50             <img src="images/header.jpg" alt="">
51           </figure>
52           <ul class="l-aside__info">
53             <li><span>Epoka:</span> romantyzm</li>
54             <li><span>Rodzaj:</span> dramat</li>
55             <li><span>Gatunek:</span> dramat romantyczny</li>
56           </ul>
57           <ul class="l-aside__zbiory">
58             <li>
59               <a href="#">Dziady</a>
60               <ul>
61                 <li><a href="#">Upiór</a></li>
62                 <li><a href="#">Dziady, część II</a></li>
63                 <li><a href="#">Dziady, część IV</a></li>
64                 <li><a href="#">Dziady, część III</a></li>
65               </ul>
66             </li>
67           </ul>
68         </aside>
69         <div class="l-content">
70           <header class="l-header">
71             <div class="l-header__content">
72               <p>Adam Mickiewicz (tłum. Janina Kowalska-Nowak)</p>
73               <h1>Dziady, część IV</h1>
74             </div>
75             <div class="l-header__actions">
76               <button class="l-button l-button--fav">
77                 <img src="images/fav.svg" alt="Dodaj do ulubionych">
78               </button>
79             </div>
80           </header>
81           <article class="l-article">
82             <div class="c-media">
83               <div class="c-media__actions">
84                 <div class="c-media__btn">
85                   <button class="l-button l-button--media" id="audiobook"><i class="icon icon-audio"></i> pobierz audiobook</button>
86                 </div>
87                 <div class="c-media__btn">
88                   <button class="l-button l-button--media" id="ebook"><i class="icon icon-book"></i> pobierz książkę</button>
89                 </div>
90                 <div class="c-media__btn">
91                   <button class="l-button l-button--media l-button--media--full"><i class="icon icon-eye"></i> czytaj online</button>
92                 </div>
93               </div>
94               <div class="c-media__player">
95                 <div class="c-player">
96                   <button class="c-player__btn">
97                     <i class="icon icon-play"></i>
98                   </button>
99                   <div class="c-player__timeline">
100                     <div class="c-player__info">Czyta Wiktor Korzeniewski, reż. Adam Bień</div>
101                     <span>
102                       <span></span>
103                     </span>
104                     <time class="c-player__length">
105                       <span>2:35</span>
106                       <span>60:20</span>
107                     </time>
108                   </div>
109                 </div>
110                 <div class="c-media__caption">
111                   <div class="icons">
112                     <i class="icon icon-acc-1"></i>
113                     <i class="icon icon-acc-2"></i>
114                     <i class="icon icon-acc-3"></i>
115                   </div>
116                   <div class="content">
117                     <p>Dofinansowano ze środków: Priorytet 4 Udostępnienie publikacji w formatach cyfrowych w ramach Narodowego Programu Rozwoju Czytelnictwa.</p>
118                   </div>
119                 </div>
120               </div>
121               <div class="c-media__popup" data-popup="ebook">
122                 <div class="c-media__popup__box">
123                   <div class="c-media__popup__box__lead">
124                     <h2>Pobieranie e-booka</h2>
125                     <p>Wybierz wersję dla siebie:</p>
126                   </div>
127                   <div class="c-media__popup__box__items">
128                     <div class="c-media__popup__box__item">
129                       <div>
130                         <h3>.pdf</h3>
131                         <p>Jeśli planujesz wydruk albo lekturę na urządzeniu mobilnym bez dodatkowych aplikacji.</p>
132                       </div>
133                       <div>
134                         <a href="#" class="l-button l-button--media l-button--media--full">.pdf</a>
135                       </div>
136                     </div>
137                     <div class="c-media__popup__box__item">
138                       <div>
139                         <h3>.epub</h3>
140                         <p>Uniwersalny format e-booków, obsługiwany przez większość czytników sprzętowych i aplikacji na urządzenia mobilne.</p>
141                       </div>
142                       <div>
143                         <a href="#" class="l-button l-button--media l-button--media--full">.epub</a>
144                       </div>
145                     </div>
146                     <div class="c-media__popup__box__item">
147                       <div>
148                         <h3>.mobi</h3>
149                         <p>Natywny format dla czytnika Amazon Kindle.</p>
150                       </div>
151                       <div>
152                         <a href="#" class="l-button l-button--media l-button--media--full">.mobi</a>
153                       </div>
154                     </div>
155                     <div class="c-media__popup__box__item">
156                       <div>
157                         <h3>synchrobook (epub3)</h3>
158                         <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format (np. ..., ..., ...).</p>
159                       </div>
160                       <div>
161                         <a href="#" class="l-button l-button--media l-button--media--full">synchrobook</a>
162                       </div>
163                     </div>
164                     <div class="c-media__popup__box__item">
165                       <div>
166                         <h3>inne formaty</h3>
167                         <ul>
168                           <li><a href="#">plik tekstowy (.txt)</a></li>
169                           <li><a href="#">FictionBook</a></li>
170                         </ul>
171                       </div>
172                     </div>
173                   </div>
174                   <button class="c-media__popup__close">
175                     <img src="images/close.svg" alt="Zamknij">
176                   </button>
177                 </div>
178               </div>
179               <div class="c-media__popup" data-popup="audiobook">
180                 <div class="c-media__popup__box">
181                   <div class="c-media__popup__box__lead">
182                     <h2>Pobieranie audiobooka</h2>
183                     <p>Wybierz wersję dla siebie:</p>
184                   </div>
185                   <div class="c-media__popup__box__items">
186                     <div class="c-media__popup__box__item">
187                       <div>
188                         <h3>.mp3</h3>
189                         <p>Uniwersalny format, obsługiwany przez wszystkie urządzenia.</p>
190                       </div>
191                       <div>
192                         <a href="#" class="l-button l-button--media l-button--media--full">.mp3</a>
193                       </div>
194                     </div>
195                     <div class="c-media__popup__box__item">
196                       <div>
197                         <h3>OggVorbis</h3>
198                         <p>Otwarty format plików audio, oferujący nagranie w najwyższej jakości dźwiękowej.</p>
199                       </div>
200                       <div>
201                         <a href="#" class="l-button l-button--media l-button--media--full">.ogg</a>
202                       </div>
203                     </div>
204                     <div class="c-media__popup__box__item">
205                       <div>
206                         <h3>DAISY</h3>
207                         <p>Format dla osób z dysfunkcjami czytania.</p>
208                       </div>
209                       <div>
210                         <a href="#" class="l-button l-button--media l-button--media--full">DAISY</a>
211                       </div>
212                     </div>
213                     <div class="c-media__popup__box__item">
214                       <div>
215                         <h3>synchrobook</h3>
216                         <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format.</p>
217                       </div>
218                       <div>
219                         <a href="#" class="l-button l-button--media l-button--media--full">synchrobook</a>
220                       </div>
221                     </div>
222                   </div>
223                   <button class="c-media__popup__close">
224                     <img src="images/close.svg" alt="Zamknij">
225                   </button>
226                 </div>
227               </div>
228             </div>
229
230             <h3>Opis</h3>
231
232             <p>
233               Pericord i Brown dokonali wspólnie wielu wynalazków. Ich umiejętności doskonale się uzupełniają: pierwszy to geniusz twórczy, a drugi — umysł praktyczny, doskonale rozumie projekty współpracownika i wciela je w życie.
234             </p>
235             <p>
236               Wspólnicy pracują nad kolejnym pomysłem — maszyną latającą. Prototyp jest już prawie gotów i niebawem można będzie go przetestować. Na ostatnich etapach pracy między wspólnikami pojawia się kwestia sporna: komu należy się patent? Wynalazcy — autorowi projektu czy mechanikowi — temu, który skonstruował maszynę?
237             </p>
238             <p>
239               Trup w obłokach czyli historia maszyny latającej w powietrzu (oryg. The Great Brown-Pericord Motor) to opowiadanie z dreszczykiem, pióra Arthura Conana Doyle'a, autora Przygód Sherlocka Holmesa.
240             </p>
241           </article>
242         </div>
243       </section>
244       <section class="l-section">
245         <div class="c-support">
246           <h2>Ta książka jest dostępna dla tysięcy dzieciaków dzięki darowiznom od osób takich jak Ty!</h2>
247           <figure>
248             <img src="images/img-1.jpg" alt="Dorzuć się!">
249             <a href="#">Dorzuć się!</a>
250           </figure>
251         </div>
252       </section>
253       <section class="l-section">
254         <div class="l-author">
255           <div class="row">
256             <h2>O autorze</h2>
257             <div>
258               <figure class="l-author__photo">
259                 <img src="images/author.jpg" alt="Adam Mickiewicz">
260                 <figcaption>
261                   Źródło: Wikipedia
262                 </figcaption>
263               </figure>
264               <article class="l-author__info">
265                 <h3>Adam Mickiewicz</h3>
266                 <p>
267                   Ur. 24 grudnia 1798 r. w Zaosiu koło Nowogródka <br>
268                   Zm. 26 listopada 1855 r. w Konstantynopolu (dziś: Stambuł)
269                 </p>
270                 <p>
271                   <strong>Najważniejsze dzieła:</strong> <br>
272                   Ballady i romanse (1822), Grażyna (1823), Sonety krymskie (1826), Konrad Wallenrod (1828),
273                   Dziady (cz.II i IV 1823, cz.III 1832), Księgi narodu polskiego i pielgrzymstwa polskiego (1833),
274                   Pan Tadeusz (1834); wiersze: Oda do młodości (1820), Do Matki Polki (1830), Śmierć pułkownika (1831),
275                   Reduta Ordona (1831)...
276                 </p>
277               </article>
278             </div>
279           </div>
280           <div class="row">
281             <div class="l-author__quotes">
282               <div class="l-author__quotes__slider">
283                 <div class="l-author__quotes__slider__item">
284                   <em>
285                     Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten
286                     nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże.
287                   </em>
288                   <p>Adam Mickiewicz – Dziady, część I</p>
289                 </div>
290                 <div class="l-author__quotes__slider__item">
291                   <em>
292                     Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten
293                     nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże.
294                   </em>
295                   <p>Adam Mickiewicz – Dziady, część II</p>
296                 </div>
297                 <div class="l-author__quotes__slider__item">
298                   <em>
299                     Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten
300                     nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże.
301                   </em>
302                   <p>Adam Mickiewicz – Dziady, część III</p>
303                 </div>
304               </div>
305             </div>
306           </div>
307         </div>
308       </section>
309       <section class="l-section">
310         <div class="l-themes__wrapper">
311           <h2>Motywy występujące w tym utworze <a href="#"><span>Wszystkie motywy</span> <i class="icon icon-arrow-right"></i></a></h2>
312           <div class="l-themes">
313             <ul>
314               <li><a href="#">alkohol <span>(9)</span></a></li>
315               <li><a href="#">bitwa <span>(9)</span></a></li>
316               <li><a href="#">alkohol <span>(9)</span></a></li>
317               <li><a href="#">antysemityzm <span>(9)</span></a></li>
318               <li><a href="#">bijatyka <span>(9)</span></a></li>
319               <li><a href="#">błądzenie <span>(9)</span></a></li>
320               <li><a href="#">alkohol <span>(9)</span></a></li>
321               <li><a href="#">bitwa <span>(9)</span></a></li>
322               <li><a href="#">alkohol <span>(9)</span></a></li>
323               <li><a href="#">antysemityzm <span>(9)</span></a></li>
324               <li><a href="#">bijatyka <span>(9)</span></a></li>
325               <li><a href="#">błądzenie <span>(9)</span></a></li>
326               <li><a href="#">alkohol <span>(9)</span></a></li>
327               <li><a href="#">bitwa <span>(9)</span></a></li>
328               <li><a href="#">alkohol <span>(9)</span></a></li>
329               <li><a href="#">antysemityzm <span>(9)</span></a></li>
330               <li><a href="#">bijatyka <span>(9)</span></a></li>
331               <li><a href="#">błądzenie <span>(9)</span></a></li>
332               <li><a href="#">bitwa <span>(9)</span></a></li>
333               <li><a href="#">alkohol <span>(9)</span></a></li>
334               <li><a href="#">błądzenie <span>(9)</span></a></li>
335               <li><a href="#">bijatyka <span>(9)</span></a></li>
336               <li><a href="#">błądzenie <span>(9)</span></a></li>
337               <li><a href="#">bijatyka <span>(9)</span></a></li>
338               <li><a href="#">alkohol <span>(9)</span></a></li>
339               <li><a href="#">bitwa <span>(9)</span></a></li>
340               <li><a href="#">alkohol <span>(9)</span></a></li>
341               <li><a href="#">antysemityzm <span>(9)</span></a></li>
342               <li><a href="#">bijatyka <span>(9)</span></a></li>
343               <li><a href="#">błądzenie <span>(9)</span></a></li>
344             </ul>
345           </div>
346           <ul class="links">
347             <li>
348               <a href="#">źródłowy plik XML</a>
349             </li>
350             <li>
351               <a href="#">miksuj treść utworu</a>
352             </li>
353             <li>
354               <a href="#">utwór na Platformie Redakcyjnej</a>
355             </li>
356           </ul>
357         </div>
358       </section>
359     </main>
360
361     <section class="l-section">
362       <div class="l-books__wrapper">
363         <div class="l-container">
364           <h2>Tytuły powiązane</h2>
365           <div class="l-books">
366             <article class="l-books__item">
367               <figure class="l-books__item__img">
368                 <a href="#">
369                   <img src="images/book-1.jpg" alt="Poetyka">
370                 </a>
371               </figure>
372               <h3><a href="#">Arystoteles</a></h3>
373               <h2><a href="#">Poetyka</a></h2>
374             </article>
375             <article class="l-books__item">
376               <figure class="l-books__item__img">
377                 <a href="#">
378                   <img src="images/book-2.jpg" alt="Wstęp do filozofii">
379                 </a>
380               </figure>
381               <h3><a href="#">Stanisław Brzozowski</a></h3>
382               <h2><a href="#">Wstęp do filozofii</a></h2>
383             </article>
384             <article class="l-books__item">
385               <figure class="l-books__item__img">
386                 <a href="#">
387                   <img src="images/book-3.jpg" alt="Etyka">
388                 </a>
389               </figure>
390               <h3><a href="#">Benedykt de Spinoza</a></h3>
391               <h2><a href="#">Etyka</a></h2>
392             </article>
393             <article class="l-books__item">
394               <figure class="l-books__item__img">
395                 <a href="#">
396                   <img src="images/book-3.jpg" alt="Wstęp do filozofii">
397                 </a>
398               </figure>
399               <h3><a href="#">Stanisław Brzozowski</a></h3>
400               <h2><a href="#">Wstęp do filozofii</a></h2>
401             </article>
402             <article class="l-books__item l-books__item--link">
403               <a href="#">i wiele innych książek, wierszy, obrazów, audiobooków…</a>
404               <a href="#" class="icon-link"><i class="icon icon-all"></i></a>
405             </article>
406           </div>
407         </div>
408       </div>
409     </section>
410
411     <div class="l-footer">
412       <div class="l-container">
413         <div class="l-footer__row">
414           <a href="#"><img src="images/FNP-logo.png" alt="FUNDACJA Nowoczesna Polska"></a>
415           <ul>
416             <li>ul. Marszałkowska 84/92 lok. 125</li>
417             <li>00-514 Warszawa</li>
418           </ul>
419           <ul class="teal">
420             <li>tel. <a href="#">(22) 621 30 17</a></li>
421             <li>email <a href="#">fundacja@nowoczesnapolska.org.pl</a></li>
422           </ul>
423         </div>
424         <div class="l-footer__row">
425           <div>
426             Wolne Lektury to projekt prowadzony przez fundację <a href="#">Nowoczesna Polska</a>. <br>
427             Hosting: <a href="#">ICM</a>.
428           </div>
429           <div>
430             <a href="#"><img src="images/MKiDN.png" alt="MKiDN"></a>
431           </div>
432           <div>
433             Strona biblioteki Wolne Lektury powstała dzięki dofinansowaniu ze środków Ministra <a href="#">Kultury i Dziedzictwa Narodowego</a>
434             pochodzących z <a href="#">Funduszu Promocji Kultury</a> – państwowego funduszu celowego.
435           </div>
436         </div>
437       </div>
438     </div>
439
440     <script src="scripts/vendor.js"></script>
441     <script src="scripts/main.js"></script>
442   </body>
443 </html>