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>