components

map_strip   

• Ability to add main heading (mandatory)

• Ability to add contact name (mandatory)

• Ability to add an address

• Ability to add lat/lng for the map centering position and office location on map (via in page Javascript) (mandatory)

• Ability to phone number (optional)

• Ability to phone email address (optional)

• The map on the right to be generate based on the map URL

Contact Name

Address Line 1
Address Line 2
Copy
Edit
<div class="container-fluid"> <div class="row clearfix"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 noPad"> <div class=" map_pod"> <div class="contact-pod-content"> <h2 class="pod-title"> Contact Name </h2> <div class="pod-content-wrapper"> <div class="pod-content address"> Address Line 1<br /> Address Line 2 </div> <div class="pod-content contact-info"> <a href="tel:(123) 456-7890" title="(123) 456-7890"> (123) 456-7890 </a><br /> <a href="mailto:info@otis.com" title="info@otis.com"> info@otis.com </a> </div> </div> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 noPad"> <div id="staticMap" class="static_map_strip" style="height: 350px;"></div> </div> </div> </div> <script type="text/javascript"> function initMap() { var styleArray = [ { "featureType": "landscape.man_made", "stylers": [ { "color": "#19282f" } ] },{ "featureType": "road", "elementType": "geometry.fill", "stylers": [ { "color": "#141719" } ] },{ "featureType": "road", "elementType": "geometry.stroke", "stylers": [ { "color": "#24343a" } ] },{ "featureType": "road", "elementType": "labels.text.fill", "stylers": [ { "color": "#9eb5c0" } ] },{ "featureType": "road", "elementType": "labels.text.stroke", "stylers": [ { "color": "#1d282f" } ] },{ "featureType": "administrative", "elementType": "labels.text.stroke", "stylers": [ { "color": "#1d282f" } ] },{ "featureType": "landscape.man_made", "elementType": "labels.text.stroke", "stylers": [ { "color": "#1d282f" } ] },{ "featureType": "poi", "elementType": "labels.text.stroke", "stylers": [ { "color": "#1d282f" } ] },{ "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#9eb5c0" } ] },{ "featureType": "transit", "elementType": "geometry.fill", "stylers": [ { "color": "#9eb5c0" } ] },{ "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [ { "color": "#9eb5c0" } ] },{ "featureType": "poi", "elementType": "geometry.fill", "stylers": [ { "color": "#9eb5c0" } ] } ]; // Create a map object and specify the DOM element for display. var map = new google.maps.Map(document.getElementById('staticMap'), { center: {lat: 34.109174, lng: -118.243715}, scrollwheel: false, zoom: 16, styles: styleArray }); var marker = new google.maps.Marker({ position: new google.maps.LatLng(34.109174, -118.243715), map: map, icon: 'images/components/map-marker.png' }); } </script>
Copy
Copy
Edit
.map_pod { position: relative; width: 100%; height: 350px; background-color: $otisBeige; padding: 30px 0; text-align: center; .contact-pod-content { @include absoluteCenter; font-size: $baseFontSize; font-family: $fontThin; } .contact-info { margin-top: 10px; a { color: #000000; } } .pod-title { font-family: $fontThin; font-size: $baseFontSize * 1.5; margin-bottom: 10px; } } .map_wrapper { width: 100%; min-height: 330px; position: relative; @media only screen and ($small-desktop) { border-top: 5px solid $otisBeige; } .show_map { display: block; } .map-container { position: absolute; height: 330px; width: 100%; display: block; } }

download_list   

A list of downloadable documents relevant to the page it is placed on.

For each document the user should have:

• Ability to add a title for the document

• Ability to add a short description for the document

• Ability to add either a PDF or CAD file for the document (the correct icon and file type name should then show as the link)

• First 3 documents should show by default. Any documents over 3 should then be inside a div with the class of 'collapse' and an id of 'additionalDocuments' and the '.additional_documents_trigger' button should show (see code example below).

Example of more than 3 documents with additional documents hidden and trigger button showing

Gen2 Flex Downloads

Item Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloribus voluptatibus debitis, optio sequi officiis amet aliquid.

Item Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloribus voluptatibus debitis, optio sequi officiis amet aliquid.

Item Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloribus voluptatibus debitis, optio sequi officiis amet aliquid.

Item Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloribus voluptatibus debitis, optio sequi officiis amet aliquid.

Item Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloribus voluptatibus debitis, optio sequi officiis amet aliquid.

Item Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloribus voluptatibus debitis, optio sequi officiis amet aliquid.

Example of less than 3 documents with no hidden documents and no trigger button

Gen2 Flex Downloads

Item Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloribus voluptatibus debitis, optio sequi officiis amet aliquid.

Item Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloribus voluptatibus debitis, optio sequi officiis amet aliquid.

Copy
Edit
<pre>Example of more than 3 documents with additional documents hidden and trigger button showing</pre> <div class="background_wrapper download_list"> <div class="container"> <div class="row"> <div class="col-xs-12"> <h3> Gen2 Flex Downloads </h3> </div> </div> <div class="row download_item_row"> <div class="col-xs-12 col-sm-10"> <h4> Item Title </h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloribus voluptatibus debitis, optio sequi officiis amet aliquid. </p> </div> <div class="col-xs-12 col-sm-2"> <a href="#" class="pdf_link"> <img src="http://otis-sandbox.jbdev/images/components/otis-icon-pdf.png" width="20">PDF </a> </div> </div> <div class="row download_item_row"> <div class="col-xs-12 col-sm-10"> <h4> Item Title </h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloribus voluptatibus debitis, optio sequi officiis amet aliquid. </p> </div> <div class="col-xs-12 col-sm-2"> <a href="#" class="pdf_link"> <img src="http://otis-sandbox.jbdev/images/components/otis-icon-pdf.png" width="20">PDF </a> </div> </div> <div class="row download_item_row"> <div class="col-xs-12 col-sm-10"> <h4> Item Title </h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloribus voluptatibus debitis, optio sequi officiis amet aliquid. </p> </div> <div class="col-xs-12 col-sm-2"> <a href="#" class="cad_link"> <img src="http://otis-sandbox.jbdev/images/components/otis-icon-compass-grey.png" width="30">CAD </a> </div> </div> <div class="collapse" id="additionalDocuments"> <div class="row download_item_row"> <div class="col-xs-12 col-sm-10"> <h4> Item Title </h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloribus voluptatibus debitis, optio sequi officiis amet aliquid. </p> </div> <div class="col-xs-12 col-sm-2"> <a href="#" class="pdf_link"> <img src="http://otis-sandbox.jbdev/images/components/otis-icon-pdf.png" width="20">PDF </a> </div> </div> <div class="row download_item_row"> <div class="col-xs-12 col-sm-10"> <h4> Item Title </h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloribus voluptatibus debitis, optio sequi officiis amet aliquid. </p> </div> <div class="col-xs-12 col-sm-2"> <a href="#" class="cad_link"> <img src="http://otis-sandbox.jbdev/images/components/otis-icon-compass-grey.png" width="30">CAD </a> </div> </div> <div class="row download_item_row"> <div class="col-xs-12 col-sm-10"> <h4> Item Title </h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloribus voluptatibus debitis, optio sequi officiis amet aliquid. </p> </div> <div class="col-xs-12 col-sm-2"> <a href="#" class="cad_link"> <img src="http://otis-sandbox.jbdev/images/components/otis-icon-compass-grey.png" width="30">CAD </a> </div> </div> </div> <div class="row additional_documents_trigger"> <div class="col-xs-12"> <a class="toggle_button more" role="button" data-toggle="collapse" href="#additionalDocuments" aria-expanded="false" aria-controls="additionalDocuments"> Show more </a> </div> </div> </div> </div> <pre>Example of less than 3 documents with no hidden documents and no trigger button</pre> <div class="background_wrapper download_list"> <div class="container"> <div class="row"> <div class="col-xs-12"> <h3> Gen2 Flex Downloads </h3> </div> </div> <div class="row download_item_row"> <div class="col-xs-12 col-sm-10"> <h4> Item Title </h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloribus voluptatibus debitis, optio sequi officiis amet aliquid. </p> </div> <div class="col-xs-12 col-sm-2"> <a href="#" class="pdf_link"> <img src="http://otis-sandbox.jbdev/images/components/otis-icon-pdf.png" width="20">PDF </a> </div> </div> <div class="row download_item_row"> <div class="col-xs-12 col-sm-10"> <h4> Item Title </h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloribus voluptatibus debitis, optio sequi officiis amet aliquid. </p> </div> <div class="col-xs-12 col-sm-2"> <a href="#" class="pdf_link"> <img src="http://otis-sandbox.jbdev/images/components/otis-icon-pdf.png" width="20">PDF </a> </div> </div> </div> </div>
Copy
Copy
Edit
.download_list { background-color: $otisBeige; padding: 40px 0; h3 { font-size: $baseFontSize * 2; text-align: center; font-family: $fontThin; padding-bottom: 30px; margin: 0; @media only screen and ($tablet-viewport) { font-size: $baseFontSize * 2.5; } @media only screen and ($small-desktop) { font-size: $baseFontSize * 3; } } .download_item_row { padding: 15px 0; border-bottom: 1px dotted $primaryColor; font-family: $fontThin; h4 { font-size: $baseFontSize * 1.4; margin: 0; } p { margin: 0; } a { color: $primaryColor; text-decoration: underline; display: block; text-align: center; margin-top: 15px; &.pdf_link { margin-top: 19px; } &.cad_link { margin-top: 17px; } &:hover { text-decoration: none !important; } } } .additional_documents_trigger { padding: 15px 0; text-align: center; .toggle_button { @include multiTransition; color: $primaryColor; text-decoration: none; font-family: $fontRegular; &:after { font-family: $fontIcon; vertical-align: middle; padding-left: 10px; } &.more { &:after { content: "\e01b"; } } &.less { &:after { content: "\e030"; } } } } }

grid-tiles   

    This is a single grid tile within the .grid-tiles wrapper. The .tile element must be looped for the desired amount of tiles on the page.

Tile Title

Tile Subtitle

Button Text

Tile Title

Tile Subtitle

Once rendered this is what the grid tiles should look like

1 Bligh Street

Sydney, Australia

View the Case Study

1 Bligh Street

Sydney, Australia

Eiffel Tower

Paris, France

View the Case Study

Eiffel Tower

Paris, France

Shanghai World Financial Centre

Shanghai, China

View the Case Study

Shanghai World Financial Centre

Shanghai, China

30 Hudson Yards

New York City, USA

View the Case Study

30 Hudson Yards

New York City, USA

Christ The Redeemer

Rio De Janeiro, Argentina

View the Case Study

Christ The Redeemer

Rio De Janeiro, Argentina

Bahrain World Trade Centre

Manama, Bahrain

View the Case Study

Bahrain World Trade Centre

Manama, Bahrain

Petronas Towers

Kuala Lumpur, Malaysia

View the Case Study

Petronas Towers

Kuala Lumpur, Malaysia

The Bow

Calgary, Canada

View the Case Study

The Bow

Calgary, Canada

Copy
Edit
<pre> This is a single grid tile within the .grid-tiles wrapper. The .tile element must be looped for the desired amount of tiles on the page. </pre> <!-- .grid-tiles IS THE WRAPPER FOR ALL TILES. ALL TILES MUST BE OUTPUT WITHIN THIS WRAPPER --> <div class="grid-tiles grid"> <!-- The tile element will need to be looped for the amount of tiles required --> <div class="tile"> <div class="tile-bg" style="background-image: url('images/about-us/case-studies/swf-grid.jpg');"> <div class="tile-content"> <div class="inner-content"> <h2 class="strong no-margin"> Tile Title </h2> <h2> Tile Subtitle </h2> <a href="#" class="otis_button" title="Button text"> Button Text </a> </div> </div> </div> <div class="tile-foot"> <div class="foot-inner"> <h2> Tile Title </h2> <p> Tile Subtitle </p> </div> </div> </div> </div> <pre>Once rendered this is what the grid tiles should look like</pre> <div class="grid-tiles grid"> <div class="tile"> <div class="tile-bg" style="background-image: url(images/about-us/case-studies/bligh-st-grid.jpg);"> <div class="tile-content"> <div class="inner-content"> <h2 class="strong no-margin"> 1 Bligh Street </h2> <h2> Sydney, Australia </h2> <a href="/about-otis/case-studies/1-bligh-street" class="otis_button" title="View the Case Study"> View the Case Study </a> </div> </div></div> <div class="tile-foot"> <div class="foot-inner"> <h2> 1 Bligh Street </h2> <p> Sydney, Australia </p> </div> </div> </div> <div class="tile"> <div class="tile-bg" style="background-image: url(images/about-us/case-studies/eiffel-tower-grid.jpg);"> <div class="tile-content"> <div class="inner-content"> <h2 class="strong no-margin"> Eiffel Tower </h2> <h2> Paris, France </h2> <a href="/about-otis/case-studies/eiffel-tower" class="otis_button" title="View the Case Study"> View the Case Study </a> </div> </div></div> <div class="tile-foot"> <div class="foot-inner"> <h2> Eiffel Tower </h2> <p> Paris, France </p> </div> </div> </div> <div class="tile"> <div class="tile-bg" style="background-image: url(images/about-us/case-studies/swf-grid.jpg);"> <div class="tile-content"> <div class="inner-content"> <h2 class="strong no-margin"> Shanghai World Financial Centre </h2> <h2> Shanghai, China </h2> <a href="/about-otis/case-studies/shanghai-world-financial-centre" class="otis_button" title="View the Case Study"> View the Case Study </a> </div> </div></div> <div class="tile-foot"> <div class="foot-inner"> <h2> Shanghai World Financial Centre </h2> <p> Shanghai, China </p> </div> </div> </div> <div class="tile"> <div class="tile-bg" style="background-image: url(images/about-us/case-studies/30-hudson-yards-grid.jpg);"> <div class="tile-content"> <div class="inner-content"> <h2 class="strong no-margin"> 30 Hudson Yards </h2> <h2> New York City, USA </h2> <a href="/about-otis/case-studies/30-hudson-yards" class="otis_button" title="View the Case Study"> View the Case Study </a> </div> </div></div> <div class="tile-foot"> <div class="foot-inner"> <h2> 30 Hudson Yards </h2> <p> New York City, USA </p> </div> </div> </div> <div class="tile"> <div class="tile-bg" style="background-image: url(images/about-us/case-studies/ctr-grid.jpg);"> <div class="tile-content"> <div class="inner-content"> <h2 class="strong no-margin"> Christ The Redeemer </h2> <h2> Rio De Janeiro, Argentina </h2> <a href="/about-otis/case-studies/christ-the-redeemer" class="otis_button" title="View the Case Study"> View the Case Study </a> </div> </div></div> <div class="tile-foot"> <div class="foot-inner"> <h2> Christ The Redeemer </h2> <p> Rio De Janeiro, Argentina </p> </div> </div> </div> <div class="tile"> <div class="tile-bg" style="background-image: url(images/about-us/case-studies/bahrain-wtc-grid.jpg);"> <div class="tile-content"> <div class="inner-content"> <h2 class="strong no-margin"> Bahrain World Trade Centre </h2> <h2> Manama, Bahrain </h2> <a href="/about-otis/case-studies/bahrain-wtc" class="otis_button" title="View the Case Study"> View the Case Study </a> </div> </div></div> <div class="tile-foot"> <div class="foot-inner"> <h2> Bahrain World Trade Centre </h2> <p> Manama, Bahrain </p> </div> </div> </div> <div class="tile"> <div class="tile-bg" style="background-image: url(images/about-us/case-studies/petronas-towers-grid.jpg);"> <div class="tile-content"> <div class="inner-content"> <h2 class="strong no-margin"> Petronas Towers </h2> <h2> Kuala Lumpur, Malaysia </h2> <a href="/about-otis/case-studies/petronas-towers" class="otis_button" title="View the Case Study"> View the Case Study </a> </div> </div></div> <div class="tile-foot"> <div class="foot-inner"> <h2> Petronas Towers </h2> <p> Kuala Lumpur, Malaysia </p> </div> </div> </div> <div class="tile"> <div class="tile-bg" style="background-image: url(images/about-us/case-studies/bow-calgary-grid.jpg);"> <div class="tile-content"> <div class="inner-content"> <h2 class="strong no-margin"> The Bow </h2> <h2> Calgary, Canada </h2> <a href="/about-otis/case-studies/the-bow-calgary" class="otis_button" title="View the Case Study"> View the Case Study </a> </div> </div></div> <div class="tile-foot"> <div class="foot-inner"> <h2> The Bow </h2> <p> Calgary, Canada </p> </div> </div> </div> </div>
Copy
Copy
Edit
.grid-tiles { .tile { position: relative; width: 100%; float: left; border-bottom: 2px solid $tertiaryColor; text-align: center; @media only screen and (min-width: 400px) { width: 50%; border-right: 2px solid $tertiaryColor; } @media only screen and (min-width: 620px) { width: 33.3333%; } @media only screen and ($small-desktop) { width: 25%; } &:not(.no-overlay) { &:hover { cursor: pointer; .tile-content { .inner-content { opacity: 1; } &:before { opacity: 1; } } } } &.no-overlay { .tile-bg { background-size: auto 100%; transition: background-size 0.25s ease-in-out; } &:hover { cursor: pointer; .tile-bg { background-size: auto 105%; } } } &.active { border-bottom: 2px solid $tertiaryColor; &.otis-white { border-bottom: 2px solid $tertiaryColor; .tile-foot { @media only screen and ($tablet-viewport) { background-color: $tertiaryColor; h2, h3, h4, p { color: $otisBlack; } } } } .tile-foot { @media only screen and ($tablet-viewport) { background-color: #bfbfbf; } &.otis-white { @media only screen and ($tablet-viewport) { background-color: $tertiaryColor; h2, h3, h4, p { color: $otisBlack; } } } } .tile-content { @media only screen and (max-width: 399px) { max-height: 0; padding: 0 15px; } @media only screen and (min-width: 400px) { background-color: $otisLightGrey; } @media only screen and ($tablet-viewport) { background-color: transparent; } } } } .tile-bg { display: block; background-size: cover; background-repeat: no-repeat; background-position: center center; padding: 20px 15px; } .tile-content { padding: 10px 15px; background-color: lighten($otisBlack, 8%); transition: background-color 0.25s; @media only screen and (max-width: 399px) { box-sizing: border-box; overflow: hidden; max-height: 400px; transition: max-height 0.25s linear, padding 0.05s linear 0.25s, background-color 0.25s; } @media only screen and ($tablet-viewport) { background-color: transparent; } h2 { display: block; font-family: $fontThin; color: $tertiaryColor; margin-bottom: 10px; &.no-margin { margin: 0; } &.strong { font-size: $baseFontSize * 1.5; font-family: $fontRegular; } i { margin-right: 1rem; &:after { content:"\00ae"; position: absolute; font-size: 1.5rem; font-style: normal; } &.tm { margin-right: 1rem; &:after { content:"\2122"; position: absolute; font-size: 1.5rem; font-style: normal; } } } } .otis_button { margin: 5px auto; min-width: 100%; @media only screen and ($large-desktop) { min-width: 200px; } } .inner-content { position: relative; overflow: hidden; top: 50%; transform: translateY(-50%); transition: opacity 0.25s ease-in-out 0.15s; z-index: 2; @media only screen and ($tablet-viewport) { opacity: 0; } } &.no-content { @media only screen and (max-width: 767px) { display: none; } } &:before { content: ""; transition: all 0.4s ease-in-out; @media only screen and ($tablet-viewport) { background-color: rgba(26, 26, 26, 0.8); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; } } } .tile-foot { position: relative; width: 100%; background-color: $otisBlack; padding: 10px 15px; min-height: 70px; transition: background-color 0.25s; @media only screen and ($small-desktop) { min-height: 100px; } .foot-inner { position: relative; top: 50%; transform: translateY(-50%); color: $tertiaryColor; h2 { font-family: $fontThin; font-size: $baseFontSize; @media only screen and ($tablet-viewport) { font-size: $baseFontSize * 1.25; } &.left { float: left; text-align: left; line-height: 1.2em; } &.block { text-align: left; width: 100%; margin: 0; } } img { &.left { float: left; max-height: 24px; max-width: 100%; margin: 6px 6px 6px 0; } } &:after { content: ""; display: table; clear: both; } } } &:after { content: ""; display: table; clear: both; } .expanded-section { display: none; float: left; width: 100%; background-color: #bfbfbf; border-bottom: 2px solid $tertiaryColor; &.otis-white { background-color: $tertiaryColor; h2, h3, h4, p { color: $otisBlack; } .close-btn { background: url(../images/components/close-btn-dark.png) no-repeat center center; } .lg-img { padding: 0 0 20px; @media only screen and (min-width: 620px) { padding: 0; } } .side-content { @media only screen and (min-width: 620px) { padding: 0 40px 0 0; } } .inner-content { @media only screen and ($extra-large-desktop) { padding: 20px 0; } } .otis_button { @include otisButton($otisBlack); margin: 5px 10px 5px 0; @media only screen and ($device-max) { margin: 5px 10px 5px 0; } } } .inner-content { padding: 20px 0; @media only screen and (min-width: 620px) { padding: 40px 0; } @media only screen and (min-width: 620px) and (max-width: 767px) { .col-xs-12 { width: 50%; } } } .close-btn { position: relative; float: right; height: 20px; width: 20px; text-align: center; cursor: pointer; background: url(../images/components/close-btn-white.png) no-repeat center center; margin: 0 0 20px; transition: transform 0.25s ease-in-out; z-index: 2; &.white { background: url(../images/components/close-btn-dark.png); } @media only screen and (min-width: 620px) { position: absolute; right: 15px; float: none; } &:hover { transform: rotate(90deg); } } .lg-img { padding: 0 0 20px; @media only screen and (min-width: 620px) { padding: 0 40px 0 0; } } .side-content { color: $tertiaryColor; @media only screen and ($small-desktop) { padding: 0 0 20px; } &.dark { color: $otisBlack; } h2 { font-family: $fontLight; font-size: $baseFontSize * 2; i { margin-right: 1rem; &:after { content:"\00ae"; position: absolute; font-size: 1.5rem; font-style: normal; } &.tm { margin-right: 1rem; &:after { content:"\2122"; position: absolute; font-size: 1.5rem; font-style: normal; } } } } h3 { font-family: $fontLight; font-size: $baseFontSize * 1.25; font-weight: 300; margin: 10px 0; } h4 { font-family: $fontLight; font-size: $baseFontSize * 1.25; font-weight: 300; } p { font-family: $fontLight; font-size: $baseFontSize; font-weight: 300; margin: 0 0 20px; &.strong { font-family: $fontBold; font-weight: 500; margin: 0; } } } .contact-info { margin: 0 0 20px; p { margin: 0; } a { color: $otisBlack; } } .meta-info { padding: 20px 0 0; p { margin: 0; } a { color: $tertiaryColor; } } .otis_button { margin: 5px 10px 5px 0; &.dark { @include otisButton($otisBlack); } } } }

otis_modal   

• Ability to add a title (optional)

• Ability to add body text (optional)

• Ability to add an icon above the title (optional)

• Ability to add a form (optional)

Copy
Edit
<button class="otis_button" data-toggle="modal" data-target="#emailModal"> SHOW THE MODAL </button> <!-- Modal --> <div class="otis_modal" id="emailModal" tabindex="-1" role="dialog" aria-labelledby="emailModal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="contact-close"> <img src="images/contact/contact-modal-close.jpg" data-dismiss="modal" aria-label="Close"> </div> <div class="modal-body"> <div class="row"> <div class="col-xs-12"> <div class="otis-icon"> <img src="images/contact/email-icon.jpg" alt="Email"> </div> <h3> Send these details to your inbox </h3> </div> </div> <div class="row"> <form action="" method="" class="otis_form"> <div class="col-xs-12 col-md-7"> <input type="email" name="emailAddress" placeholder="Enter Your Email"> </div> <div class="col-xs-12 col-md-5"> <button type="submit" class="otis_button">Send</button> </div> <div class="clearfix">&nbsp;</div> </form> </div> <div class="row submit-message"> <div class="col-xs-12"> <h4> Thank you. </h4> <p> Please check your inbox, an email is on the way. </p> </div> </div> </div> </div> </div> </div>
Copy
Copy
Edit
.otis_modal { z-index: 9999999999; .modal-dialog { @media only screen and ($small-desktop) { width: 800px; } .modal-content { padding: 40px 60px; } } .contact-close { position: absolute; top: 15px; right: 15px; cursor: pointer; } h3 { font-family: $fontThin; color: $primaryColor; font-size: $baseFontSize * 1.8; display: block; text-align: center; padding-top: 15px; @media only screen and ($small-desktop) { font-size: $baseFontSize * 3; padding-bottom: 40px; } } h4 { font-family: $fontThin; color: $primaryColor; font-size: $baseFontSize * 1.8; display: block; text-align: center; padding-top: 15px; @media only screen and ($small-desktop) { font-size: $baseFontSize * 3; } } p { font-family: $fontThin; color: $primaryColor; font-size: $baseFontSize * 1.4; display: block; text-align: center; @media only screen and ($small-desktop) { font-size: $baseFontSize * 2; } } .submit-message { display: none; } form { padding: 20px 0 0; input[type="text"], input[type="email"] { border: 2px solid $otisLighterGrey; } .otis_button { @include otisButton($tertiaryColor, $primaryColor); margin-top: 8px; padding: 15px 20px; width: 100%; display: block; height: 56px; @media only screen and ($small-desktop) { max-width: auto; } } } .otis-icon { margin: 15px auto 0; display: block; width: 75px; height: 75px; padding: 20px; } } .modal-backdrop { z-index: 99999; }

product_line_drawing   

The element is based on two full_width_strips so the styles are derived from the full_width_strip SASS.

• Ability to add a title (mandatory)

• Ability to add a sub title (optional)

• Ability to add numbered or non numbered points (logic to determine whether the span containing the numerals should be displayed

• Ability to add an image to the right

• Ability to add a button

The elements of innovation

Next generation technology at the heart of your building.

  • 1 Elevonic Controller

    Proven microprocessor technology that’s Otis Elite service enabled for complete reliability.

  • 2 Coated steel belts

    Our polyurethane-coated steel belts are strong, flexible and allow for a 70 percent smaller machine.

  • 3 Gearless machine

    Our compact, efficient gearless machine saves serious space in your building.

  • 4 ReGen Drive

    Here’s an innovation that captures energy usually wasted as heat and returns it to your building as clean power.

  • 5 LED fixtures

    Bright and efficient, LEDs enhance the passenger experience and your building’s environment.

  • 6 Closed loop door operator

    This feature delivers consistent quiet performance and ensures passenger safety.

  • 7 Wiring

    Robust wiring ensures reliable communication is maintained across your system.

Download Drawings
Copy
Edit
<div class="container"> <div class="row"> <div class="col-xs-12 col-md-12"> <div class="full_width_strip line-drawing-top left-align"> <h2> The elements of innovation </h2> <h3> Next generation technology at the heart of your building. </h3> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="full_width_strip line-drawing-bottom left-align"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-5"> <ul class="numbered-list"> <li> <h3> <span>1</span> Elevonic Controller </h3> <p> Proven microprocessor technology that’s Otis Elite service enabled for complete reliability. </p> </li> <li> <h3> <span>2</span> Coated steel belts </h3> <p> Our polyurethane-coated steel belts are strong, flexible and allow for a 70 percent smaller machine. </p> </li> <li> <h3> <span>3</span> Gearless machine </h3> <p> Our compact, efficient gearless machine saves serious space in your building. </p> </li> <li> <h3> <span>4</span> ReGen Drive </h3> <p> Here’s an innovation that captures energy usually wasted as heat and returns it to your building as clean power. </p> </li> <li> <h3> <span>5</span> LED fixtures </h3> <p> Bright and efficient, LEDs enhance the passenger experience and your building’s environment. </p> </li> <li> <h3> <span>6</span> Closed loop door operator </h3> <p> This feature delivers consistent quiet performance and ensures passenger safety. </p> </li> <li> <h3> <span>7</span> Wiring </h3> <p> Robust wiring ensures reliable communication is maintained across your system. </p> </li> </ul> <a class="otis_button" href="#" title="Download Drawings"> <span class="btn-icon " style="background-image: url(images/components/pdf-btn-sprite.png)"></span> Download Drawings </a> </div> <div class="hidden-xs hidden-sm col-md-8 col-lg-7"> <img class="img-responsive pull-right side-img" src="images/products/gen2/engineering-illustration.jpg" alt="Product Illustration"> </div> </div> </div> </div> </div> </div>
Copy
Copy
Edit
/* scss/components/_product_line_drawing.scss */

standard_block   

• Ability to add an image (optional)

• Ability to add an icon (optional)

• Ability to add a title (optional)

• Ability to add a sub title (optional)

• Ability to add text/lists (optional)

• Ability to add a button (optional)

• Ability to choose a background color (optional)

• Ability to choose alignment (optional)

The purpose of this component is to be fairly flexible, the examples below show some of the configurations that should be made available via the CMS. Each row of blocks should be within a .row element. Collections of rows should sit within the standard_blocks_wrapper element to ensure the correct padding is applied above and below the standard blocks.

Example of 4 standard blocks in a row - these are in a .container-fluid element to allow them to go full width
Otis Elevators

Lorem ipsum dolor

Aperiam labore ad rerum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur.

Find out more
Otis Elevators

Lorem ipsum dolor

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
Find out more
Otis Elevators

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur.

Find out more
Otis Elevators

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur.

Find out more
Example of 3 standard blocks in a row - these are in a .container-fluid element to allow them to go full width.
Otis Elevators
lbs capacity

Lorem ipsum dolor

Aperiam labore ad rerum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur.

Find out more
Otis Elevators
lbs capacity

Lorem ipsum dolor

Aperiam labore ad rerum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur.

Otis Elevators
lbs capacity

Lorem ipsum dolor

Aperiam labore ad rerum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur.

Find out more
Example of 2 standard blocks in each row - these are also in a fixed width .container element to avoid them going full width.
Otis Elevators
lbs capacity

Lorem ipsum dolor

Aperiam labore ad rerum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur.

Find out more
Otis Elevators
lbs capacity

Lorem ipsum dolor

Aperiam labore ad rerum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur.

Otis Elevators
lbs capacity

Lorem ipsum dolor

Aperiam labore ad rerum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur.

Find out more
Otis Elevators
lbs capacity

Lorem ipsum dolor

Aperiam labore ad rerum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur.

Example of 3 standard blocks in a row - these are also in a fixed width .container element to avoid them going full width.
Otis Elevators
lbs capacity

Lorem ipsum dolor

Aperiam labore ad rerum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur.

Find out more
Otis Elevators
lbs capacity

Lorem ipsum dolor

Aperiam labore ad rerum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur.

Otis Elevators
lbs capacity

Lorem ipsum dolor

Aperiam labore ad rerum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur.

Find out more
Copy
Edit
<pre>Example of 4 standard blocks in a row - these are in a .container-fluid element to allow them to go full width</pre> <div class="container-fluid standard_blocks_wrapper"> <div class="row"> <div class="col-xs-12 col-md-6 col-lg-3"> <div class="standard-block wow fadeIn"> <div class="block-image"> <img src="images/content/placeholder-1.jpg" alt="Otis Elevators"> </div> <div class="block-text button-active"> <h2> Lorem ipsum dolor </h2> <h3> Aperiam labore ad rerum </h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur. </p> <a href="#" class="otis_button"> Find out more </a> </div> </div> </div> <div class="col-xs-12 col-md-6 col-lg-3"> <div class="standard-block wow fadeIn block-black"> <div class="block-image"> <img src="images/content/placeholder-2.jpg" alt="Otis Elevators"> </div> <div class="block-text button-active"> <h2> Lorem ipsum dolor </h2> <ul> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum <a href="#">dolor sit amet</a></li> </ul> <a href="#" class="otis_button"> Find out more </a> </div> </div> </div> <div class="col-xs-12 col-md-6 col-lg-3"> <div class="standard-block wow fadeIn block-green"> <div class="block-image"> <img src="images/content/placeholder-3.jpg" alt="Otis Elevators"> </div> <div class="block-text button-active"> <h2> Lorem ipsum dolor </h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur. </p> <a href="#" class="otis_button"> Find out more </a> </div> </div> </div> <div class="col-xs-12 col-md-6 col-lg-3"> <div class="standard-block wow fadeIn block-blue"> <div class="block-image"> <img src="images/content/placeholder-4.jpg" alt="Otis Elevators"> </div> <div class="block-text button-active"> <h2> Lorem ipsum dolor </h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur. </p> <a href="#" class="otis_button"> Find out more </a> </div> </div> </div> </div> </div> <pre>Example of 3 standard blocks in a row - these are in a .container-fluid element to allow them to go full width.</pre> <div class="container-fluid standard_blocks_wrapper"> <div class="row"> <div class="col-xs-12 col-md-6 col-lg-4"> <div class="standard-block wow fadeIn block-centered"> <div class="block-image"> <img src="images/content/placeholder-1.jpg" alt="Otis Elevators"> </div> <div class="block-icon"> <img src="images/content/products/elevators/skybuild/lbs-capacity.png" alt="lbs capacity" class="img-responsive centre-block"> </div> <div class="block-text button-active"> <h2> Lorem ipsum dolor </h2> <h3> Aperiam labore ad rerum </h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur. </p> <a href="#" class="otis_button"> Find out more </a> </div> </div> </div> <div class="col-xs-12 col-md-6 col-lg-4"> <div class="standard-block wow fadeIn"> <div class="block-image"> <img src="images/content/placeholder-1.jpg" alt="Otis Elevators"> </div> <div class="block-icon"> <img src="images/content/products/elevators/skybuild/lbs-capacity.png" alt="lbs capacity" class="img-responsive centre-block"> </div> <div class="block-text"> <h2> Lorem ipsum dolor </h2> <h3> Aperiam labore ad rerum </h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur. </p> </div> </div> </div> <div class="col-xs-12 col-md-6 col-lg-4"> <div class="standard-block wow fadeIn"> <div class="block-image"> <img src="images/content/placeholder-1.jpg" alt="Otis Elevators"> </div> <div class="block-icon"> <img src="images/content/products/elevators/skybuild/lbs-capacity.png" alt="lbs capacity" class="img-responsive centre-block"> </div> <div class="block-text button-active"> <h2> Lorem ipsum dolor </h2> <h3> Aperiam labore ad rerum </h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur. </p> <a href="#" class="otis_button"> Find out more </a> </div> </div> </div> </div> </div> <pre>Example of 2 standard blocks in each row - these are also in a fixed width .container element to avoid them going full width.</pre> <div class="container standard_blocks_wrapper"> <div class="row"> <div class="col-xs-12 col-md-6"> <div class="standard-block wow fadeIn block-centered"> <div class="block-image"> <img src="images/content/placeholder-1.jpg" alt="Otis Elevators"> </div> <div class="block-icon"> <img src="images/content/products/elevators/skybuild/lbs-capacity.png" alt="lbs capacity" class="img-responsive centre-block"> </div> <div class="block-text button-active"> <h2> Lorem ipsum dolor </h2> <h3> Aperiam labore ad rerum </h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur. </p> <a href="#" class="otis_button"> Find out more </a> </div> </div> </div> <div class="col-xs-12 col-md-6"> <div class="standard-block wow fadeIn"> <div class="block-image"> <img src="images/content/placeholder-1.jpg" alt="Otis Elevators"> </div> <div class="block-icon"> <img src="images/content/products/elevators/skybuild/lbs-capacity.png" alt="lbs capacity" class="img-responsive centre-block"> </div> <div class="block-text"> <h2> Lorem ipsum dolor </h2> <h3> Aperiam labore ad rerum </h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur. </p> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-md-6"> <div class="standard-block wow fadeIn block-centered"> <div class="block-image"> <img src="images/content/placeholder-1.jpg" alt="Otis Elevators"> </div> <div class="block-icon"> <img src="images/content/products/elevators/skybuild/lbs-capacity.png" alt="lbs capacity" class="img-responsive centre-block"> </div> <div class="block-text button-active"> <h2> Lorem ipsum dolor </h2> <h3> Aperiam labore ad rerum </h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur. </p> <a href="#" class="otis_button"> Find out more </a> </div> </div> </div> <div class="col-xs-12 col-md-6"> <div class="standard-block wow fadeIn"> <div class="block-image"> <img src="images/content/placeholder-1.jpg" alt="Otis Elevators"> </div> <div class="block-icon"> <img src="images/content/products/elevators/skybuild/lbs-capacity.png" alt="lbs capacity" class="img-responsive centre-block"> </div> <div class="block-text"> <h2> Lorem ipsum dolor </h2> <h3> Aperiam labore ad rerum </h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur. </p> </div> </div> </div> </div> </div> <pre>Example of 3 standard blocks in a row - these are also in a fixed width .container element to avoid them going full width.</pre> <div class="container standard_blocks_wrapper"> <div class="row"> <div class="col-xs-12 col-md-6 col-lg-4"> <div class="standard-block wow fadeIn block-centered"> <div class="block-image"> <img src="images/content/placeholder-1.jpg" alt="Otis Elevators"> </div> <div class="block-icon"> <img src="images/content/products/elevators/skybuild/lbs-capacity.png" alt="lbs capacity" class="img-responsive centre-block"> </div> <div class="block-text button-active"> <h2> Lorem ipsum dolor </h2> <h3> Aperiam labore ad rerum </h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur. </p> <a href="#" class="otis_button"> Find out more </a> </div> </div> </div> <div class="col-xs-12 col-md-6 col-lg-4"> <div class="standard-block wow fadeIn"> <div class="block-image"> <img src="images/content/placeholder-1.jpg" alt="Otis Elevators"> </div> <div class="block-icon"> <img src="images/content/products/elevators/skybuild/lbs-capacity.png" alt="lbs capacity" class="img-responsive centre-block"> </div> <div class="block-text"> <h2> Lorem ipsum dolor </h2> <h3> Aperiam labore ad rerum </h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur. </p> </div> </div> </div> <div class="col-xs-12 col-md-6 col-lg-4"> <div class="standard-block wow fadeIn"> <div class="block-image"> <img src="images/content/placeholder-1.jpg" alt="Otis Elevators"> </div> <div class="block-icon"> <img src="images/content/products/elevators/skybuild/lbs-capacity.png" alt="lbs capacity" class="img-responsive centre-block"> </div> <div class="block-text button-active"> <h2> Lorem ipsum dolor </h2> <h3> Aperiam labore ad rerum </h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam labore ad rerum cum magni quibusdam iusto nihil doloribus sapiente ratione tempora magnam quo, expedita delectus, impedit perferendis velit soluta consequatur. </p> <a href="#" class="otis_button"> Find out more </a> </div> </div> </div> </div> </div>
Copy
Copy
Edit
.standard_blocks_wrapper { @media only screen and ($small-desktop) { padding-bottom: 60px; } .standard-block { margin: 20px 0; position: relative; padding: 0; background-color: $otisBeige; .block-image { max-height: 320px; overflow: hidden; img { width: 100%; } @media only screen and ($small-desktop) { max-height: 220px; } } .block-icon { width: 80px; height: 80px; margin: 20px auto 0; border: 2px solid $otisLightGrey; border-radius: 50%; padding: 10px; @media only screen and ($tablet-viewport) { img { margin: 0 auto; } } } .block-text { padding: 20px; h2 { font-family: $fontThin; color: $primaryColor; font-size: $baseFontSize * 2; margin-bottom: 0; } h3 { font-family: $fontThin; color: $primaryColor; font-size: $baseFontSize * 1.2; } p, ul { font-family: $fontThin; color: $primaryColor; font-size: $baseFontSize; margin: 20px 0; } p { &:last-child { margin-bottom: 0 !important; } } ul { padding-left: 30px; } .otis_button { @include otisButton($primaryColor); margin-top: 20px; position: absolute; bottom: 20px; left: 20px; right: 20px; width: auto; } &.button-active { padding: 20px 20px 100px; @media only screen and ($small-desktop) { padding-bottom: 70px; } } } //BLOCK THEMES &.block-centered { text-align: center !important; } &.block-black { background-color: $primaryColor; .block-icon { border: 2px solid $tertiaryColor; } h2, h3, p, ul { color: $tertiaryColor; } .otis_button { @include otisButton($tertiaryColor); } } &.block-white { background-color: $tertiaryColor; .white-icon { border: 2px solid $primaryColor; } h2, h3, p, ul { color: $primaryColor; } .otis_button { @include otisButton($primaryColor); } } &.block-green { background-color: $otisGreen; .block-icon { border: 2px solid $tertiaryColor; } h2, h3, p, ul { color: $tertiaryColor; } .otis_button { @include otisButton($tertiaryColor); } } &.block-blue { background-color: $hydrofitBlue; .block-icon { border: 2px solid $tertiaryColor; } h2, h3, p, ul { color: $tertiaryColor; } .otis_button { @include otisButton($tertiaryColor); } } } }

video-strip   

The Video Strip component


    HTML5 Video file embed

Copy
Edit
<hr> <pre> HTML5 Video file embed </pre> <hr> <div class="video_strip"> <div class="play_button"></div> <div class="video_poster" style="background-image: url(images/products/gmp/gmp-vid-poster.png)"></div> <video controls=""> <source src="videos/gmp-video.mp4" type="video/mp4"> <source src="videos/gmp-video.ogv" type="video/ogg"> <source src="videos/gmp-video.webm" type="video/webm"> Your browser does not support the video tag. </video> </div>
Copy
Copy
Edit
@mixin videoStrip { background-size: cover; background-repeat: no-repeat; background-position: center center; cursor: pointer; position: relative; background-color: $primaryColor; min-height: 300px; padding-top: 40px; padding-bottom: 40px; max-height: 540px; @media only screen and ($small-desktop) { min-height: 540px; } .play_button, .iframe_play_button { @include absoluteCenter; width: 130px; height: 130px; background-image: url('#{$imagePath}components/play_button_default.png'); z-index: 10; &:hover { background-image: url('#{$imagePath}components/play_button_hover.png'); } } video, iframe { width: 100%; @media only screen and ($small-desktop) { width: 40%; margin: 0 auto; display: block; } } iframe { @include horizontalCenter; top: 0; bottom: 0; position: absolute; z-index: 8; } .video_poster { width: 100%; top: 0; left: 0; right: 0; bottom: 0; position: absolute; z-index: 9; background-size: cover; background-position: center; } } .video_strip { @include videoStrip; }

static_tab   

A faster, more intelligent
way to build

Our SkyBuild self-climbing elevator dramatically improves the high-rise build process, accelerating construction while reducing costs.

The SkyBuild construction elevator moves up floor by floor as your building rises, speeding the delivery of people and materials.

The benefits are substantial: Faster workflow. Reduced labor costs. A quicker jump from floor to floor. The ability to jump without using the site crane. A safer environment for on site personnel. And the elimination of damage and delays from the weather outside.

And once construction is complete, SkyBuild stays on the job and goes directly into service as a SkyRise elevator.

Visit SkyBuild™
Copy
Edit
<div class="static_tab"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> <h2> A faster, more intelligent<br> way to build </h2> <h3> Our SkyBuild self-climbing elevator dramatically improves the high-rise build process, accelerating construction while reducing costs. </h3> <p> The SkyBuild construction elevator moves up floor by floor as your building rises, speeding the delivery of people and materials. </p> <p> The benefits are substantial: Faster workflow. Reduced labor costs. A quicker jump from floor to floor. The ability to jump without using the site crane. A safer environment for on site personnel. And the elimination of damage and delays from the weather outside. </p> <p> And once construction is complete, SkyBuild stays on the job and goes directly into service as a SkyRise elevator. </p> <a href="#" class="otis_button"> Visit SkyBuild&trade; </a> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 hidden-xs hidden-sm"> <img src="images/products/gmp/skybuild_illustration.jpg" class="img-responsive" alt="Skybuild"> </div> </div> </div> </div>
Copy
Copy
Edit
@mixin staticTab { padding: 20px 0; h2 { color: $primaryColor; font-size: $baseFontSize * 2.4; line-height: $baseLineHeight * 2; font-family: $fontThin; padding-bottom: 30px; } h3 { font-size: $baseFontSize * 1.5; font-family: $fontThin; padding-bottom: 30px; } p { font-size: $baseFontSize; font-family: $fontThin; padding-bottom: 20px; } img { margin: 0 auto; } .otis_button { @include otisButton($primaryColor); @media only screen and ($mobile-max) { width: 100%; } } @media only screen and ($small-desktop) { h2 { font-size: $baseFontSize * 3; line-height: $baseFontSize * 3.3; } padding: 50px 0; } } .static_tab { @include staticTab; }

list_block   

The List Block component

Item Title

Item Sub Title

Copy
Edit
<div class="container-fluid"> <div class="row list-block"> <div class="row-same-height row-full-height"> <div class="col-xs-12 col-sm-12 col-md-6 col-full-height col-md-height col-lg-height col-middle"> <div class="inner-content"> <h2> Item Title </h2> <p> Item Sub Title </p> </div> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-full-height col-md-height col-lg-height col-middle btns-col"> <a class="otis_button" href="" title="@lang('brochure-download.view_online')"> Download PDF </a> <a class="otis_button pdf-button" href="" title="Item Title"> View Online </a> </div> </div> </div> </div>
Copy
Copy
Edit
@mixin listBlock { background-color: $primaryColor; border-bottom: 2px solid $tertiaryColor; color: $tertiaryColor; padding: 20px 0; .inner-content { text-align: center; @media only screen and ($small-desktop) { text-align: left; } h2 { font-family: $fontRegular; font-size: $baseFontSize * 1.5; color: $tertiaryColor; margin: 0; i { margin-right: 1rem; &:after { content:"\00ae"; position: absolute; font-size: 1.5rem; font-style: normal; } &.tm { margin-right: 1rem; &:after { content:"\2122"; position: absolute; font-size: 1.5rem; font-style: normal; } } } } p { margin: 0 0 10px; font-family: $fontLight; font-size: $baseFontSize; } } .date, .location { display: block; color: $tertiaryColor; font-size: $baseFontSize; @media only screen and ($large-desktop) { font-size: $baseFontSize * 1.5; } } .date { font-family: $fontBold; } .location { margin-bottom: 10px; @media only screen and ($small-desktop) { margin-bottom: 0; } } img { margin: 0 auto 10px; max-height: 100px; @media only screen and ($small-desktop) { margin: 0; } } .btns-col { @media only screen and ($tablet-viewport) { text-align: center; } @media only screen and ($small-desktop) { text-align: inherit; } } .otis_button { width: 100%; min-width: inherit; margin: 10px auto; &:nth-child(2) { margin: 10px auto; @media only screen and ($tablet-viewport) { margin: 0 5px; } } @media only screen and ($tablet-viewport) { display: inline-block; margin: 0 5px; } @media only screen and ($small-desktop) { margin: 0; width: 100%; &:nth-child(2) { margin: 10px 0 0; } } @media only screen and ($large-desktop) { margin: 0 5px !important; width: auto; float: right; } } .pagination-wrapper { @include pagination($tertiaryColor); background-color: $primaryColor; padding: 20px 0; @media only screen and ($tablet-viewport) { padding: 30px 0; } } } .list-block { @include listBlock; }

instagram_post   

The Instagram Post component

#observationdeck

Du Louvre jusqu'à la butte Montmartre ... #topparisphoto #topeuropephoto #topfrancephoto

#observationdeck

#eiffeltower #paris #france #seine #river #bridges

#observationdeck

I wanna go back #france #paris #toureiffel #eiffeltower #night #love #picoftheday #potd #light #wonderful_places #withmyman

Copy
Edit
<div class="container-fluid instagram_posts"> <div class="row"> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 noPad instagram-item"> <div class="img-wrap" style="background-image: url(images/about-us/case-studies/hudson-yards/instagram1.jpg)"> </div> <div class="inner-content"> <i class="fa fa-instagram"></i> <h2>#observationdeck</h2> <p> Du Louvre jusqu'à la butte Montmartre ... #topparisphoto #topeuropephoto #topfrancephoto </p> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 noPad instagram-item"> <div class="img-wrap" style="background-image: url(images/about-us/case-studies/hudson-yards/instagram2.jpg)"> </div> <div class="inner-content"> <i class="fa fa-instagram"></i> <h2>#observationdeck</h2> <p> #eiffeltower #paris #france #seine #river #bridges </p> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 noPad instagram-item"> <div class="img-wrap" style="background-image: url(images/about-us/case-studies/hudson-yards/instagram3.jpg)"> </div> <div class="inner-content"> <i class="fa fa-instagram"></i> <h2>#observationdeck</h2> <p> I wanna go back #france #paris #toureiffel #eiffeltower #night #love #picoftheday #potd #light #wonderful_places #withmyman </p> </div> </div> </div> </div>
Copy
Copy
Edit
.instagram_posts { .instagram-item { text-align: center; &:hover { background-color: $primaryColor; color: $tertiaryColor; } .img-wrap { max-height: 250px; min-height: 250px; @media only screen and ($small-desktop) { max-height: 400px; min-height: 400px; } overflow: hidden; background-size: cover; background-position: center; } .inner-content { padding: 40px 20px; min-height: 0; position: relative; @media only screen and ($tablet-viewport) { min-height: 300px; } .icons-wrapper { width: 100%; text-align: center; position: relative; bottom: auto; left: auto; right: auto; height: auto; margin-top: 20px; @media only screen and ($tablet-viewport) { position: absolute; height: 50px; bottom: 0; left: 0; right: 0; margin-top: 0; } } .fa { font-size: $baseFontSize * 2; &.fa-heart, &.fa-comment { font-size: $baseFontSize; } } h2 { font-size: $baseFontSize * 2; font-family: $fontThin; } p { font-size: $baseFontSize; font-family: $fontThin; margin-top: 10px; @media only screen and ($small-desktop) { font-size: $baseFontSize; } } } } }

instagram_block   

The Instagram Block component

5

Lorem ipsum dolor sit amet

Copy
Edit
<div class="row-same-height group-one-height-calc"> <div class="col-xs-12 col-sm-12 col-md-5 col-full-height col-md-height col-lg-height news-block instagram-block"> <div class="inner-wrapper"> <div class="tile-bg bg-center" style="background-image: url('images/news-media/la-airport.jpg');"></div> <div class="content-wrapper"> <div class="hover-content"> <div class="icons-wrapper"> <span class="like"> <i class="fa fa-heart" aria-hidden="true"></i> 32 </span> <span class="comment"> <i class="fa fa-comment" aria-hidden="true"></i> 5 </span> </div> <p class="hidden-selector"> Lorem ipsum dolor sit amet </p> </div> </div> </div> </div> </div>
Copy
Copy
Edit
@mixin instagramBlock($text-color: $tertiaryColor) { background: transparent; color: $text-color; .inner-wrapper { display: table; height: 100%; width: 100%; } .hover-content { position: relative; transition: opacity 0.4s ease-in-out; text-align: center; @media only screen and ($small-desktop) { text-align: left; } p { font-size: $baseFontSize; transition: 0.25s max-height ease-in-out, 0.25s opacity ease-in-out; padding: 10px 0 0; @media only screen and ($small-desktop) { max-height: 0; overflow: hidden; opacity: 0; padding: 30px 0 0; } a { font-size: $baseFontSize; display: inline; height: auto; width: auto; text-decoration: none; } } } .icons-wrapper { color: $text-color; transition: 0.15s left ease-out 0.15s, 0.15s top ease-out, 0.1s margin-top ease-out, 0.1s margin-left ease-out 0.15s; display: block; width: auto; height: 20px; text-align: center; @media only screen and ($small-desktop) { position: absolute; top: 50%; bottom: 50%; right: 50%; left: 50%; left: 50%; right: 50%; width: 100px; margin: -10px 0 0 -50px; } span { color: $text-color; font-size: $baseFontSize * 0.875; margin: 0 5px; } } &:hover { .tile-bg { &:before { opacity: 0.7; } } .hover-content { opacity: 1; p { max-height: 500px; opacity: 1; } } @media only screen and ($small-desktop) { .icons-wrapper { left: -5px; top: 0; margin: 0; } } } .tile-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 100%; background-repeat: no-repeat; &:before { opacity: 0.4; } @media only screen and ($small-desktop) { &:before { opacity: 0; } } } .content-wrapper { display: table-cell; vertical-align: middle; padding: 20px; a, p { color: $text-color; font-family: $fontRegular; margin: 0; } } } .instagram-block { @include instagramBlock; height: 300px; display: block; }

horizontal_tabs   

• Ability to add up to 3 tabs (minimum of 2 tabs and maximum of 3 tabs)

• Tabs can either have tab logo or tab title (NOT BOTH)

• Ability to add new logo (JPEG or PNG) or select a logo from the asset library

• Ability to add tab title (optional)

• Ability to add main heading (mandatory)

• Ability to add sub heading (mandatory)

• Ability to add body copy (mandatory)

• Ability to add up to 3 key facts and up to 3 key stats (optional, numbers)

• Ability to add descriptor (optional)

• Ability to add lists (optional max 2)

• Ability to add optional buttons (maximum 2). In order to create a button, admin will need to insert link and either upload new icons (JPEG or PNG) or select an icon from the asset library

• Ability to add illustration on the right (typically illustration) 230 (W) x height to suit which is mandatory (on the right) and allow user to select from the asset library

• Ability to add image strip that is optional for the component. Size should be 1140 x height to suit and allow user to select from the asset library

• Ability to add a row of up to 4 statistics structured the same as Number stats

Example of horizontal tabs with stats at the bottom

Single Deck

High-speed, high-rise

The sky’s really the limit when it comes to the Single Deck. Rising at 2000 feet per minute to a height of 1625 feet and able to handle up to 9900 pounds, it’s the ideal choice for the highest and busiest of skyscrapers.

Otis Duolifts

pounds maximum standard duty

Otis Duolifts

feet per minute maximum speed

Otis Duolifts

feet maximum rise

Double Deck

A fast and robust choice

Handle double the passenger traffic in quick-fire time with the Double Deck. Rising to 1300 feet at speeds of up to 2000 feet per minute, the Double Deck also cuts elevator core space by up to 40 percent - an important feature where real estate is at a premium.

Otis Duolifts
5,000

pounds maximum standard duty

Otis Duolifts
2,000

feet per minute maximum speed

Otis Duolifts
1,312

feet maximum rise

Example of horizontal tabs with an image, tabular data and

Commercial customers want escalators and moving walks that are refined yet resistant, and customized to their needs

Ultimately safe, incredibly reliable, and designed to integrate seamlessly with your building, our escalators and moving walks with a commercial focus are engineered to be whisper quiet and smooth. They also offer a wealth of design options to allow a high degree of individuality. It all combines to encourage passengers to relax and explore your premises thoroughly.

  • Maximal rise height: 8m at a step width of 1000 mm
  • Inclination: 30 / 35 degrees
  • Normal step width: 600 / 800 / 1000 mm (contract base available) 
  • Speeds: 0.5mps

We are proud to create escalators and moving walks for public areas that effortlessly handle the heaviest traffic, year after year.

Designed to meet the extreme and varied demands of public spaces such as airports, metros and other busy transport hubs, our escalators and moving walks raise the bar for endurance and reliability. You can expect at least 20 years of efficient, safe service without downtime from our products in classic public ‘hot spots’.

  • Maximal rise height: 20m at a step width of 1000 mm (special request up to 40m available)
  • Inclination: 27.3 / 30 / 35 degrees
  • Normal step width: 800 / 1000 mm
  • Speeds: 0.5 / 0.6 / 0.75mps

Adaptable, safe and reliable, our moving walks are designed to work around your building’s needs.

Flexible designs and clever engineering underpin our moving walks range. Smooth and quiet, robust and long-lasting, sleek and impressive, they are a safe and cost-effective choice that our customers have come to rely on all day, every day.

Commercial

  • Inclination: 0° up to 6°, 10°, 12° (special request 11° available)
  • Maximum length: 80m
  • Speed: 0.5mps
  • Palette widths: 800 / 1000mm

Public

  • Inclination: 0° up to 6°
  • Maximum length: 120m (special request up to 140m available)
  • Speed: 0.5 / 0.6 / 0.75mps
  • Palette widths: 1000 / 1200 / 1400mm
Copy
Edit
<pre>Example of horizontal tabs with stats at the bottom</pre> <ul class="nav nav-tabs horizontal_tabs hidden-xs" role="tablist"> <li role="presentation" class="active" style="width: 50%;"> <a href="#singleDeck" aria-controls="singleDeck" role="tab" data-toggle="tab" title="Single Deck"> <h2> Single Deck </h2> </a> </li> <li role="presentation" class="" style="width: 50%;"> <a href="#doubleDeck" aria-controls="doubleDeck" role="tab" data-toggle="tab" title="Double Deck"> <h2> Double Deck </h2> </a> </li> </ul> <div class="tab-content horizontal_tabs_content"> <ul class="nav nav-tabs horizontal_tabs mobile hidden-sm hidden-md hidden-lg" role="tablist"> <li role="presentation" class="active"> <a href="#skyrise" aria-controls="skyrise" role="tab" data-toggle="tab" title="SkyRise Logo"> <h2> Single Deck </h2> </a> </li> </ul> <div role="tabpanel" class="tab-pane active" id="singleDeck"> <div class="container"> <div class="row clearfix"> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> <h2> Single Deck </h2> <h3> High-speed, high-rise </h3> <div class="product-rm hidden-md hidden-lg"> <a href="#rm-singleDeck" data-toggle="collapse" title="Read More"> Read More </a> </div> <div id="rm-singleDeck" class="collapse in"> <p> The sky’s really the limit when it comes to the Single Deck. Rising at 2000 feet per minute to a height of 1625 feet and able to handle up to 9900 pounds, it’s the ideal choice for the highest and busiest of skyscrapers. </p> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 hidden-xs hidden-sm"> <img src="images/products/skyrise/single-deck.jpg" class="img-responsive" alt="$panel['panel_title']"> </div> </div> <div class="container number_stats_wrapper"> <div class="row number_stats"> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <img src="images/products/skyrise/lbs-capacity.png" alt="Otis Duolifts" class="img-responsive centre-block"> <div class="stat_data"> <span class="num-anim" data-end-value="10000" data-duration-value="0.4"></span> <p>pounds maximum standard duty</p> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <img src="images/products/skyrise/feet-min.png" alt="Otis Duolifts" class="img-responsive centre-block"> <div class="stat_data"> <span class="num-anim" data-end-value="2000" data-duration-value="0.4"></span> <p>feet per minute maximum speed</p> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <img src="images/products/skyrise/stops.png" alt="Otis Duolifts" class="img-responsive centre-block"> <div class="stat_data"> <span class="num-anim" data-end-value="1640" data-duration-value="0.4"></span> <p>feet maximum rise</p> </div> </div> </div> </div> </div> </div> <ul class="nav nav-tabs horizontal_tabs mobile hidden-sm hidden-md hidden-lg" role="tablist"> <li role="presentation" class="active"> <a href="#skyrise" aria-controls="skyrise" role="tab" data-toggle="tab" title="SkyRise Logo"> <h2> Double Deck </h2> </a> </li> </ul> <div role="tabpanel" class="tab-pane " id="doubleDeck"> <div class="container"> <div class="row clearfix"> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> <h2> Double Deck </h2> <h3> A fast and robust choice </h3> <div class="product-rm hidden-md hidden-lg"> <a href="#rm-doubleDeck" data-toggle="collapse" title="Read More"> Read More </a> </div> <div id="rm-doubleDeck" class="collapse in"> <p>Handle double the passenger traffic in quick-fire time with the Double Deck. Rising to 1300 feet at speeds of up to 2000 feet per minute, the Double Deck also cuts elevator core space by up to 40 percent - an important feature where real estate is at a premium.</p> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 hidden-xs hidden-sm"> <img src="images/products/skyrise/double-deck.jpg" class="img-responsive" alt="$panel['panel_title']"> </div> </div> <div class="container number_stats_wrapper"> <div class="row number_stats"> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <img src="images/products/skyrise/lbs-capacity.png" alt="Otis Duolifts" class="img-responsive centre-block"> <div class="stat_data"> <span class="num-anim" data-end-value="5000" data-duration-value="0.4" id="num-anim-3" data-anim-init="true">5,000</span> <p>pounds maximum standard duty</p> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <img src="images/products/skyrise/feet-min.png" alt="Otis Duolifts" class="img-responsive centre-block"> <div class="stat_data"> <span class="num-anim" data-end-value="2000" data-duration-value="0.4" id="num-anim-4" data-anim-init="true">2,000</span> <p>feet per minute maximum speed</p> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <img src="images/products/skyrise/stops.png" alt="Otis Duolifts" class="img-responsive centre-block"> <div class="stat_data"> <span class="num-anim" data-end-value="1312" data-duration-value="0.4" id="num-anim-5" data-anim-init="true">1,312</span> <p>feet maximum rise</p> </div> </div> </div> </div> </div> </div> </div> <pre>Example of horizontal tabs with an image, tabular data and</pre> <ul class="nav nav-tabs horizontal_tabs hidden-xs" role="tablist"> <li role="presentation" class="active" style="width: 33.3333%;"> <a href="#commercial" aria-controls="commercial" role="tab" data-toggle="tab" title="Commercial Escalators" aria-expanded="true"> <h2> Commercial Escalators </h2> </a> </li> <li role="presentation" class="" style="width: 33.3333%;"> <a href="#public" aria-controls="public" role="tab" data-toggle="tab" title="Public Escalators" aria-expanded="false"> <h2> Public Escalators </h2> </a> </li> <li role="presentation" class="" style="width: 33.3333%;"> <a href="#moving-walks" aria-controls="moving-walks" role="tab" data-toggle="tab" title="Moving Walks" aria-expanded="false"> <h2> Moving Walks </h2> </a> </li> </ul> <div class="tab-content horizontal_tabs_content"> <ul class="nav nav-tabs horizontal_tabs mobile hidden-sm hidden-md hidden-lg" role="tablist"> <li role="presentation" class="active"> <a href="#skyrise" aria-controls="skyrise" role="tab" data-toggle="tab" title="SkyRise Logo"> <h2> Commercial Escalators </h2> </a> </li> </ul> <div role="tabpanel" class="tab-pane active" id="commercial"> <div class="container"> <div class="row clearfix"> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> <h3> Commercial customers want escalators and moving walks that are refined yet resistant, and customized to their needs </h3> <div class="product-rm hidden-md hidden-lg"> <a href="#rm-commercial" data-toggle="collapse" title="Read More"> Read More </a> </div> <div id="rm-commercial" class="collapse in"> <p> Ultimately safe, incredibly reliable, and designed to integrate seamlessly with your building, our escalators and moving walks with a commercial focus are engineered to be whisper quiet and smooth. They also offer a wealth of design options to allow a high degree of individuality. It all combines to encourage passengers to relax and explore your premises thoroughly. </p> <div class="row"> <div class="col-xs-12 col-md-6"> <div class="tab-list"> <ul> <li>Maximal rise height: 8m at a step width of 1000 mm</li> <li>Inclination: 30 / 35 degrees</li> <li>Normal step width: 600 / 800 / 1000 mm (contract base available)&nbsp;</li> <li>Speeds: 0.5mps</li> </ul> </div> </div> </div> </div> </div> </div> <div class="row clearfix"> <div class="image_strip" style="background-image: url(http://otis-sandbox.staging.jbspace.com/images/products/escalators/commercial-tab-image.jpg)"></div> </div> </div> </div> <ul class="nav nav-tabs horizontal_tabs mobile hidden-sm hidden-md hidden-lg" role="tablist"> <li role="presentation" class="active"> <a href="#skyrise" aria-controls="skyrise" role="tab" data-toggle="tab" title="SkyRise Logo"> <h2> Public Escalators </h2> </a> </li> </ul> <div role="tabpanel" class="tab-pane" id="public"> <div class="container"> <div class="row clearfix"> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> <h3> We are proud to create escalators and moving walks for public areas that effortlessly handle the heaviest traffic, year after year. </h3> <div class="product-rm hidden-md hidden-lg"> <a href="#rm-public" data-toggle="collapse" title="Read More"> Read More </a> </div> <div id="rm-public" class="collapse in"> <p> Designed to meet the extreme and varied demands of public spaces such as airports, metros and other busy transport hubs, our escalators and moving walks raise the bar for endurance and reliability. You can expect at least 20 years of efficient, safe service without downtime from our products in classic public ‘hot spots’. </p> <div class="row"> <div class="col-xs-12 col-md-6"> <div class="tab-list"> <ul> <li>Maximal rise height: 20m at a step width of 1000 mm (special request up to 40m available)</li> <li>Inclination: 27.3 / 30 / 35 degrees</li> <li>Normal step width: 800 / 1000 mm</li> <li>Speeds: 0.5 / 0.6 / 0.75mps</li> </ul> </div> </div> </div> </div> </div> </div> <div class="row clearfix"> <div class="image_strip" style="background-image: url(http://otis-sandbox.staging.jbspace.com/images/products/escalators/public-tab-image.jpg)"></div> </div> </div> </div> <ul class="nav nav-tabs horizontal_tabs mobile hidden-sm hidden-md hidden-lg" role="tablist"> <li role="presentation" class="active"> <a href="#skyrise" aria-controls="skyrise" role="tab" data-toggle="tab" title="SkyRise Logo"> <h2> Moving Walks </h2> </a> </li> </ul> <div role="tabpanel" class="tab-pane" id="moving-walks"> <div class="container"> <div class="row clearfix"> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> <h3> Adaptable, safe and reliable, our moving walks are designed to work around your building’s needs. </h3> <div class="product-rm hidden-md hidden-lg"> <a href="#rm-moving-walks" data-toggle="collapse" title="Read More"> Read More </a> </div> <div id="rm-moving-walks" class="collapse in"> <p> Flexible designs and clever engineering underpin our moving walks range. Smooth and quiet, robust and long-lasting, sleek and impressive, they are a safe and cost-effective choice that our customers have come to rely on all day, every day. </p> <div class="row"> <div class="col-xs-12 col-md-6"> <div class="tab-list"> <h3> Commercial </h3> <ul> <li>Inclination: 0° up to 6°, 10°, 12° (special request 11° available)</li> <li>Maximum length: 80m</li> <li>Speed: 0.5mps</li> <li>Palette widths: 800 / 1000mm</li> </ul> </div> </div> <div class="col-xs-12 col-md-6"> <div class="tab-list"> <h3> Public </h3> <ul> <li>Inclination: 0° up to 6°</li> <li>Maximum length: 120m (special request up to 140m available)</li> <li>Speed: 0.5 / 0.6 / 0.75mps</li> <li>Palette widths: 1000 / 1200 / 1400mm</li> </ul> </div> </div> </div> </div> </div> </div> <div class="row clearfix"> <div class="image_strip" style="background-image: url(http://otis-sandbox.staging.jbspace.com/images/products/escalators/moving-walks-tab-image.jpg)"></div> </div> </div> </div> </div>
Copy
Copy
Edit
@mixin horizontalTabs($tabNumbers: 3) { /* TABS */ display: table; background-color: $otisBeige; width: 100%; height: 100%; border: none; table-layout: fixed; &.mobile { li { width: 100% !important; } } li { display: table-cell; text-align: center; height: 100%; border-right: 2px solid $tertiaryColor; margin: 0; float: none; word-break: break-all; hyphens: auto; &:last-child { border-right: none; } &.active { position: relative; a { display: block; background-color: $otisBeige; border: none; color: lighten($otisBlack, 10%); &:hover, &:focus { background-color: inherit; border: none; } } &:after { bottom: 0; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 10px; margin-left: -10px; } } a { display: block; padding: 20px; margin: 0; border: none; text-decoration: none; height: 100%; color: $otisBlack; transition: 0.25s background-color ease-in-out; &:hover, &:focus { background-color: darken($otisBeige, 5%); border: none; } h2 { font-family: $fontThin; font-size: $baseFontSize * 1.2; } @media only screen and ($small-desktop) { h2 { font-size: $baseFontSize * 2.125; } } img { margin: 0 auto; max-height: 15px; max-width: 100%; @media only screen and ($small-desktop) { max-height: 30px; } } } } } @mixin horizontalTabsContent ($tabTheme: $primaryColor) { /* TAB CONTENT */ .tab-pane { display: block; padding: 20px 0; color: $primaryColor; @media only screen and ($tablet-viewport) { display: none; &.active { display: block; } } @media only screen and ($small-desktop) { padding: 50px 0; .number_stats { padding-top: 40px; } } .tab-list { margin: 30px 0; h3 { padding-bottom: 10px; border-bottom: 1px dotted $otisLightGrey; } ul { li { font-size: $baseFontSize; font-family: $fontThin; padding: 8px 0; list-style: none; list-style-type: none; border-bottom: 1px dotted $otisLightGrey; } } } } } @mixin otisTabPanes ($tabTheme: $primaryColor) { h2 { color: $tabTheme; font-size: $baseFontSize * 3; line-height: $baseLineHeight * 2.2; font-family: $fontThin; padding-bottom: 30px; } h3 { font-size: $baseFontSize * 1.5; font-family: $fontThin; padding-bottom: 30px; } p { font-size: $baseFontSize; font-family: $fontThin; } img { margin: 0 auto; } .otis_button { @include otisButton($tabTheme); margin: 20px 0; @media only screen and ($mobile-max) { width: 100%; } @media only screen and ($small-desktop) { margin: 40px 0; } } .image_strip { margin: 0; background-attachment: scroll !important; @media only screen and ($tablet-viewport) { margin: 40px 15px 0; } } .tierStat { margin-top: 40px; border-top: 2px dotted $otisLightGrey; border-bottom: 2px dotted $otisLightGrey; padding: 10px 0; em { font-size: $baseFontSize * 2.250; line-height: $baseLineHeight * 2; font-family: $fontThin; font-style: normal; @media only screen and ($large-desktop) { font-size: $baseFontSize * 2.8; } } .topStat { padding-bottom: 10px; border-bottom: 2px dotted $otisLightGrey; em { color: $otisDarkGrey; } } .bottomStat { padding-top: 10px; em { color: $tabTheme; } } } .product-rm { margin-bottom: 20px; a { color: $otisBlack; text-decoration: underline; } } .dialsContainer { text-align: center; margin-top: 20px; margin-bottom: 20px; @media only screen and ($small-desktop) { margin-top: 40px; margin-bottom: 40px; } .circles-wrp { svg { float: left; } } .circle { @include dials; display: inline-block; .circles-text { @media only screen and ($tablet-viewport) and ($device-max) { margin: 20px 0; transform: none; } } } .unit-suffix { display: inline-block; font-size: $baseFontSize * 4 !important; font-family: $fontThin; padding-top: 15px; } p { float: none; clear: both; padding-top: 20px; &:last-of-type { margin-bottom: 20px; @media only screen and ($small-desktop) { margin-bottom: 0; margin-top: 10px; } } } } } .horizontal_tabs_content { .tab-pane { @include otisTabPanes($primaryColor); &.otis-gold { @include otisTabPanes($skyriseGold); } &.otis-green { @include otisTabPanes($gen2Green); } &.otis-blue { @include otisTabPanes ($hydrofitBlue); } } } .horizontal_tabs { @include horizontalTabs; } .horizontal_tabs_content { @include horizontalTabsContent; } .otis_tab_panes { @include otisTabPanes; }

otis_button   

Styles for the buttons on the site

Copy
Edit
<a href="#" class="otis_button">Click me</a> <a href="#" class="otis_button otis-black">Click me</a>
Copy
Copy
Edit
@mixin otisButton($buttonAccent: $tertiaryColor, $background: transparent) { $hoverAccent: $tertiaryColor; @include multiTransition; border: 2px solid $buttonAccent; padding: 10px 20px; font-family: $fontThin; font-size: $baseFontSize * 0.875; line-height: 24px; color: $buttonAccent; letter-spacing: 1px; display: inline-block; text-decoration: none; text-align: center; background-color: $background; cursor: pointer; box-sizing: border-box; @if $buttonAccent == $tertiaryColor { $hoverAccent: $primaryColor; } @else { $hoverAccent: $tertiaryColor; } .btn-icon { background-position: 0 0; display: inline-block; height: 24px; width: 24px; margin: 0 10px -8px 0; &.otis-white { background-position: 0 -24px; } &.otis-green { background-position: 0 -48px; } &.otis-gold { background-position: 0 -72px; } } &:hover { background-color: $buttonAccent; text-decoration: none; color: $hoverAccent !important; text-decoration: none; border: 2px solid $hoverAccent; &:before { color: $hoverAccent !important; } .btn-icon { background-position: 0 -24px; &.otis-white { background-position: 0 0; } } } &.pdf-button { &:before { content: "\e00f"; font-family: $fontIcon; color: $buttonAccent; vertical-align: middle; font-size: $baseFontSize * 1.4; line-height: 0; margin-right: 10px; } } @media only screen and ($tablet-viewport) { min-width: 200px; } @media only screen and ($device-max) { margin: 20px auto; } } .otis_button { @include otisButton; &.otis-black { @include otisButton($primaryColor, transparent); } }

faqs   

• Ability to add category

• Ability to add questions

• Ability to add answers

Category One

Aenean dui lacus, condimentum eu lectus eu, tempor vulputate magna. Nullam sed pharetra quam. Nunc id diam suscipit, ornare lacus eu, varius velit. Fusce placerat purus sed dignissim ultricies. Praesent non egestas ex. Suspendisse sagittis nec lectus id auctor. Etiam vel aliquam augue, id congue diam. Aenean dui lacus, condimentum eu lectus eu, tempor vulputate magna. Nullam sed pharetra quam. Nunc id diam suscipit, ornare lacus eu, varius velit. Fusce placerat purus sed dignissim ultricies. Praesent non egestas ex. Suspendisse sagittis nec lectus id auctor. Etiam vel aliquam augue, id congue diam.

Aenean dui lacus, condimentum eu lectus eu, tempor vulputate magna. Nullam sed pharetra quam. Nunc id diam suscipit, ornare lacus eu, varius velit. Fusce placerat purus sed dignissim ultricies. Praesent non egestas ex. Suspendisse sagittis nec lectus id auctor. Etiam vel aliquam augue, id congue diam.
Proin quis fringilla eros. Ut eleifend sollicitudin dolor vitae sollicitudin. Praesent ac finibus ex, et consectetur nibh. Nam pretium ultricies lacus at ultrices. Fusce tempor mauris a nisl volutpat, vel congue nulla pellentesque. Integer vel elit bibendum, commodo lectus quis, mattis purus. Morbi vel fermentum velit. Duis egestas purus ut urna vehicula, vel blandit libero aliquam. Sed bibendum neque vel pharetra dignissim. Sed vitae tortor pulvinar, imperdiet arcu a, congue nulla. Phasellus varius arcu id volutpat condimentum.
Ut eleifend sollicitudin dolor vitae sollicitudin. Praesent ac finibus ex, et consectetur nibh. Nam pretium ultricies lacus at ultrices. Fusce tempor mauris a nisl volutpat, vel congue nulla pellentesque. Integer vel elit bibendum, commodo lectus quis, mattis purus. Sed bibendum neque vel pharetra dignissim. Sed vitae tortor pulvinar, imperdiet arcu a, congue nulla. Phasellus varius arcu id volutpat condimentum.
Copy
Edit
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <h2 class="faq_category_title"> Category One </h2> <div class="panel-group faq-cat" id="faqs-cat-1" role="tablist" aria-multiselectable="true"> <div class="panel"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title faq-question"> <a role="button" data-toggle="collapse" href="#collapseTabOne1" aria-expanded="true" aria-controls="collapseOne1" title="Donec feugiat tristique fermentum?" class=""> Donec feugiat tristique fermentum? </a> </h4> </div> <div id="collapseTabOne1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne" aria-expanded="true"> <div class="panel-body faq-answer"> <p> Aenean dui lacus, condimentum eu lectus eu, tempor vulputate magna. Nullam sed pharetra quam. Nunc id diam suscipit, ornare lacus eu, varius velit. Fusce placerat purus sed dignissim ultricies. Praesent non egestas ex. Suspendisse sagittis nec lectus id auctor. Etiam vel aliquam augue, id congue diam. Aenean dui lacus, condimentum eu lectus eu, tempor vulputate magna. Nullam sed pharetra quam. Nunc id diam suscipit, ornare lacus eu, varius velit. Fusce placerat purus sed dignissim ultricies. Praesent non egestas ex. Suspendisse sagittis nec lectus id auctor. Etiam vel aliquam augue, id congue diam. </p> </div> </div> </div> <div class="panel"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title faq-question"> <a class="collapsed" role="button" data-toggle="collapse" href="#collapseTabTwo1" aria-expanded="false" aria-controls="collapseTwo1" title="Nunc tempor tristique ligula ut dignissim?"> Nunc tempor tristique ligula ut dignissim? </a> </h4> </div> <div id="collapseTabTwo1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body faq-answer"> Aenean dui lacus, condimentum eu lectus eu, tempor vulputate magna. Nullam sed pharetra quam. Nunc id diam suscipit, ornare lacus eu, varius velit. Fusce placerat purus sed dignissim ultricies. Praesent non egestas ex. Suspendisse sagittis nec lectus id auctor. Etiam vel aliquam augue, id congue diam. </div> </div> </div> <div class="panel"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title faq-question"> <a class="collapsed" role="button" data-toggle="collapse" href="#collapseTabThree1" aria-expanded="false" aria-controls="collapseThree1" title="Phasellus eget tortor sed turpis lacinia gravida sed et nisl?"> Phasellus eget tortor sed turpis lacinia gravida sed et nisl? </a> </h4> </div> <div id="collapseTabThree1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body faq-answer"> Proin quis fringilla eros. Ut eleifend sollicitudin dolor vitae sollicitudin. Praesent ac finibus ex, et consectetur nibh. Nam pretium ultricies lacus at ultrices. Fusce tempor mauris a nisl volutpat, vel congue nulla pellentesque. Integer vel elit bibendum, commodo lectus quis, mattis purus. Morbi vel fermentum velit. Duis egestas purus ut urna vehicula, vel blandit libero aliquam. Sed bibendum neque vel pharetra dignissim. Sed vitae tortor pulvinar, imperdiet arcu a, congue nulla. Phasellus varius arcu id volutpat condimentum. </div> </div> </div> <div class="panel"> <div class="panel-heading" role="tab" id="headingFour"> <h4 class="panel-title faq-question"> <a class="collapsed" role="button" data-toggle="collapse" href="#collapseTabFour1" aria-expanded="false" aria-controls="collapseFour1" title="Morbi vel fermentum velit. Duis egestas purus ut urna vehicula, vel blandit libero aliquam?"> Morbi vel fermentum velit. Duis egestas purus ut urna vehicula, vel blandit libero aliquam? </a> </h4> </div> <div id="collapseTabFour1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> <div class="panel-body faq-answer"> Ut eleifend sollicitudin dolor vitae sollicitudin. Praesent ac finibus ex, et consectetur nibh. Nam pretium ultricies lacus at ultrices. Fusce tempor mauris a nisl volutpat, vel congue nulla pellentesque. Integer vel elit bibendum, commodo lectus quis, mattis purus. Sed bibendum neque vel pharetra dignissim. Sed vitae tortor pulvinar, imperdiet arcu a, congue nulla. Phasellus varius arcu id volutpat condimentum. </div> </div> </div> </div> </div> </div> </div>
Copy
Copy
Edit
.faq-cat { margin-bottom: 40px; } .faq_category_title { font-family: $fontRegular; font-size: $baseFontSize * 1.4; padding-bottom: 15px; } .head { width: 100%; margin-bottom: 20px; h1 { font-family: $fontThin; font-size: 4rem; margin-bottom: 0; color: $primaryColor; } } .faq-question { font-family: $fontThin; font-size: $baseFontSize * 1.2; border-top: 1px dotted $otisLightGrey; padding: 20px 0; text-align: left; a { &[aria-expanded="false"] { &:before { color: $otisLightGrey; content: "\e01c"; } } &[aria-expanded="true"] { &:before { color: $secondaryColor; content: "\e01d"; } } &:before { font-family: $fontIcon; font-size: $baseFontSize; line-height: $baseLineHeight; vertical-align: middle; padding-right: 5px; } &:hover, &:active, &:focus { text-decoration: none; } } &.last-faq { border-bottom: 1px dotted $otisLightGrey; } } .faq-answer { background-color: $otisBeige; padding: 25px; margin-bottom: 25px; position: relative; text-align: left; p { max-width: none; } &:before { width: 0; height: 0; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent $otisBeige transparent; line-height: 0px; _border-color: #000000 #000000 $otisBeige #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='$otisBeige'); position: absolute; top: -10px; left: 50px; } }

video_embed   

• Ability to upload video or pull video from the CMS asset/media library or enter embed YouTube ID


    Youtube Embed

Copy
Edit
<hr> <pre> Youtube Embed </pre> <hr> <div class="video_embed"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div class="embed-responsive embed-responsive-16by9"> <iframe src="https://www.youtube.com/embed/I6TwHXx6jNQ?rel=0" frameborder="0" allowfullscreen=""></iframe> </div> </div> </div> </div> </div>
Copy
Copy
Edit
@mixin videoEmbed { text-align: center; background: $otisBeige; padding: 40px 0; @media only screen and ($tablet-viewport) { padding: 80px 0; } .embed-responsive { margin: 0 -15px; @media only screen and ($tablet-viewport) { margin: 0; } } } .video_embed { @include videoEmbed; }

values_section   

• Ability to add up to 4 value pods

Each pod should have:

• Ability to add an icon (mandatory)

• Ability to add a title (mandatory)

• Ability to add a subtitle (optional)

• Ability to add a button (1 max)

• Ability to choose whether the background is black or white - determined by the class "black" being added to the values_section_wrapper element

    White version of the values section

Employee benefits

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Find out more

Employee benefits

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Find out more

Application process

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Find out more

Employee benefits

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Find out more

Application process

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Find out more

Employee scholar program

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Find out more

Employee benefits

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Find out more

Application process

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Find out more

Employee scholar program

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Find out more

Employee scholar program

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Find out more
    Black version of the values section

Employee benefits

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Find out more

Application process

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Find out more

Employee scholar program

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Find out more
Copy
Edit
<pre> White version of the values section </pre> <div class="values_section_wrapper"> <div class="container"> <div class="row values_section"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="value_pod"> <div class="otis-icon wow fadeInDown"> <img src="images/otis-black-icons/otis-icon-employee-benefits.png" class=" wow fadeInDown"> </div> <h3 class="wow fadeIn"> Employee benefits </h3> <p class="wow fadeIn"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <a href="#" title="Find out more"> Find out more </a> </div> </div> </div> <div class="row values_section"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <div class="value_pod"> <div class="otis-icon wow fadeInDown"> <img src="images/otis-black-icons/otis-icon-employee-benefits.png" class=" wow fadeInDown"> </div> <h3 class="wow fadeIn"> Employee benefits </h3> <p class="wow fadeIn"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <a href="#" title="Find out more"> Find out more </a> </div> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <div class="value_pod"> <div class="otis-icon wow fadeInDown"> <img src="images/otis-black-icons/otis-icon-application-process.png" class=" wow fadeInDown"> </div> <h3 class="wow fadeIn"> Application process </h3> <p class="wow fadeIn"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <a href="#" title="Find out more"> Find out more </a> </div> </div> </div> <div class="row values_section"> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="value_pod"> <div class="otis-icon wow fadeInDown"> <img src="images/otis-black-icons/otis-icon-employee-benefits.png" class=" wow fadeInDown"> </div> <h3 class="wow fadeIn"> Employee benefits </h3> <p class="wow fadeIn"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <a href="#" title="Find out more"> Find out more </a> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="value_pod"> <div class="otis-icon wow fadeInDown"> <img src="images/otis-black-icons/otis-icon-application-process.png" class=" wow fadeInDown"> </div> <h3 class="wow fadeIn"> Application process </h3> <p class="wow fadeIn"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <a href="#" title="Find out more"> Find out more </a> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="value_pod"> <div class="otis-icon wow fadeInDown"> <img src="images/otis-black-icons/otis-icon-scholar-program.png" class=" wow fadeInDown"> </div> <h3 class="wow fadeIn"> Employee scholar program </h3> <p class="wow fadeIn"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <a href="#" title="Find out more"> Find out more </a> </div> </div> </div> <div class="row values_section"> <div class="col-xs-12 col-sm-12 col-md-3"> <div class="value_pod"> <div class="otis-icon wow fadeInDown"> <img src="images/otis-black-icons/otis-icon-employee-benefits.png" class=" wow fadeInDown"> </div> <h3 class="wow fadeIn"> Employee benefits </h3> <p class="wow fadeIn"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <a href="#" title="Find out more"> Find out more </a> </div> </div> <div class="col-xs-12 col-sm-12 col-md-3"> <div class="value_pod"> <div class="otis-icon wow fadeInDown"> <img src="images/otis-black-icons/otis-icon-application-process.png" class=" wow fadeInDown"> </div> <h3 class="wow fadeIn"> Application process </h3> <p class="wow fadeIn"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <a href="#" title="Find out more"> Find out more </a> </div> </div> <div class="col-xs-12 col-sm-12 col-md-3"> <div class="value_pod"> <div class="otis-icon wow fadeInDown"> <img src="images/otis-black-icons/otis-icon-scholar-program.png" class=" wow fadeInDown"> </div> <h3 class="wow fadeIn"> Employee scholar program </h3> <p class="wow fadeIn"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <a href="#" title="Find out more"> Find out more </a> </div> </div> <div class="col-xs-12 col-sm-12 col-md-3"> <div class="value_pod"> <div class="otis-icon wow fadeInDown"> <img src="images/otis-black-icons/otis-icon-scholar-program.png" class=" wow fadeInDown"> </div> <h3 class="wow fadeIn"> Employee scholar program </h3> <p class="wow fadeIn"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <a href="#" title="Find out more"> Find out more </a> </div> </div> </div> </div> </div> <pre> Black version of the values section </pre> <div class="values_section_wrapper black"> <div class="container"> <div class="row values_section"> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="value_pod"> <div class="otis-icon wow fadeInDown"> <img src="images/otis-white-icons/otis-icon-employee-benefits.png" class="wow fadeInDown"> </div> <h3 class="wow fadeIn"> Employee benefits </h3> <p class="wow fadeIn"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <a href="#" title="Find out more"> Find out more </a> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="value_pod"> <div class="otis-icon wow fadeInDown"> <img src="images/otis-white-icons/otis-icon-application-process.png" class=" wow fadeInDown"> </div> <h3 class="wow fadeIn"> Application process </h3> <p class="wow fadeIn"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <a href="#" title="Find out more"> Find out more </a> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="value_pod"> <div class="otis-icon wow fadeInDown"> <img src="images/otis-white-icons/otis-icon-scholar-program.png" class=" wow fadeInDown"> </div> <h3 class="wow fadeIn"> Employee scholar program </h3> <p class="wow fadeIn"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <a href="#" title="Find out more"> Find out more </a> </div> </div> </div> </div> </div>
Copy
Copy
Edit
@mixin valuesSection { .values_section { padding-top: 40px; padding-bottom: 40px; border-top: 2px dotted $otisLightGrey; h3 { color: $primaryColor; font-family: $fontThin; font-size: $baseFontSize * 1.5; text-align: center; } .value_pod { padding-bottom: 40px; @media only screen and ($small-desktop) { padding-bottom: 80px; } .otis-icon { margin-top: 20px; text-align: center; display: block; width: 50px; height: 50px; @media only screen and ($small-desktop) { height: 75px; width: 75px; } img { @include verticalCenter(relative); display: block; margin: 0 auto; } } h3 { padding-top: 20px; padding-bottom: 20px; color: $primaryColor; font-family: $fontThin; font-size: $baseFontSize * 1.5; text-align: center; @media only screen and ($small-desktop) { padding-top: 40px; } } p { color: $primaryColor; font-family: $fontThin; font-size: $baseFontSize; text-align: center; } a { @include otisButton($primaryColor); margin: 30px auto 0; display: block; width: 200px; } } } &.black { background-color: $primaryColor; .values_section { border-top: none; h3 { color: $tertiaryColor; } .value_pod { span, h3, p { color: $tertiaryColor; } .otis-icon { border-color: $tertiaryColor; } a { @include otisButton($tertiaryColor); margin: 30px auto 0; display: block; width: 200px; } } } } } .values_section_wrapper { @include valuesSection; }

sustainability_section   

• Ability to add main heading and choose whether it should be black or green (mandatory)

• Ability to add sub heading (optional)

• Ability to add body copy (optional)

• Ability to add sustainability pods includes image at 100px (W) x 100px (H), title and text. Allow user to select images from the asset library.

• Ability to add optional button. In order to create a button, admin will need to insert link.

Example with a green header

Sustainability

Otis Elevator Company and all its employees are committed to the future of our environment

Cycle Schemes

Cycle Schemes

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Renewable Energy

Renewable Energy

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Urban Sustainability

Urban Sustainability

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Example with a black header

Sustainability

Otis Elevator Company and all its employees are committed to the future of our environment

Cycle Schemes

Cycle Schemes

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Renewable Energy

Renewable Energy

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Urban Sustainability

Urban Sustainability

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Copy
Edit
<pre>Example with a green header</pre> <div class="sustainability_section"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <h2> Sustainability </h2> <h3> Otis Elevator Company and all its employees are committed to the future of our environment </h3> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="sustainability_pod"> <img class="img-responsive" src="images/careers/landing/cycle-scheme.png" alt="Cycle Schemes"> <h3> Cycle Schemes </h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="sustainability_pod"> <img class="img-responsive" src="images/careers/landing/renewable-energy.png" alt="Renewable Energy"> <h3> Renewable Energy </h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="sustainability_pod"> <img class="img-responsive" src="images/careers/landing/urban-sustainability.png" alt="Urban Sustainability"> <h3> Urban Sustainability </h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <a href="" class="otis_button" title="Green Otis"> Green Otis </a> </div> </div> </div> </div> <pre>Example with a black header</pre> <div class="sustainability_section"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <h2 class="otis-black"> Sustainability </h2> <h3> Otis Elevator Company and all its employees are committed to the future of our environment </h3> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="sustainability_pod"> <img class="img-responsive" src="images/careers/landing/cycle-scheme.png" alt="Cycle Schemes"> <h3> Cycle Schemes </h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="sustainability_pod"> <img class="img-responsive" src="images/careers/landing/renewable-energy.png" alt="Renewable Energy"> <h3> Renewable Energy </h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="sustainability_pod"> <img class="img-responsive" src="images/careers/landing/urban-sustainability.png" alt="Urban Sustainability"> <h3> Urban Sustainability </h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <a href="" class="otis_button" title="Green Otis"> Green Otis </a> </div> </div> </div> </div>
Copy
Copy
Edit
.sustainability_section { background-color: $otisPaleGrey; padding-top: 40px; padding-bottom: 40px; @media only screen and ($small-desktop) { padding-top: 80px; padding-bottom: 80px; } h2 { color: $otisRichGreen; font-family: $fontThin; font-size: $baseFontSize * 2; text-align: center; padding-bottom: 20px; @media only screen and ($tablet-viewport) { font-size: $baseFontSize * 2.5; } @media only screen and ($small-desktop) { font-size: $baseFontSize * 3.4375; } &.otis-black { color: $primaryColor; } } h3 { color: $primaryColor; font-family: $fontThin; font-size: $baseFontSize * 1.5; text-align: center; } .sustainability_pod { padding-top: 20px; padding-bottom: 20px; @media only screen and ($small-desktop) { padding-top: 40px; padding-bottom: 80px; } img { max-height: 100px; margin: 40px auto 0; display: block; } h3 { padding-top: 40px; padding-bottom: 20px; color: $primaryColor; font-family: $fontThin; font-size: $baseFontSize * 1.5; text-align: center; } p { color: $primaryColor; font-family: $fontThin; font-size: $baseFontSize; text-align: center; } } .otis_button { @include otisButton($otisRichGreen) display: block; margin: 0 auto; @media only screen and ($tablet-viewport) { max-width: 250px; } } }

quote_strip   

• Ability to add background image (black background) or transparent PNG, which is mandatory. Size should be 640 (H) x 640 (W) and allow user to select from the asset library

• Ability to add quote text (mandatory)

• Ability to add name, job title, location (optional)

A short quote from CEO/director. Talking at a global level that is relevant across the entire company, also relating to careers.

"We take pride in being the global market leader. We lead our industry because we do more than meet our customers’ needs today. We anticipate their needs for tomorrow."

  • Philippe Delpech
  • President
Join the team
Copy
Edit
<div class="container-fluid quote_strip"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-full-height col-sm-height col-md-height col-lg-height text-center"> <img src="images/about-us/meet-the-team/quote.jpg" alt="A short quote from CEO/director. Talking at a global level that is relevant across the entire company, also relating to careers."> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-full-height col-sm-height col-md-height col-lg-height"> <p class="wow fadeIn"> "We take pride in being the global market leader. We lead our industry because we do more than meet our customers’ needs today. We anticipate their needs for tomorrow." </p> <ul> <li>Philippe Delpech</li> <li>•</li> <li>President</li> </ul> <a class="otis_button" title="Join the team">Join the team</a> </div> </div> </div>
Copy
Copy
Edit
@mixin quoteStrip { background-color: $primaryColor; color: $tertiaryColor; position: relative; img { max-width: 100%; display: block; margin: 0 auto; @media only screen and ($device-max) { width: 70%; margin: 0 auto; } @media only screen and ($small-desktop) { max-height: 400px; } } p { font-family: $fontThin; color: $tertiaryColor; font-size: $baseFontSize * 1.5; text-align: center; margin-bottom: 40px; padding-top: 30px; } ul { li { list-style: none; display: inline; margin: 0 0.5rem; font-family: $fontThin; font-size: 2rem; } display: block; text-align: center; margin: 4rem 0; } a { @include otisButton($tertiaryColor); margin-bottom: 50px; @media only screen and ($device-max) { display: block; } } @media only screen and ($small-desktop) { padding-right: 40px; max-height: 500px; p { padding-top: 0; } a { margin: 0 auto; display: block; max-width: 30%; } } } .quote_strip { @include quoteStrip; }

product_info_row   

• Ability to add background image or a video, which is mandatory for the component. Background image size maximum resolution 600(H)px and ability to select image to display either left or right and allow user to select a background image from the asset library

• Ability to add new logo (JPEG or PNG) or select a logo from the previous upload

• Ability to add main heading (mandatory)

• Ability to add sub heading (optional)

• Ability to add body copy (optional)

• Ability to add optional buttons (maximum 2). In order to create a button, admin will need to insert link and either upload new icons (JPEG or PNG) or select an icon from the asset library

The examples below show the two variations of the component layout along with an image and a video example.

Our performance

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

View annual reports

Our responsibility

A responsible thriving business is better for everyone – it enhances the quality of our lives.

To make sure this happens wherever we are involved, we act with complete integrity and maintain the highest ethical standards. We continually develop and drive sustainability and care for the health and safety of our employees and customers. Naturally we actively support the communities in which we do business too – in any way we can.

Otis in the Community
Copy
Edit
<div class="container-fluid"> <div class="row product_info_row"> <div class="row-same-height"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-md-push-6 col-full-height col-md-height col-lg-height product_info_text"> <div class="info_text_inner wow fadeIn"> <h3> Our performance </h3> <p class="lead"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <a class="otis_button " href="#" title="View annual reports"> View annual reports </a> </div> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-md-pull-6 col-lg-6 col-full-height col-md-height col-lg-height product_info_image" style="background-image: url(images/content/about-us/vision-and-values/our-performance.jpg);"> </div> </div> </div> <div class="row product_info_row"> <div class="row-same-height"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-full-height col-md-height col-lg-height product_info_text"> <div class="info_text_inner wow fadeIn"> <h3> Our responsibility </h3> <p class="lead"> A responsible thriving business is better for everyone – it enhances the quality of our lives. </p> <p class="description"> To make sure this happens wherever we are involved, we act with complete integrity and maintain the highest ethical standards. We continually develop and drive sustainability and care for the health and safety of our employees and customers. Naturally we actively support the communities in which we do business too – in any way we can. </p> <a class="otis_button " href="#" title="Otis in the Community"> Otis in the Community </a> </div> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-full-height col-md-height col-lg-height product_info_video" style="background-color: #000000;"> <video controls poster="images/careers/kaye-poster.jpg"> <source src="videos/kaye.mp4" type="video/mp4"> </video> </div> </div> </div> </div>
Copy
Copy
Edit
@mixin productInfoRow { .product_info_image { background-position: center; background-size: cover; background-repeat: no-repeat; height: 300px; @media only screen and ($small-desktop) { height: 400px; } @media only screen and ($large-desktop) { height: 500px; } } .product_info_video { overflow: hidden; height: 540px; video { @include absoluteCenter; width: 100%; } } .product_info_text { background-color: $otisOffWhite; text-align: center; padding-top: 40px; padding-bottom: 40px; .product_logo { max-width: 60%; @media only screen and ($small-desktop) { max-width: 20%; } } h2, h3 { font-family: $fontThin; color: $primaryColor; font-size: $baseFontSize * 2; padding: 0 0 10px; @media only screen and ($small-desktop) { font-size: $baseFontSize * 2.8125; } } .lead { font-size: $baseFontSize * 1.125; font-family: $fontThin; padding: 0 0 30px; @media only screen and ($small-desktop) { font-size: $baseFontSize * 1.5; } } p { width: 100%; display: block; margin: 0 auto; font-family: $fontThin; padding-bottom: 20px; font-size: $baseFontSize; @media only screen and ($tablet-viewport) { width: 80%; } } .description { font-size: $baseFontSize; } @media only screen and ($small-desktop) { // h2 { // font-size: $baseFontSize * 2; // padding: 0; // } h2, h3 { font-size: $baseFontSize * 3; line-height: $baseLineHeight * 2.4; } .lead { font-size: $baseFontSize * 1.5; padding-bottom: 30px; } .description { font-size: $baseFontSize; padding-bottom: 40px; } .product-button { margin-bottom: 50px; width: auto; } } .info_text_inner { @media only screen and ($tablet-viewport) { padding-left: 20px; padding-right: 20px; } @media only screen and ($large-desktop) { padding-left: 6em; width: 90%; } @media only screen and ($extra-large-desktop) { padding-left: 10em; width: 80%; } p { width: 100%; } ul { list-style: none; list-style-type: none; li { display: block; font-family: $fontThin; border-top: 1px dotted $otisLightGrey; @media only screen and ($small-desktop) { font-size: $baseFontSize; } &:last-child { border-bottom: 1px dotted $otisLightGrey; } a { @include multiTransition; color: $primaryColor; text-decoration: none; display: block; padding: 20px; width: 100%; &:after { font-family: $fontIcon; content: "\e00e"; color: $primaryColor; font-size: $baseFontSize * 1.75; margin-top: -10px; float: right; } @media only screen and ($device-max) { &:after { margin-top: -10px; } } &:hover { background-color: lighten($otisLightGrey, 20%); padding-right: 15px; } } } } } } &.text_left { .product_info_text { text-align: left !important; } } &.text_center { .product_info_text { text-align: center !important; } } .otis_button, .pdf-button { @include otisButton($primaryColor); width: 100%; margin: 0 0 10px; @media only screen and ($tablet-viewport) { width: auto; margin: 0 10px 10px 0; } } } .product_info_row { @include productInfoRow; }

product_sustainability   

• Ability to add image/illustration, which is mandatory for the component and allow user to select from the asset library

• Ability to add main heading (mandatory)

• Ability to add sub heading (optional)

• Ability to add body copy (optional)

• Ability to add a button under the body copy (optional)

In the code example below there is an example of a sustainability stat circle.

The data-anim-value determines the end point of the. The data-fill-color attribute determines the highlighted animated border of the circle, the data-accent-color is the background color of the border area.

The unit suffix span will contain the unit of measurement text.

Innovative technologies working together

Each SkyRise installation integrates industry-leading technologies to ensure the safe, reliable operation of the entire system.

SkyMotion® machines

Designed for the most demanding high-rise applications, our permanent-magnet SkyMotion machines are among the most energy-efficient on the planet.

E2 intelligent control system

Compact, efficient, and smooth riding, our advanced controller uses fly-by-wire technology from the aircraft industry to deliver an exceptional passenger experience.

ReGen Drive

Otis pioneered the use of regenerative drives and continues to advance this technology – standard on all SkyRise systems.

Q-frame cab technology

To ensure a smooth, quiet ride, we designed our noise-blocking Q-frame cab and aerodynamic shroud using computational fluid dynamics and wind tunnel tests.

Safety brakes

It’s been about safety since Day One. That’s why we make the safety brakes for our highest-speed SkyRise elevators from the same heat-resistant materials used for rocket-engine nozzles.

Download Brochure
Copy
Edit
<div class="product_sustainability otis-black"> <div class="container"> <div class="row"> <div class="hidden-xs hidden-sm col-md-4 col-lg-4"> <img src="images/products/skyrise/green-tech-illustration.png" alt="Innovative technologies working together" class="img-responsive"> </div> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> <h2> Innovative technologies working together </h2> <h3> Each SkyRise installation integrates industry-leading technologies to ensure the safe, reliable operation of the entire system. </h3> <h4>SkyMotion® machines</h4> <p> Designed for the most demanding high-rise applications, our permanent-magnet SkyMotion machines are among the most energy-efficient on the planet. </p> <h4>E2 intelligent control system</h4> <p> Compact, efficient, and smooth riding, our advanced controller uses fly-by-wire technology from the aircraft industry to deliver an exceptional passenger experience. </p> <h4>ReGen Drive</h4> <p> Otis pioneered the use of regenerative drives and continues to advance this technology – standard on all SkyRise systems. </p> <h4>Q-frame cab technology</h4> <p> To ensure a smooth, quiet ride, we designed our noise-blocking Q-frame cab and aerodynamic shroud using computational fluid dynamics and wind tunnel tests. </p> <h4>Safety brakes</h4> <p> It’s been about safety since Day One. That’s why we make the safety brakes for our highest-speed SkyRise elevators from the same heat-resistant materials used for rocket-engine nozzles. </p> <a class="otis_button otis-white pdf-buttpn" href="#" title="Download Brochure"> <span class="btn-icon otis-white" style="background-image: url(images/components/pdf-btn-sprite.png);"></span> Download Brochure </a> </div> </div> </div> </div>
Copy
Copy
Edit
@mixin productSustainability { padding: 40px 0; img { width: 85%; } h2 { font-size: $baseFontSize * 3; line-height: $baseLineHeight * 2.2; font-family: $fontThin; margin-bottom: 20px; text-align: left; } h3 { color: $tertiaryColor; font-size: $baseFontSize * 1.4; font-family: $fontThin; margin-bottom: 20px; text-align: left; } h4 { color: $tertiaryColor; font-size: $baseFontSize * 1.2; font-family: $fontRegular; margin-bottom: 20px; text-align: left; } p { color: $tertiaryColor; font-size: $baseFontSize; font-family: $fontThin; padding-bottom: 20px; } .sustainability_stats { padding-top: 40px; .row { padding: 30px; .circle { @include dials; text-align: left; float: left; .circles-wrp { @include horizontalCenter; svg { float: left; } } } p { font-family: $fontThin; color: $tertiaryColor; font-size: $baseFontSize * 1.6; padding: 10px 0; text-align: center; } .unit-suffix { font-size: $baseFontSize * 4 !important; float: left; font-family: $fontThin; color: $tertiaryColor; padding-left: 10px; padding-top: 5px; @media only screen and ($small-desktop) { font-size: $baseFontSize * 4 !important; } &.otis-gold { color: $skyriseGold; } } } } &.otis-black { background-color: $primaryColor; h2 { color: $skyriseGold; } .sustainability_stats { p { color: $skyriseGold; } .circles-text { color: $skyriseGold; } } } &.otis-green { background-color: $gen2Green; h2 { color: $tertiaryColor; } .sustainability_stats { p { color: $tertiaryColor; } .circles-text { color: $tertiaryColor; } } } @media only screen and ($small-desktop) { padding: 80px 0; h2 { font-size: $baseFontSize * 3.4375; } h3 { font-size: $baseFontSize * 2; } .sustainability_stats { .row { p { text-align: left; font-size: $baseFontSize * 1.8; min-height: 120px; } } } } } .product_sustainability { @include productSustainability; }

section_headline   

The Section Headline component

Lorem ipsum dolor sit amet

Copy
Edit
<h2 class="section-headline"> Lorem ipsum dolor sit amet </h2>
Copy
Copy
Edit
@mixin sectionHeadline($color: $primaryColor, $align: center) { font-family: $fontThin; font-size: $baseFontSize * 2; color: $color; text-align: $align; margin: 0 0 20px; padding: 20px 0; &.mob-bottom-border { padding: 20px 0; border-bottom: 1px solid $otisLightGrey; } @media only screen and ($tablet-viewport) { font-size: $baseFontSize * 2.5; margin: 0 0 50px; &.mob-bottom-border { padding: 0; border: none; } } @media only screen and ($small-desktop) { font-size: $baseFontSize * 3; padding: 40px 0; } } .section-headline { @include sectionHeadline; }

in_page_articles   

• Ability to select 2 or 3 news items, the components pull through the image, location, date, title, body copy, social media sharing options and read more link

The first code example below shows three news items. The classes item-light and item-dark can be added to the article-item to determine the colour theme of the element. The code also shows the structure of a twitter item with the class twitter-item.

The second code example below shows two news items. The classes item-light and item-dark can be added to the article-item to determine the colour theme of the element.

Copy
Edit
<!-- 3 COLUMNS --> <div class="container-fluid inpage_articles"> <div class="row"> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 noPad article-item item-light"> <div class="article-image-wrap" style="background-image: url(images/about-us/leading-the-way/jupiter-florida.jpg)"> </div> <div class="inner-content"> <div class="location">April 09, 2016. / Jupiter Florida</div> <h2><a href="" title="Otis Selected for Landmark Hudson Yards Development">Otis Selected for Landmark Hudson Yards Development</a></h2> <a class="more-btn" href="#" title="Read the article">Read the article</a> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 noPad article-item item-dark"> <div class="article-image-wrap" style="background-image: url(images/about-us/leading-the-way/news-img-two.jpg)"> </div> <div class="inner-content"> <div class="location">April 06, 2016. / Hartford Connecticut</div> <h2><a href="" title="Otis to Lead Discussion on Elevator Innovation at AIA Convention">Otis to Lead Discussion on Elevator Innovation at AIA Convention</a></h2> <a class="more-btn" href="#" title="Read the article">Read the article</a> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 noPad article-item twitter-item"> <div class="article-image-wrap" style="background-image: url(images/about-us/leading-the-way/news-img-three.jpg)"> </div> <div class="inner-content"> <p>Otis Announces Six Contract Wins for the King Abdullah Financial District in Saudi Arabia</p><br> <h2><a href="#" title="@OtisElevatorCo">@OtisElevatorCo</a></h2> </div> </div> </div> </div> <!-- 2 COLUMNS --> <div class="container-fluid inpage_articles"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 noPad article-item item-light"> <div class="article-image-wrap" style="background-image: url(images/about-us/leading-the-way/jupiter-florida.jpg)"> </div> <div class="inner-content"> <div class="location">April 09, 2016. / Jupiter Florida</div> <h2><a href="" title="Otis Selected for Landmark Hudson Yards Development">Otis Selected for Landmark Hudson Yards Development</a></h2> <a class="more-btn" href="#" title="Read the article">Read the article</a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 noPad article-item twitter-item"> <div class="article-image-wrap" style="background-image: url(images/about-us/leading-the-way/news-img-three.jpg)"> </div> <div class="inner-content"> <p>Otis Announces Six Contract Wins for the King Abdullah Financial District in Saudi Arabia</p><br> <h2><a href="#" title="@OtisElevatorCo">@OtisElevatorCo</a></h2> </div> </div> </div> </div>
Copy
Copy
Edit
.inpage_articles { img { width: 100%; } .inner-content { padding: 40px 20px; &:nth-child(1) { } .location { font-size: $baseFontSize; font-family: $fontLight; margin-bottom: 10px; } h2 { a { font-size: $baseFontSize * 1.5; font-family: $fontLight; color: $otisBlack; margin-bottom: 10px; display: block; } } a { color: $tertiaryColor; font-family: "Otis Bold",helvetica,arial,sans-serif; font-size: 14px; position: relative; text-decoration: none; } a.more-btn { font-size: 14px; color: $otisBlack; &:after { background-color: $primaryColor; bottom: 0; content: ""; display: block; height: 1px; left: 0; position: absolute; transition: width 0.25s ease-in-out 0s; width: 100%; } &:hover:after { content: ""; width: 0; } } } .article-item { .article-image-wrap { max-height: 300px; min-height: 300px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; } } .article-item { .inner-content { min-height: 340px; @media only screen and ($large-desktop) { min-height: 250px; } @media only screen and ("max-width: 768px") { min-height: 220px; } } &.item-light { background: $tertiaryColor; color: $primaryColor; } &.item-dark { background: $primaryColor; color: $tertiaryColor; h2 a, a.more-btn { color: $tertiaryColor; } a.more-btn:after { background-color: $tertiaryColor; } } &.twitter-item { background: #005d92; color: $tertiaryColor; text-align: center; font-family: $fontLight; font-size: $baseFontSize * 1.2; .inner-content { padding: 40px; @media only screen and ($large-desktop) { padding: 40px 80px; } } h2 { a { font-family: $fontLight; color: $tertiaryColor; } } } } }

image_strip   

• Ability to add background image, which is mandatory for the component. Size should be 1920 (W)px x 600(H)px and allow user to select an background image from the asset library

• Ability to add an optional logo/image (see second code example below)

Copy
Edit
<!-- WITHOUT LOGO --> <div class="container-fluid image_strip" style="background-image: url(images/content/products/elevators/skyrise/skybuild-fullwidth.jpg)"> </div> <!-- WITH LOGO --> <div class="container-fluid image_strip" style="background-image: url(images/content/products/elevators/skybuild/img-strip-bg-02.jpg)"> <img class="img-strip-logo img-responsive" src="images/content/products/elevators/skybuild/skyrise-logo-gold.png" alt="SkyBuild"> </div>
Copy
Copy
Edit
.image_strip { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center top; background-attachment: fixed; min-height: 300px; @media only screen and ($small-desktop) { min-height: 600px; } .img-strip-logo { @include absoluteCenter; padding: 0 15px; } }

image_pods   

• Ability 2 or 3 image pods

• Ability to add a background image (mandatory)

• Ability to add a heading (mandatory)

• Ability to add body text

• Ability to add a link. (mandatory)

Size for roll of 3 image pods - 640 (H)px x 640 (W)px
Size for roll of 2 image pods - 800 (H)px x 600 (W)px

• Ability to select an image from the asset library

First code example below shows 2 image pods

Second code example below shows 3 image pods

Copy
Edit
<hr> <pre>Code example of 2 pods in a row</pre> <hr> <div class="container-fluid image_pods"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 image_pod" style="background-image: url(images/content/image-pods/leading-the-way-pod-bg.jpg);"> <a href="#" title="Otis Leading The Way"> <div class="image_pod_content wow slideInUp"> <h2> <span class="wow fadeInUp" style="visibility: visible;"> Otis Leading The Way </span> </h2> </div> </a> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 image_pod" style="background-image: url(images/content/image-pods/green-otis-pod-bg.jpg);"> <a href="#" title="Meet the Team"> <div class="image_pod_content wow slideInUp"> <h2> <span class="wow fadeInUp" style="visibility: visible;"> Meet the Team </span> </h2> </div> </a> </div> </div> </div> <hr> <pre>Code example of 3 pods in a row with sub heads</pre> <hr> <div class="container-fluid image_pods"> <div class="row"> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 image_pod" style="background-image: url(images/content/image-pods/vision-values-pod-bg.jpg);"> <a href="#" title="Vision and Values"> <div class="image_pod_content wow slideInUp"> <h2> <span class="wow fadeInUp" style="visibility: visible;"> Vision and Values </span> </h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div> </a> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 image_pod" style="background-image: url(images/content/image-pods/leading-the-way-pod-bg.jpg);"> <a href="#" title="Otis Leading The Way"> <div class="image_pod_content wow slideInUp"> <h2> <span class="wow fadeInUp" style="visibility: visible;"> Otis Leading The Way </span> </h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div> </a> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 image_pod" style="background-image: url(images/content/image-pods/green-otis-pod-bg.jpg);"> <a href="#" title="Meet the Team"> <div class="image_pod_content wow slideInUp"> <h2> <span class="wow fadeInUp" style="visibility: visible;"> Meet the Team </span> </h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div> </a> </div> </div> </div>
Copy
Copy
Edit
.image_pod { @include multiTransition; background-size: cover; background-position: center center; background-repeat: no-repeat; min-height: 300px; overflow: hidden; border-top: 2px solid $tertiaryColor; position: relative; padding: 0; &:last-child { border-bottom: 2px solid $tertiaryColor; } &:hover { a { h3 { background-color: $primaryColor; color: $tertiaryColor; } } } a { width: 100%; text-align: center; display: block; height: 100%; position: absolute; .image_pod_content { @include multiTransition(0.2s); position: absolute; bottom: 0; padding: 30px; text-align: center; width: 100%; background: rgba(255, 255, 255, 0.8); h2 { color: $primaryColor; font-family: $fontThin; font-size: $baseFontSize * 1.4; } p { color: $primaryColor; font-size: $baseFontSize; font-family: $fontThin; } &.black-pod { background: rgba(0, 0, 0, 0.6); h2, p { color: $tertiaryColor; } } } &:hover { text-decoration: none; .image_pod_content { background: rgba(0, 0, 0, 0.8); h2, p { color: #ffffff; } } } } @media only screen and ($tablet-viewport) { min-height: 400px; border-bottom: 2px solid $tertiaryColor; border-right: 2px solid $tertiaryColor; &:last-child { border-right: none; } a { h3 { font-size: $baseFontSize * 1.5; } } } }

full_width_strip   

• Ability to add main heading (mandatory)

• Ability to add sub heading (optional)

• Ability to add body copy (optional)

• Ability to add optional buttons (maximum 2). In order to create a button, admin will need to insert link and either upload new icon (JPEG or PNG) or select an icon from the asset library

• Ability to add one or two lists (optional)

Example of a full width strip with a white background

Our vision

The Otis Vision looks beyond the elevator industry.

We aim to be a benchmark for the very best service among all kinds of companies and inspire customer loyalty through providing the exceptional. We are driven and defined by quality. We are totally dedicated to Achieving Competitive Excellence in everything we do.

Example of a full width strip with a black background and a button

Our vision

The Otis Vision looks beyond the elevator industry.

We aim to be a benchmark for the very best service among all kinds of companies and inspire customer loyalty through providing the exceptional. We are driven and defined by quality. We are totally dedicated to Achieving Competitive Excellence in everything we do.

Learn more
Example of a full width strip with one list

Machine-roomless technology for heavy duty freight applications

Our Gen2 Robusta provides a heavy-duty lift solution for all building applications through advanced design and engineering.

  • 2000-2500kg Duty Load
  • 1m/s speed up to 45m rise
  • 1.6 -1.75m/s speed up to 75m rise
Example of a full width strip with two lists

Machine-roomless technology for heavy duty freight applications

Our Gen2 Robusta provides a heavy-duty lift solution for all building applications through advanced design and engineering.

  • 2000-2500kg Duty Load
  • 1m/s speed up to 45m rise
  • 1.6 -1.75m/s speed up to 75m rise
  • 3000-5000kg Duty Load
  • 0.5-1.0m/s speed up to 45m rise
Copy
Edit
<pre>Example of a full width strip with a white background</pre> <div class="background-wrapper"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2"> <div class="full_width_strip wow fadeIn"> <h2> Our vision </h2> <h3> The Otis Vision looks beyond the elevator industry. </h3> <p> We aim to be a benchmark for the very best service among all kinds of companies and inspire customer loyalty through providing the exceptional. We are driven and defined by quality. We are totally dedicated to Achieving Competitive Excellence in everything we do. </p> </div> </div> </div> </div> </div> <pre>Example of a full width strip with a black background and a button</pre> <div class="background-wrapper otis-black"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2"> <div class="full_width_strip otis-gold wow fadeIn"> <h2> Our vision </h2> <h3> The Otis Vision looks beyond the elevator industry. </h3> <p> We aim to be a benchmark for the very best service among all kinds of companies and inspire customer loyalty through providing the exceptional. We are driven and defined by quality. We are totally dedicated to Achieving Competitive Excellence in everything we do. </p> <a href="#" class="otis_button "> Learn more </a> </div> </div> </div> </div> </div> <pre>Example of a full width strip with one list</pre> <div class="background-wrapper " style="background-image: url();"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-8 col-md-offset-2"> <div class="full_width_strip otis-green wow fadeIn"> <h2> Machine-roomless technology for heavy duty freight applications </h2> <h3> Our Gen2 Robusta provides a heavy-duty lift solution for all building applications through advanced design and engineering. </h3> <div class="col-xs-12"> <ul> <li> 2000-2500kg Duty Load </li> <li> 1m/s speed up to 45m rise </li> <li> 1.6 -1.75m/s speed up to 75m rise </li> </ul> </div> </div> </div> </div> </div> </div> <pre>Example of a full width strip with two lists</pre> <div class="background-wrapper " style="background-image: url();"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-8 col-md-offset-2"> <div class="full_width_strip otis-green wow fadeIn"> <h2> Machine-roomless technology for heavy duty freight applications </h2> <h3> Our Gen2 Robusta provides a heavy-duty lift solution for all building applications through advanced design and engineering. </h3> <div class="col-xs-12 col-md-6"> <ul> <li> 2000-2500kg Duty Load </li> <li> 1m/s speed up to 45m rise </li> <li> 1.6 -1.75m/s speed up to 75m rise </li> </ul> </div> <div class="col-xs-12 col-md-6"> <ul> <li> 3000-5000kg Duty Load </li> <li> 0.5-1.0m/s speed up to 45m rise </li> </ul> </div> </div> </div> </div> </div> </div>
Copy
Copy
Edit
@mixin fullWidthStrip($textColor: $primaryColor) { z-index: 2; position: relative; text-align: center; padding: 30px 0 10px; &.left-align { text-align: left; } .full_width_icon { display: inline-block; width: 70px; height: 70px; margin-bottom: 20px; img { max-width: 100%; max-height: 100%; } } h1 { font-family: $fontThin; color: $textColor; font-size: $baseFontSize * 2.4; width: 100%; margin-bottom: 0; } h2 { font-family: $fontThin; color: $textColor; font-size: $baseFontSize * 2.1; padding: 0 0 20px; width: 100%; margin: 0; } h3 { font-family: $fontThin; color: $textColor; font-size: $baseFontSize * 1; padding: 0 0 30px; &:last-child { padding: 0; } @media only screen and ($small-desktop) { margin: 0 auto; display: block; } } p { font-family: $fontThin; color: $textColor; font-size: $baseFontSize * 1; padding: 0 0 20px; &:last-of-type { padding: 0; } @media only screen and ($small-desktop) { margin: 0 auto; display: block; } } ul { list-style: none; list-style-type: none; margin-top: 40px; li { font-family: $fontThin; color: $textColor; font-size: $baseFontSize * 1; display: block; text-align: left; border-bottom: 1px solid $otisBlack; padding: 20px 0; span { font-size: $baseFontSize * 1.625; } @media only screen and ($tablet-viewport) { margin: 0 20px; } &:first-child { padding-top: 0; } &:last-child { margin-bottom: 40px; } } &.numbered-list { margin: 20px 0 0; @media only screen and ($tablet-viewport) { margin: 40px 0 0; } li { padding: 15px 0; margin: 0; border: 0; h3 { border-bottom: 1px solid $otisLightGrey; padding: 0 0 10px; margin: 0 0 10px; span { font-size: $baseFontSize; display: inline-block; text-align: center; border: 1px solid black; border-radius: 50%; width: 20px; line-height: 18px; vertical-align: top; @media only screen and ($tablet-viewport) { margin-top: 8px; } } } p { max-width: auto; } } } } .strip-list { margin: 30px 0; h3 { padding-bottom: 10px; border-bottom: 1px dotted $otisLightGrey; } ul { padding-left: 0; li { font-size: $baseFontSize; font-family: $fontThin; padding: 8px 0; list-style: none; list-style-type: none; border-bottom: 1px dotted $otisLightGrey; } } } .side-img { @media only screen and ($small-desktop) { max-width: 90%; } } .otis_button { @include otisButton($primaryColor); margin-top: 20px; @media only screen and ($device-max) { width: 100%; display: block; } } @media only screen and ($tablet-viewport) { padding: 50px 0; h1 { font-size: $baseFontSize * 4; } h2 { font-size: $baseFontSize * 3; } h3 { font-size: $baseFontSize * 1.5; } p { font-size: $baseFontSize; } } &.otis-gold { h1, h2, { color: $skyriseGold; } .numbered-list { li { h3 { color: $skyriseGold; span { border-color: $skyriseGold; } } } } .otis_button { @include otisButton($skyriseGold); } } &.otis-green { h1, h2, { color: $gen2Green; } .numbered-list { li { h3 { color: $gen2Green; span { border-color: $gen2Green; } } } } .otis_button { @include otisButton($gen2Green); } } &.otis-blue { h1, h2, { color: $hydrofitBlue; } .numbered-list { li { h3 { color: $hydrofitBlue; span { border-color: $hydrofitBlue; } } } } .otis_button { @include otisButton($hydrofitBlue); } } &.line-drawing-top { padding-bottom: 0; } &.line-drawing-bottom { padding-top: 0; } } .background-wrapper { &.otis-black { .full_width_strip { .otis_button { @include otisButton($tertiaryColor); } } } } .full_width_strip { @include fullWidthStrip; }

career_infographic   

• Ability to add tabs (min 2 - max 7)

• Ability to pick an overall background image for the whole component (optional)

• Ability to add a title to a tab (optional)

• Ability to add text to a tab (optional)

• Ability to add a background image to a tab (optional)

Note: tabs should include one of either a title or text

We analyse

Using up to 400 diagnostic points.

We monitor

You get expert data analysis 24/7.

We respond

REM experts alert our service engineers, instantly.

Copy
Edit
<div class="career_infographic"> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 infographic_tab_pane"> <div class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="degrees" style="background-image: url(images/modernization/elevators/skyrise/analyse-bg.jpg);"> <div class="infographic_tab_content"> <h2> We analyse </h2> <h3> Using up to 400 diagnostic points. </h3> </div> </div> <div role="tabpanel" class="tab-pane fade " id="investment" style="background-image: url(images/modernization/elevators/skyrise/monitor-bg.jpg);"> <div class="infographic_tab_content"> <h2> We monitor </h2> <h3> You get expert data analysis 24/7. </h3> </div> </div> <div role="tabpanel" class="tab-pane fade " id="engaged" style="background-image: url(images/modernization/elevators/skyrise/respond-bg.jpg);"> <div class="infographic_tab_content"> <h2> We respond </h2> <h3> REM experts alert our service engineers, instantly. </h3> </div> </div> </div> </div> <div class="col-xs-12 infographic_tabs"> <ul role="tablist"> <li role="presentation" class="active"> <a href="#degrees" aria-controls="degrees" role="tab" data-toggle="tab" title="We analyse"> <div class="tab-dot-inner"></div> </a> </li> <li role="presentation"> <a href="#investment" aria-controls="investment" role="tab" data-toggle="tab" title="We monitor"> <div class="tab-dot-inner"></div> </a> </li> <li role="presentation"> <a href="#engaged" aria-controls="engaged" role="tab" data-toggle="tab" title="We respond"> <div class="tab-dot-inner"></div> </a> </li> </ul> </div> </div> </div> </div>
Copy
Copy
Edit
.career_infographic { background-color: $primaryColor; display: inline-block; @media only screen and ($small-desktop) { display: inherit; min-height: 600px; .infographic_tab_pane, .tabcontent, .tab-pane { min-height: 600px; } } .tab-content { .tab-pane { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; .infographic_tab_content { width: 100%; padding-top: 40px; padding-bottom: 40px; img { max-width: 100%; } h2 { font-family: $fontThin; color: $tertiaryColor; font-size: $baseFontSize * 2; text-align: center; } h3 { font-family: $fontThin; color: $tertiaryColor; font-size: $baseFontSize * 1.2; text-align: center; } @media only screen and ($tablet-viewport) { h2 { font-size: $baseFontSize * 2.5; } h3 { font-size: $baseFontSize * 1.6; } } @media only screen and ($small-desktop) { @include absoluteCenter; width: 70%; padding: 0; } } } } ul { text-align: center; margin-bottom: 40px; li { display: inline-block; list-style: none; list-style-type: none; position: relative; margin-right: 10px; min-height: 32px; border: 1px solid $tertiaryColor; border-radius: 50%; width: 32px; height: 32px; .tab-dot-inner { @include absoluteCenter; width: 20px; height: 20px; background-color: $primaryColor; border-radius: 50%; } &.active { a { .tab-dot-inner { background-color: $tertiaryColor; &:before { transform: scale(1.2); background-color: $primaryColor; color: $tertiaryColor; border: 2px solid $primaryColor; } } } } &:last-child { margin-right: 0; } a { color: $otisLightGrey; .otis-icon { cursor: pointer; @include multiTransition; } &:hover { .otis-icon { transform: scale(1.2); background-color: $primaryColor; color: $tertiaryColor; border: 2px solid $primaryColor; } } } } } }

blueprint_strip   

• Ability to add main heading (mandatory)

• Ability to add sub heading (optional)

• Ability to add body copy (optional)

• Ability to add optional buttons (maximum 2). In order to create a button, admin will either to insert link or upload new icons (JPEG or PNG) or allow user to select from the asset library

• Ability to add image/blueprint and allow user to select from the asset library

Otis Around the Globe

Your building is designed to inspire for generations. We can bring your vision to life.

Otis is the world’s leading maker of people-moving products including elevators, escalators and walkways. The numbers tell an extraordinary story. Founded more than 160 years ago by the creator of the safety elevator, Otis now provides a huge range of products and services in over 200 countries, with 2.6 million elevators and escalators working worldwide. Part of United Technologies Corp, a leading provider to the aerospace and building systems industries, Otis is proud to be one of the world’s most trusted brands with a peerless reputation for innovation.

To discover more, visit www.otis.com or follow @OtisElevatorCo on Twitter.

Copy
Edit
<div class="blueprint_strip" style="background-image: url(images/content/about-us/globe-map.jpg);"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-6"> <h2> Otis Around the Globe </h2> <h3> Your building is designed to inspire for generations. We can bring your vision to life. </h3> <p> Otis is the world’s leading maker of people-moving products including elevators, escalators and walkways. The numbers tell an extraordinary story. Founded more than 160 years ago by the creator of the safety elevator, Otis now provides a huge range of products and services in over 200 countries, with 2.6 million elevators and escalators working worldwide. Part of United Technologies Corp, a leading provider to the aerospace and building systems industries, Otis is proud to be one of the world’s most trusted brands with a peerless reputation for innovation. <br><br> To discover more, visit <a href="http://www.otis.com">www.otis.com</a> or follow <a href="#">@OtisElevatorCo</a> on Twitter. </p> </div> <div class="col-xs-12 col-md-6"> </div> </div> </div> </div>
Copy
Copy
Edit
.blueprint_strip { padding: 30px 0 20px; color: $primaryColor; background-color: $tertiaryColor; background-position: right center; background-size: 50%; background-repeat: no-repeat; position: relative; @media only screen and ($device-max) { background-image: none !important; } @media only screen and ($small-desktop) { padding: 50px 0; } @media only screen and ($extra-large-desktop) { background-size: 40%; } h2 { font-family: $fontThin; font-size: $baseFontSize * 2.1; padding: 0 0 20px; width: 100%; } h3 { font-family: $fontThin; font-size: $baseFontSize * 1; padding: 0 0 30px; } p { font-family: $fontThin; font-size: $baseFontSize * 1; padding: 0 0 20px; &:last-of-type { padding: 0 0 40px; } &.caption { color: $otisLightGrey; width: 100%; text-align: center; padding-top: 40px; } } @media only screen and ($tablet-viewport) { h1 { font-size: $baseFontSize * 4; } h2 { font-size: $baseFontSize * 3; } h3 { font-size: $baseFontSize * 1.5; } p { font-size: $baseFontSize; } } .otis_button { @include otisButton($primaryColor); @media only screen and ($device-max) { width: 100%; } @media only screen and ($tablet-viewport) { margin-right: 10px; } } &.otis-gold { h1, h2, { color: $skyriseGold; } .numbered-list { li { h3 { color: $skyriseGold; span { border-color: $skyriseGold; } } } } .otis_button { @include otisButton($skyriseGold); } } &.otis-green { h1, h2, { color: $gen2Green; } .numbered-list { li { h3 { color: $gen2Green; span { border-color: $gen2Green; } } } } .otis_button { @include otisButton($gen2Green); } } &.otis-blue { h1, h2, { color: $hydrofitBlue; } .numbered-list { li { h3 { color: $hydrofitBlue; span { border-color: $hydrofitBlue; } } } } .otis_button { @include otisButton($hydrofitBlue); } } }

hero_image   

• Ability to add background image, which is mandatory for the component. Size should be 1920 (W)px x 600(H)px. Either upload new image or select an image from the asset library

• Ability to add logo, file type is transparent background and PNG format and select a logo from the asset library

• Ability to add main heading (mandatory)

• Ability to add sub heading (optional)

• Ability to add optional buttons (maximum 2). In order to create a button, admin will either insert link or upload new icons (JPEG or PNG) or select an icon from the asset library

• Ability to add an image credit positioned bottom right

Standard Hero Image

Our most advanced high-rise elevator takes all we know one step further

SkyRise elegantly blends cutting-edge science and precision engineering to take your most ambitious creations where they need to go.

Image: Ingenhoven Architects

Hero Image with a video background

Your vision, our passion. We’re dedicated to reinventing the way you move

Hero image with v-top modifier class added to reposition the text to the top of the element. This should only be used on the Meet The Team and the GMP Team page.

Our Global Major Projects experts will help you realize your vision

Copy
Edit
<pre>Standard Hero Image</pre> <div class="hero_image" style="background-image: url(images/products/skyrise/skyrise-hero-bg.jpg)"> <img src="images/products/skyrise/skyrise-hero-bg.jpg" class="img-responsive hidden-md hidden-lg" alt="The Title"> <div class="hero_image_content wow fadeIn"> <img class="hero-logo hidden-xs hidden-sm" src="images/products/skyrise/skyrise-logo.png" alt="Our most advanced high-rise elevator takes all we know one step further"> <img class="hero-logo hidden-md hidden-lg" src="images/products/skyrise/skyrise-logo-black.png" alt="Our most advanced high-rise elevator takes all we know one step further"> <h1> Our most advanced high-rise elevator takes all we know one step further </h1> <p class="subtitle"> SkyRise elegantly blends cutting-edge science and precision engineering to take your most ambitious creations where they need to go. </p> <div class="button_wrap"> <a class="otis_button otis-white" href="#" title="Download Brochure"> <span class="btn-icon otis-white" style="background-image: url(images/components/pdf-btn-sprite.png);"></span> Download Brochure </a> </div> </div> <div class="hero_image_credit"> Image: Ingenhoven Architects </div> </div> <br /> <pre>Hero Image with a video background</pre> <div class="hero_image"> <div class="video-wrapper"> <video class="hero-video" autoplay loop muted poster="images/home/home-hero-poster.jpg"> <source src="images/home/videos/458167924.mp4" type="video/mp4"> </video> </div> <div class="hero_image_content wow fadeIn"> <h1> Your vision, our passion. We’re dedicated to reinventing the way you move </h1> </div> </div> <pre>Hero image with v-top modifier class added to reposition the text to the top of the element. This should only be used on the Meet The Team and the GMP Team page.</pre> <div class="hero_image grey-bg"> <img class="img-responsive hero-img hidden-xs hidden-sm" alt="" src="images/products/gmp/team/gmp_meet_the_team_banner.png"> <img src="images/products/gmp/team/gmp_meet_the_team_banner.png" class="img-responsive hidden-md hidden-lg" alt="The Title"> <div class="hero_image_content wow fadeIn v-top animated" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeIn;"> <h1> Our Global Major Projects experts will help you realize your vision </h1> </div> </div>
Copy
Copy
Edit
.hero_image { min-height: 250px; overflow: hidden; background-color: $primaryColor; position: relative; .hero_image_content { h1 { font-family: $fontThin; font-size: $baseFontSize * 1.8; line-height: $baseFontSize * 2; text-align: center; font-weight: normal; margin: 0 0 20px; color: $primaryColor; width: 100%; display: block; padding: 0; } h2 { font-family: $fontThin; font-size: $baseFontSize * 1.8; line-height: $baseFontSize * 1.6; text-align: center; font-weight: normal; margin: 0 0 20px 0; color: $primaryColor; width: 100%; display: block; padding: 0; } p { font-family: $fontThin; font-size: $baseFontSize; line-height: $baseFontSize * 1.3; text-align: center; font-weight: normal; margin: 0; color: $primaryColor; width: 100%; display: block; &.subtitle { font-size: $baseFontSize * 1.2; } } .otis_button { @include otisButton($primaryColor); @media only screen and ($device-max) { width: 100%; } @media only screen and ($small-desktop) { @include otisButton($tertiaryColor); } } &.v-top { @media only screen and ($small-desktop) { top: 30%; } @media only screen and ($extra-large-desktop) { top: 20%; } } .hero-logo { margin: 0 auto 20px; display: block; max-width: 60%; padding-bottom: 20px; } .button_wrap { a { width: 100%; display: block; @media only screen and ($device-max) { @include otisButton($primaryColor); .otis-white { background-position: 0 0 !important; } &:hover { .otis-white { background-position: 0 -24px !important; } } } @media only screen and ($small-desktop) { text-align: center; width: auto; display: inline-block; } } } @media only screen and ($small-desktop) { text-align: center; } } @media only screen and ($device-max) { background: none !important; .hero_image_content { padding: 20px; background-color: $otisBeige; } } @media only screen and ($small-desktop) { min-height: 540px; background-size: 1920px auto; background-attachment: fixed; background-position: top center; background-repeat: no-repeat; position: relative; &.grey-bg { background: #b1b1b1; background-image: none; } .hero_image_content { @include absoluteCenter; width: 80%; display: inline; h1 { text-shadow: 0px 0px 30px rgba(0, 0, 0, 1); font-size: $baseFontSize * 3; line-height: $baseFontSize * 3.3; color: $tertiaryColor; } h2 { font-size: $baseFontSize * 2.2; line-height: $baseFontSize * 3.2; color: $tertiaryColor; margin-bottom: 0; } p { font-size: $baseFontSize; line-height: $baseFontSize * 2; color: $tertiaryColor; padding-bottom: 20px; &.subtitle { font-size: $baseFontSize * 1.5; } } } } @media only screen and ($large-desktop) { position: relative; .hero_image_content { @include absoluteCenter; width: 70%; h1 { background-color: transparent; margin-top: 0; } p { font-size: $baseFontSize; line-height: $baseFontSize * 1.5; color: $tertiaryColor; background-color: transparent; &.subtitle { line-height: $baseFontSize * 2; } } } } @media only screen and ($extra-large-desktop) { .hero_image_content { width: 50%; } } .hero-img { @media only screen and ($small-desktop) { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; } @media only screen and ($large-desktop) { bottom: -10%; } @media only screen and ($extra-large-desktop) { bottom: -20%; } } .hero_image_credit { position: absolute; top: 0; right: 0; background-color: $primaryColor; color: $tertiaryColor; font-size: $baseFontSize * 0.8; padding: 6px; font-family: $fontThin; @media only screen and ($small-desktop) { bottom: 0; top: initial; } } &.extended_hero { @media only screen and ($small-desktop) { min-height: 550px; .hero_image_content { @include absoluteCenter; } } } .video-wrapper { position: relative; width: 100%; height: 240px; @media only screen and ($tablet-viewport) { height: 360px; } @media only screen and ($small-desktop) { position: absolute; width: 100%; height: 100%; } } }
Copy
Edit
$('.hero-video').coverVid(1920, 1080); $(document).ready(function($) { $('.hero-video').get(0).play(); });