initial commit
parent
724a7e9a31
commit
c9327e9992
@ -1,24 +1,174 @@
|
||||
<!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 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>
|
||||
|
||||
<meta name="description" content="">
|
||||
<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>
|
||||
|
||||
<link rel="icon" type="image/png" href="/public/favicon.png">
|
||||
|
||||
<title>A Title</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="app"></section>
|
||||
<script type="module">
|
||||
// https://rustwasm.github.io/docs/wasm-bindgen/examples/without-a-bundler.html
|
||||
import init from '/pkg/package.js';
|
||||
init('/pkg/package_bg.wasm');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
<!--<section id="app"></section>-->
|
||||
<!--<script type="module">-->
|
||||
<!-- import init from '/pkg/package.js';-->
|
||||
<!-- init('/pkg/package_bg.wasm');-->
|
||||
<!--</script>-->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,113 @@
|
||||
<!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">Katalog</a>
|
||||
<a href="/vyhledavani.html" class="vyhledavani">Vyhledávání</a>
|
||||
<a href="/kontakty.html" class="kontakt active">Kontakt</a>
|
||||
<a href="/o-spolecnosti.html" class="o-spolecnosti">O společnosti</a>
|
||||
</nav>
|
||||
</section>
|
||||
<section class="index-content">
|
||||
<div class="kontakt-grid-container">
|
||||
<div class="kontakt-top">
|
||||
<h1>Konktaktní informace</h1>
|
||||
</div>
|
||||
<div class="kontakt-informace">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Email:</th>
|
||||
<td><a href="mailto:email@domena.tld">email@domena.tld</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Telefon:</th>
|
||||
<td><a href="tel:123456789">123456789</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Fax:</th>
|
||||
<td><a href="tel:123456789">123456789</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Adresa:</th>
|
||||
<td>Nábřeží Edvarda Beneše 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<td>Malá Strana</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<td>Praha 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<td>Česká republika</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="kontakt-mapa">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2559.6912107195794!2d14.4096620164851!3d50.09206797942753!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470b94e75b148c4f%3A0x2bda44f19fec4d2c!2sGovernment%20Office!5e0!3m2!1sen!2scz!4v1587920185203!5m2!1sen!2scz"
|
||||
frameborder="0"
|
||||
style="border:0;"
|
||||
allowfullscreen=""
|
||||
aria-hidden="false"
|
||||
tabindex="0"
|
||||
class="map">
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="kontakt-form">
|
||||
<form>
|
||||
<label>Kontaktní formulář</label>
|
||||
<div class="input search_bar">
|
||||
<input type="email" placeholder="Váš email">
|
||||
</div>
|
||||
<div class="input search_bar">
|
||||
<input type="text" placeholder="Předmět">
|
||||
</div>
|
||||
<div class="select sorting">
|
||||
<select>
|
||||
<option>Kategorie</option>
|
||||
<option>Otázka na produkt</option>
|
||||
<option></option>
|
||||
<option>Jiné</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input search_bar">
|
||||
<textarea type="text" placeholder="Obsah zprávy"></textarea>
|
||||
</div>
|
||||
<button type="submit" form="form1" value="Submit" class="btn">Odeslat</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="index-side_menu">
|
||||
</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>
|
||||
@ -0,0 +1,113 @@
|
||||
<!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">Katalog</a>
|
||||
<a href="#" class="vyhledavani">Vyhledávání</a>
|
||||
<a href="/kontakty.html" class="kontakt active">Kontakt</a>
|
||||
<a href="#" class="o-spolecnosti">O společnosti</a>
|
||||
</nav>
|
||||
</section>
|
||||
<section class="index-content">
|
||||
<div class="kontakt-grid-container">
|
||||
<div class="kontakt-top">
|
||||
<h1>Konktaktní informace</h1>
|
||||
</div>
|
||||
<div class="kontakt-informace">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Email:</th>
|
||||
<td><a href="mailto:email@domena.tld">email@domena.tld</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Telefon:</th>
|
||||
<td><a href="tel:123456789">123456789</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Fax:</th>
|
||||
<td><a href="tel:123456789">123456789</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Adresa:</th>
|
||||
<td>Nábřeží Edvarda Beneše 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<td>Malá Strana</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<td>Praha 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<td>Česká republika</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="kontakt-mapa">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2559.6912107195794!2d14.4096620164851!3d50.09206797942753!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470b94e75b148c4f%3A0x2bda44f19fec4d2c!2sGovernment%20Office!5e0!3m2!1sen!2scz!4v1587920185203!5m2!1sen!2scz"
|
||||
frameborder="0"
|
||||
style="border:0;"
|
||||
allowfullscreen=""
|
||||
aria-hidden="false"
|
||||
tabindex="0"
|
||||
class="map">
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="kontakt-form">
|
||||
<form>
|
||||
<label>Kontaktní formulář</label>
|
||||
<div class="input search_bar">
|
||||
<input type="email" placeholder="Váš email">
|
||||
</div>
|
||||
<div class="input search_bar">
|
||||
<input type="text" placeholder="Předmět">
|
||||
</div>
|
||||
<div class="select sorting">
|
||||
<select>
|
||||
<option>Kategorie</option>
|
||||
<option>Otázka na produkt</option>
|
||||
<option></option>
|
||||
<option>Jiné</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input search_bar">
|
||||
<textarea type="text" placeholder="Obsah zprávy"></textarea>
|
||||
</div>
|
||||
<button type="submit" form="form1" value="Submit" class="btn">Odeslat</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="index-side_menu">
|
||||
</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>
|
||||
@ -0,0 +1,140 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
color: #888;
|
||||
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
padding: 1rem;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-moz-font-feature-settings: "liga" on;
|
||||
}
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.btn {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
color: #696969;
|
||||
padding: 0.5rem;
|
||||
text-transform: lowercase;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
.btn:hover {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
}
|
||||
.btn--block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.cards {
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.cards__item {
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
}
|
||||
@media (min-width: 40rem) {
|
||||
.cards__item {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 66rem) {
|
||||
.cards__item {
|
||||
width: 33.3333%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 80rem) {
|
||||
.cards__item {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25);
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card:hover .card__image {
|
||||
-webkit-filter: contrast(100%);
|
||||
filter: contrast(100%);
|
||||
}
|
||||
.card__content {
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
-webkit-box-flex: 1;
|
||||
flex: 1 1 auto;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
}
|
||||
.card__image {
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
filter: contrast(70%);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
|
||||
}
|
||||
.card__image::before {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
@media (min-width: 40rem) {
|
||||
.card__image::before {
|
||||
padding-top: 66.6%;
|
||||
}
|
||||
}
|
||||
.card__image--flowers {
|
||||
background-image: url("https://dazedimg-dazedgroup.netdna-ssl.com/2000/azure/dazed-prod/1190/1/1191449.jpg");
|
||||
}
|
||||
.card__image--river {
|
||||
background-image: url("https://cdn.instructables.com/FJH/KEM0/HG85C7F5/FJHKEM0HG85C7F5.LARGE.jpg?auto=webp&frame=1&width=2100");
|
||||
}
|
||||
.card__image--record {
|
||||
background-image: url("/public/tile.jpg");
|
||||
}
|
||||
.card__image--fence {
|
||||
background-image: url("https://www.filterforge.com/filters/12126.jpg");
|
||||
}
|
||||
.card__title {
|
||||
color: #696969;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.card__text {
|
||||
-webkit-box-flex: 1;
|
||||
flex: 1 1 auto;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
@ -0,0 +1,135 @@
|
||||
*, *::before, *::after
|
||||
box-sizing: border-box
|
||||
|
||||
body
|
||||
color: #888888
|
||||
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif
|
||||
font-style: normal
|
||||
font-weight: 400
|
||||
letter-spacing: 0
|
||||
padding: 1rem
|
||||
text-rendering: optimizeLegibility
|
||||
-webkit-font-smoothing: antialiased
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
-moz-font-feature-settings: "liga" on
|
||||
|
||||
img
|
||||
height: auto
|
||||
max-width: 100%
|
||||
vertical-align: middle
|
||||
|
||||
.btn
|
||||
background-color: white
|
||||
border: 1px solid #cccccc
|
||||
color: #696969
|
||||
padding: 0.5rem
|
||||
text-transform: lowercase
|
||||
cursor: pointer
|
||||
transition: .3s
|
||||
border-radius: 0.4rem
|
||||
&:hover
|
||||
color: #fff
|
||||
background-color: black
|
||||
|
||||
.btn--block
|
||||
display: block
|
||||
width: 100%
|
||||
|
||||
.cards
|
||||
display: -webkit-box
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
.cards__item
|
||||
display: -webkit-box
|
||||
display: flex
|
||||
padding: 1rem
|
||||
@media (min-width: 40rem)
|
||||
width: 50%
|
||||
@media (min-width: 66rem)
|
||||
width: 33.3333%
|
||||
@media (min-width: 80rem)
|
||||
width: 25%
|
||||
|
||||
.card
|
||||
background-color: white
|
||||
border-radius: 0.25rem
|
||||
box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25)
|
||||
display: -webkit-box
|
||||
display: flex
|
||||
-webkit-box-orient: vertical
|
||||
-webkit-box-direction: normal
|
||||
flex-direction: column
|
||||
overflow: hidden;
|
||||
|
||||
.card:hover .card__image
|
||||
-webkit-filter: contrast(100%)
|
||||
filter: contrast(100%)
|
||||
|
||||
.card__content
|
||||
display: -webkit-box
|
||||
display: flex
|
||||
-webkit-box-flex: 1
|
||||
flex: 1 1 auto
|
||||
-webkit-box-orient: vertical
|
||||
-webkit-box-direction: normal
|
||||
flex-direction: column
|
||||
padding: 1rem
|
||||
|
||||
.card__image {
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
filter: contrast(70%);
|
||||
//filter: saturate(180%);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: filter 0.5s cubic-bezier(.43,.41,.22,.91);;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-top: 56.25%; // 16:9 aspect ratio
|
||||
}
|
||||
@media(min-width: 40rem) {
|
||||
&::before {
|
||||
padding-top: 66.6%; // 3:2 aspect ratio
|
||||
}
|
||||
}
|
||||
}
|
||||
//.card__image::before
|
||||
// content: ""
|
||||
// display: block
|
||||
// padding-top: 56.25%
|
||||
// @media (min-width: 40rem)
|
||||
// padding-top: 66.6%
|
||||
|
||||
.card__image--flowers
|
||||
background-image: url(https://dazedimg-dazedgroup.netdna-ssl.com/2000/azure/dazed-prod/1190/1/1191449.jpg)
|
||||
|
||||
.card__image--river
|
||||
background-image: url(https://cdn.instructables.com/FJH/KEM0/HG85C7F5/FJHKEM0HG85C7F5.LARGE.jpg?auto=webp&frame=1&width=2100)
|
||||
|
||||
.card__image--record
|
||||
background-image: url(/public/tile.jpg)
|
||||
|
||||
.card__image--fence
|
||||
background-image: url(https://www.filterforge.com/filters/12126.jpg)
|
||||
|
||||
.card__title
|
||||
color: #696969
|
||||
font-size: 1.25rem
|
||||
font-weight: 300
|
||||
letter-spacing: 2px
|
||||
text-transform: uppercase
|
||||
|
||||
.card__text
|
||||
-webkit-box-flex: 1
|
||||
flex: 1 1 auto
|
||||
font-size: 0.875rem
|
||||
line-height: 1.5
|
||||
margin-bottom: 1.25rem
|
||||
@ -0,0 +1,444 @@
|
||||
html,
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Raleway Light";
|
||||
}
|
||||
.index-grid-container {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: 0.5fr 1fr 1fr 1fr;
|
||||
grid-template-rows: auto auto 1fr 1fr auto;
|
||||
gap: 1em 1em;
|
||||
grid-template-areas: "logo top_menu top_menu top_menu" "side_menu preliminary preliminary preliminary" "side_menu content content content" "side_menu content content content" "footer footer footer footer";
|
||||
}
|
||||
.index-logo {
|
||||
grid-area: logo;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2em;
|
||||
text-transform: uppercase;
|
||||
font-family: "Raleway Thin";
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
.index-logo a {
|
||||
padding: 2em 1em;
|
||||
font-weight: 100 !important;
|
||||
font-style: normal;
|
||||
color: #222;
|
||||
text-decoration: none;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.index-logo a:hover {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
border-radius: 0.65rem;
|
||||
animation: COLOR_BLINK 6s infinite;
|
||||
}
|
||||
.index-top_menu {
|
||||
grid-area: top_menu;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.index-top_menu nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
}
|
||||
.index-top_menu nav a {
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-family: "Raleway Light";
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
color: #444;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.index-top_menu nav a:hover {
|
||||
color: #000;
|
||||
border-bottom-width: 0.75rem !important;
|
||||
}
|
||||
.index-top_menu nav a.active {
|
||||
border-bottom-width: 0.75rem !important;
|
||||
}
|
||||
.index-top_menu nav a.katalog {
|
||||
border-bottom: solid 1px #93ce38;
|
||||
}
|
||||
.index-top_menu nav a.vyhledavani {
|
||||
border-bottom: solid 1px #4089bb;
|
||||
}
|
||||
.index-top_menu nav a.kontakt {
|
||||
border-bottom: solid 1px #ad32a1;
|
||||
}
|
||||
.index-top_menu nav a.o-spolecnosti {
|
||||
border-bottom: solid 1px #c69f88;
|
||||
}
|
||||
.index-preliminary {
|
||||
grid-area: preliminary;
|
||||
text-align: justify;
|
||||
padding: 0;
|
||||
}
|
||||
.index-preliminary h3 {
|
||||
color: #000;
|
||||
}
|
||||
.index-preliminary p {
|
||||
color: #606060;
|
||||
}
|
||||
@media (min-width: 60rem) {
|
||||
.index-preliminary {
|
||||
padding: 0 6vw;
|
||||
}
|
||||
}
|
||||
@media (min-width: 90rem) {
|
||||
.index-preliminary {
|
||||
padding: 0 40% 0 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 120rem) {
|
||||
.index-preliminary {
|
||||
padding: 0 50% 0 0;
|
||||
}
|
||||
}
|
||||
.index-content {
|
||||
grid-area: content;
|
||||
}
|
||||
.index-content .select {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
.index-content .select select {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
padding: 1em 1.5em;
|
||||
outline: 0;
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: #aaa;
|
||||
border-style: solid;
|
||||
border-radius: 0;
|
||||
background: #fff;
|
||||
color: #808080;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
.index-content .select select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
.index-content .select select:hover,
|
||||
.index-content .select select:focus {
|
||||
color: #000;
|
||||
background: #fff;
|
||||
}
|
||||
.index-content .input {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
.index-content .input input {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
padding: 1em 1.5em;
|
||||
outline: 0;
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: #aaa;
|
||||
border-style: solid;
|
||||
border-radius: 0;
|
||||
background: #fff;
|
||||
color: #808080;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
.index-content .input input::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
.index-content .input input:hover,
|
||||
.index-content .input input:focus {
|
||||
color: #000;
|
||||
background: #fff;
|
||||
}
|
||||
.index-content .input textarea {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 30em;
|
||||
cursor: pointer;
|
||||
padding: 1em 1.5em;
|
||||
outline: 0;
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: #aaa;
|
||||
border-style: solid;
|
||||
border-radius: 0;
|
||||
background: #fff;
|
||||
color: #808080;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
.index-content .input textarea::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
.index-content .input textarea:hover,
|
||||
.index-content .input textarea:focus {
|
||||
color: #000;
|
||||
background: #fff;
|
||||
}
|
||||
.index-content .index-top-part {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2.5fr;
|
||||
grid-template-rows: 0.5fr;
|
||||
gap: 1em 1em;
|
||||
grid-template-areas: "sorting search_bar";
|
||||
}
|
||||
.index-content .index-top-part .search_bar {
|
||||
grid-area: search_bar;
|
||||
}
|
||||
.index-content .index-top-part .sorting {
|
||||
grid-area: sorting;
|
||||
}
|
||||
.index-side_menu {
|
||||
grid-area: side_menu;
|
||||
}
|
||||
.index-side_menu ul {
|
||||
border-right: 1px solid #edf2f7;
|
||||
list-style: none;
|
||||
font-family: "Raleway Light";
|
||||
text-align: right;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.index-side_menu ul li {
|
||||
padding-bottom: 0.6rem;
|
||||
padding-top: 0.6rem;
|
||||
padding-right: 2rem;
|
||||
margin-right: 2rem;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.index-side_menu ul li a {
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
}
|
||||
.index-side_menu ul li a:hover {
|
||||
color: #000;
|
||||
}
|
||||
.index-side_menu ul li:hover {
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: 0px 2px 4px 1px rgba(0,0,0,0.25);
|
||||
background-color: #fff;
|
||||
}
|
||||
.index-footer {
|
||||
font-family: "Raleway Thin" !important;
|
||||
grid-area: footer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1em;
|
||||
text-transform: uppercase;
|
||||
color: #333;
|
||||
}
|
||||
.kontakt-grid-container {
|
||||
display: grid;
|
||||
min-height: 100%;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto 1fr 1fr;
|
||||
gap: 1em;
|
||||
grid-template-areas: "kontakt-top kontakt-top" "kontakt-informace kontakt-form" "kontakt-mapa kontakt-form";
|
||||
}
|
||||
.kontakt-top {
|
||||
grid-area: kontakt-top;
|
||||
}
|
||||
.kontakt-top h1 {
|
||||
color: #000;
|
||||
font-size: 2rem;
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
text-transform: uppercase;
|
||||
font-family: "Raleway Thin";
|
||||
}
|
||||
.kontakt-informace {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
border-radius: 0.45rem;
|
||||
grid-area: kontakt-informace;
|
||||
padding: 1rem;
|
||||
}
|
||||
.kontakt-informace table {
|
||||
color: #333;
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.kontakt-informace table td {
|
||||
border: none;
|
||||
}
|
||||
.kontakt-informace table th {
|
||||
text-align: left;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.kontakt-mapa {
|
||||
grid-area: kontakt-mapa;
|
||||
}
|
||||
.kontakt-mapa .map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.4rem;
|
||||
box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25);
|
||||
}
|
||||
.kontakt-form {
|
||||
grid-area: kontakt-form;
|
||||
}
|
||||
.kontakt-form form {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
border-radius: 0.45rem;
|
||||
margin: 0rem 2rem;
|
||||
height: 100%;
|
||||
padding: 2rem;
|
||||
}
|
||||
.kontakt-form form button {
|
||||
padding: 1rem 3rem;
|
||||
float: right;
|
||||
}
|
||||
.kontakt-form form label {
|
||||
font-family: "Raleway";
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@-moz-keyframes COLOR_BLINK {
|
||||
0%, 15% {
|
||||
color: #721b65;
|
||||
}
|
||||
15%, 25% {
|
||||
color: #b80d57;
|
||||
}
|
||||
25%, 35% {
|
||||
color: #f8615a;
|
||||
}
|
||||
35%, 45% {
|
||||
color: #f8615a;
|
||||
}
|
||||
45%, 50% {
|
||||
color: #ffd868;
|
||||
}
|
||||
50%, 65% {
|
||||
color: #f8615a;
|
||||
}
|
||||
65%, 75% {
|
||||
color: #f8615a;
|
||||
}
|
||||
75%, 80% {
|
||||
color: #b80d57;
|
||||
}
|
||||
80%, 90% {
|
||||
color: #721b65;
|
||||
}
|
||||
90%, 100% {
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes COLOR_BLINK {
|
||||
0%, 15% {
|
||||
color: #721b65;
|
||||
}
|
||||
15%, 25% {
|
||||
color: #b80d57;
|
||||
}
|
||||
25%, 35% {
|
||||
color: #f8615a;
|
||||
}
|
||||
35%, 45% {
|
||||
color: #f8615a;
|
||||
}
|
||||
45%, 50% {
|
||||
color: #ffd868;
|
||||
}
|
||||
50%, 65% {
|
||||
color: #f8615a;
|
||||
}
|
||||
65%, 75% {
|
||||
color: #f8615a;
|
||||
}
|
||||
75%, 80% {
|
||||
color: #b80d57;
|
||||
}
|
||||
80%, 90% {
|
||||
color: #721b65;
|
||||
}
|
||||
90%, 100% {
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
@-o-keyframes COLOR_BLINK {
|
||||
0%, 15% {
|
||||
color: #721b65;
|
||||
}
|
||||
15%, 25% {
|
||||
color: #b80d57;
|
||||
}
|
||||
25%, 35% {
|
||||
color: #f8615a;
|
||||
}
|
||||
35%, 45% {
|
||||
color: #f8615a;
|
||||
}
|
||||
45%, 50% {
|
||||
color: #ffd868;
|
||||
}
|
||||
50%, 65% {
|
||||
color: #f8615a;
|
||||
}
|
||||
65%, 75% {
|
||||
color: #f8615a;
|
||||
}
|
||||
75%, 80% {
|
||||
color: #b80d57;
|
||||
}
|
||||
80%, 90% {
|
||||
color: #721b65;
|
||||
}
|
||||
90%, 100% {
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
@keyframes COLOR_BLINK {
|
||||
0%, 15% {
|
||||
color: #721b65;
|
||||
}
|
||||
15%, 25% {
|
||||
color: #b80d57;
|
||||
}
|
||||
25%, 35% {
|
||||
color: #f8615a;
|
||||
}
|
||||
35%, 45% {
|
||||
color: #f8615a;
|
||||
}
|
||||
45%, 50% {
|
||||
color: #ffd868;
|
||||
}
|
||||
50%, 65% {
|
||||
color: #f8615a;
|
||||
}
|
||||
65%, 75% {
|
||||
color: #f8615a;
|
||||
}
|
||||
75%, 80% {
|
||||
color: #b80d57;
|
||||
}
|
||||
80%, 90% {
|
||||
color: #721b65;
|
||||
}
|
||||
90%, 100% {
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,292 @@
|
||||
html, body
|
||||
min-height: 100vh
|
||||
margin: 0
|
||||
padding: 0
|
||||
font-family: 'Raleway', sans-serif
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
font-family: "Raleway Light"
|
||||
|
||||
.index-grid-container
|
||||
min-height: 100vh
|
||||
display: grid
|
||||
grid-template-columns: 0.5fr 1fr 1fr 1fr
|
||||
grid-template-rows: auto auto 1fr 1fr auto
|
||||
gap: 1em 1em
|
||||
grid-template-areas:
|
||||
"logo top_menu top_menu top_menu"\
|
||||
"side_menu preliminary preliminary preliminary"\
|
||||
"side_menu content content content"\
|
||||
"side_menu content content content"\
|
||||
"footer footer footer footer"
|
||||
|
||||
.index-logo
|
||||
grid-area: logo
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
font-size: 2em
|
||||
text-transform: uppercase
|
||||
font-family: "Raleway Thin"
|
||||
letter-spacing: 0.2em
|
||||
& a
|
||||
padding: 2em 1em
|
||||
font-weight: 100 !important
|
||||
font-style: normal
|
||||
color: #222
|
||||
text-decoration: none
|
||||
transition: .5s
|
||||
&:hover
|
||||
//box-shadow: 0 30px 40px -14px rgba(0, 0, 0, 0.4)
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
border-radius: 0.65rem
|
||||
animation: COLOR_BLINK 6s infinite
|
||||
|
||||
@keyframes COLOR_BLINK
|
||||
0%, 15%
|
||||
color: #721b65
|
||||
15%, 25%
|
||||
color: #b80d57
|
||||
25%, 35%
|
||||
color: #f8615a
|
||||
35%, 45%
|
||||
color: #f8615a
|
||||
45%, 50%
|
||||
color: #ffd868
|
||||
50%, 65%
|
||||
color: #f8615a
|
||||
65%, 75%
|
||||
color: #f8615a
|
||||
75%, 80%
|
||||
color: #b80d57
|
||||
80%, 90%
|
||||
color: #721b65
|
||||
90%, 100%
|
||||
color: #222
|
||||
|
||||
.index-top_menu
|
||||
grid-area: top_menu
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
& nav
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: space-around
|
||||
width: 100%
|
||||
& a
|
||||
text-decoration: none
|
||||
text-transform: uppercase
|
||||
font-family: "Raleway Light"
|
||||
font-weight: 200
|
||||
font-style: normal
|
||||
color: #444
|
||||
transition: .3s
|
||||
&:hover
|
||||
color: black
|
||||
border-bottom-width: 0.75rem !important
|
||||
&.active
|
||||
border-bottom-width: 0.75rem !important
|
||||
&.katalog
|
||||
border-bottom: solid 1px #93CE38
|
||||
&.vyhledavani
|
||||
border-bottom: solid 1px #4089BB
|
||||
&.kontakt
|
||||
border-bottom: solid 1px #AD32A1
|
||||
&.o-spolecnosti
|
||||
border-bottom: solid 1px #C69F88
|
||||
|
||||
.index-preliminary
|
||||
grid-area: preliminary
|
||||
text-align: justify
|
||||
padding: 0
|
||||
& h3
|
||||
color: black
|
||||
& p
|
||||
color: #606060
|
||||
@media (min-width: 60rem)
|
||||
padding: 0 6vw
|
||||
@media (min-width: 90rem)
|
||||
padding: 0 40% 0 0
|
||||
@media (min-width 120rem)
|
||||
padding: 0 50% 0 0
|
||||
|
||||
.index-content
|
||||
grid-area: content
|
||||
.select
|
||||
position relative
|
||||
display inline-block
|
||||
margin-bottom 15px
|
||||
width 100%
|
||||
select
|
||||
display inline-block
|
||||
width 100%
|
||||
cursor pointer
|
||||
padding 1em 1.5em
|
||||
outline 0
|
||||
border-width 0 0 1px 0
|
||||
border-color #aaa
|
||||
border-style solid
|
||||
border-radius 0
|
||||
background white
|
||||
color gray
|
||||
appearance none
|
||||
-webkit-appearance none
|
||||
-moz-appearance none
|
||||
&::-ms-expand
|
||||
display none
|
||||
&:hover,
|
||||
&:focus
|
||||
color black
|
||||
background white
|
||||
.input
|
||||
position relative
|
||||
display inline-block
|
||||
margin-bottom 15px
|
||||
width 100%
|
||||
input
|
||||
display inline-block
|
||||
width 100%
|
||||
cursor pointer
|
||||
padding 1em 1.5em
|
||||
outline 0
|
||||
border-width 0 0 1px 0
|
||||
border-color #aaa
|
||||
border-style solid
|
||||
border-radius 0
|
||||
background white
|
||||
color gray
|
||||
appearance none
|
||||
-webkit-appearance none
|
||||
-moz-appearance none
|
||||
&::-ms-expand
|
||||
display none
|
||||
&:hover,
|
||||
&:focus
|
||||
color black
|
||||
background white
|
||||
textarea
|
||||
display inline-block
|
||||
width 100%
|
||||
height: 30em
|
||||
cursor pointer
|
||||
padding 1em 1.5em
|
||||
outline 0
|
||||
border-width 0 0 1px 0
|
||||
border-color #aaa
|
||||
border-style solid
|
||||
border-radius 0
|
||||
background white
|
||||
color gray
|
||||
appearance none
|
||||
-webkit-appearance none
|
||||
-moz-appearance none
|
||||
&::-ms-expand
|
||||
display none
|
||||
&:hover,
|
||||
&:focus
|
||||
color black
|
||||
background white
|
||||
|
||||
.index-top-part
|
||||
display: grid
|
||||
grid-template-columns: 1fr 2.5fr
|
||||
grid-template-rows: 0.5fr
|
||||
gap: 1em 1em
|
||||
grid-template-areas: "sorting search_bar"
|
||||
& .search_bar
|
||||
grid-area: search_bar
|
||||
& .sorting
|
||||
grid-area: sorting
|
||||
|
||||
.index-side_menu
|
||||
grid-area: side_menu
|
||||
& ul
|
||||
border-right: 1px solid #edf2f7
|
||||
list-style: none
|
||||
font-family: "Raleway Light"
|
||||
text-align: right
|
||||
font-size: 1.2rem
|
||||
& li
|
||||
padding-bottom: 0.6rem
|
||||
padding-top: 0.6rem
|
||||
padding-right: 2rem
|
||||
margin-right: 2rem
|
||||
transition: .5s
|
||||
& a
|
||||
text-decoration: none
|
||||
color: #555
|
||||
&:hover
|
||||
color: black
|
||||
&:hover
|
||||
border-radius: 0.3rem
|
||||
box-shadow: 0px 2px 4px 1px rgba(0,0,0,0.25)
|
||||
background-color: white
|
||||
|
||||
.index-footer
|
||||
font-family: "Raleway Thin" !important
|
||||
grid-area: footer
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
font-size: 1em
|
||||
text-transform: uppercase
|
||||
color: #333
|
||||
|
||||
|
||||
|
||||
.kontakt-grid-container
|
||||
display: grid
|
||||
min-height: 100%
|
||||
grid-template-columns: 1fr 1fr
|
||||
grid-template-rows: auto 1fr 1fr
|
||||
gap: 1em
|
||||
grid-template-areas: "kontakt-top kontakt-top" "kontakt-informace kontakt-form" "kontakt-mapa kontakt-form"
|
||||
|
||||
.kontakt-top
|
||||
grid-area: kontakt-top
|
||||
& h1
|
||||
color: black
|
||||
font-size: 2rem
|
||||
font-weight: 200
|
||||
font-style: normal
|
||||
text-transform: uppercase
|
||||
font-family: "Raleway Thin"
|
||||
|
||||
.kontakt-informace
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
border-radius: 0.45rem
|
||||
grid-area: kontakt-informace
|
||||
padding: 1rem
|
||||
& table
|
||||
color: #333
|
||||
border: none
|
||||
border-collapse: collapse
|
||||
& td
|
||||
border: none
|
||||
& th
|
||||
text-align: left
|
||||
padding-right: 1rem
|
||||
|
||||
.kontakt-mapa
|
||||
grid-area: kontakt-mapa
|
||||
& .map
|
||||
width: 100%
|
||||
height: 100%
|
||||
border-radius: 0.4rem
|
||||
box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25)
|
||||
|
||||
.kontakt-form
|
||||
grid-area: kontakt-form
|
||||
& form
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
border-radius: 0.45rem
|
||||
margin: 0rem 2rem
|
||||
height: 100%
|
||||
padding: 2rem
|
||||
& button
|
||||
padding: 1rem 3rem
|
||||
float: right
|
||||
& label
|
||||
font-family: "Raleway"
|
||||
text-transform: uppercase
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
@ -0,0 +1,150 @@
|
||||
<!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>
|
||||
Loading…
Reference in New Issue