Files
Web_Chaloupky/indextest.html
2023-08-22 17:19:23 +02:00

204 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="cz">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="test/assets/css/app.css">
<title>Brilo</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="d-flex align-items-center justify-content-between">
<a class="link" href="#" title="Logo"><img src="img/svg/logo.svg" widht="126" height="39" alt="Logo"></a>
<button class="button button--menu d-md-none"><div></div><div></div><div></div></button>
<ul class="list list--menu d-none d-md-flex">
<li><a class="link link--menu" href="#" title="O nás">O nás</a></li>
<li>
<a class="link link--menu js-submenu" href="javascript:void(0);" title="Služby">
Služby
<img src="img/svg/arrow_down.svg" widht="10" height="6" alt="Arrow">
</a>
<ul class="submenu submenu--primary">
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
<li>
<a class="link link--submenu js-submenu" href="javascript:void(0);" title="Submenu">Submenu
<img src="img/svg/arrow_right.svg" widht="16" height="16" alt="Arrow">
</a>
<ul class="submenu submenu--secondary">
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
</ul>
</li>
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
</ul>
</li>
<li><a class="link link--menu" href="#" title="Aktuality">Aktuality</a></li>
<li><a class="link link--menu" href="#" title="Novinky">Novinky</a></li>
<li><a class="link link--menu" href="#" title="Kontakty">Kontakty</a></li>
</ul>
</div>
</div>
</header>
<main>
<section class="section section--intro">
<div class="container">
<div class="row flex-md-row-reverse">
<div class="col-12 col-md-6 px-0 ps-md-4">
<img class="image image--section" src="img/image_0.webp" widht="680" height="456" alt="Session">
</div>
<div class="col-12 col-md-6 gx-5">
<div class="d-flex flex-column justify-content-center h-100">
<h1>Hlavní nadpis webu</h1>
<p>V k žert planetu rysů obdivují stravování starověkého zebřičky u tahů zimující. Akcí a důkaz pomoci narozen muzea signálem.</p>
<div class="section__links">
<a class="button button--secondary" href="#" title="Více informací">Více informací</a>
<a class="button button--primary" href="#" title="Poptat nabídku">Poptat nabídku</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section section--medium bg bg--primary-100">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 px-0 pe-md-4">
<img class="image image--section" src="img/image_1.webp" widht="680" height="456" alt="Meeting">
</div>
<div class="col-12 col-md-6 gx-5">
<h2>Nechte své peníze růst!</h2>
<p>V k žert planetu rysů obdivují stravování starověkého zebřičky u tahů zimující. Akcí a důkaz pomoci narozen muzea signálem - jižní využitelný uchu těžko. Dravcům vousům houba horu žijí mého vývojovou z společnosti nemigrují vy plná internetová, je charisma vnitrozemí, oceán a přijíždějí příbuzných zjevné, zemskou dá spolu. Moc král prokletí obyvatel holka ochlazení žít mimořádnými virů stejný či palec.</p>
<ul class="list list--dots">
<li><p>Musel za až angličtinu látky nohy deprimovaná polokouli i roku map.</p></li>
<li><p>Těžko popsal, ještě zúročovat však, by čase musel mi nuly, ta naší.</p></li>
<li><p>Musel za až angličtinu látky nohy deprimovaná polokouli i roku map.</p></li>
<li><p>Těžko popsal, ještě zúročovat však, by čase musel mi nuly, ta naší.</p></li>
</ul>
<div class="section__links">
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
</div>
</div>
</div>
</div>
</section>
<section class="section section--medium">
<div class="container">
<div class="row flex-md-row-reverse">
<div class="col-12 col-md-6 px-0 ps-md-4">
<img class="image image--section" src="img/image_2.webp" widht="680" height="456" alt="Office">
</div>
<div class="col-12 col-md-6 gx-5">
<h2>Nechte své peníze růst!</h2>
<p>V k žert planetu rysů obdivují stravování starověkého zebřičky u tahů zimující. Akcí a důkaz pomoci narozen muzea signálem - jižní využitelný uchu těžko. Dravcům vousům houba horu žijí mého vývojovou z společnosti nemigrují vy plná internetová, je charisma vnitrozemí, oceán a přijíždějí příbuzných zjevné, zemskou dá spolu. Moc král prokletí obyvatel holka ochlazení žít mimořádnými virů stejný či palec.</p>
<div class="section__links">
<a class="button button--primary" href="#" title="Zaregistovat se">Zaregistovat se</a>
</div>
</div>
</div>
</div>
</section>
<section class="section section--medium section--bottom">
<div class="container">
<div class="text-center">
<h2>Vyberte jednu z nabízených služeb</h2>
<p>Hlasu zkrátka nevratné duší indičtí půlkilometrová začali nutné už od středisko. Společných snažila líně<br class="d-none d-md-block"> budoucnost začne vloženy stal objevováním, umělé cílem starým dne větvičky názvy moři zabíjí.</p>
<ul class="list list--selection">
<li><button class="button button--secondary is-active">Všechno</button></li>
<li><button class="button button--secondary">Papírové tašky</button></li>
<li><button class="button button--secondary">Látkové tašky</button></li>
<li><button class="button button--secondary">Igelitové tašky</button></li>
</ul>
</div>
<div class="row justify-content-center gy-4">
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
<div class="card">
<img class="image" src="img/cards/img1.webp" widht="328" height="328" alt="Machine">
<h4>Látkové tašky s potiskem</h4>
<p>Dlouhá význam s sionismu ty, jí antény i sezona, bílá malých izolovány uvést masové vodě</p>
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
<div class="card">
<img class="image" src="img/cards/img2.webp" widht="328" height="328" alt="Bakery">
<h4>Látkové tašky bez potisku</h4>
<p>Dlouhá význam s sionismu ty, jí antény i sezona</p>
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
<div class="card">
<img class="image" src="img/cards/img3.webp" widht="328" height="328" alt="White bags">
<h4>Bílé papírové tašky</h4>
<p>Dlouhá význam s sionismu ty, jí antény i sezona, bílá malých izolovány uvést masové vodě</p>
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
<div class="card">
<img class="image" src="img/cards/img4.webp" widht="328" height="328" alt="Colored bags">
<h4>Barevné papírové tašky na dárky</h4>
<p>Dlouhá význam s sionismu ty, jí antény i sezona, bílá malých izolovány uvést masové vodě</p>
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
<div class="card">
<img class="image" src="img/cards/img3.webp" widht="328" height="328" alt="White bags">
<h4>Papírové tašky z recyklovatelného materiálu</h4>
<p>Dlouhá význam s sionismu ty, jí antény i sezona</p>
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
<div class="card">
<img class="image" src="img/cards/img1.webp" widht="328" height="328" alt="Machine">
<h4>Igelitové sáčky s logem</h4>
<p>Dlouhá význam s sionismu ty, jí antény i sezona, bílá malých izolovány uvést masové vodě</p>
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
<div class="card">
<img class="image" src="img/cards/img2.webp" widht="328" height="328" alt="Bakery">
<h4>Velké igelitové tašky s potiskem</h4>
<p>Dlouhá význam s sionismu ty, jí antény i sezona, bílá malých izolovány uvést masové vodě</p>
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer__content">
<ul class="list list--footer order-lg-1">
<li><a class="link" href="#" title="První proklik">První proklik</a></li>
<li><a class="link" href="#" title="Druhý proklik">Druhý proklik</a></li>
<li><a class="link" href="#" title="Třetí proklik">Třetí proklik</a></li>
</ul>
<a class="link d-block my-4 my-lg-0 order-lg-0" href="#" title="Logo"><img src="img/svg/logo.svg" widht="208" height="65" alt="Logo"></a>
<p class="mb-0 order-lg-2">© 2022 Thalion All rights reserved.</p>
</div>
</div>
</footer>
<script src="test/assets/js/app.js"></script>
</body>
</html>