diff --git a/main/ui-main/public/index.html b/main/ui-main/public/index.html
index d6c9c897845794e2bf0ec3ef59aae0ba6c1b7bb8..183d0b48b82c4c35101169fc6f1e60daf9f0687d 100644
--- a/main/ui-main/public/index.html
+++ b/main/ui-main/public/index.html
@@ -71,20 +71,77 @@
</nav>
<header>
</header>
-<main class="container container--default pt-8 lg:py-16">
- <div>
+<main>
+ <div class="container--wide mx-auto pt-8 lg:py-16">
<h2 class="clear-both head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center">
Co právě děláme
</h2>
- <div>
- <div></div>
- </div>
- <a href="#"
- class="btn btn--hoveractive font-condensed uppercase">
- <div class="btn__body-wrap">
- <div class="btn__body ">Zobrazit starší</div>
+ <div class="mb-8 flex flex-wrap justify-center">
+ <div class="box border border-grey-100">
+ <div class="box-content flex flex-col items-center text-center">
+ <img class="rounded-full shadow-sm w-12 mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
+ alt="user image"/>
+ <h5 class="font-alt mb-2">Tomáš Marný</h5>
+ <small class="mb-4 text-turquoise-500">@pirat.tomas.marny</small>
+ <p class="text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+ eirmod
+ tempor invidunt ut labore
+ et
+ dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+ <i class="ico--twitter text-turquoise-500 text-xl"></i>
+ </div>
+ </div>
+ <div class="box border border-grey-100">
+ <div class="box-content flex flex-col items-center text-center">
+ <img class="rounded-full shadow-sm w-12 mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
+ alt="user image"/>
+ <h5 class="font-alt mb-2">Tomáš Marný</h5>
+ <small class="mb-4 text-turquoise-500">@pirat.tomas.marny</small>
+ <p class="text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+ eirmod
+ tempor invidunt ut labore
+ et
+ dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+ <i class="ico--twitter text-turquoise-500 text-xl"></i>
+ </div>
+ </div>
+ <div class="box border border-grey-100">
+ <div class="box-content flex flex-col items-center text-center">
+ <img class="rounded-full shadow-sm w-12 mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
+ alt="user image"/>
+ <h5 class="font-alt mb-2">Tomáš Marný</h5>
+ <small class="mb-4 text-turquoise-500">@pirat.tomas.marny</small>
+ <p class="text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+ eirmod
+ tempor invidunt ut labore
+ et
+ dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+ <i class="ico--twitter text-turquoise-500 text-xl"></i>
+ </div>
+ </div>
+ <div class="box border border-grey-100">
+ <div class="box-content flex flex-col items-center text-center">
+ <img class="rounded-full shadow-sm w-12 mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
+ alt="user image"/>
+ <h5 class="font-alt mb-2">Tomáš Marný</h5>
+ <small class="mb-4 text-turquoise-500">@pirat.tomas.marny</small>
+ <p class="text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+ eirmod
+ tempor invidunt ut labore
+ et
+ dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+ <i class="ico--twitter text-turquoise-500 text-xl"></i>
+ </div>
</div>
- </a>
+ </div>
+ <div class="flex justify-center">
+ <a href="#"
+ class="btn btn--hoveractive font-condensed uppercase">
+ <div class="btn__body-wrap">
+ <div class="btn__body ">Zobrazit starší</div>
+ </div>
+ </a>
+ </div>
</div>
</main>
<footer></footer>
diff --git a/main/ui-main/public/styles.css b/main/ui-main/public/styles.css
index e3d468f605131aa9f1b9c9999e23063473395583..0ccbdb3c8dbc64d0d8fd3ad0abdb657c2497657a 100644
--- a/main/ui-main/public/styles.css
+++ b/main/ui-main/public/styles.css
@@ -1833,6 +1833,20 @@ video {
}
}
+.box{
+ width: 15rem;
+}
+
+.box .box-content{
+ padding: 1rem;
+}
+
+@media (min-width: 992px) {
+ .box{
+ width: 20rem;
+ }
+}
+
.navbar-menu__link{
cursor: pointer;
font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
@@ -1929,6 +1943,22 @@ video {
margin-right: 4rem;
}
+.mb-8{
+ margin-bottom: 2rem;
+}
+
+.mb-2{
+ margin-bottom: 0.5rem;
+}
+
+.mb-4{
+ margin-bottom: 1rem;
+}
+
+.box-content{
+ box-sizing: content-box;
+}
+
.flex{
display: flex;
}
@@ -1937,12 +1967,37 @@ video {
width: 9rem;
}
+.w-12{
+ width: 3rem;
+}
+
+.flex-col{
+ flex-direction: column;
+}
+
+.flex-wrap{
+ flex-wrap: wrap;
+}
+
.items-center{
align-items: center;
}
-.justify-items-center{
- justify-items: center;
+.justify-center{
+ justify-content: center;
+}
+
+.rounded-full{
+ border-radius: 9999px;
+}
+
+.border{
+ border-width: 1px;
+}
+
+.border-grey-100{
+ --tw-border-opacity: 1;
+ border-color: rgb(243 243 243 / var(--tw-border-opacity));
}
.pt-8{
@@ -1961,15 +2016,42 @@ video {
font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
}
+.font-alt{
+ font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+}
+
+.text-base{
+ font-size: 1rem;
+}
+
+.text-xl{
+ font-size: 1.3rem;
+}
+
.uppercase{
text-transform: uppercase;
}
+.leading-6{
+ line-height: 1.5rem;
+}
+
.text-white{
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
+.text-turquoise-500{
+ --tw-text-opacity: 1;
+ color: rgb(27 192 227 / var(--tw-text-opacity));
+}
+
+.shadow-sm{
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
.transition{
transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
diff --git a/main/ui-main/src/css/molecules/box.pcss b/main/ui-main/src/css/molecules/box.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..6d7a3af17f9596317b82e0328d11d856393b3f26
--- /dev/null
+++ b/main/ui-main/src/css/molecules/box.pcss
@@ -0,0 +1,12 @@
+.box {
+ @apply w-60;
+ .box-content {
+ @apply p-4;
+ }
+}
+
+@screen lg {
+ .box {
+ @apply w-80;
+ }
+}
diff --git a/main/ui-main/src/css/style.pcss b/main/ui-main/src/css/style.pcss
index 819b15c3b0352d6415891f56aca5a010e5b767d2..8ff3664a0d142bb5d0974785d40b21835e32bc1d 100644
--- a/main/ui-main/src/css/style.pcss
+++ b/main/ui-main/src/css/style.pcss
@@ -23,6 +23,9 @@
@import "./atoms/icons.pcss";
+@import "./molecules/box.pcss";
+
+
@import "./organisms/navbar.pcss";
diff --git a/main/ui-main/tailwind.config.js b/main/ui-main/tailwind.config.js
index b59a5125e2e3114be90323136b0f283409a0dd93..793f22294bfd2cad9d4195298b40a0458af5c464 100644
--- a/main/ui-main/tailwind.config.js
+++ b/main/ui-main/tailwind.config.js
@@ -108,6 +108,9 @@ module.exports = {
'200': '#76b4cf',
'300': '#027da8',
},
+ 'turquoise': {
+ '500': '#1BC0E3'
+ },
'cyan': {
'100': '#a7d4d1',
'200': '#57b3bd',