A new standard in analysis
Understanding the task at hand and ironing out the wrinkles is key.
HTML:
<!-- Hero Section -->
<div class="u-gradient-half-warning-v2">
<!-- Content -->
<div class="container u-space-4-top u-space-3-bottom position-relative">
<div class="row">
<div class="col-md-6 position-relative z-index-2">
<div class="mb-4">
<h1 class="display-4 text-white font-weight-normal">A new standard in analysis</h1>
</div>
<div class="mb-7">
<p class="lead text-white">Understanding the task at hand and ironing out the wrinkles is key.</p>
</div>
<!-- Fancybox -->
<a class="js-fancybox media align-items-center u-media-player" href="javascript:;"
data-src="//vimeo.com/167434033"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Front - Responsive Website Template">
<span class="d-flex mr-3">
<span class="u-media-player__icon">
<span class="fa fa-play u-media-player__icon-inner"></span>
</span>
</span>
<span class="media-body">
Play video
</span>
</a>
<!-- End Fancybox -->
</div>
</div>
</div>
<!-- End Content -->
<!-- Mockup Devices v1 -->
<div class="d-none d-md-flex align-items-end u-devices-v1">
<!-- SVG Phone Mockup -->
<div class="u-devices-v1__phone">
<figure class="u-devices-v1__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/img6.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 -->
<!-- SVG Tablet Mockup -->
<div class="u-devices-v1__tablet">
<figure class="u-devices-v1__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 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.8C0,23.3,23.3,0,51.8,0l499.5,0C579.7,0,603,23.3,603,51.8z"/>
<circle class="u-fill-gray-75" cx="302.5" cy="846.5" r="25.5"/>
<circle 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/img3.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 Tablet Mockup -->
</div>
<!-- End Mockup Devices v1 -->
<!-- SVG Shapes v4 -->
<figure class="w-25 position-absolute-top-left-0">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 192.5 192.5" style="enable-background:new 0 0 192.5 192.5;" xml:space="preserve">
<path class="u-fill-warning-darker" d="M0.5,69.5c0.2,0,0.3,0,0.5,0c37.8,0,68.5-30.7,68.5-68.5c0-0.2,0-0.3,0-0.5h-69V69.5z"/>
<path class="u-fill-none u-fill-warning-darker" opacity=".55" d="M0.5,100c0.2,0,0.5,0,0.7,0C55.8,100,100,55.8,100,1.2c0-0.2,0-0.5,0-0.7H0.5V100z"/>
<path class="u-fill-none u-fill-warning-darker" opacity=".45" d="M0.5,141c0.3,0,0.7,0,1,0C78.6,141,141,78.6,141,1.5c0-0.3,0-0.7,0-1H0.5V141z"/>
<path class="u-fill-none u-fill-warning-darker" opacity=".35" d="M0.5,192c0.5,0,0.9,0,1.4,0C106.9,192,192,106.9,192,1.9c0-0.5,0-0.9,0-1.4H0.5V192z"/>
</svg>
</figure>
<!-- End SVG Shapes v4 -->
</div>
<!-- End Hero Section -->
CSS library:
<link rel="stylesheet" href="assets/vendor/fancybox/jquery.fancybox.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.fancybox.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of popups
$.HSCore.components.HSPopup.init('.js-fancybox');
});
</script>