Skip to content
Snippets Groups Projects
Commit c1fe3f46 authored by Štěpán Farka's avatar Štěpán Farka
Browse files

[ADD] align header carousel text

parent ee20cfba
No related branches found
No related tags found
2 merge requests!607Pirati.cz,!575Feature/pirati cz
Pipeline #9346 passed
...@@ -4,16 +4,19 @@ ...@@ -4,16 +4,19 @@
position: relative; position: relative;
.header-carousel--text { .header-carousel--text {
@apply font-alt text-2xl uppercase lg:text-7xl; @apply font-alt text-2xl sm:text-5xl uppercase lg:text-7xl;
left: 10%;
max-width: 1200px; max-width: 1200px;
position: absolute; position: absolute;
top: 20%; top: 35%;
margin-left: 15%;
@screen sm { @screen sm {
top: 35%; margin-left: 10%;
} }
@screen lg { @screen lg {
top: 30%;
}
@screen 2xl {
top: 45%; top: 45%;
} }
} }
...@@ -34,21 +37,22 @@ ...@@ -34,21 +37,22 @@
} }
.slick-active { .slick-active {
z-index: 1000;
img { img {
transform: scale(1, 1); transform: scale(1, 1);
} }
.header-carousel--text { .header-carousel--text {
animation: right_to_left 500ms ease; animation: right_to_left 1s ease;
} }
} }
@keyframes right_to_left { @keyframes right_to_left {
from { from {
left: 15%; margin-left: 20%;
} }
to { to {
left: 10%; margin-left: 10%;
} }
} }
......
.btn { .btn {
@apply font-alt inline-block h-11 leading-9 py-1; @apply font-alt inline-flex justify-center items-center h-8 leading-9 py-1 xl:h-11;
} }
.btn__slide__wrap { .btn__slide__wrap {
......
...@@ -3,18 +3,50 @@ ...@@ -3,18 +3,50 @@
<vue-slick-carousel v-bind="settings"> <vue-slick-carousel v-bind="settings">
<div class="xl:h-screen relative"> <div class="xl:h-screen relative">
<img src="https://unsplash.it/792/387?image=4" draggable="false"> <img src="https://unsplash.it/792/387?image=4" draggable="false">
<div class="header-carousel--text"> <div class="header-carousel--text grid-container">
<div class="grid-content-with-right-side">
<h1 class="text-white">72% domácností bylo</h1> <h1 class="text-white">72% domácností bylo</h1>
<h1 class="text-orange-250">násilně digitalizováno</h1> <h1 class="text-orange-250">násilně digitalizováno</h1>
<a href="" class="btn btn__slide__wrap ">
<span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více1</span>
<span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více1</span>
</a>
</div>
</div> </div>
</div> </div>
<div class="xl:h-screen relative"> <div class="xl:h-screen relative">
<img src="https://unsplash.it/792/387?image=1" draggable="false"> <img src="https://unsplash.it/792/387?image=4" draggable="false">
<div class="header-carousel--text"> <div class="header-carousel--text grid-container">
<div class="grid-content-with-right-side">
<h1 class="text-white">72% domácností bylo</h1> <h1 class="text-white">72% domácností bylo</h1>
<h1 class="text-orange-250">násilně digitalizováno</h1> <h1 class="text-orange-250">násilně digitalizováno</h1>
<a href="" class="btn btn__slide__wrap ">
<span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více2</span>
<span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více2</span>
</a>
</div>
</div> </div>
</div> </div>
<div class="xl:h-screen relative">
<img src="https://unsplash.it/792/387?image=4" draggable="false">
<div class="header-carousel--text grid-container">
<div class="grid-content-with-right-side">
<h1 class="text-white">72% domácností33 bylo</h1>
<h1 class="text-orange-250">násilně digitalizováno</h1>
<a href="" class="btn btn__slide__wrap ">
<span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span>
<span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span>
</a>
</div>
</div>
</div>
<!-- <div class="xl:h-screen relative">-->
<!-- <img src="https://unsplash.it/792/387?image=1" draggable="false">-->
<!-- <div class="header-carousel&#45;&#45;text">-->
<!-- <h1 class="text-white">72% domácností bylo</h1>-->
<!-- <h1 class="text-orange-250">násilně digitalizováno</h1>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="homepage-item" style="background: url('https://placeimg.com/1920/1080/any?1') no-repeat center / cover">--> <!-- <div class="homepage-item" style="background: url('https://placeimg.com/1920/1080/any?1') no-repeat center / cover">-->
<!-- <div class="container">--> <!-- <div class="container">-->
<!-- <h1 class="head-8xl">72% domácností bylo</h1>--> <!-- <h1 class="head-8xl">72% domácností bylo</h1>-->
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment