removing test
This commit is contained in:
203
indextest.html
203
indextest.html
@@ -1,203 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cz">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="test/assets/css/app.css">
|
||||
|
||||
<title>Brilo</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<a class="link" href="#" title="Logo"><img src="img/svg/logo.svg" widht="126" height="39" alt="Logo"></a>
|
||||
<button class="button button--menu d-md-none"><div></div><div></div><div></div></button>
|
||||
<ul class="list list--menu d-none d-md-flex">
|
||||
<li><a class="link link--menu" href="#" title="O nás">O nás</a></li>
|
||||
<li>
|
||||
<a class="link link--menu js-submenu" href="javascript:void(0);" title="Služby">
|
||||
Služby
|
||||
<img src="img/svg/arrow_down.svg" widht="10" height="6" alt="Arrow">
|
||||
</a>
|
||||
<ul class="submenu submenu--primary">
|
||||
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
|
||||
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
|
||||
<li>
|
||||
<a class="link link--submenu js-submenu" href="javascript:void(0);" title="Submenu">Submenu
|
||||
<img src="img/svg/arrow_right.svg" widht="16" height="16" alt="Arrow">
|
||||
</a>
|
||||
<ul class="submenu submenu--secondary">
|
||||
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
|
||||
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
|
||||
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
|
||||
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a class="link link--menu" href="#" title="Aktuality">Aktuality</a></li>
|
||||
<li><a class="link link--menu" href="#" title="Novinky">Novinky</a></li>
|
||||
<li><a class="link link--menu" href="#" title="Kontakty">Kontakty</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="section section--intro">
|
||||
<div class="container">
|
||||
<div class="row flex-md-row-reverse">
|
||||
<div class="col-12 col-md-6 px-0 ps-md-4">
|
||||
<img class="image image--section" src="img/image_0.webp" widht="680" height="456" alt="Session">
|
||||
</div>
|
||||
<div class="col-12 col-md-6 gx-5">
|
||||
<div class="d-flex flex-column justify-content-center h-100">
|
||||
<h1>Hlavní nadpis webu</h1>
|
||||
<p>V k žert planetu rysů obdivují stravování starověkého zebřičky u tahů zimující. Akcí a důkaz pomoci narozen muzea signálem.</p>
|
||||
<div class="section__links">
|
||||
<a class="button button--secondary" href="#" title="Více informací">Více informací</a>
|
||||
<a class="button button--primary" href="#" title="Poptat nabídku">Poptat nabídku</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--medium bg bg--primary-100">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 px-0 pe-md-4">
|
||||
<img class="image image--section" src="img/image_1.webp" widht="680" height="456" alt="Meeting">
|
||||
</div>
|
||||
<div class="col-12 col-md-6 gx-5">
|
||||
<h2>Nechte své peníze růst!</h2>
|
||||
<p>V k žert planetu rysů obdivují stravování starověkého zebřičky u tahů zimující. Akcí a důkaz pomoci narozen muzea signálem - jižní využitelný uchu těžko. Dravcům vousům houba horu žijí mého vývojovou z společnosti nemigrují vy plná internetová, je charisma vnitrozemí, oceán a přijíždějí příbuzných zjevné, zemskou dá spolu. Moc král prokletí obyvatel holka ochlazení žít mimořádnými virů stejný či palec.</p>
|
||||
<ul class="list list--dots">
|
||||
<li><p>Musel za až angličtinu látky nohy deprimovaná polokouli i roku map.</p></li>
|
||||
<li><p>Těžko popsal, ještě zúročovat však, by čase musel mi nuly, ta naší.</p></li>
|
||||
<li><p>Musel za až angličtinu látky nohy deprimovaná polokouli i roku map.</p></li>
|
||||
<li><p>Těžko popsal, ještě zúročovat však, by čase musel mi nuly, ta naší.</p></li>
|
||||
</ul>
|
||||
<div class="section__links">
|
||||
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--medium">
|
||||
<div class="container">
|
||||
<div class="row flex-md-row-reverse">
|
||||
<div class="col-12 col-md-6 px-0 ps-md-4">
|
||||
<img class="image image--section" src="img/image_2.webp" widht="680" height="456" alt="Office">
|
||||
</div>
|
||||
<div class="col-12 col-md-6 gx-5">
|
||||
<h2>Nechte své peníze růst!</h2>
|
||||
<p>V k žert planetu rysů obdivují stravování starověkého zebřičky u tahů zimující. Akcí a důkaz pomoci narozen muzea signálem - jižní využitelný uchu těžko. Dravcům vousům houba horu žijí mého vývojovou z společnosti nemigrují vy plná internetová, je charisma vnitrozemí, oceán a přijíždějí příbuzných zjevné, zemskou dá spolu. Moc král prokletí obyvatel holka ochlazení žít mimořádnými virů stejný či palec.</p>
|
||||
<div class="section__links">
|
||||
<a class="button button--primary" href="#" title="Zaregistovat se">Zaregistovat se</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--medium section--bottom">
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
<h2>Vyberte jednu z nabízených služeb</h2>
|
||||
<p>Hlasu zkrátka nevratné duší indičtí půlkilometrová začali nutné už od středisko. Společných snažila líně<br class="d-none d-md-block"> budoucnost začne vloženy stal objevováním, umělé cílem starým dne větvičky názvy moři zabíjí.</p>
|
||||
<ul class="list list--selection">
|
||||
<li><button class="button button--secondary is-active">Všechno</button></li>
|
||||
<li><button class="button button--secondary">Papírové tašky</button></li>
|
||||
<li><button class="button button--secondary">Látkové tašky</button></li>
|
||||
<li><button class="button button--secondary">Igelitové tašky</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row justify-content-center gy-4">
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
|
||||
<div class="card">
|
||||
<img class="image" src="img/cards/img1.webp" widht="328" height="328" alt="Machine">
|
||||
<h4>Látkové tašky s potiskem</h4>
|
||||
<p>Dlouhá význam s sionismu ty, jí antény i sezona, bílá malých izolovány uvést masové vodě</p>
|
||||
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
|
||||
<div class="card">
|
||||
<img class="image" src="img/cards/img2.webp" widht="328" height="328" alt="Bakery">
|
||||
<h4>Látkové tašky bez potisku</h4>
|
||||
<p>Dlouhá význam s sionismu ty, jí antény i sezona</p>
|
||||
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
|
||||
<div class="card">
|
||||
<img class="image" src="img/cards/img3.webp" widht="328" height="328" alt="White bags">
|
||||
<h4>Bílé papírové tašky</h4>
|
||||
<p>Dlouhá význam s sionismu ty, jí antény i sezona, bílá malých izolovány uvést masové vodě</p>
|
||||
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
|
||||
<div class="card">
|
||||
<img class="image" src="img/cards/img4.webp" widht="328" height="328" alt="Colored bags">
|
||||
<h4>Barevné papírové tašky na dárky</h4>
|
||||
<p>Dlouhá význam s sionismu ty, jí antény i sezona, bílá malých izolovány uvést masové vodě</p>
|
||||
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
|
||||
<div class="card">
|
||||
<img class="image" src="img/cards/img3.webp" widht="328" height="328" alt="White bags">
|
||||
<h4>Papírové tašky z recyklovatelného materiálu</h4>
|
||||
<p>Dlouhá význam s sionismu ty, jí antény i sezona</p>
|
||||
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
|
||||
<div class="card">
|
||||
<img class="image" src="img/cards/img1.webp" widht="328" height="328" alt="Machine">
|
||||
<h4>Igelitové sáčky s logem</h4>
|
||||
<p>Dlouhá význam s sionismu ty, jí antény i sezona, bílá malých izolovány uvést masové vodě</p>
|
||||
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
|
||||
<div class="card">
|
||||
<img class="image" src="img/cards/img2.webp" widht="328" height="328" alt="Bakery">
|
||||
<h4>Velké igelitové tašky s potiskem</h4>
|
||||
<p>Dlouhá význam s sionismu ty, jí antény i sezona, bílá malých izolovány uvést masové vodě</p>
|
||||
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer__content">
|
||||
<ul class="list list--footer order-lg-1">
|
||||
<li><a class="link" href="#" title="První proklik">První proklik</a></li>
|
||||
<li><a class="link" href="#" title="Druhý proklik">Druhý proklik</a></li>
|
||||
<li><a class="link" href="#" title="Třetí proklik">Třetí proklik</a></li>
|
||||
</ul>
|
||||
<a class="link d-block my-4 my-lg-0 order-lg-0" href="#" title="Logo"><img src="img/svg/logo.svg" widht="208" height="65" alt="Logo"></a>
|
||||
<p class="mb-0 order-lg-2">© 2022 Thalion All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="test/assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,7 +0,0 @@
|
||||
.bg {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg--primary-100 {
|
||||
background-color: $primary-100;
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
.button {
|
||||
padding: 1rem 2.5rem 1rem 2.5rem;
|
||||
min-width: 13.75rem;
|
||||
border: 0;
|
||||
border-radius: $global-radius;
|
||||
color: $primary-900;
|
||||
font-family: $font-primary;
|
||||
font-size: 0.875rem;
|
||||
font-weight: $weight-bold;
|
||||
line-height: 1.5rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
background-color: $conversion-400;
|
||||
|
||||
&:hover {
|
||||
padding-bottom: 0.875rem;
|
||||
background-color: $conversion-500;
|
||||
border-bottom: 0.125rem solid $conversion-600;
|
||||
}
|
||||
}
|
||||
|
||||
.button--secondary {
|
||||
color: $conversion-500;
|
||||
background-color: $white;
|
||||
border: 0.0625rem solid $primary-100;
|
||||
font-size: 0.875rem;
|
||||
box-shadow: 0 0.1875rem 0.9375rem 0 #00065B1A;
|
||||
|
||||
&:hover {
|
||||
color: $primary-900;
|
||||
background-color: $primary-100;
|
||||
}
|
||||
|
||||
&:active, &.is-active {
|
||||
color: $white;
|
||||
background-color: $primary-500;
|
||||
border-color: $primary-500;
|
||||
}
|
||||
|
||||
&:hover, &:active, &.is-active{
|
||||
box-shadow: 0 0.3125rem 0.9375rem 0 #00065B4D;
|
||||
}
|
||||
}
|
||||
|
||||
.button--menu {
|
||||
min-width: auto;
|
||||
padding: 1rem;
|
||||
background-color: $white;
|
||||
|
||||
div {
|
||||
width: 2rem;
|
||||
height: 0.1875rem;
|
||||
margin-block: 0.25rem;
|
||||
background-color: $primary-900;
|
||||
border-radius: $global-radius;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $primary-100;
|
||||
}
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
.submenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -0.5rem;
|
||||
padding: 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: $weight-bold;
|
||||
border-radius: $global-radius;
|
||||
list-style-type: none;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 0.1875rem 0.9375rem 0 #00065B1A;
|
||||
z-index: 1;
|
||||
|
||||
&.is-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 15rem;
|
||||
height: 3.5rem;
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: $white;
|
||||
padding-inline: 1rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary-100;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child .link {
|
||||
border-radius: $global-radius $global-radius 0 0;
|
||||
}
|
||||
|
||||
&:last-child .link {
|
||||
border-radius: 0 0 $global-radius $global-radius;
|
||||
}
|
||||
}
|
||||
|
||||
li + li {
|
||||
border-top: 0.0625rem solid $primary-100;
|
||||
}
|
||||
}
|
||||
|
||||
.submenu--primary {
|
||||
top: 2rem;
|
||||
left: -5rem;
|
||||
|
||||
@media (min-width: 100rem) {
|
||||
left: -0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.submenu--secondary {
|
||||
left: 15.625rem;
|
||||
}
|
||||
|
||||
.section__links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
|
||||
@media (min-width: 36rem) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
@media (min-width: 62rem) {
|
||||
margin-top: 4rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
||||
h4 {
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: auto auto 2rem;
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
body {
|
||||
font-family: $font-primary;
|
||||
font-weight: $weight-medium;
|
||||
color: $primary-900;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.image--section {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
|
||||
footer .container {
|
||||
border-top: 0.5rem solid $primary-100;
|
||||
}
|
||||
|
||||
.footer__content {
|
||||
padding-block: 1.5rem 2.5rem;
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: 62rem) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: 80rem;
|
||||
min-height: 10rem;
|
||||
margin-inline: auto;
|
||||
padding-block: 0;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
padding-inline: 2rem;
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
.header {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: $header-height;
|
||||
background-color: $white;
|
||||
z-index: 10;
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
height: $header-height-desktop;
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
.container {
|
||||
max-width: $container-width;
|
||||
}
|
||||
|
||||
.section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section--intro {
|
||||
padding-block: $header-height 3.5rem;
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
padding-block: $header-height-desktop 7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.section--medium {
|
||||
padding-block: 0 3.5rem;
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
padding-block: 7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.section--bottom {
|
||||
padding-top: 0;
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
.link {
|
||||
position: relative;
|
||||
color: $conversion-500;
|
||||
font-weight: $weight-bold;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $conversion-600;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.link--menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $primary-900;
|
||||
font-weight: $weight-bold;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5rem;
|
||||
gap: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
transition: $global-transition;
|
||||
|
||||
&:hover {
|
||||
color: $primary-900;
|
||||
text-decoration: none;
|
||||
margin-top: -0.3125rem;
|
||||
padding-bottom: 0.3125rem;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -0.3125rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
background-color: $conversion-400;
|
||||
transition: $global-transition;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
bottom: 0rem;
|
||||
}
|
||||
|
||||
&:hover::after, &.is-active::after {
|
||||
height: 0.25rem;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.link--submenu {
|
||||
color: $primary-900;
|
||||
|
||||
&:hover {
|
||||
color: $primary-900;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
.list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list--menu {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.list--dots {
|
||||
list-style-type: '•';
|
||||
margin: 0 0 0 0.375rem;
|
||||
|
||||
li {
|
||||
margin-bottom: 0.25rem;
|
||||
padding-left: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.list--selection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-block: 2.5rem;
|
||||
gap: 1rem;
|
||||
|
||||
.button {
|
||||
min-width: 13.75rem;
|
||||
}
|
||||
|
||||
@media (min-width: 62rem) {
|
||||
flex-direction: row;
|
||||
margin-block: 4rem;
|
||||
gap: 2rem;
|
||||
|
||||
.button {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list--footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
|
||||
@media (min-width: 62rem) {
|
||||
flex-direction: row;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
// Fonts
|
||||
$font-primary: 'Montserrat', sans-serif;
|
||||
|
||||
// Weights
|
||||
$weight-normal: 400;
|
||||
$weight-medium: 500;
|
||||
$weight-bold: 700;
|
||||
|
||||
// Colors
|
||||
$white: #FFFFFF;
|
||||
$black: #000000;
|
||||
|
||||
$primary-100: #E7F0FF;
|
||||
$primary-300: #7387AC;
|
||||
$primary-400: #5F7AFF;
|
||||
$primary-500: #264AFB;
|
||||
$primary-900: #00065B;
|
||||
|
||||
$conversion-400: #06EB83;
|
||||
$conversion-500: #01D684;
|
||||
$conversion-600: #009E61;
|
||||
|
||||
// Others
|
||||
$container-width: 88rem;
|
||||
$header-height: 4.5rem;
|
||||
$header-height-desktop: 6.5rem;
|
||||
|
||||
$global-radius: 0.5rem;
|
||||
$global-transition: all 0.2s ease-in;
|
||||
@@ -1,40 +0,0 @@
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: $weight-bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
line-height: 3.5rem;
|
||||
margin-block: 1rem 0.25rem;
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
margin-block: 0 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.625rem, 3vw, 2rem);
|
||||
line-height: 2.5rem;
|
||||
margin-block: 1.5rem 0.75rem;
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
margin-block: 0 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: clamp(1.125rem, 2vw, 1.25rem);
|
||||
}
|
||||
|
||||
h3, h4 {
|
||||
line-height: 2rem;
|
||||
margin-bottom: 0.875rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: clamp(0.875rem, 1.75vw, 1rem);
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
@charset "UTF-8";.header,.link--menu{display:flex;align-items:center}.button,body{font-family:Montserrat,sans-serif;color:#00065b}.button,.list--selection .button{min-width:13.75rem}.button,.link{text-decoration:none}.button,.link--menu{line-height:1.5rem;text-transform:uppercase}.button,.link--menu,.submenu{text-transform:uppercase}.button--secondary,.submenu{font-size:.875rem;box-shadow:0 .1875rem .9375rem 0 rgba(0,6,91,.1019607843)}.button,.card,.footer__content{text-align:center}body{font-weight:500}.button,.link,.link--menu,.submenu,h1,h2,h3,h4{font-weight:700}img{border-style:none;vertical-align:middle}.image{width:100%;height:auto}.image--section{height:100%;-o-object-fit:cover;object-fit:cover}.container{max-width:88rem}.section{position:relative}.section--intro{padding-block:4.5rem 3.5rem}@media (min-width:48rem){.section--intro{padding-block:6.5rem 7rem}}.section--medium{padding-block:0 3.5rem}.section--bottom{padding-top:0}.header{position:fixed;width:100%;height:4.5rem;background-color:#fff;z-index:10}.bg,.link,.list--menu li{position:relative}footer .container{border-top:.5rem solid #e7f0ff}.footer__content{padding-block:1.5rem 2.5rem}@media (min-width:62rem){.footer__content{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:80rem;min-height:10rem;margin-inline:auto;padding-block:0;padding-inline:1rem}}@media (min-width:75rem){.footer__content{padding-inline:2rem}}h1{font-size:clamp(2rem, 4vw, 3rem);line-height:3.5rem;margin-block:1rem 0.25rem}h2{font-size:clamp(1.625rem, 3vw, 2rem);line-height:2.5rem;margin-block:1.5rem 0.75rem}h3{font-size:clamp(1.25rem, 2.5vw, 1.5rem)}h4{font-size:clamp(1.125rem, 2vw, 1.25rem)}h3,h4{line-height:2rem;margin-bottom:.875rem}p{font-size:clamp(.875rem, 1.75vw, 1rem)}.button{padding:1rem 2.5rem;border:0;border-radius:.5rem;font-size:.875rem}.button--primary{background-color:#06eb83}.button--primary:hover{padding-bottom:.875rem;background-color:#01d684;border-bottom:.125rem solid #009e61}.button--secondary{color:#01d684;background-color:#fff;border:.0625rem solid #e7f0ff}.button--secondary:hover{color:#00065b;background-color:#e7f0ff}.button--secondary.is-active,.button--secondary:active{color:#fff;background-color:#264afb;border-color:#264afb}.button--secondary.is-active,.button--secondary:active,.button--secondary:hover{box-shadow:0 .3125rem .9375rem 0 rgba(0,6,91,.3019607843)}.button--menu{min-width:auto;padding:1rem;background-color:#fff}.bg--primary-100,.button--menu:active,.submenu li .link:hover{background-color:#e7f0ff}.button--menu div{width:2rem;height:.1875rem;margin-block:0.25rem;background-color:#00065b;border-radius:.5rem}.list{list-style-type:none;margin:0;padding:0}.list p{margin-bottom:0}.list--menu{display:flex;gap:2rem}.list--dots{list-style-type:"•";margin:0 0 0 .375rem}.list--dots li{margin-bottom:.25rem;padding-left:.375rem}.list--selection{display:flex;flex-direction:column;justify-content:center;margin-block:2.5rem;gap:1rem}@media (min-width:62rem){.list--selection{flex-direction:row;margin-block:4rem;gap:2rem}.list--selection .button{min-width:auto}}.list--footer{display:flex;flex-direction:column;gap:.75rem}.link{color:#01d684}.link:hover{color:#009e61;text-decoration:underline}.link--menu:hover,.link--submenu:hover{color:#00065b;text-decoration:none}.link--menu{color:#00065b;font-size:.875rem;gap:.5rem;transition:.2s ease-in}.link--menu:hover{margin-top:-.3125rem;padding-bottom:.3125rem}.link--menu::after{content:"";position:absolute;bottom:-.3125rem;left:0;width:100%;height:0;background-color:#06eb83;transition:.2s ease-in;opacity:0}.link--menu:hover::after{bottom:0}.link--menu.is-active::after,.link--menu:hover::after{height:.25rem;opacity:1}.link--submenu{color:#00065b}.submenu{display:none;position:absolute;top:0;left:-.5rem;padding:0;border-radius:.5rem;list-style-type:none;z-index:1}.submenu.is-open{display:block}.submenu li{width:15rem;height:3.5rem}.submenu li .link{display:flex;align-items:center;justify-content:space-between;background-color:#fff;padding-inline:1rem;width:100%;height:100%}.submenu li:first-child .link{border-radius:.5rem .5rem 0 0}.submenu li:last-child .link{border-radius:0 0 .5rem .5rem}.submenu li+li{border-top:.0625rem solid #e7f0ff}.submenu--primary{top:2rem;left:-5rem}@media (min-width:100rem){.submenu--primary{left:-.5rem}}.submenu--secondary{left:15.625rem}.section__links{display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center;gap:1rem;margin-top:2rem}@media (min-width:36rem){.section__links{flex-direction:row}}@media (min-width:48rem){.section--medium{padding-block:7rem}.header{height:6.5rem}h1{margin-block:0 1.25rem}h2{margin-block:0 1.125rem}.button{min-width:auto}.section__links{justify-content:start}}@media (min-width:62rem){.list--footer{flex-direction:row;gap:2.5rem}.section__links{margin-top:4rem;gap:2rem}}.card{border:0;height:100%}.card h4{margin-block:1rem}.card p{margin-bottom:2rem}.card .button{margin:auto auto 2rem;min-width:auto}
|
||||
@@ -1,13 +0,0 @@
|
||||
@import 'settings';
|
||||
|
||||
@import 'default';
|
||||
@import 'layout';
|
||||
@import 'header';
|
||||
@import 'footer';
|
||||
|
||||
@import 'typography';
|
||||
@import 'buttons';
|
||||
@import 'lists';
|
||||
@import 'links';
|
||||
@import 'backgrounds';
|
||||
@import 'components';
|
||||
@@ -1,3 +0,0 @@
|
||||
document.querySelectorAll(".js-submenu").forEach(function(e){
|
||||
e.addEventListener('click', function (event) {this.parentElement.querySelector('.submenu').classList.toggle("is-open");});
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.528575 0.528606C0.788925 0.268256 1.21103 0.268256 1.47138 0.528606L4.99998 4.0572L8.52858 0.528606C8.78893 0.268256 9.21103 0.268256 9.47138 0.528606C9.73173 0.788955 9.73173 1.21107 9.47138 1.47141L5.47138 5.47141C5.21103 5.73176 4.78892 5.73176 4.52858 5.47141L0.528575 1.47141C0.268226 1.21107 0.268226 0.788955 0.528575 0.528606Z" fill="#06EB83"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 506 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 14L10.5 8.5L5 3" stroke="#06EB83" stroke-width="2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 168 B |
@@ -1,34 +0,0 @@
|
||||
<svg width="126" height="39" viewBox="0 0 126 39" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_745_149)">
|
||||
<path d="M18.1576 19.5568C21.7856 23.3121 25.3483 27.1342 29.0415 30.8259L39.9255 19.5568L35.6627 12.1735H22.4204C20.9995 14.6336 19.5785 17.0952 18.1576 19.5568ZM33.4588 15.9925L35.1789 18.9728L29.0415 25.3282L22.9042 18.9728L24.6243 15.9925H33.4588Z" fill="url(#paint0_linear_745_149)"/>
|
||||
<path d="M22.9019 18.974L29.0399 25.3297L35.1778 18.974L35.1848 18.9853C36.39 21.0726 35.9953 23.6492 34.386 25.291L34.3809 25.2967L29.0399 30.8272C25.3468 27.1341 21.7838 23.3136 18.1556 19.5567L21.9736 12.9437C20.9126 14.8276 21.1874 17.2626 22.7902 18.8655C22.8243 18.8995 22.8617 18.9355 22.9022 18.9733L22.9019 18.974ZM22.026 12.8533L22.0258 12.8535L22.0323 12.8422L22.026 12.8533Z" fill="url(#paint1_linear_745_149)"/>
|
||||
<path d="M14.5944 8.03067C14.8629 7.69845 15.1419 7.37493 15.4339 7.06278C16.5717 5.84361 17.8775 4.7903 19.2992 3.92339C19.5165 3.78773 19.6923 3.68134 19.698 3.67815C21.1265 2.84896 22.6667 2.2155 24.2641 1.78914C26.5341 1.17429 28.9232 0.978934 31.284 1.26229C31.3315 1.26766 31.3776 1.27346 31.424 1.28079C32.0421 1.35569 32.6576 1.46421 33.2652 1.60453C38.9416 2.91865 43.8962 7.01088 46.2138 12.4324C48.6056 18.0268 48.0704 24.7777 44.7026 29.9583C40.4439 36.511 31.8842 39.9479 24.0377 37.7095C23.7096 37.6162 23.4614 37.5262 23.0762 37.4104C23.0762 37.4104 22.6411 37.2683 22.2952 37.1699C19.2332 36.2985 15.9515 36.2487 12.8815 36.989L9.6691 37.8497L8.01804 31.6879C10.3271 30.4316 11.7959 27.6626 11.2104 24.9119C11.178 24.797 7.96386 12.7956 7.96386 12.7956C7.34877 9.98367 4.60576 7.83743 1.64934 7.91958L-0.000900617 1.76078C1.56182 1.3404 3.12609 0.919615 4.69046 0.505385C8.12414 -0.414665 11.9394 0.310883 14.9119 2.30505C13.8922 3.13509 12.9449 4.05114 12.085 5.04098C11.0833 4.46265 9.96755 4.0796 8.79398 3.95421C7.7341 3.84119 6.64791 3.93126 5.62201 4.20944L4.65523 4.46849C8.05879 5.45262 10.881 8.36178 11.6845 11.9321L11.6761 11.8948C13.2594 17.8096 14.9562 24.1668 14.9562 24.1668C15.6134 27.3513 14.635 30.7945 12.3571 33.1692L12.3313 33.1959C12.3778 33.1851 12.4228 33.1747 12.4697 33.1654C16.372 32.3158 20.4237 32.5217 24.1769 33.7532C24.1769 33.7532 24.9001 33.9992 25.5338 34.1572C30.6443 35.4434 36.3728 33.7553 39.9724 29.8453C43.9445 25.5307 45.0524 18.7894 42.4344 13.3413C40.2149 8.72212 35.4722 5.45773 30.3356 5.00222C30.285 4.99767 30.2332 4.99507 30.1826 4.99052C24.7077 4.57621 19.1311 7.44602 16.312 12.2275C16.1716 12.4658 16.0376 12.7077 15.9101 12.953C15.5286 11.5232 15.0816 9.84895 14.5944 8.03067Z" fill="url(#paint2_linear_745_149)"/>
|
||||
<path d="M30.1186 4.98454C24.6645 4.5966 19.1218 7.46336 16.312 12.2265C16.1722 12.4636 16.0391 12.7046 15.9131 12.9493C16.9792 7.71095 20.9021 3.25456 26.4125 1.77806C28.7097 1.16241 31.0272 1.13345 33.2053 1.59905C33.2301 1.59841 33.2503 1.6 33.2659 1.6035C38.9421 2.91817 43.8978 7.00906 46.215 12.4302C48.6068 18.0256 48.0713 24.7765 44.7036 29.9565C42.0476 34.0421 37.7199 36.9168 32.9357 37.9595L32.9351 37.9599L32.8651 37.975L32.9357 37.9595C41.3159 35.2346 46.1927 26.3789 43.8856 17.7683C43.7877 17.4028 43.6775 17.0407 43.5552 16.6826C43.3212 15.5264 42.945 14.4036 42.4352 13.3398C40.2156 8.72043 35.4731 5.4565 30.3364 5.00013C30.2852 4.99682 30.234 4.99321 30.1827 4.98932L30.1186 4.98454Z" fill="url(#paint3_linear_745_149)"/>
|
||||
<path d="M95.1815 30.8417H91.3624V12.1956H95.1815V30.8417ZM116.75 12.1749C120.119 12.2067 123.375 14.1877 124.942 17.1554C126.285 19.6983 126.357 22.8808 125.119 25.4886C123.375 29.1629 119.077 31.4513 114.927 30.6555C111.122 29.925 107.964 26.5882 107.45 22.7439C107.057 19.8017 108.164 16.7004 110.341 14.6733C112.032 13.0995 114.316 12.1972 116.631 12.1749H116.75ZM59.1755 13.9809C61.1068 12.5822 63.5638 11.9204 65.9556 12.2735C68.8899 12.7063 71.5919 14.573 72.962 17.2174C74.3142 19.8272 74.3349 23.0892 73.0033 25.7053C70.6736 30.2817 64.2625 32.409 59.597 29.2727C59.4539 29.1757 59.3139 29.0754 59.1755 28.972V30.8242H55.3563V5.96145H59.1755V13.9809ZM86.1929 12.1749C86.9756 12.1844 87.7552 12.2974 88.5112 12.5026L88.5462 12.5122L87.5598 16.1961C87.2703 16.1134 87.1602 16.0943 86.9553 16.0609C83.973 15.5753 80.7269 18.0686 80.6441 21.2339C80.6394 21.4152 80.6425 21.6014 80.633 21.7461V30.821H76.8142V12.1749H80.633V13.9745C82.1988 12.8434 84.1292 12.1991 86.0736 12.1749H86.1929ZM102.805 24.5754C102.805 24.5754 102.804 25.2627 103.107 25.7832C103.641 26.6932 104.801 27.1705 105.827 26.9032L106.81 30.5712C105.133 31.0199 103.292 30.7892 101.833 29.8171C100.111 28.6698 99.0134 26.6423 98.9864 24.5754V5.95795H102.805V24.5754ZM116.656 15.994C114.215 16.0179 111.904 17.8236 111.336 20.2201C110.898 22.0595 111.488 24.1093 112.848 25.4364C114.362 26.9159 116.762 27.4174 118.769 26.5978C120.521 25.8819 121.846 24.2111 122.132 22.3399C122.588 19.3674 120.25 16.2276 117.083 16.0068C116.94 15.9972 116.799 15.994 116.656 15.994ZM64.6444 15.9972C61.6799 16.0338 58.9002 18.7291 59.2152 21.8925C59.4857 24.5977 61.8915 27.0054 64.6762 27.0054C67.488 27.0069 70.1629 24.5102 70.1772 21.622C70.1916 18.7578 67.6916 16.0227 64.716 15.9972H64.6444ZM95.1803 9.79458H91.3611V5.97863H95.1803V9.79458Z" fill="#00065B"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_745_149" x1="22.1661" y1="19.2653" x2="29.9986" y2="15.6125" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#009E67"/>
|
||||
<stop offset="1" stop-color="#02EB81"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_745_149" x1="36.1733" y1="21.2202" x2="27.7552" y2="25.6839" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#009E67"/>
|
||||
<stop offset="1" stop-color="#01D684"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_745_149" x1="25.8958" y1="6.44567" x2="21.4849" y2="25.509" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3F99FE"/>
|
||||
<stop offset="1" stop-color="#264AFB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_745_149" x1="37.2094" y1="37.1513" x2="11.9243" y2="14.7786" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3477FD"/>
|
||||
<stop offset="0.07" stop-color="#3B8BFE"/>
|
||||
<stop offset="0.14" stop-color="#419DFF"/>
|
||||
<stop offset="0.37" stop-color="#43A4FF"/>
|
||||
<stop offset="0.73" stop-color="#44A8FF"/>
|
||||
<stop offset="1" stop-color="#264AFB"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_745_149">
|
||||
<rect width="126" height="38.5" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 6.2 KiB |
203
test/index.html
203
test/index.html
@@ -1,203 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cz">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<title>Brilo</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<a class="link" href="#" title="Logo"><img src="img/svg/logo.svg" widht="126" height="39" alt="Logo"></a>
|
||||
<button class="button button--menu d-md-none"><div></div><div></div><div></div></button>
|
||||
<ul class="list list--menu d-none d-md-flex">
|
||||
<li><a class="link link--menu" href="#" title="O nás">O nás</a></li>
|
||||
<li>
|
||||
<a class="link link--menu js-submenu" href="javascript:void(0);" title="Služby">
|
||||
Služby
|
||||
<img src="img/svg/arrow_down.svg" widht="10" height="6" alt="Arrow">
|
||||
</a>
|
||||
<ul class="submenu submenu--primary">
|
||||
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
|
||||
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
|
||||
<li>
|
||||
<a class="link link--submenu js-submenu" href="javascript:void(0);" title="Submenu">Submenu
|
||||
<img src="img/svg/arrow_right.svg" widht="16" height="16" alt="Arrow">
|
||||
</a>
|
||||
<ul class="submenu submenu--secondary">
|
||||
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
|
||||
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
|
||||
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
|
||||
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a class="link link--submenu" href="#" title="Submenu">Submenu</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a class="link link--menu" href="#" title="Aktuality">Aktuality</a></li>
|
||||
<li><a class="link link--menu" href="#" title="Novinky">Novinky</a></li>
|
||||
<li><a class="link link--menu" href="#" title="Kontakty">Kontakty</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="section section--intro">
|
||||
<div class="container">
|
||||
<div class="row flex-md-row-reverse">
|
||||
<div class="col-12 col-md-6 px-0 ps-md-4">
|
||||
<img class="image image--section" src="img/image_0.webp" widht="680" height="456" alt="Session">
|
||||
</div>
|
||||
<div class="col-12 col-md-6 gx-5">
|
||||
<div class="d-flex flex-column justify-content-center h-100">
|
||||
<h1>Hlavní nadpis webu</h1>
|
||||
<p>V k žert planetu rysů obdivují stravování starověkého zebřičky u tahů zimující. Akcí a důkaz pomoci narozen muzea signálem.</p>
|
||||
<div class="section__links">
|
||||
<a class="button button--secondary" href="#" title="Více informací">Více informací</a>
|
||||
<a class="button button--primary" href="#" title="Poptat nabídku">Poptat nabídku</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--medium bg bg--primary-100">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 px-0 pe-md-4">
|
||||
<img class="image image--section" src="img/image_1.webp" widht="680" height="456" alt="Meeting">
|
||||
</div>
|
||||
<div class="col-12 col-md-6 gx-5">
|
||||
<h2>Nechte své peníze růst!</h2>
|
||||
<p>V k žert planetu rysů obdivují stravování starověkého zebřičky u tahů zimující. Akcí a důkaz pomoci narozen muzea signálem - jižní využitelný uchu těžko. Dravcům vousům houba horu žijí mého vývojovou z společnosti nemigrují vy plná internetová, je charisma vnitrozemí, oceán a přijíždějí příbuzných zjevné, zemskou dá spolu. Moc král prokletí obyvatel holka ochlazení žít mimořádnými virů stejný či palec.</p>
|
||||
<ul class="list list--dots">
|
||||
<li><p>Musel za až angličtinu látky nohy deprimovaná polokouli i roku map.</p></li>
|
||||
<li><p>Těžko popsal, ještě zúročovat však, by čase musel mi nuly, ta naší.</p></li>
|
||||
<li><p>Musel za až angličtinu látky nohy deprimovaná polokouli i roku map.</p></li>
|
||||
<li><p>Těžko popsal, ještě zúročovat však, by čase musel mi nuly, ta naší.</p></li>
|
||||
</ul>
|
||||
<div class="section__links">
|
||||
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--medium">
|
||||
<div class="container">
|
||||
<div class="row flex-md-row-reverse">
|
||||
<div class="col-12 col-md-6 px-0 ps-md-4">
|
||||
<img class="image image--section" src="img/image_2.webp" widht="680" height="456" alt="Office">
|
||||
</div>
|
||||
<div class="col-12 col-md-6 gx-5">
|
||||
<h2>Nechte své peníze růst!</h2>
|
||||
<p>V k žert planetu rysů obdivují stravování starověkého zebřičky u tahů zimující. Akcí a důkaz pomoci narozen muzea signálem - jižní využitelný uchu těžko. Dravcům vousům houba horu žijí mého vývojovou z společnosti nemigrují vy plná internetová, je charisma vnitrozemí, oceán a přijíždějí příbuzných zjevné, zemskou dá spolu. Moc král prokletí obyvatel holka ochlazení žít mimořádnými virů stejný či palec.</p>
|
||||
<div class="section__links">
|
||||
<a class="button button--primary" href="#" title="Zaregistovat se">Zaregistovat se</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--medium section--bottom">
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
<h2>Vyberte jednu z nabízených služeb</h2>
|
||||
<p>Hlasu zkrátka nevratné duší indičtí půlkilometrová začali nutné už od středisko. Společných snažila líně<br class="d-none d-md-block"> budoucnost začne vloženy stal objevováním, umělé cílem starým dne větvičky názvy moři zabíjí.</p>
|
||||
<ul class="list list--selection">
|
||||
<li><button class="button button--secondary is-active">Všechno</button></li>
|
||||
<li><button class="button button--secondary">Papírové tašky</button></li>
|
||||
<li><button class="button button--secondary">Látkové tašky</button></li>
|
||||
<li><button class="button button--secondary">Igelitové tašky</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row justify-content-center gy-4">
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
|
||||
<div class="card">
|
||||
<img class="image" src="img/cards/img1.webp" widht="328" height="328" alt="Machine">
|
||||
<h4>Látkové tašky s potiskem</h4>
|
||||
<p>Dlouhá význam s sionismu ty, jí antény i sezona, bílá malých izolovány uvést masové vodě</p>
|
||||
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
|
||||
<div class="card">
|
||||
<img class="image" src="img/cards/img2.webp" widht="328" height="328" alt="Bakery">
|
||||
<h4>Látkové tašky bez potisku</h4>
|
||||
<p>Dlouhá význam s sionismu ty, jí antény i sezona</p>
|
||||
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
|
||||
<div class="card">
|
||||
<img class="image" src="img/cards/img3.webp" widht="328" height="328" alt="White bags">
|
||||
<h4>Bílé papírové tašky</h4>
|
||||
<p>Dlouhá význam s sionismu ty, jí antény i sezona, bílá malých izolovány uvést masové vodě</p>
|
||||
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
|
||||
<div class="card">
|
||||
<img class="image" src="img/cards/img4.webp" widht="328" height="328" alt="Colored bags">
|
||||
<h4>Barevné papírové tašky na dárky</h4>
|
||||
<p>Dlouhá význam s sionismu ty, jí antény i sezona, bílá malých izolovány uvést masové vodě</p>
|
||||
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
|
||||
<div class="card">
|
||||
<img class="image" src="img/cards/img3.webp" widht="328" height="328" alt="White bags">
|
||||
<h4>Papírové tašky z recyklovatelného materiálu</h4>
|
||||
<p>Dlouhá význam s sionismu ty, jí antény i sezona</p>
|
||||
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
|
||||
<div class="card">
|
||||
<img class="image" src="img/cards/img1.webp" widht="328" height="328" alt="Machine">
|
||||
<h4>Igelitové sáčky s logem</h4>
|
||||
<p>Dlouhá význam s sionismu ty, jí antény i sezona, bílá malých izolovány uvést masové vodě</p>
|
||||
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
|
||||
<div class="card">
|
||||
<img class="image" src="img/cards/img2.webp" widht="328" height="328" alt="Bakery">
|
||||
<h4>Velké igelitové tašky s potiskem</h4>
|
||||
<p>Dlouhá význam s sionismu ty, jí antény i sezona, bílá malých izolovány uvést masové vodě</p>
|
||||
<a class="button button--primary" href="#" title="Zjistit více">Zjistit více</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer__content">
|
||||
<ul class="list list--footer order-lg-1">
|
||||
<li><a class="link" href="#" title="První proklik">První proklik</a></li>
|
||||
<li><a class="link" href="#" title="Druhý proklik">Druhý proklik</a></li>
|
||||
<li><a class="link" href="#" title="Třetí proklik">Třetí proklik</a></li>
|
||||
</ul>
|
||||
<a class="link d-block my-4 my-lg-0 order-lg-0" href="#" title="Logo"><img src="img/svg/logo.svg" widht="208" height="65" alt="Logo"></a>
|
||||
<p class="mb-0 order-lg-2">© 2022 Thalion All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user