Cikcak obsah (zig-zag)

Latte / Html

<section class="zig-zag">
    <div class="zig-zag__content --content">
        <div class="zig-zag__column --w-12 --w-l-10 --offset-l-1">
            <div class="zig-zag__box">
                <div class="zig-zag__row --w-12 --row">
                    <div class="zig-zag__column --column --w-12 --w-m-6">
                        <div class="zig-zag__figure">
                            <img src="/userfiles/delivery_car.png" class="zig-zag__img" alt="">
                        </div>
                    </div>
                    <div class="zig-zag__column --w-12 --w-m-6 --column">
                        <div class="zig-zag__text-wrapper ">
                            <div class="zig-zag__year">
                                2020
                            </div>
                            <h3 class="zig-zag__title">
                                COVID a prvotní myšlenka
                            </h3>
                            <p class="zig-zag__text">
                                Jak všichni víme a vnímáme, v roce 2020 celosvětová pandemie koronaviru
                                skokově urychlila nástup online nákupů. Vzhledem k tomu, že velcí hráči
                                e-commerce s potravinami nepokrývají menší města, rozhodli jsme se pro
                                zavedení vlastní služby na distribuci potravin.
                            </p>
                        </div>
                    </div>

                </div>
                <div class="zig-zag__row zig-zag__row--reverse --w-12 --row">
                    <div class="zig-zag__column --w-12 --w-m-6 --column">
                        <div class="zig-zag__text-wrapper zig-zag__text-wrapper--reverse">
                            <div class="zig-zag__year">
                                2022
                            </div>
                            <h3 class="zig-zag__title">
                                Nový e-shop a nové rozvozové zóny
                            </h3>
                            <p class="zig-zag__text zig-zag__text--reverse">
                                Pilotní provoz první 2 roky ověřil životaschopnost projektu a tak jsme se
                                společnými silami rozhodli pro vývoj nového e-shopu. S tím přichází i
                                rozšíření působnosti o další rozvozové zóny v okolí Vysokého Mýta. <br>
                                <br>
                                Stále platí, že naší specializací jsou kvalitní lokální produkty
                                lokálních firem, malých podnikatelů, živnostníků a farem.
                            </p>
                        </div>

                    </div>
                    <div class="zig-zag__column --column --w-12 --w-m-6">
                        <div class="zig-zag__figure">
                            <img src="/userfiles/delivery_car.png" class="zig-zag__img" alt="">
                        </div>
                    </div>

                </div>
                <div class="zig-zag__row --w-12 --row">
                    <div class="zig-zag__column --column --w-12 --w-m-6">
                        <div class="zig-zag__figure">
                            <img src="/userfiles/delivery_car.png" class="zig-zag__img" alt="">
                        </div>
                    </div>
                    <div class="zig-zag__column --w-12 --w-m-6 --column">
                        <div class="zig-zag__text-wrapper">
                            <h3 class="zig-zag__title">
                                A to je teprve začátek
                            </h3>
                            <p class="zig-zag__text">
                                V následujících měsících a letech bychom se rádi rozšířili směrem Choceň
                                a Litomyšl. Další expanzi poté plánujeme směr Chrudim, Holice, Pardubice,
                                Hradec Králové, ale i Svitavy, Litomyšl, Česká Třebová a Ústí nad Orlicí.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</section>

CSS / SCSS

.zig-zag__box{
  margin: 0 auto;
  padding-top: 70px;
  padding-bottom: 120px;


  div:last-of-type {
    margin-bottom: 0;
  }
}

.zig-zag__text-wrapper{

  padding: 15px 10px;
  max-width: 667px;

  @include media($medium){
    padding: 20px 30px 25px 40px;
    max-width: unset;
  }

  @include media($xlarge){
    padding: 45px 70px 70px 100px;
  }

}


.zig-zag__text-wrapper--reverse{
  padding: 15px 10px 15px 10px;

  @include media($medium){
    padding: 20px 40px 25px 30px;
  }

  @include media($xlarge){
    padding: 45px 100px 70px 70px;
  }

}

.zig-zag__year{
  font-size: 4.7rem;
  font-weight: bold;
  color: $color__brand;
}

.zig-zag__title{
  font-size: 2.8rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.zig-zag__row{
  justify-content: center;
  margin-bottom: 20px;
  align-items: center;

  @include media($medium){
    margin-bottom: 60px;
  }

  @include media($xlarge){
    margin-bottom: 80px;
  }

}

.zig-zag__figure{

  max-width: 660px;
  justify-content: flex-end;
  background: yellow;
  height: 40vw;

  @include media($small){
    height: 260px;
  }

  @include media($large){
    height: 300px;
  }

  @include media($xlarge){
    height: 330px;
  }
}

.zig-zag__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zig-zag__row--reverse{
  flex-direction: column-reverse;

  @include media($medium){
    flex-direction: unset;
  }
}

Nevíte si rady?
Neváhejte se zeptat

Nevíte si rady nebo potřebujete něco konzultovat? Nápovědu stále zdokonalujeme na základě vašich požadavků a postřehů. Uvádíme co nejvíce možných variant, které používáme na řešení jednotlivých částí webu, mějte ale na paměti, že projekty řešíme individuálně na základě konkrétních potřeb.

Nádražní 876
560 02 Česká Třebová

honza.cech@czechgroup.cz

+420 774 201 483

*
*