Aeroporto di Bologna - Design System

Pagina lounge fitness 

<div class="c-deck ">
    <img class="c-deck__logo" src="/images/svgs/logo-blq-fitness.svg" alt="MBL logo" aria-hidden="true">
    <h2>Scopri di più sulla nuovissima BLQ Fitness Lounge</h2>

    <ul class="c-deck__summary">
        <li>
            <svg class="c-icon c-icon--24">
                <use xlink:href="#ic-sport-equipment"></use>
            </svg> <a href="#buy-entrance" aria-label="Scopri i servizi">Scopri i servizi</a>
        </li>
        <li>
            <svg class="c-icon c-icon--24">
                <use xlink:href="#ic-work-out"></use>
            </svg> <a href="#accredited-card" aria-label="Scopri i programmi di allenamento">Scopri i programmi di allenamento</a>
        </li>
        <li>
            <svg class="c-icon c-icon--24">
                <use xlink:href="#ic-schedule-24px"></use>
            </svg> <a href="#youfirst" aria-label="Come e quando accedere">Come e quando accedere</a>
        </li>
    </ul>

    <div class="o-adjacent">
        <div class="o-adjacent__item">
            <section class="c-carousel c-carousel--gallery" aria-hidden="true">

                <div class="jsInstance owl-carousel">
                    <div style="background-image: url(https://picsum.photos/560/360)" class="c-carousel__background-image" alt=""></div>
                    <div style="background-image: url(https://picsum.photos/560/360)" class="c-carousel__background-image" alt=""></div>
                    <div style="background-image: url(https://picsum.photos/560/360)" class="c-carousel__background-image" alt=""></div>
                    <div style="background-image: url(https://picsum.photos/560/360)" class="c-carousel__background-image" alt=""></div>
                </div>

            </section>

        </div>
        <div class="o-adjacent__item">
            <iframe width="100%" height="350" src="https://www.youtube.com/embed/Tw3QTZJzpEo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
    </div>
    <div class="c-deck__cards c-deck__cards--flex">
        <div class="c-deck__card" id="buy-entrance">
            <h4>Hai mai pensato alla possibilità di allenarti guardando gli aerei atterrare e decollare?</h4>
            <p>
                La BLQ Fitness Lounge ti permette di mantenere il tuo regolare programma di allenamento anche durante i tuoi viaggi.
            </p>
            <p>
                <strong>Attrezzature di ultima generazione, trainer professionisti</strong> e ambiente di design sono i punti forti della nuova palestra dell'Aeroporto di Bologna.
            </p>
            <p>
                A disposizione una superficie di </strong>700 m2 con oltre 30 tra le macchine più innovative, docce e spogliatoi.</strong> E se non hai con te l'abbigliamento per il tuo allenamento, te lo forniamo noi!
            </p>
        </div>

        <div class="c-deck__card" id="accredited-card">
            <h4>Programmi dedicati fatti su misura per i viaggiatori!</h4>
            <ul class="c-list--bulleted">
                <li>
                    <strong>Linea Skill:</strong> le nuovissime macchine con MULTIDRIVE TECNOLOGY che coniugano allenamenti cardio ad allenamenti di resistenza.
                </li>
                <li>
                    <strong>Linea Artis:</strong> la linea cardio che coniuga connettività e piacevolezza del movimento.
                </li>
                <li>
                    <strong>Flexability:</strong> la nuovissima linea studiata per rendere gli esercizi di stretching efficaci in modo graduale ed adeguato a qualsiasi esigenza.
                </li>
            </ul>
        </div>

        <div class="c-deck__card c-deck__card--tanned" id="youfirst">
            <h4>Come e quando posso accedere alla BLQ Fitness Lounge?</h4>
            <p>
                <strong>Tariffa dedicata di 20€</strong> riservata ai clienti della Marconi Business Lounge possessori di un ingresso VIP Lounge.
            </p>

            <a href="#" class="c-link c-link--primary">
                <span>Prenota un ingresso vip lounge</span>
                <svg class="svg-24">
                    <use xlink:href="#ic_chevron_right_black_24px"></use>
                </svg></a>
            <p class="u-mt--large"><strong>Orari di apertura</strong></p>

            <ul class="c-list--bulleted u-mt--small">
                <li>
                    <strong>Lunedì:</strong> 7:00 - 9:00, 12:00 - 15:00, 17:00 - 21:00
                </li>
                <li>
                    <strong>Martedì: </strong> 12:30 - 15:30, 17:30 - 21:30
                </li>
                <li>
                    <strong>Mercoledì: </strong> 7:00 - 9:00, 12:00 - 15:00, 17:00 - 21:00
                </li>
                <li>
                    <strong>Giovedì: </strong> 12:30 - 15:30, 17:30 - 21:30
                </li>
                <li>
                    <strong>Venerdì: </strong> 7:00 - 9:00, 12:00 - 15:00, 17:00 - 21:00
                </li>
            </ul>

        </div>

    </div>

