Untitled
unknown
plain_text
a year ago
4.5 kB
2
Indexable
Never
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/assets/css/main.css">
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=6005fac27a49a9cd477afb63"
type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<!-- twentytwenty before/afters -->
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://downloads.topazlabs.com/webflow/twentytwenty/js/jquery.twentytwenty.js"
type="text/javascript"></script>
<link rel="stylesheet" href="https://downloads.topazlabs.com/webflow/twentytwenty/css/twentytwenty.css"
type="text/css" media="screen" />
</head>
<body>
<div class="welcome-slider">
<div class="welcome-sun">
</div>
<div data-force-active="true" data-default_offset_pct="0.75" class="_1-twentytwenty _1-twentytwenty-expand"
style="width: 100%;">
<div class="_1-left-gradient-60"></div><img src="/assets/img/kari.jpg" loading="eager"
srcset="/assets/img/kari.jpg" sizes="100vw" alt="" class="_1-twentytwenty-before _1-twentytwenty-expand"
style="background-size: 100%;object-fit: fill;width: 400px;height: auto;" />
<img src="/assets/img/3.jpg" loading="eager" srcset="/assets/img/3.jpg" sizes="100vw" alt=""
class="_1-twentytwenty-after _1-twentytwenty-expand"
style="object-fit: fill;width: 400px;height: auto;" />
<div class="overlay-label right">Fine Pixel Ai<a
href="https://assets.website-files.com/6005fac27a49a9cd477afb63/627d330e67c6563012f26d5f_topaz-labs-gigapixel-fitness-woman-before.jpg"></a>
</div>
<div class="overlay-label">OrigiNal IMAGE</div>
</div>
</div>
<script type="text/javascript">
jQuery(function ($) {
// Wait for images to load before init twentytwenty (fixes issue where sometimes images do not show)
$("body").imagesLoaded(function () {
$('.twentytwenty-slider').twentytwenty({
default_offset_pct: 0.7, // How much of the before image is visible when the page loads
orientation: 'horizontal', // Orientation of the before and after images ('horizontal' or 'vertical')
// before_label: 'January 2017', // Set a custom before label
// after_label: 'March 2017', // Set a custom after label
no_overlay: true, //Do not show the overlay with before and after
move_slider_on_hover: true, // Move slider on mouse hover?
move_with_handle_only: true, // Allow a user to swipe anywhere on the image to control slider movement.
click_to_move: true // Allow a user to click (or tap) anywhere on the image to move the slider to that location.
});
$('._1-twentytwenty').twentytwenty({
default_offset_pct: 0.5, // How much of the before image is visible when the page loads
orientation: 'horizontal', // Orientation of the before and after images ('horizontal' or 'vertical')
// before_label: 'January 2017', // Set a custom before label
// after_label: 'March 2017', // Set a custom after label
no_overlay: true, //Do not show the overlay with before and after
move_slider_on_hover: true, // Move slider on mouse hover?
move_with_handle_only: true, // Allow a user to swipe anywhere on the image to control slider movement.
click_to_move: true // Allow a user to click (or tap) anywhere on the image to move the slider to that location.
});
$(window).trigger("resize.twentytwenty"); // fix issue where sometimes twentytwenty doesn't start following cursor upon first load
$(window).on('resize', function () {
$(this).trigger("resize.twentytwenty");
});
});
});
</script>
</body>
</html>