Some simple instructions in how to make this site SING

Parallax

<div class="jarallax" data-jarallax="" data-speed="0.2" style="background-image: url('[Image URL]');">
  <div class="parallaxContent header">
    <h2>[Page Title]</h2>
  </div>
</div>

Parallax with an Ad

<div class="videoHeader">
  <div class="jarallax" data-jarallax-video="https://player.vimeo.com/video/331131132?">
    <div class="parallaxContentVideo">
      <div class="parallaxContent">
        <h2 class="normalFont">ESCAPE WINTER!</h2>
        <p>FLY NONSTOP FROM LOS ANGELES (LAX) TO RAROTONGA, COOK ISLANDS</p>
        <div class="videoButtonFromContent">
          <div class="squareAll">
            <div class="line"></div>
            <div class="squareLeft"></div>
          </div>
          <div class="fromAmount">
            <p>from <span class="videoButtonPrice">US $695*</span></p>
          </div>
          <div class="squareAll">
            <div class="line"></div>
            <div class="squareRight"></div>
          </div>
        </div>
        <p>PER PERSON, ROUNDTRIP</p>
        <div class="button"><a href="https://www.airnewzealand.com/flights-to-cook-islands">View Offer</a></div>
      </div>
      <div class="upIcon"><img alt="down arrow" data-entity-type="file" data-entity-uuid="62aad65c-b7c0-4f05-8ce6-c7a24fd9bcb6" src="https://cookislands.travel/sites/default/files/inline-images/twoDownarrow.png" style="width: 100%; height:auto;">
      </div>
    </div>
  </div>
</div>

Left-Justified CTA

Put this in Parallax headers or Slideshows.

<div class="slide-card-wrapper">
  <div class="slide-card">
    <div class="pre-header">
      <div>Get off the beaten track...</div>
    </div>
    <div class="header">
      <h1>MAUKE EXCURSION</h1>
    </div>
    <div class="blurb">
      <div>$NZ699pp (twin share)</div>
    </div>
    <div class="cta">
      <a href="https://www.airraro.com/en/tours/2-nights-in-mauke" class="new-window" target="_blank" rel="noopener noreferrer">BOOK TODAY</a>
      <div class="terms">
        <div>Terms & Conditions Apply</div>
      </div>
    </div>
  </div>
</div>

Fixed Pane (with the floral background)

<div class="fixedPane">
  <p>[Text]</p>
</div>

Long Text Pane

Version 1

<div class="longTextPane">
  <p><strong>[Section Header]</strong>
  [Regular Text]</p>
</div>

Version 2

<div class="longTextPane">
  <p><strong>[Section Header]</strong></p>
  <blockquote>
    <p>[Indented Text]</p>
  </blockquote>
  <p>[Regular Text]</p>
</div>

Slideshow

<div class="slideShowPane" data-slidesPerView="2">
  <img src="/sites/default/files/styles/max_1300x1300/public/kitesurfing-3.jpg?itok=btRc9NiA" alt="Kitesurfing" />
  <img src="/sites/default/files/styles/max_1300x1300/public/kitesurfing-5.jpg?itok=SwMmr_zW" alt="Kitesurfing" />
  <img src="/sites/default/files/styles/max_1300x1300/public/kitesurfing-6.jpg?itok=_U5fgwoW" alt="Kitesurfing" />
  <img src="/sites/default/files/styles/max_1300x1300/public/kitesurfing-1.jpg?itok=veLWIU4m" alt="Kitesurfing" />
  <img src="/sites/default/files/styles/max_1300x1300/public/kitesurfing-2.jpg?itok=DiU-zmxu" alt="Kitesurfing" />
  <img src="/sites/default/files/styles/max_1300x1300/public/kitesurfing-4.jpg?itok=cQVGjW6K" alt="Kitesurfing" />
</div>

Staggered Cards

<div class="staggeredCards">
 <a class="small" href="[Link]">
  <img src="[Image]" alt="[Alt]" class="noFit" />
  <div class="cardTitle">
   [Card Title]
  </div>
  <div class="cardDescription">
   [Card Description]
  </div>
 </a>
 <a class="medium" href="[Link]">
  <img src="[Image]" alt="[Alt]" class="cover" />
  <div class="cardCaption">
   [Card Caption]
  </div>
 </a>
</div>

Add the noFit class to the <img> tag if the image is filling the block when it shouldn't.

Staggered Columns

Note the order and position of the associated images.

<div class="staggeredColumns">
 <div>[<img alt="[1 Image Alt]" src="[1 Image URL]">]</div>
 <div class="description">
  <h2>[1 Title]</h2>
  <p>[1 Details]</p>
  <p><a href="[1 URL]" class="button">View More</a></p>
  <p></p>
 </div>
 <div class="description">
  <h2>[2 Title]</h2>
  <p>[2 Details]</p>
  <p><a href="[2 URL]" class="button">View More</a></p>
  <p></p>
 </div>
 <div><img alt="[2 Image Alt]" src="[2 Image Alt]"></div>
 <div>[<img alt="[3 Image Alt]" src="[3 Image URL]">]</div>
 <div class="description">
  <h2>[3 Title]</h2>
  <p>[3 Details]</p>
  <p><a href="[3 URL]" class="button">View More</a></p>
  <p></p>
 </div>
 <div class="description">
  <div class="description">
  <h2>[4 Title]</h2>
  <p>[4 Details]</p>
  <p><a href="[4 URL]" class="button">View More</a></p>
  <p></p>
 </div>
 <div><img alt="[4 Image Alt]" src="[4 Image Alt]"></div>
</div>

The activities listing

{{ drupal_view('suppliers', 'block_1', 'all', 46, 'all') }}

Parameter 1: The view name. Leave as "suppliers"
Parameter 2: The view page name. Leave as "block_1"
Parameter 2: The island term ID (tid). Check with the Taxonomy listing as a reference. 'all' shows all items.
Parameter 2: The supplier type. Check with the Taxonomy listing as a reference. 'all' shows all items.
Parameter 2: The featured taxonomy. Check with the Taxonomy listing as a reference. 'all' shows all items.

Currency Conversion

Need to punch in a dollar amount? The following will automatically convert the currency:

[country_pricing:convert:USD:123.45]

Above, "USD" can be swapped with the currency of your choice. Please ensure the "123.56" part ONLY contains numbers and dots ".", commas and symbols will break it.

Simple Grid

This is LEGACY and should be used sparingly

<div class="simpleGrid">
  <a class="gridItem" href="https://www.airnewzealand.com/flights-to-cook-islands" target="_blank">
    <img src="/sites/default/files/styles/max_1300x1300/public/2019-12/ECONOMY%20IMAGE.jpg?itok=nZj1ctVp" alt="Economy Cabin" />
    <div>
      <p><strong>ECONOMY CABIN:</strong></p>
      <p>FROM: $844* ROUND-TRIP</p>
      <p>FLY NONSTOP FROM LOS ANGELES (LAX)</p>
      <p>TO RAROTONGA, COOK ISLANDS</p>
    </div>
  </a>
</div>

Modal Video

Surround the thing you want to link with the following:

<div class="medium modal-video youtube" data-video-id="gQ2kOOVQLmU"></div>