Multi-platform accessible
Our solution is unique as it is accessible by iOS, Android, Windows and Mac in a cross-platform system.
Download for:
HTML:
<!-- Multi-Platform Accessible -->
<div class="u-gradient-half-primary-v1">
<div class="container u-space-3">
<div class="row">
<div class="col-lg-5">
<!-- Title -->
<div class="pr-md-4 mb-7">
<span class="u-icon u-icon-white u-icon--lg text-primary rounded-circle mb-4">
<span class="fa fa-mobile-alt u-icon__inner"></span>
</span>
<h2 class="text-white font-weight-bold">Multi-platform <span class="text-warning">accessible</span></h2>
<p class="u-text-light">Our solution is unique as it is accessible by iOS, Android, Windows and Mac in a cross-platform system.</p>
</div>
<!-- End Title -->
<h3 class="h6 text-white">Download for:</h3>
<!-- Download Buttons -->
<div class="row mx-gutters-2">
<div class="col-sm-6 col-md-4 col-lg-5 mb-3">
<button type="button" class="btn btn-block btn-warning u-btn-warning transition-3d-hover">
<span class="fab fa-apple mr-2"></span>
iOS
</button>
</div>
<div class="col-sm-6 col-md-4 col-lg-5 mb-3">
<button type="button" class="btn btn-block text-primary u-btn-white transition-3d-hover">
<span class="fab fa-windows mr-2"></span>
Windows
</button>
</div>
</div>
<!-- End Download Buttons -->
<!-- Download Buttons -->
<div class="row mx-gutters-2">
<div class="col-sm-6 col-md-4 col-lg-5 mb-3">
<button type="button" class="btn btn-block text-primary u-btn-white transition-3d-hover">
<span class="fab fa-android mr-2"></span>
Android
</button>
</div>
<div class="col-sm-6 col-md-4 col-lg-5 mb-3">
<button type="button" class="btn btn-block text-primary u-btn-white transition-3d-hover">
<span class="fab fa-apple mr-2"></span>
Mac
</button>
</div>
</div>
<!-- End Download Buttons -->
</div>
</div>
<!-- Mockup Devices v4 -->
<div class="u-devices-v4">
<div class="d-none d-lg-flex flex-lg-wrap u-devices-v4__content">
<!-- SVG Horizontal Tablet Mockup -->
<div class="align-self-end u-devices-v4__tablet-ver mb-4">
<figure class="u-devices-v4__tablet-svg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 892 603" style="enable-background:new 0 0 892 603;" xml:space="preserve">
<path id="BG_ColorID1" class="u-fill-white" d="M840.2,603H51.8C23.3,603,0,579.7,0,551.2V51.8C0,23.3,23.3,0,51.8,0h788.5C868.7,0,892,23.3,892,51.8v499.5C892,579.7,868.7,603,840.2,603z"/>
<circle id="tabletVerFrameTouchID1" class="u-fill-gray-75" cx="45.5" cy="302.5" r="25.5"/>
<circle id="tabletVerFrameCameraID1" class="u-fill-gray-75" cx="846.1" cy="301.8" r="6.2"/>
<g>
<defs>
<rect id="tabletHorFrameID1" x="184" y="-53" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 753 -148)" width="533" height="711"/>
</defs>
<clipPath id="tabletHorFrameID2">
<use xlink:href="#tabletHorFrameID1" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#tabletHorFrameID2);">
<!-- Apply your (533px width to 711px height) image here -->
<image style="overflow:visible;" width="711" height="533" xlink:href="../../assets/img/711x533/img1.jpg" transform="matrix(1 0 0 1 94.5 35)"></image>
</g>
<use class="u-fill-none u-stroke-light-blue-125" xlink:href="#tabletHorFrameID1" stroke-miterlimit="10" style="overflow: visible;"/>
</g>
</svg>
</figure>
</div>
<!-- End SVG Horizontal Tablet Mockup -->
<!-- SVG Vertical Tablet Mockup -->
<div class="u-devices-v4__tablet mb-4">
<figure class="u-devices-v4__tablet-svg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 603 892" style="enable-background:new 0 0 603 892;" xml:space="preserve">
<path id="BG_ColorID2" class="u-fill-white" d="M603,51.8v788.5c0,28.5-23.3,51.8-51.8,51.8H51.8C23.3,892,0,868.7,0,840.2L0,51.8
C0,23.3,23.3,0,51.8,0l499.5,0C579.7,0,603,23.3,603,51.8z"/>
<circle id="tabletFrameTouchID1" class="u-fill-gray-75" cx="302.5" cy="846.5" r="25.5"/>
<circle id="tabletFrameCameraID1" class="u-fill-gray-75" cx="301.8" cy="45.9" r="6.2"/>
<g>
<defs>
<rect id="tabletFrameID1" x="36" y="86" width="533" height="711"/>
</defs>
<clipPath id="tabletFrameID2">
<use xlink:href="#tabletFrameID1" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#tabletFrameID2);">
<!-- Apply your (533px width to 711px height) image here -->
<image style="overflow:visible;" width="533" height="711" xlink:href="../../assets/img/533x711/img4.jpg" transform="matrix(1 0 0 1 36 86)"></image>
</g>
<use class="u-fill-none u-stroke-light-blue-125" xlink:href="#tabletFrameID1" stroke-miterlimit="10" style="overflow: visible;"/>
</g>
</svg>
</figure>
</div>
<!-- End SVG Vertical Tablet Mockup -->
<!-- SVG Laptop Mockup -->
<div class="u-devices-v4__laptop">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 999.1 576.5" style="enable-background:new 0 0 999.1 576.5;" xml:space="preserve">
<path class="u-fill-white" d="M881.3,576.5H117.5c-14.4,0-26.2-11.8-26.2-26.2V26.2C91.3,11.8,103.1,0,117.5,0h763.9
c14.4,0,26.2,11.8,26.2,26.2v524.2C907.5,564.7,895.7,576.5,881.3,576.5z"/>
<circle fill="#f7f7f7" cx="498" cy="23.3" r="3"/>
<path class="u-fill-white" d="M996.3,560.7H2.9c-1.5,0-2.8-1.3-2.8-2.8l0,0c0-1.5,1.3-2.8,2.8-2.8h993.4c1.5,0,2.8,1.3,2.8,2.8l0,0
C999.1,559.4,997.9,560.7,996.3,560.7z"/>
<path fill="#efefef" d="M499.6,562.5L0,560.7c0,0,24.1,11.3,117.8,15.8H498h3.1h380.2c93.7-4.5,117.8-15.8,117.8-15.8L499.6,562.5z"/>
<linearGradient id="laptopFrameID1" gradientUnits="userSpaceOnUse" x1="403.8206" y1="558.6469" x2="594.97" y2="558.6469">
<stop offset="5.908129e-07" style="stop-color:#F0F1F2"/>
<stop offset="5.235744e-02" style="stop-color:#F6F7F8"/>
<stop offset="0.1708" style="stop-color:#FDFDFD"/>
<stop offset="0.5" style="stop-color:#FFFFFF"/>
<stop offset="0.8292" style="stop-color:#FDFDFD"/>
<stop offset="0.9476" style="stop-color:#F6F7F8"/>
<stop offset="1" style="stop-color:#F0F1F2"/>
</linearGradient>
<path fill="url(#laptopFrameID1)" d="M591.4,562.2H407.4c-1.9,0-3.5-1.6-3.5-3.5v-3.5H595v3.5C595,560.6,593.4,562.2,591.4,562.2z"/>
<g>
<defs>
<rect id="laptopFrameID2" x="121.7" y="37.5" width="752.5" height="469.7"/>
</defs>
<clipPath id="laptopFrameID3">
<use xlink:href="#laptopFrameID2" style="overflow:visible;"/>
</clipPath>
<g transform="matrix(1 0 0 1 7.629395e-06 0)" style="clip-path:url(#laptopFrameID3);">
<!-- Apply your (1618px width to 1010px height) image here -->
<image style="overflow:visible;" width="1618" height="1010" xlink:href="../../assets/img/1618x1010/img1.jpg" transform="matrix(0.4651 0 0 0.4651 122.2123 37.4679)"></image>
</g>
<use class="u-fill-none u-stroke-light-blue-125" xlink:href="#laptopFrameID2" stroke-miterlimit="10" style="overflow: visible;"/>
</g>
</svg>
</figure>
</div>
<!-- SVG Laptop Mockup -->
<!-- SVG Phone Mockup -->
<div class="align-self-start u-devices-v4__phone">
<figure class="u-devices-v4__phone-svg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 317.5 665" style="enable-background:new 0 0 317.5 665;" xml:space="preserve">
<path class="u-fill-white" d="M263,666H54c-29.7,0-54-24.3-54-54V55C0,25.3,24.3,1,54,1h209c29.7,0,54,24.3,54,54v557
C317,641.7,292.7,666,263,666z"/>
<circle class="u-fill-gray-75" cx="159.5" cy="619.5" r="25.5"/>
<path class="u-fill-gray-75" fill-rule="evenodd" clip-rule="evenodd" d="M180,52h-42c-2.2,0-4-1.8-4-4v0c0-2.2,1.8-4,4-4h42c2.2,0,4,1.8,4,4v0C184,50.2,182.2,52,180,52z"/>
<g>
<defs>
<rect id="phoneFrameID1" x="19.4" y="81.3" width="280" height="500"/>
</defs>
<clipPath id="phoneFrameID2">
<use xlink:href="#phoneFrameID1" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#phoneFrameID2);">
<!-- Apply your (282px width to 500px height) image here -->
<image style="overflow:visible;" width="282" height="500" xlink:href="../../assets/img/282x500/img7.jpg" transform="matrix(1 0 0 1 18 81)"></image>
</g>
<use class="u-fill-none u-stroke-light-blue-125" xlink:href="#phoneFrameID1" stroke-miterlimit="10" style="overflow: visible;"/>
</g>
</svg>
</figure>
</div>
<!-- End SVG Phone Mockup -->
</div>
<!-- End Mockup Devices v4 -->
</div>
</div>
</div>
<!-- End Multi-Platform Accessible -->