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.
151 lines
7.0 KiB
HTML
151 lines
7.0 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 active">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-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>
|