You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
175 lines
8.1 KiB
HTML
175 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="description" content="">
|
|
<link rel="icon" type="image/png" href="/public/favicon.png">
|
|
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" type="text/css" href="/public/layout.css">
|
|
<link rel="stylesheet" type="text/css" href="/public/card.css">
|
|
<title>Stavebniny</title>
|
|
</head>
|
|
|
|
<body>
|
|
<section class="index-grid-container">
|
|
<section class="index-logo">
|
|
<a href="/">Stavebniny</a>
|
|
</section>
|
|
<section class="index-top_menu">
|
|
<nav>
|
|
<a href="/" class="katalog active">Katalog</a>
|
|
<a href="/vyhledavani.html" class="vyhledavani">Vyhledávání</a>
|
|
<a href="/kontakty.html" class="kontakt">Kontakt</a>
|
|
<a href="/o-spolecnosti.html" class="o-spolecnosti">O společnosti</a>
|
|
</nav>
|
|
</section>
|
|
<section class="index-preliminary">
|
|
<h3>Vítejte na webu Stavebniny</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Etiam risus lectus, rutrum id lacus sit amet, sagittis mollis metus.
|
|
Fusce egestas odio orci, at scelerisque tellus lacinia eget.
|
|
Donec ac ligula id velit fringilla congue maximus et ante. Aliquam a gravida ante.
|
|
Suspendisse pharetra a velit quis rutrum.
|
|
Praesent vel lacus at dolor hendrerit fermentum.
|
|
Sed sed ante egestas tortor volutpat molestie.
|
|
</p>
|
|
<p>
|
|
Nullam dapibus neque nec erat cursus tincidunt.
|
|
Vestibulum pharetra, justo eget blandit vehicula,
|
|
dui diam finibus neque, ac vulputate ante justo vitae metus.
|
|
Sed tincidunt suscipit libero, in condimentum leo suscipit et.
|
|
Cras at maximus ante, vel finibus turpis.
|
|
Curabitur vulputate eget nulla id tempor.
|
|
Praesent aliquam sodales risus at vehicula.
|
|
Aliquam consectetur justo quis magna rhoncus consequat.
|
|
Vivamus sed justo non arcu placerat rhoncus.
|
|
Aliquam posuere quam vitae tristique dignissim.
|
|
</p>
|
|
</section>
|
|
<section class="index-content">
|
|
<div class="index-top-part">
|
|
<div class="select sorting">
|
|
<select>
|
|
<option>Řadit podle...</option>
|
|
<option>Ceny nejvyšší</option>
|
|
<option>Ceny nejnižší</option>
|
|
<option>Dostupnosti</option>
|
|
</select>
|
|
</div>
|
|
<div class="input search_bar">
|
|
<input type="text" placeholder="Vyhledávání">
|
|
</div>
|
|
</div>
|
|
<ul class="cards">
|
|
<li class="cards__item">
|
|
<div class="card">
|
|
<div class="card__image card__image--fence"></div>
|
|
<div class="card__content">
|
|
<div class="card__title">Štěrk</div>
|
|
<p class="card__text">This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. </p>
|
|
<button class="btn btn--block card__btn">Více informací</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="cards__item">
|
|
<div class="card">
|
|
<div class="card__image" style="background-image: url(https://cdn.instructables.com/FJH/KEM0/HG85C7F5/FJHKEM0HG85C7F5.LARGE.jpg?auto=webp&frame=1&width=2100)"></div>
|
|
<div class="card__content">
|
|
<div class="card__title">Dřevo</div>
|
|
<p class="card__text">This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.</p>
|
|
<button class="btn btn--block card__btn">Více informací</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="cards__item">
|
|
<div class="card">
|
|
<div class="card__image" style="background-image: url(/public/tile.jpg)"></div>
|
|
<div class="card__content">
|
|
<div class="card__title">Dlaždice Pikachu</div>
|
|
<p class="card__text">This defines the ability for a flex item to shrink if necessary. Negative numbers are invalid.</p>
|
|
<button class="btn btn--block card__btn">Více informací</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="cards__item">
|
|
<div class="card">
|
|
<div class="card__image" style="background-image: url(https://dazedimg-dazedgroup.netdna-ssl.com/2000/azure/dazed-prod/1190/1/1191449.jpg)"></div>
|
|
<div class="card__content">
|
|
<div class="card__title">Cihla</div>
|
|
<p class="card__text">This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height property."</p>
|
|
<button class="btn btn--block card__btn">Více informací</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="cards__item">
|
|
<div class="card">
|
|
<div class="card__image" style="background-image: url(https://www.filterforge.com/filters/12126.jpg)"></div>
|
|
<div class="card__content">
|
|
<div class="card__title">Štěrk</div>
|
|
<p class="card__text">This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. </p>
|
|
<button class="btn btn--block card__btn">Více informací</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="cards__item">
|
|
<div class="card">
|
|
<div class="card__image" style="background-image: url(https://cdn.instructables.com/FJH/KEM0/HG85C7F5/FJHKEM0HG85C7F5.LARGE.jpg?auto=webp&frame=1&width=2100)"></div>
|
|
<div class="card__content">
|
|
<div class="card__title">Dřevo</div>
|
|
<p class="card__text">This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.</p>
|
|
<button class="btn btn--block card__btn">Více informací</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="cards__item">
|
|
<div class="card">
|
|
<div class="card__image" style="background-image: url(/public/tile.jpg)"></div>
|
|
<div class="card__content">
|
|
<div class="card__title">Dlaždice Pikachu</div>
|
|
<p class="card__text">This defines the ability for a flex item to shrink if necessary. Negative numbers are invalid.</p>
|
|
<button class="btn btn--block card__btn">Více informací</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="cards__item">
|
|
<div class="card">
|
|
<div class="card__image" style="background-image: url(https://dazedimg-dazedgroup.netdna-ssl.com/2000/azure/dazed-prod/1190/1/1191449.jpg)"></div>
|
|
<div class="card__content">
|
|
<div class="card__title">Cihla</div>
|
|
<p class="card__text">This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height property."</p>
|
|
<button class="btn btn--block card__btn">Více informací</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class="index-side_menu">
|
|
<ul>
|
|
<li><a href="#">Cihly</a></li>
|
|
<li><a href="#">Střešní krytiny</a></li>
|
|
<li><a href="#">Dlaždice</a></li>
|
|
<li><a href="#">Dřeva a dřevotřísky</a></li>
|
|
<li><a href="#">Štěrky a posypy</a></li>
|
|
<li><a href="#">PVC, lina</a></li>
|
|
<li><a href="#">Lorem, ipsum</a></li>
|
|
<li><a href="#">Ipsum, dolorem</a></li>
|
|
<li><a href="#">Dolor</a></li>
|
|
<li><a href="#">Sit</a></li>
|
|
<li><a href="#">Amet</a></li>
|
|
</ul>
|
|
</section>
|
|
<section class="index-footer">
|
|
<p>Stavebniny © 2020, všechna práva vyhrazena</p>
|
|
</section>
|
|
</section>
|
|
|
|
<!--<section id="app"></section>-->
|
|
<!--<script type="module">-->
|
|
<!-- import init from '/pkg/package.js';-->
|
|
<!-- init('/pkg/package_bg.wasm');-->
|
|
<!--</script>-->
|
|
</body>
|
|
</html>
|