initial commit
parent
724a7e9a31
commit
c9327e9992
@ -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