</div>

</div>
 
<div class="c-deck {{ modifier }}">
  <img class="c-deck__logo" src="{{ logo-src }}" alt="{{ logo-alt }}" aria-hidden="true">
  <h2>{{ h2 }}</h2>

  <ul class="c-deck__summary">
    {{#each summary }}
    <li>
      {{> @icon symbol=this.symbol class="c-icon c-icon--24" }}
      <a href="{{ this.url }}" aria-label="{{ this.text }}">{{ this.text }}</a>
    </li>
    {{/each}}
  </ul>
 
  <div class="o-adjacent">
    <div class="o-adjacent__item">
      {{ render "@carousel--background-gallery" }}
    </div>
    <div class="o-adjacent__item">
      <iframe width="100%" height="350" src="https://www.youtube.com/embed/Tw3QTZJzpEo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
  </div>
  <div class="c-deck__cards c-deck__cards--flex">
      <div class="c-deck__card" id="buy-entrance">
        <h4>Hai mai pensato alla possibilità di allenarti guardando gli aerei atterrare e decollare?</h4>
        <p>
          La BLQ Fitness Lounge ti permette di mantenere il tuo regolare programma di allenamento anche durante i tuoi  viaggi.
        </p>
        <p>
          <strong>Attrezzature di ultima generazione, trainer professionisti</strong> e ambiente di design sono i punti forti della nuova palestra dell'Aeroporto di Bologna.
        </p>
        <p>
          A disposizione una superficie di </strong>700 m2 con oltre 30 tra le macchine più innovative, docce e spogliatoi.</strong> E se non hai con te l'abbigliamento per il tuo allenamento, te lo forniamo noi!
        </p>
      </div>

      <div class="c-deck__card" id="accredited-card">
        <h4>Programmi dedicati fatti su misura per i viaggiatori!</h4>
        <ul class="c-list--bulleted">
            <li>
              <strong>Linea Skill:</strong> le nuovissime macchine con MULTIDRIVE TECNOLOGY che coniugano allenamenti cardio ad allenamenti di resistenza.
            </li>
            <li>
              <strong>Linea Artis:</strong> la linea cardio che coniuga connettività e piacevolezza del movimento.
            </li>
            <li>
              <strong>Flexability:</strong> la nuovissima linea studiata per rendere gli esercizi di stretching efficaci in modo graduale ed adeguato a qualsiasi esigenza.
            </li>
        </ul>        
      </div>

      <div class="c-deck__card c-deck__card--tanned" id="youfirst">
        <h4>Come e quando posso accedere  alla BLQ Fitness Lounge?</h4>
        <p>
         <strong>Tariffa dedicata di 20€</strong> riservata ai clienti della Marconi Business Lounge possessori di un ingresso VIP Lounge.
        </p>
        
        {{> @link--primary reservation }}

        <p class="u-mt--large"><strong>Orari di apertura</strong></p>
        
        <ul class="c-list--bulleted u-mt--small">
            <li>
              <strong>Lunedì:</strong> 7:00 - 9:00, 12:00 - 15:00, 17:00 - 21:00
            </li>
            <li>    
              <strong>Martedì: </strong> 12:30 - 15:30, 17:30 - 21:30
            </li>
            <li>    
              <strong>Mercoledì: </strong> 7:00 - 9:00, 12:00 - 15:00, 17:00 - 21:00
            </li>
            <li>    
              <strong>Giovedì: </strong> 12:30 - 15:30, 17:30 - 21:30
            </li>
            <li>    
              <strong>Venerdì: </strong> 7:00 - 9:00, 12:00 - 15:00, 17:00 - 21:00
            </li>
        </ul>        
        
      </div>

    </div>

  </div>

</div>
 
{
  "h2": "Scopri di più sulla nuovissima BLQ Fitness Lounge",
  "logo-src": "/images/svgs/logo-blq-fitness.svg",
  "logo-alt": "MBL logo",
  "summary": [
    {
      "url": "#buy-entrance",
      "text": "Scopri i servizi",
      "symbol": "ic-sport-equipment"
    },
    {
      "url": "#accredited-card",
      "text": "Scopri i programmi di allenamento",
      "symbol": "ic-work-out"
    },
    {
      "url": "#youfirst",
      "text": "Come e quando accedere",
      "symbol": "ic-schedule-24px"
    }
  ],
  "gallery": {
    "modifier": "c-carousel--gallery",
    "images": [
      {
        "img-path": "https://picsum.photos/560/360"
      },
      {
        "img-path": "https://picsum.photos/560/360"
      },
      {
        "img-path": "https://picsum.photos/560/360"
      },
      {
        "img-path": "https://picsum.photos/560/360"
      }
    ]
  },
  "reservation": {
    "name": "default",
    "text": "Prenota un ingresso vip lounge",
    "url": "#",
    "modifier": "c-link--primary",
    "svg": true
  }
}
  • Content: 
    $card-maxW: 32.5%;

.c-deck {

  main & {
    grid-column: main;
    margin-top: remify(48px);
  }

  h2 {
    color: primary(night, 100);
    font-size: 125%;
    line-height: 1.4;
    margin-bottom: remify(32px);
    text-align: center;

    @include min-screen(bp(tablet)) {
      font-size: 200%;
      line-height: 1.25;
    }

  }

	h3 {
    line-height: 1.4;
    margin-bottom: remify(20px);
    text-align: center;
  }

	h2 + h3 {
    margin-top: remify(-20px);
  }
	
}

.c-deck__logo {
  display: block;
  margin: 0 auto remify(32px);
  width: remify(180px);

  @include min-screen(bp(tablet)) {
    width: remify(220px);
  }
  
}

.c-deck__summary {
  text-align: center;
  margin-bottom: remify(24px);

  li {
    margin-bottom: remify(16px);
  }

  svg {
    vertical-align: middle;
    margin-right: remify(8px);
    * {
      fill: primary(sky, 100);;
    }
  }

  @include min-screen(bp(tablet-p)) {
    display: none;
  }
}

.c-deck__card {
  margin-bottom: remify(16px);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-radius: remify(4px);
  position: relative;
  background-color: #fff;
  padding: remify(24px);
  max-width: remify(640px);
  @include shadow(medium);

  @include min-screen(bp(tablet-p)) {
    max-width: $card-maxW;
  }

  h4 {
    font-size: 125%;
    line-height: 1.4;
    font-weight: fw(bold);
    color: primary(night, 120);
    margin-bottom: remify(24px);
  }

  p {
    display: block;
    margin-bottom: remify(16px);
    color: #3e4043;

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

  }

}

.c-deck__cards-croupier {
  display: flex;
  flex-direction: column;
  position: relative;

  @include min-screen(bp(tablet-p)) {
    flex-direction: row;
    margin-top: remify(-300px);
    align-items: flex-start;
  }

  @include min-screen( remify(1920px) ) {
    margin-top: remify(-300px);
  }

}

  .c-deck__card--first {
    max-width: remify(560px);
    z-index: 1;
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
    box-shadow: none;

    @include min-screen(bp(tablet-p)) {
      margin-bottom: remify(16px);
    }

  }

  .c-deck__card--second,
  .c-deck__card--third,
  .c-deck__card--fourth {
    z-index: 2;
  }

  .c-deck__card--second {
    order: 2;

    @include min-screen(bp(tablet-p)) {
      order: 4;
      margin-left: auto;
      margin-right: initial;
    }

  }

  .c-deck__card--third {
    order: 3;

    @include min-screen(bp(tablet-p)) {
      order: 2;
      margin-right: auto;
      margin-left: initial;
    }

    a {
      display: block;
    }
  }

  .c-deck__card--fourth {
    order: 4;

    @include min-screen(bp(tablet-p)) {
      order: 3;
      margin-top: 7.8vw;
    }

    @include min-screen( remify(1920px) ) {
      margin-top: remify(150px);
    }

  }

  .c-deck__card--tanned {
    background-color: primary(night, 100);
    color: #fff;
    
    h4, p {
      color: currentColor;
    }

  }

  
  /*----------  flex container  ----------*/
  
  .c-deck__cards--flex {
    display: flex;
    flex-wrap: wrap;
    .c-deck__card {
      max-width: initial;
      
      @include min-screen (bp(tablet)) {
        max-width: $card-maxW;
      }
    }

    

  }
  • URL: /components/raw/deck/_deck.scss
  • Filesystem Path: src/views/03-organisms/deck/_deck.scss
  • Size: 3.2 KB

No notes defined.