homepage and mini mobile systems
This commit is contained in:
32
wp/wp-content/themes/medicalalert/tpl/col2_image_copy.tpl
Normal file
32
wp/wp-content/themes/medicalalert/tpl/col2_image_copy.tpl
Normal file
@@ -0,0 +1,32 @@
|
||||
<!-- Col2 Circle Content BEGIN -->
|
||||
<section class="container-fluid pb-5 col2-circle-content-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
|
||||
<div class="container">
|
||||
<div class="row gx-5 gy-4 mb-4">
|
||||
{{#each circle_features}}
|
||||
<div class="col-12 col-xl-6">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-auto text-center text-md-start mw-250">
|
||||
<div class="{{../border_color}}">
|
||||
<img src="{{image.url}}" alt="{{image.alt}}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col align-content-center text-center text-md-start me-xl-5">
|
||||
<div class="highlighted-circle-title mt-2">
|
||||
<h3 class="fw-bold">{{title}}</h3>
|
||||
</div>
|
||||
<div class="">
|
||||
<p>{{copy}}</p>
|
||||
</div>
|
||||
{{#if link}}
|
||||
<div class="highlighted-circle-link">
|
||||
<a href="{{link.url}}">{{link.title}} ></a>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Col2 Circle Content END -->
|
||||
@@ -1,22 +1,24 @@
|
||||
<!-- Col3 Card BEGIN -->
|
||||
<section class="container-fluid col3-card-slice-container bg-color-top-{{background_color_top}} bg-color-bottom-{{background_color_bottom}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
{{#each image_card}}
|
||||
<div class="col-lg-4 col3-card-wrapper">
|
||||
<div class="mb-3 col3-card-item">
|
||||
<img class="col3-card-img" src="{{image.url}}" alt="{{image.alt}}" />
|
||||
<div class="col3-card-item-inner-wrapper">
|
||||
<h3 class="col3-card-title mb-5">{{title}}</h3>
|
||||
<div class="col3-card-copy">{{{copy}}}</div>
|
||||
{{#if link}}
|
||||
<a class="text-nowrap button--primary col3-card-link" href="{{link.url}}">{{link.title}}</a>
|
||||
{{/if}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
{{#each image_card}}
|
||||
<div class="col-lg-4 col3-card-wrapper">
|
||||
<div class="mb-3 col3-card-item">
|
||||
<div class="g-sky-border">
|
||||
<img class="col3-card-img" src="{{image.url}}" alt="{{image.alt}}" />
|
||||
</div>
|
||||
<div class="col3-card-item-inner-wrapper p-2">
|
||||
<h3 class="col3-card-title mb-2 mt-3 fw-bold">{{title}}</h3>
|
||||
<div class="col3-card-copy">{{{copy}}}</div>
|
||||
{{#if link}}
|
||||
<a class="text-nowrap button--primary col3-card-link" href="{{link.url}}">{{link.title}}</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Col3 Card END -->
|
||||
@@ -1,32 +1,32 @@
|
||||
<!-- FAQ Dropdown BEGIN -->
|
||||
<section class="faq-dropdown-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="accordion" id="accordionId">
|
||||
{{#each questions}}
|
||||
<div class="accordion-item mb-2">
|
||||
<h3 class="accordion-header" id="heading-{{@index}}">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{@index}}" aria-expanded="true" aria-controls="{{@index}}">
|
||||
{{question}}
|
||||
</button>
|
||||
</h3>
|
||||
<div id="collapse-{{@index}}" class="accordion-collapse collapse" aria-labelledby="heading-{{@index}}" data-bs-parent="#accordionId">
|
||||
<div class="accordion-body">
|
||||
{{{answer}}}
|
||||
</div>
|
||||
<div class="container pb-5 mb-3">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="accordion" id="accordionId">
|
||||
{{#each questions}}
|
||||
<div class="accordion-item">
|
||||
<h3 class="accordion-header" id="heading-{{@index}}">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{@index}}" aria-expanded="true" aria-controls="{{@index}}">
|
||||
{{question}}
|
||||
</button>
|
||||
</h3>
|
||||
<div id="collapse-{{@index}}" class="accordion-collapse collapse" aria-labelledby="heading-{{@index}}" data-bs-parent="#accordionId">
|
||||
<div class="accordion-body f-black">
|
||||
{{{answer}}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- FAQ Dropdown END -->
|
||||
|
||||
<script type="text/javascript">
|
||||
$(window).on('load', function(){
|
||||
$('#collapse-0').addClass("show");
|
||||
$(window).on('load', function () {
|
||||
$('#collapse-0').addClass("show");
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
@@ -1,14 +1,17 @@
|
||||
<!-- Form with Image BEGIN -->
|
||||
<section id="formAnchor" class="form-with-image-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
|
||||
<div class="container">
|
||||
<div class="row align-{{alignment}}">
|
||||
<div class="col-12 col-md-6">
|
||||
<div>{{#gravityForm form}}</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<img class="img-fluid" src="{{image.url}}" alt="{{image.alt}}" />
|
||||
</div>
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 order-{{alignment}}">
|
||||
<div class="g-purple-border m-auto">
|
||||
<img class="w-100" src="{{image.url}}" alt="{{image.alt}}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<div>{{{copy}}}</div>
|
||||
<div>{{#gravityForm form}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Form with Image END -->
|
||||
11
wp/wp-content/themes/medicalalert/tpl/h3_heading.tpl
Normal file
11
wp/wp-content/themes/medicalalert/tpl/h3_heading.tpl
Normal file
@@ -0,0 +1,11 @@
|
||||
<!-- Heading BEGIN -->
|
||||
<section {{#if section_anchor_id}}id="{{section_anchor_id}}" {{/if}} class="h3-heading-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}} {{heading_color}}">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col text-{{alignment}}">
|
||||
<h3 class="{{heading_color}}">{{text}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Heading END -->
|
||||
11
wp/wp-content/themes/medicalalert/tpl/h4_heading.tpl
Normal file
11
wp/wp-content/themes/medicalalert/tpl/h4_heading.tpl
Normal file
@@ -0,0 +1,11 @@
|
||||
<!-- Heading BEGIN -->
|
||||
<section {{#if section_anchor_id}}id="{{section_anchor_id}}" {{/if}} class="h4-heading-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}} {{heading_color}}">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col text-{{alignment}}">
|
||||
<h4 class="{{heading_color}}">{{text}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Heading END -->
|
||||
11
wp/wp-content/themes/medicalalert/tpl/h5_heading.tpl
Normal file
11
wp/wp-content/themes/medicalalert/tpl/h5_heading.tpl
Normal file
@@ -0,0 +1,11 @@
|
||||
<!-- Heading BEGIN -->
|
||||
<section {{#if section_anchor_id}}id="{{section_anchor_id}}" {{/if}} class="h5-heading-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}} {{heading_color}}">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col text-{{alignment}}">
|
||||
<h5 class="{{heading_color}}">{{text}}</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Heading END -->
|
||||
11
wp/wp-content/themes/medicalalert/tpl/h6_heading.tpl
Normal file
11
wp/wp-content/themes/medicalalert/tpl/h6_heading.tpl
Normal file
@@ -0,0 +1,11 @@
|
||||
<!-- Heading BEGIN -->
|
||||
<section {{#if section_anchor_id}}id="{{section_anchor_id}}" {{/if}} class="h6-heading-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}} {{heading_color}}">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col text-{{alignment}}">
|
||||
<h6 class="{{heading_color}}">{{text}}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Heading END -->
|
||||
@@ -1,34 +1,177 @@
|
||||
<!-- Mobile Hero BEGIN -->
|
||||
<section class="hero-slice-container d-flex justify-content-start align-content-center flex-wrap d-lg-none padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
|
||||
<div class="container my-auto hero-wrapper my-auto">
|
||||
<div class="row mb-4 p-2">
|
||||
<div class="col-md-10 col-lg-4">
|
||||
<h1 class="mb-4 hero-title">{{title}}</h1>
|
||||
<p class="mb-4 hero-copy">{{copy}}</p>
|
||||
{{#if link}}
|
||||
<a class="button--primary" href="{{link.url}}">{{link.title}}</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
<!-- <section class="hero-slice-container d-flex justify-content-start align-content-center flex-wrap d-lg-none g-sky-hero padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
|
||||
<div class="container my-auto hero-wrapper my-auto">
|
||||
<div class="row mb-4 p-2">
|
||||
<div class="col-md-10 col-lg-4">
|
||||
<h1 class="mb-4 hero-title">{{title}}</h1>
|
||||
<p class="mb-4 hero-copy">{{copy}}</p>
|
||||
{{#if link}}
|
||||
<a class="button--primary" href="{{link.url}}">{{link.title}}</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<img class="img-fluid p-0" src="{{mobile_image.url}}" alt="{{mobile_image.alt}}" />
|
||||
{{#if !tile_image_3}}
|
||||
|
||||
<div class="p-relative">
|
||||
{{#if tile_image_1}}
|
||||
<div class="tile-1">
|
||||
<div class="g-sky-border">
|
||||
<img class="w-100" src="{{tile_image_1.url}}" alt="{{tile_image_1.alt}}" />
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if tile_image_2}}
|
||||
{{#if !tile_image_3}}
|
||||
<div class="g-sky-border p-absolute tile-2">
|
||||
<img class="w-100" src="{{tile_image_2.url}}" alt="{{tile_image_2.alt}}" />
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#if tile_image_3}}
|
||||
<div class="g-sky-border">
|
||||
<img class="w-100" src="{{tile_image_2.url}}" alt="{{tile_image_2.alt}}" />
|
||||
</div>
|
||||
<div class="g-sky-border">
|
||||
<img class="w-100" src="{{tile_image_3.url}}" alt="{{tile_image_3.alt}}" />
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<img class="img-fluid p-0" src="{{mobile_image.url}}" alt="{{mobile_image.alt}}" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section> -->
|
||||
<!-- Mobile Hero END -->
|
||||
|
||||
<!-- Hero BEGIN -->
|
||||
<section class="hero-slice-container d-flex justify-content-start align-content-center d-none d-lg-flex" style="background-image: url('{{background_image.url}}');">
|
||||
<div class="container hero-wrapper my-auto">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-lg-4">
|
||||
<h1 class="mb-4 hero-title">{{title}}</h1>
|
||||
<p class="mb-4 hero-copy">{{copy}}</p>
|
||||
{{#if link}}
|
||||
<a class="button--primary" href="{{link.url}}">{{link.title}}</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if tile_image_3.url === ''}}
|
||||
<section class="hero-slice-container d-flex justify-content-start align-content-center d-lg-flex g-sky-hero py-4">
|
||||
<div class="container hero-wrapper my-auto">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<h1 class="mb-3 mt-2 hero-title">{{title}}</h1>
|
||||
<p class="mb-4 hero-copy">{{copy}}</p>
|
||||
{{#if link}}
|
||||
<a class="button--primary" href="{{link.url}}">{{link.title}}</a>
|
||||
{{/if}}
|
||||
{{tile_image_3.url}}
|
||||
</div>
|
||||
<div class="col-lg-8 mw-800 p-relative">
|
||||
<div class="p-absolute sonar-svg">
|
||||
<svg width="452" height="452" viewBox="0 0 452 452" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_252_440)">
|
||||
<path opacity="0.83" d="M226.002 165.049C234.276 165.049 242.27 166.689 249.728 169.844C256.991 172.918 263.523 177.329 269.097 182.907C274.671 188.481 279.082 195.009 282.161 202.276C285.32 209.735 286.955 217.728 286.955 226.002C286.955 234.276 285.315 242.27 282.161 249.728C279.086 256.991 274.675 263.523 269.097 269.097C263.523 274.671 256.991 279.082 249.728 282.161C242.27 285.32 234.276 286.955 226.002 286.955C217.728 286.955 209.735 285.315 202.276 282.161C195.013 279.086 188.482 274.675 182.908 269.097C177.334 263.523 172.923 256.995 169.844 249.728C166.685 242.27 165.049 234.276 165.049 226.002C165.049 217.728 166.689 209.735 169.844 202.276C172.918 195.013 177.329 188.481 182.908 182.907C188.482 177.334 195.013 172.922 202.276 169.844C209.735 166.685 217.728 165.049 226.002 165.049Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.66" d="M226.002 141.034C179.151 141.034 141.034 179.151 141.034 226.002C141.034 272.853 179.151 310.971 226.002 310.971C272.853 310.971 310.971 272.853 310.971 226.002C310.971 179.151 272.853 141.034 226.002 141.034ZM226.002 123.79C239.832 123.79 253.226 126.513 265.791 131.828C277.968 136.979 288.907 144.362 298.277 153.732C307.647 163.102 315.03 174.041 320.181 186.218C325.496 198.778 328.218 212.172 328.218 226.007C328.218 239.841 325.496 253.23 320.181 265.795C315.03 277.973 307.647 288.911 298.277 298.281C288.907 307.651 277.968 315.034 265.791 320.185C253.23 325.501 239.837 328.223 226.002 328.223C212.167 328.223 198.778 325.501 186.214 320.185C174.036 315.034 163.098 307.651 153.728 298.281C144.357 288.911 136.975 277.973 131.824 265.795C126.508 253.235 123.786 239.841 123.786 226.007C123.786 212.172 126.508 198.783 131.824 186.218C136.975 174.041 144.357 163.102 153.728 153.732C163.098 144.362 174.036 136.979 186.214 131.828C198.774 126.513 212.167 123.79 226.002 123.79Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.49" d="M226.002 99.7701C156.397 99.7701 99.7702 156.397 99.7702 226.002C99.7702 295.608 156.397 352.234 226.002 352.234C295.608 352.234 352.234 295.608 352.234 226.002C352.234 156.397 295.608 99.7701 226.002 99.7701ZM226.002 82.5269C245.393 82.5269 264.187 86.332 281.849 93.8085C298.936 101.036 314.286 111.39 327.448 124.557C340.61 137.719 350.964 153.068 358.196 170.156C365.668 187.818 369.473 206.611 369.473 226.002C369.473 245.393 365.668 264.187 358.196 281.849C350.969 298.936 340.614 314.286 327.448 327.448C314.286 340.61 298.936 350.964 281.849 358.196C264.187 365.668 245.389 369.478 226.002 369.478C206.616 369.478 187.818 365.672 170.156 358.196C153.068 350.969 137.719 340.614 124.557 327.448C111.395 314.286 101.04 298.936 93.8085 281.849C86.3365 264.187 82.5314 245.393 82.5314 226.002C82.5314 206.611 86.3365 187.818 93.8085 170.156C101.036 153.068 111.39 137.719 124.557 124.557C137.719 111.395 153.068 101.04 170.156 93.8085C187.818 86.3365 206.616 82.5314 226.002 82.5314V82.5269Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.32" d="M226.002 58.5067C133.646 58.5067 58.5067 133.646 58.5067 226.002C58.5067 318.358 133.646 393.498 226.002 393.498C318.358 393.498 393.498 318.358 393.498 226.002C393.498 133.646 318.358 58.5067 226.002 58.5067ZM226.002 41.2635C250.949 41.2635 275.148 46.1557 297.911 55.7843C319.913 65.0921 339.669 78.4144 356.628 95.3725C373.586 112.331 386.908 132.091 396.216 154.089C405.844 176.852 410.737 201.051 410.737 225.998C410.737 250.945 405.844 275.143 396.216 297.907C386.908 319.909 373.586 339.665 356.628 356.623C339.669 373.581 319.909 386.903 297.911 396.211C275.148 405.84 250.949 410.732 226.002 410.732C201.055 410.732 176.857 405.84 154.093 396.211C132.091 386.903 112.335 373.581 95.3769 356.623C78.4189 339.665 65.0966 319.904 55.7888 297.907C46.1602 275.143 41.2679 250.945 41.2679 225.998C41.2679 201.051 46.1602 176.852 55.7888 154.089C65.0966 132.087 78.4189 112.331 95.3769 95.3725C112.335 78.4144 132.096 65.0921 154.093 55.7843C176.857 46.1557 201.055 41.2635 226.002 41.2635Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.15" d="M226.002 17.2432C110.891 17.2432 17.2432 110.891 17.2432 226.002C17.2432 341.113 110.891 434.761 226.002 434.761C341.113 434.761 434.761 341.113 434.761 226.002C434.761 110.891 341.109 17.2432 226.002 17.2432ZM226.002 452C195.495 452 165.896 446.025 138.031 434.235C111.119 422.851 86.9469 406.557 66.1971 385.807C45.4428 365.053 29.1486 340.886 17.769 313.974C5.97498 286.104 0 256.505 0 226.002C0 195.499 5.97498 165.896 17.7645 138.031C29.1486 111.119 45.4428 86.9469 66.1926 66.1971C86.9469 45.4428 111.114 29.1486 138.026 17.769C165.896 5.97498 195.495 0 226.002 0C256.51 0 286.108 5.97498 313.974 17.7645C340.886 29.1486 365.058 45.4428 385.807 66.1926C406.562 86.9469 422.856 111.114 434.235 138.026C446.021 165.896 452 195.49 452 225.998C452 256.505 446.025 286.104 434.235 313.969C422.851 340.881 406.557 365.053 385.807 385.803C365.053 406.557 340.886 422.851 313.974 434.231C286.104 446.016 256.51 451.996 226.002 451.996V452Z" fill="white" fill-opacity="0.3" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_252_440">
|
||||
<rect width="452" height="452" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="p-relative">
|
||||
<div class="tile-1">
|
||||
<div class="g-sky-border">
|
||||
<img class="w-100" src="{{tile_image_1.url}}" alt="{{tile_image_1.alt}}" />
|
||||
</div>
|
||||
</div>
|
||||
{{#if tile_image_2}}
|
||||
<div class="g-sky-border p-absolute tile-2">
|
||||
<img class="w-100" src="{{tile_image_2.url}}" alt="{{tile_image_2.alt}}" />
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Hero END -->
|
||||
{{/if}}
|
||||
<!-- Hero 1 and 2 Tile Images -->
|
||||
|
||||
<!-- Hero 3 Tile Images -->
|
||||
|
||||
<section class="hero-slice-container g-sky-hero">
|
||||
<div class="container hero-wrapper">
|
||||
<div class="row h-100 pb-5 p-relative d-flex align-items-center">
|
||||
<div class="col-md-6 pt-5 d-flex flex-column justify-content-center h-100">
|
||||
<h1 class="mb-2 hero-title">{{title}}</h1>
|
||||
<p class="mb-4 hero-copy">{{copy}}</p>
|
||||
{{#if link}}
|
||||
<div>
|
||||
<a class="button--primary" href="{{link.url}}">{{link.title}}</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="sonar-svg-3">
|
||||
<svg width="452" height="452" viewBox="0 0 452 452" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_252_440)">
|
||||
<path opacity="0.83" d="M226.002 165.049C234.276 165.049 242.27 166.689 249.728 169.844C256.991 172.918 263.523 177.329 269.097 182.907C274.671 188.481 279.082 195.009 282.161 202.276C285.32 209.735 286.955 217.728 286.955 226.002C286.955 234.276 285.315 242.27 282.161 249.728C279.086 256.991 274.675 263.523 269.097 269.097C263.523 274.671 256.991 279.082 249.728 282.161C242.27 285.32 234.276 286.955 226.002 286.955C217.728 286.955 209.735 285.315 202.276 282.161C195.013 279.086 188.482 274.675 182.908 269.097C177.334 263.523 172.923 256.995 169.844 249.728C166.685 242.27 165.049 234.276 165.049 226.002C165.049 217.728 166.689 209.735 169.844 202.276C172.918 195.013 177.329 188.481 182.908 182.907C188.482 177.334 195.013 172.922 202.276 169.844C209.735 166.685 217.728 165.049 226.002 165.049Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.66" d="M226.002 141.034C179.151 141.034 141.034 179.151 141.034 226.002C141.034 272.853 179.151 310.971 226.002 310.971C272.853 310.971 310.971 272.853 310.971 226.002C310.971 179.151 272.853 141.034 226.002 141.034ZM226.002 123.79C239.832 123.79 253.226 126.513 265.791 131.828C277.968 136.979 288.907 144.362 298.277 153.732C307.647 163.102 315.03 174.041 320.181 186.218C325.496 198.778 328.218 212.172 328.218 226.007C328.218 239.841 325.496 253.23 320.181 265.795C315.03 277.973 307.647 288.911 298.277 298.281C288.907 307.651 277.968 315.034 265.791 320.185C253.23 325.501 239.837 328.223 226.002 328.223C212.167 328.223 198.778 325.501 186.214 320.185C174.036 315.034 163.098 307.651 153.728 298.281C144.357 288.911 136.975 277.973 131.824 265.795C126.508 253.235 123.786 239.841 123.786 226.007C123.786 212.172 126.508 198.783 131.824 186.218C136.975 174.041 144.357 163.102 153.728 153.732C163.098 144.362 174.036 136.979 186.214 131.828C198.774 126.513 212.167 123.79 226.002 123.79Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.49" d="M226.002 99.7701C156.397 99.7701 99.7702 156.397 99.7702 226.002C99.7702 295.608 156.397 352.234 226.002 352.234C295.608 352.234 352.234 295.608 352.234 226.002C352.234 156.397 295.608 99.7701 226.002 99.7701ZM226.002 82.5269C245.393 82.5269 264.187 86.332 281.849 93.8085C298.936 101.036 314.286 111.39 327.448 124.557C340.61 137.719 350.964 153.068 358.196 170.156C365.668 187.818 369.473 206.611 369.473 226.002C369.473 245.393 365.668 264.187 358.196 281.849C350.969 298.936 340.614 314.286 327.448 327.448C314.286 340.61 298.936 350.964 281.849 358.196C264.187 365.668 245.389 369.478 226.002 369.478C206.616 369.478 187.818 365.672 170.156 358.196C153.068 350.969 137.719 340.614 124.557 327.448C111.395 314.286 101.04 298.936 93.8085 281.849C86.3365 264.187 82.5314 245.393 82.5314 226.002C82.5314 206.611 86.3365 187.818 93.8085 170.156C101.036 153.068 111.39 137.719 124.557 124.557C137.719 111.395 153.068 101.04 170.156 93.8085C187.818 86.3365 206.616 82.5314 226.002 82.5314V82.5269Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.32" d="M226.002 58.5067C133.646 58.5067 58.5067 133.646 58.5067 226.002C58.5067 318.358 133.646 393.498 226.002 393.498C318.358 393.498 393.498 318.358 393.498 226.002C393.498 133.646 318.358 58.5067 226.002 58.5067ZM226.002 41.2635C250.949 41.2635 275.148 46.1557 297.911 55.7843C319.913 65.0921 339.669 78.4144 356.628 95.3725C373.586 112.331 386.908 132.091 396.216 154.089C405.844 176.852 410.737 201.051 410.737 225.998C410.737 250.945 405.844 275.143 396.216 297.907C386.908 319.909 373.586 339.665 356.628 356.623C339.669 373.581 319.909 386.903 297.911 396.211C275.148 405.84 250.949 410.732 226.002 410.732C201.055 410.732 176.857 405.84 154.093 396.211C132.091 386.903 112.335 373.581 95.3769 356.623C78.4189 339.665 65.0966 319.904 55.7888 297.907C46.1602 275.143 41.2679 250.945 41.2679 225.998C41.2679 201.051 46.1602 176.852 55.7888 154.089C65.0966 132.087 78.4189 112.331 95.3769 95.3725C112.335 78.4144 132.096 65.0921 154.093 55.7843C176.857 46.1557 201.055 41.2635 226.002 41.2635Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.15" d="M226.002 17.2432C110.891 17.2432 17.2432 110.891 17.2432 226.002C17.2432 341.113 110.891 434.761 226.002 434.761C341.113 434.761 434.761 341.113 434.761 226.002C434.761 110.891 341.109 17.2432 226.002 17.2432ZM226.002 452C195.495 452 165.896 446.025 138.031 434.235C111.119 422.851 86.9469 406.557 66.1971 385.807C45.4428 365.053 29.1486 340.886 17.769 313.974C5.97498 286.104 0 256.505 0 226.002C0 195.499 5.97498 165.896 17.7645 138.031C29.1486 111.119 45.4428 86.9469 66.1926 66.1971C86.9469 45.4428 111.114 29.1486 138.026 17.769C165.896 5.97498 195.495 0 226.002 0C256.51 0 286.108 5.97498 313.974 17.7645C340.886 29.1486 365.058 45.4428 385.807 66.1926C406.562 86.9469 422.856 111.114 434.235 138.026C446.021 165.896 452 195.49 452 225.998C452 256.505 446.025 286.104 434.235 313.969C422.851 340.881 406.557 365.053 385.807 385.803C365.053 406.557 340.886 422.851 313.974 434.231C286.104 446.016 256.51 451.996 226.002 451.996V452Z" fill="white" fill-opacity="0.3" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_252_440">
|
||||
<rect width="452" height="452" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
{{#if tile_image_3}}
|
||||
<div class="pt-md-5 mt-md-5">
|
||||
<div class="g-sky-border mt-5 me-3 tile-1 p-relative z-0">
|
||||
<img class="w-100" src="{{tile_image_1.url}}" alt="{{tile_image_1.alt}}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="pos z-1 p-relative">
|
||||
<div class="g-sky-border mb-3">
|
||||
<img class="w-100 tile-square" src="{{tile_image_2.url}}" alt="{{tile_image_2.alt}}" />
|
||||
</div>
|
||||
<div class="g-sky-border">
|
||||
<img class="w-100 tile-square" src="{{tile_image_3.url}}" alt="{{tile_image_3.alt}}" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
{{#if tile_image_2}}
|
||||
<div class="pt-md-5 mt-md-5">
|
||||
<div class="g-sky-border mt-5 me-3 tile-1 p-relative z-0">
|
||||
<img class="w-100" src="{{tile_image_1.url}}" alt="{{tile_image_1.alt}}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-absolute tile-square tile-2">
|
||||
<div class="g-sky-border">
|
||||
<img class="w-100" src="{{tile_image_2.url}}" alt="{{tile_image_2.alt}}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{else}}
|
||||
{{#if tile_image_1}}
|
||||
<div class="g-sky-border mt-5 tile-1 p-relative z-0 ms-auto">
|
||||
<img class="w-100" src="{{tile_image_1.url}}" alt="{{tile_image_1.alt}}" />
|
||||
</div>
|
||||
|
||||
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,26 +1,28 @@
|
||||
<!-- Icon Info Grid BEGIN -->
|
||||
<section class="icon-info-grid-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
|
||||
<div class="container">
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-{{number_of_columns}} d-flex justify-content-center gx-5 gy-4">
|
||||
{{#each icon_cards}}
|
||||
<div class="col icon-card-wrapper">
|
||||
<div class="icon-card">
|
||||
<img class="img-fluid icon-img mb-2" src="{{icon.url}}" alt="{{icon.alt}}" />
|
||||
<div class="content-wrapper">
|
||||
<h4 class="text-center icon-title ms-4 me-4 mb-2">{{title}}</h4>
|
||||
<div class="text-center icon-copy mb-4">
|
||||
{{{copy}}}
|
||||
</div>
|
||||
{{#if link}}
|
||||
<div class="icon-link">
|
||||
<a href="{{link.url}}" class="text-nowrap button--primary">{{link.title}}</a>
|
||||
<div class="container pb-4">
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-{{number_of_columns}} d-flex justify-content-center gx-5">
|
||||
{{#each icon_cards}}
|
||||
<div class="col icon-card-wrapper">
|
||||
<div class="icon-card">
|
||||
<div class="icon-img">
|
||||
<img class="img-fluid" src="{{icon.url}}" alt="{{icon.alt}}" />
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<h4 class="icon-title me-4 my-2">{{title}}</h4>
|
||||
<div class="icon-copy mb-4">
|
||||
{{{copy}}}
|
||||
</div>
|
||||
{{#if link}}
|
||||
<div class="icon-link">
|
||||
<a href="{{link.url}}" class="text-nowrap button--primary">{{link.title}}</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Icon Info Grid END -->
|
||||
<!-- Icon Info Grid END -->
|
||||
@@ -1,40 +1,40 @@
|
||||
<!-- Image With Icon Info Grid BEGIN -->
|
||||
<section class="image-with-icon-info-grid-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
|
||||
<div class="container">
|
||||
<div class="row gx-3">
|
||||
<div class="col-12 col-md col-lg-3 order-{{alignment}} align-self-center">
|
||||
<div class="image">
|
||||
<img src="{{image.url}}" alt="{{image.alt}}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md col-lg-9 order-2 my-auto">
|
||||
<div class="icon-info-grid">
|
||||
<div class="row row-cols-lg-2 gx-3 gy-5">
|
||||
{{#each icon_info_cards}}
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="icon">
|
||||
<img src="{{icon.url}}" alt="{{icon.alt}}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="info">
|
||||
<div class="title">
|
||||
<h4>{{title}}</h4>
|
||||
</div>
|
||||
<div class="copy">
|
||||
<p>{{copy}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
|
||||
<div class="row gx-3">
|
||||
<div class="col-12 col-md col-lg-3 order-{{alignment}} align-self-center">
|
||||
<div class="image">
|
||||
<img src="{{image.url}}" alt="{{image.alt}}">
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md col-lg-9 order-2 my-auto">
|
||||
<div class="icon-info-grid">
|
||||
<div class="row row-cols-lg-2 gx-3 gy-5">
|
||||
{{#each icon_info_cards}}
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="icon">
|
||||
<img src="{{icon.url}}" alt="{{icon.alt}}">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="title">
|
||||
<h4>{{title}}</h4>
|
||||
</div>
|
||||
<div class="copy">
|
||||
<p>{{copy}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Image With Icon Info Grid END -->
|
||||
@@ -1,20 +1,36 @@
|
||||
<!-- Phone Contact with Shortcode BEGIN -->
|
||||
<section class="phone-contact-with-shortcode-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center text-center">
|
||||
<div class="col-auto">
|
||||
<div class="copy mb-3">
|
||||
<h3>{{copy}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<section class="phone-contact-with-shortcode-slice-container bg-color-sky-red p-relative mb-5">
|
||||
|
||||
<div class="p-absolute sonar-svg-left">
|
||||
<svg width="424" height="565" viewBox="0 0 424 565" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_252_447)">
|
||||
<path opacity="0.74" d="M141.5 189.375C154.106 189.375 166.313 191.861 177.75 196.696C188.844 201.391 198.813 208.122 207.348 216.657C215.884 225.193 222.614 235.162 227.304 246.255C232.145 257.692 234.625 269.894 234.625 282.506C234.625 295.117 232.139 307.319 227.304 318.756C222.609 329.849 215.878 339.819 207.343 348.354C198.807 356.889 188.838 363.62 177.744 368.309C166.308 373.15 154.106 375.63 141.494 375.63C128.882 375.63 116.681 373.145 105.244 368.309C94.1505 363.614 84.1813 356.884 75.6459 348.348C67.1105 339.813 60.3801 329.844 55.685 318.75C50.8438 307.313 48.3642 295.112 48.3642 282.5C48.3642 269.888 50.8494 257.687 55.685 246.25C60.3801 235.156 67.1105 225.187 75.6459 216.652C84.1813 208.116 94.1505 201.386 105.244 196.696C116.681 191.855 128.882 189.375 141.494 189.375H141.5Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.61" d="M141.5 160.789C74.3864 160.789 19.7892 215.386 19.7892 282.5C19.7892 349.614 74.3864 404.211 141.5 404.211C208.614 404.211 263.211 349.614 263.211 282.5C263.211 215.386 208.614 160.789 141.5 160.789ZM141.5 151.5C159.212 151.5 176.378 154.981 192.493 161.796C208.096 168.397 222.114 177.854 234.13 189.87C246.146 201.886 255.603 215.904 262.204 231.507C269.019 247.622 272.5 264.783 272.5 282.5C272.5 300.217 269.019 317.378 262.204 333.493C255.603 349.096 246.146 363.114 234.13 375.13C222.114 387.146 208.096 396.603 192.493 403.204C176.378 410.019 159.217 413.5 141.5 413.5C123.783 413.5 106.622 410.019 90.507 403.204C74.9037 396.603 60.8861 387.146 48.8702 375.13C36.8543 363.114 27.3968 349.096 20.7957 333.493C13.9752 317.378 10.5003 300.217 10.5003 282.5C10.5003 264.783 13.9808 247.622 20.7957 231.507C27.3968 215.904 36.8543 201.886 48.8702 189.87C60.8861 177.854 74.9037 168.397 90.507 161.796C106.622 154.975 123.783 151.5 141.5 151.5Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.48" d="M141.5 121.677C52.823 121.677 -19.3173 193.823 -19.3173 282.494C-19.3173 371.166 52.8287 443.312 141.5 443.312C230.171 443.312 302.317 371.166 302.317 282.494C302.317 193.823 230.171 121.677 141.5 121.677ZM141.5 113.625C164.317 113.625 186.443 118.101 207.236 126.901C227.349 135.408 245.415 147.592 260.911 163.095C276.407 178.591 288.592 196.657 297.105 216.77C305.899 237.563 310.38 259.683 310.38 282.506C310.38 305.328 305.905 327.449 297.105 348.242C288.598 368.354 276.413 386.42 260.911 401.917C245.415 417.413 227.349 429.598 207.236 438.111C186.443 446.905 164.323 451.386 141.5 451.386C118.677 451.386 96.5571 446.91 75.764 438.111C55.6513 429.603 37.5853 417.419 22.0889 401.917C6.59249 386.42 -5.59209 368.354 -14.105 348.242C-22.899 327.449 -27.3804 305.328 -27.3804 282.506C-27.3804 259.683 -22.9046 237.563 -14.105 216.77C-5.59771 196.657 6.58686 178.591 22.0889 163.095C37.5853 147.598 55.6513 135.414 75.764 126.901C96.5571 118.107 118.677 113.625 141.5 113.625Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.35" d="M141.5 82.5706C31.2597 82.5706 -58.4294 172.26 -58.4294 282.5C-58.4294 392.74 31.2597 482.429 141.5 482.429C251.74 482.429 341.429 392.74 341.429 282.5C341.429 172.26 251.74 82.5706 141.5 82.5706ZM141.5 75.7502C169.423 75.7502 196.502 81.2268 221.979 92C246.601 102.413 268.715 117.325 287.692 136.308C306.675 155.29 321.587 177.405 332 202.021C342.773 227.492 348.25 254.572 348.25 282.5C348.25 310.428 342.773 337.502 332 362.979C321.587 387.601 306.675 409.716 287.692 428.692C268.71 447.675 246.601 462.587 221.979 473C196.508 483.773 169.428 489.25 141.5 489.25C113.572 489.25 86.4979 483.773 61.0211 473C36.3989 462.587 14.2845 447.675 -4.69243 428.692C-23.675 409.71 -38.5866 387.601 -49 362.979C-59.7732 337.508 -65.2498 310.428 -65.2498 282.5C-65.2498 254.572 -59.7732 227.498 -49 202.021C-38.5866 177.399 -23.675 155.284 -4.69243 136.308C14.2901 117.325 36.4045 102.413 61.0211 92C86.4923 81.2268 113.572 75.7502 141.5 75.7502Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.22" d="M141.5 43.4585C9.69628 43.4585 -97.5359 150.691 -97.5359 282.494C-97.5359 414.298 9.69628 521.53 141.5 521.53C273.304 521.53 380.536 414.298 380.536 282.494C380.536 150.691 273.304 43.4585 141.5 43.4585ZM141.5 37.8751C174.528 37.8751 206.567 44.3469 236.722 57.0994C265.854 69.4189 292.016 87.0632 314.479 109.526C336.942 131.989 354.581 158.152 366.906 187.284C379.659 217.433 386.131 249.472 386.131 282.506C386.131 315.539 379.659 347.573 366.906 377.728C354.587 406.859 336.942 433.022 314.479 455.485C292.016 477.948 265.854 495.587 236.722 507.912C206.573 520.664 174.534 527.136 141.5 527.136C108.466 527.136 76.4331 520.664 46.2781 507.912C17.1465 495.592 -9.01635 477.948 -31.4794 455.485C-53.9424 433.022 -71.5811 406.859 -83.9062 377.728C-96.6587 347.578 -103.131 315.539 -103.131 282.506C-103.131 249.472 -96.6587 217.439 -83.9062 187.284C-71.5867 158.152 -53.9424 131.989 -31.4794 109.526C-9.01635 87.0632 17.1465 69.4245 46.2781 57.0994C76.4275 44.3469 108.466 37.8751 141.5 37.8751Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.09" d="M141.5 4.35204C-11.8727 4.35204 -136.648 129.127 -136.648 282.5C-136.648 435.873 -11.8727 560.648 141.5 560.648C294.873 560.648 419.648 435.873 419.648 282.5C419.648 129.127 294.873 4.35204 141.5 4.35204ZM141.5 565C103.366 565 66.3683 557.533 31.5352 542.801C-2.10594 528.57 -32.3172 508.204 -58.2607 482.261C-84.2042 456.317 -104.576 426.106 -118.801 392.465C-133.533 357.632 -141 320.634 -141 282.5C-141 244.366 -133.533 207.368 -118.801 172.535C-104.57 138.894 -84.2042 108.683 -58.2607 82.7393C-32.3172 56.7958 -2.10594 36.4244 31.5352 22.1988C66.3683 7.46706 103.361 0 141.5 0C179.639 0 216.632 7.46706 251.465 22.1988C285.106 36.43 315.317 56.7958 341.261 82.7393C367.204 108.683 387.576 138.894 401.801 172.535C416.533 207.363 424 244.361 424 282.5C424 320.639 416.533 357.632 401.801 392.465C387.57 426.106 367.204 456.317 341.261 482.261C315.317 508.204 285.106 528.576 251.465 542.801C216.637 557.533 179.639 565 141.5 565Z" fill="white" fill-opacity="0.3" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_252_447">
|
||||
<rect width="565" height="565" fill="white" transform="translate(-141)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<div class="row justify-content-center text-center">
|
||||
<div class="col-auto">
|
||||
<div class="bold-copy">
|
||||
<div class="text-nowrap call-title"><span>Call:</span> <a href="tel:{{{phone_number}}}">{{{phone_number}}}</a></div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center text-center">
|
||||
<div class="col-auto my-5 py-3">
|
||||
<div class="fs-3 f-white fw-bold">{{copy}}</div>
|
||||
<div class="text-nowrap mt-1">
|
||||
<a class="fw-normal f-white fs-2" href="tel:{{{phone_number}}}">
|
||||
<i class="fa-solid fa-phone-volume color-white" aria-hidden="true" style="padding-top: 4px; padding-right: 4px;"></i>
|
||||
Call: {{{phone_number}}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Phone Contact with Shortcode END -->
|
||||
@@ -1,29 +1,31 @@
|
||||
<!-- Products List BEGIN -->
|
||||
<section class="products-list-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
|
||||
<div class="container">
|
||||
<div class="row d-flex justify-content-center">
|
||||
{{#each products}}
|
||||
<div class="col-12 col-lg-4 products-list-wrapper">
|
||||
<div class="mb-3 products-list-item">
|
||||
<img class="products-list-img" src="{{image.url}}" alt="{{image.alt}}" />
|
||||
<div class="products-list-item-inner-wrapper">
|
||||
<h3 class="products-list-title mb-5">{{title}}</h3>
|
||||
<div class="products-list-copy">
|
||||
<p>{{{copy}}}</p>
|
||||
</div>
|
||||
{{#if link}}
|
||||
<a class="text-nowrap button--primary products-list-link" href="{{link.url}}">{{link.title}}</a>
|
||||
{{/if}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
{{#each products}}
|
||||
<div class="col-12 col-lg-4 mb-2">
|
||||
<div class="products-list-item h-100">
|
||||
<div class="bg-white w-100 h-100 d-flex justify-content-between flex-column p-3">
|
||||
<div>
|
||||
<div class="text-center">
|
||||
<img class="products-list-img" src="{{image.url}}" alt="{{image.alt}}" />
|
||||
</div>
|
||||
<div class="products-list-item-inner-wrapper align-self-stretch">
|
||||
<div class="line-sm pt-1"></div>
|
||||
<h3 class="products-list-title mb-3 pt-4">{{title}}</h3>
|
||||
<div class="products-list-copy pb-2">
|
||||
<p>{{{copy}}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{#if link}}
|
||||
<a class="text-nowrap button--primary products-list-link w-100 text-center" href="{{link.url}}">{{link.title}}</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Products List END -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Products List END -->
|
||||
@@ -1,13 +1,13 @@
|
||||
<!-- Simple Content BEGIN -->
|
||||
<section class="simple-content-slice-container bg-color-{{ background_color }} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col">
|
||||
<div class="simple-content">
|
||||
{{{ copy }}}
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col">
|
||||
<div class="simple-content">
|
||||
{{{ copy }}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Simple Content END -->
|
||||
@@ -1,216 +1,400 @@
|
||||
<section class="woo-commerce mt-5">
|
||||
<div class="product">
|
||||
<div class="container">
|
||||
<div class="row gx-5">
|
||||
<div class="col-12 col-md-5">
|
||||
{{{ gallery }}}
|
||||
</div>
|
||||
<div class="col-12 col-md-7">
|
||||
<h1 class="product-title">{{#productTitleFormatter product.title }}</h1>
|
||||
<p><a href="/resources/reviews/"><img src="/wp-content/themes/medicalalert/assets/media/images/reviews_icon.png"> <span style="font-size:16px; font-weight:600;">Read Reviews →</span> </a></p>
|
||||
<div class="product-description mb-4 mt-3">
|
||||
<p>{{{ product.excerpt }}}</p>
|
||||
</div>
|
||||
<div class="connection-types">
|
||||
|
||||
|
||||
{{#if showHomeOptions}}
|
||||
<div class="connection-types mt-4">
|
||||
<p class="option-heading">Select Your System Type:</p>
|
||||
{{#if currentProductIsHome}}
|
||||
{{#each homesystemProducts}}
|
||||
<a class="me-3" href="{{ permalink }}" data-product-id={{ id }}>
|
||||
{{ _product_attributes.connection-type.value }}</a>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if showOTGOptions}}
|
||||
<div class="connection-types mt-4">
|
||||
<p class="option-heading">Select Your System Type:</p>
|
||||
{{#each OTGProducts}}
|
||||
<a class="me-3" href="{{ permalink }}" data-product-id={{ id }}>
|
||||
{{ _product_attributes.connection-type.value }}
|
||||
</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="select-plan container-fluid p-0">
|
||||
<div class="row">
|
||||
<div class="col-8 col-lg-6 col-md-8 p-3">
|
||||
<label for="variation-select">Select a plan:</label>
|
||||
<form class="variations_form" method="post" enctype="multipart/form-data">
|
||||
<div class="custom-select">
|
||||
<select class="select-items select-hide" name="variation_id" id="variation-select">
|
||||
{{#each variation}}
|
||||
<option value="{{{variation_id}}}">{{{attributes.attribute_rate-plan}}} | {{{price_html}}}</option>
|
||||
{{this}}
|
||||
{{/each}}
|
||||
</select>
|
||||
</div>
|
||||
<p id="selected-text">Includes free shipping and lockbox! </p>
|
||||
<p class="fee-text">{{product.fee_text}}</p>
|
||||
</div>
|
||||
<div class="col-4 col-lg-6 col-md-4 p-3">
|
||||
<button type="submit" class="button--primary ms-2">Buy Now</button>
|
||||
</form>
|
||||
<p id="selected-price"></p>
|
||||
</div>
|
||||
<div class="product">
|
||||
<div class="container">
|
||||
<div class="row gx-5">
|
||||
<div class="col-12 col-md-5">
|
||||
{{{ gallery }}}
|
||||
</div>
|
||||
<div class="col-12 col-md-7">
|
||||
<h1 class="product-title">{{#productTitleFormatter product.title }}</h1>
|
||||
<!-- <p><a href="/resources/reviews/"><img src="/wp-content/themes/medicalalert/assets/media/images/reviews_icon.png"> <span style="font-size:16px; font-weight:600;">Read Reviews →</span> </a></p> -->
|
||||
<div class="product-description mb-4 mt-3">
|
||||
<p>{{{ product.excerpt }}}</p>
|
||||
</div>
|
||||
<div class="connection-types">
|
||||
{{#if showHomeOptions}}
|
||||
<div class="connection-types mt-4">
|
||||
<p class="option-heading">Select Your System Type:</p>
|
||||
{{#if currentProductIsHome}}
|
||||
{{#each homesystemProducts}}
|
||||
<a class="me-3" href="{{ permalink }}" data-product-id={{ id }}>
|
||||
{{ _product_attributes.connection-type.value }}</a>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if showOTGOptions}}
|
||||
<div class="connection-types mt-4">
|
||||
<div class="f-black fs-sm fw-bold mb-1">Select Your System Type:</div>
|
||||
{{#each OTGProducts}}
|
||||
<a class="me-3 f-black fw-normal" href="{{ permalink }}" data-product-id={{ id }}>
|
||||
{{ _product_attributes.connection-type.value }}
|
||||
</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="select-plan container-fluid p-0">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<label for="variation-select" class="f-black mt-3">Select a plan:</label>
|
||||
<form class="variations_form" method="post" enctype="multipart/form-data">
|
||||
<div class="d-lg-flex">
|
||||
<div>
|
||||
<select class="form-select p-2" name="variation_id" id="variation-select">
|
||||
{{#each variation}}
|
||||
<option value="{{{variation_id}}}">{{{attributes.attribute_rate-plan}}} | {{{price_html}}}</option>
|
||||
{{this}}
|
||||
{{/each}}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit" class="btn btn-red mt-2 mt-lg-0 ms-lg-2">Buy Now</button>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="f-purple fw-bold mb-0 mt-3">Includes free shipping and lockbox! </h6>
|
||||
<div>{{product.fee_text}}</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <p class="fw-bold mt-3 fs-6">About the product:</p>
|
||||
<ul class="mb-5 fs-6 about-product">
|
||||
{{#each product.about_product_lines}}
|
||||
<li><strong class="fw-bold">{{ bold_text }}:</strong> {{ regular_text }}</li>
|
||||
{{/each}}
|
||||
</ul> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="fw-bold mt-3 fs-6">About the product:</p>
|
||||
<ul class="mb-5 fs-6 about-product">
|
||||
{{#each product.about_product_lines}}
|
||||
<li><strong class="fw-bold">{{ bold_text }}:</strong> {{ regular_text }}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 my-5">
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{{ flex-content }}}
|
||||
</section>
|
||||
|
||||
<!-- WOOCOMMERCE STYLE OVERRIDES! -->
|
||||
<style>
|
||||
.connection-types a {color: #505050;text-decoration: none;font-size: 18px;line-height: 30px;font-weight: 700;text-decoration: none;}
|
||||
@media (max-width: 412px) {.button--primary {font-size: 14px;padding: 15px 15px;line-height: unset;}}
|
||||
@media screen and (max-width: 387px) {.button--primary {font-size: 13px;padding: 17px 15px;line-height: unset;}}
|
||||
@media screen and (min-width: 767px) and (max-width: 991px) {.button--primary {font-size: 1rem;padding: 8px 14px;}}
|
||||
.select-selected.select-arrow-active ~ .select-items .select-hide:first-child {display: none;}
|
||||
.custom-select .select-selected {color: black;}
|
||||
.custom-select .select-items div {color: black;}
|
||||
.custom-select .select-items div:hover {color: white;}
|
||||
.custom-select .select-selected.select-arrow-active {color: black;}
|
||||
#price {display: block;}
|
||||
#selected-text {color: #000066;margin: 5px;font-weight:700;}
|
||||
#selected-price {margin-top: 20px;}
|
||||
#price {margin-top: 20px;}
|
||||
.container {dispaly: table;width: 100%;}
|
||||
.column {display: table-cell;padding: 16px;}
|
||||
.button--primary { margin-top: 25px; }
|
||||
.fee-text {font-size: 15px; margin: 5px; }
|
||||
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {color: #000066;font-weight: 700;line-height: 0px;font-size: 1.25em;}
|
||||
.custom-select {position: relative;font-family: Arial;}
|
||||
.custom-select select {display: none;}
|
||||
.select-selected {background-color: #fff;color: #000;}
|
||||
.select-items div,.select-selected {color: #000;padding: 8px 16px;border: 1px solid transparent;border-color: #d3d3d3;cursor: pointer;line-height: 36px;}
|
||||
.select-items {position: absolute;background-color: #fff;top: 100%;left: 0;right: 0;z-index: 99;border: 1px solid transparent;border-color: #d3d3d3;}
|
||||
.select-hide {display: none;}
|
||||
.select-items div:hover, .same-as-selected {background-color: rgba(0, 0, 0, 0.1);}
|
||||
.connection-types a {
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.select-items div {color: #fff;padding: 8px 16px;border: 1px solid transparent;border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;cursor: pointer;transition: background-color 0.3s;}
|
||||
.select-items div:hover {background-color: #000066;}
|
||||
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {width: 100%;float: none;}
|
||||
.woocommerce-product-gallery ol li img {border: 1px solid darkgray;}
|
||||
.woocommerce div.product div.images .flex-control-thumbs {text-align: center;}
|
||||
.woocommerce div.product div.images .flex-control-thumbs li {margin: .5rem;width: 85px;display: inline-block;float: none;}
|
||||
.product-title {margin-bottom: 0;}
|
||||
.option-heading {margin-bottom: 0;font-size: 18px;font-weight: 700;line-height: 40px;color: #505050;}
|
||||
.stars {font-size: 15px;}
|
||||
.stars i {color: #ffbb00;margin-right: 1px;}
|
||||
strong {font-weight: bold;}
|
||||
.about-product li {line-height: 24px;}
|
||||
label {display: block;margin-bottom: 0;font-weight: 700;color: #505050;font-size: 1rem !important;}
|
||||
.select-selected.select-arrow-active:after {border-color: transparent transparent #fff transparent;top: 20px;}
|
||||
.select-selected::after {content: "\f0d7";font-family: 'FontAwesome', Verdana;position: absolute;top: 20px;right: 20px;transform: translateY(-50%);color: #000;pointer-events: none;}
|
||||
.col-select, .col-button {
|
||||
height: 11em !important;
|
||||
}
|
||||
@media (max-width: 412px) {
|
||||
.button--primary {
|
||||
font-size: 14px;
|
||||
padding: 15px 15px;
|
||||
line-height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 387px) {
|
||||
.button--primary {
|
||||
font-size: 13px;
|
||||
padding: 17px 15px;
|
||||
line-height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 767px) and (max-width: 991px) {
|
||||
.button--primary {
|
||||
font-size: 1rem;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.select-selected.select-arrow-active~.select-items .select-hide:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.custom-select .select-selected {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.custom-select .select-items div {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.custom-select .select-items div:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.custom-select .select-selected.select-arrow-active {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#price {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#selected-text {
|
||||
color: #000066;
|
||||
margin: 5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#selected-price {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#price {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
dispaly: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: table-cell;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.fee-text {
|
||||
font-size: 15px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,
|
||||
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
|
||||
color: #000066;
|
||||
font-weight: 700;
|
||||
line-height: 0px;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
position: relative;
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
.custom-select select {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
width: 327px;
|
||||
}
|
||||
|
||||
.select-selected {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.select-items div,
|
||||
.select-selected {
|
||||
color: #000;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid transparent;
|
||||
border-color: #d3d3d3;
|
||||
cursor: pointer;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.select-items {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
border: 1px solid transparent;
|
||||
border-color: #d3d3d3;
|
||||
}
|
||||
|
||||
.select-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select-items div:hover,
|
||||
.same-as-selected {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.select-items div {
|
||||
color: #fff;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid transparent;
|
||||
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.select-items div:hover {
|
||||
background-color: #000066;
|
||||
}
|
||||
|
||||
.woocommerce #content div.product div.images,
|
||||
.woocommerce div.product div.images,
|
||||
.woocommerce-page #content div.product div.images,
|
||||
.woocommerce-page div.product div.images {
|
||||
width: 100%;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.woocommerce-product-gallery ol li img {
|
||||
border: 1px solid darkgray;
|
||||
}
|
||||
|
||||
.woocommerce div.product div.images .flex-control-thumbs {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.woocommerce div.product div.images .flex-control-thumbs li {
|
||||
margin: .5rem;
|
||||
width: 85px;
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.product-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.option-heading {
|
||||
margin-bottom: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 40px;
|
||||
color: #505050;
|
||||
}
|
||||
|
||||
.stars {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.stars i {
|
||||
color: #ffbb00;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.about-product li {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
font-weight: 700;
|
||||
color: #505050;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.select-selected.select-arrow-active:after {
|
||||
border-color: transparent transparent #fff transparent;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.select-selected::after {
|
||||
content: "\f0d7";
|
||||
font-family: 'FontAwesome', Verdana;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
color: #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.col-select,
|
||||
.col-button {
|
||||
height: 11em !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
var currentProductID = {{ product.id }};
|
||||
$(".wearing-style a, .connection-types a, .standardVsAutoAlert a").each(function() {
|
||||
var ele = $(this);
|
||||
if (ele.data("product-id") == currentProductID || $("h1").text().trim() === $(this).text().trim()) {
|
||||
ele.html("<i class='bi bi-circle-fill'></i>" + ele.html());
|
||||
} else {
|
||||
ele.html("<i class='bi bi-circle'></i>" + ele.html());
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var x, i, j, l, ll, selElmnt, a, b, c;
|
||||
x = document.getElementsByClassName("custom-select");
|
||||
l = x.length;
|
||||
for (i = 0; i < l; i++) {
|
||||
selElmnt = x[i].getElementsByTagName("select")[0];
|
||||
ll = selElmnt.length;
|
||||
a = document.createElement("DIV");
|
||||
a.setAttribute("class", "select-selected");
|
||||
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
|
||||
x[i].appendChild(a);
|
||||
b = document.createElement("DIV");
|
||||
b.setAttribute("class", "select-items select-hide");
|
||||
for (j = 0; j < ll; j++) {
|
||||
|
||||
c = document.createElement("DIV");
|
||||
c.innerHTML = selElmnt.options[j].innerHTML;
|
||||
c.addEventListener("click", function(e) {
|
||||
var y, k, s, h, sl, yl;
|
||||
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
|
||||
sl = s.length;
|
||||
h = this.parentNode.previousSibling;
|
||||
for (k = 0; k < sl; k++) {
|
||||
if (s.options[k].innerHTML == this.innerHTML) {
|
||||
s.selectedIndex = k;
|
||||
h.innerHTML = this.innerHTML;
|
||||
if (this.innerHTML === "Annually | $19.95" || this.innerHTML === "Annually | $29.95" || this.innerHTML === "Annually | $34.95" || this.innerHTML === "Annually | $39.95") {
|
||||
document.getElementById("selected-text").innerHTML = "Includes free shipping and lockbox! ";
|
||||
} else if (this.innerHTML === "Semi-Annually | $24.95" || this.innerHTML === "Semi-Annually | $34.95" || this.innerHTML === "Semi-Annually | $44.95" || this.innerHTML === "Semi-Annually | $37.95" || this.innerHTML === "Semi-Annually | $37.95") {
|
||||
document.getElementById("selected-text").innerHTML = "Includes free shipping!";
|
||||
} else if (this.innerHTML === "Monthly | $27.95" || this.innerHTML === "Monthly | $37.95" || this.innerHTML === "Monthly | $39.95" || this.innerHTML === "Monthly | $47.95" || this.innerHTML === "Monthly | $34.95" ) {
|
||||
document.getElementById("selected-text").innerHTML = "";
|
||||
|
||||
}
|
||||
}
|
||||
var currentProductID = {{ product.id }};
|
||||
$(".wearing-style a, .connection-types a, .standardVsAutoAlert a").each(function () {
|
||||
var ele = $(this);
|
||||
if (ele.data("product-id") == currentProductID || $("h1").text().trim() === $(this).text().trim()) {
|
||||
ele.html("<i class='bi bi-circle-fill'></i>" + ele.html());
|
||||
} else {
|
||||
ele.html("<i class='bi bi-circle'></i>" + ele.html());
|
||||
}
|
||||
h.click();
|
||||
});
|
||||
c.setAttribute("data-price", selElmnt.options[j].getAttribute("data-price"));
|
||||
b.appendChild(c);
|
||||
}
|
||||
x[i].appendChild(b);
|
||||
a.addEventListener("click", function(e) {
|
||||
e.stopPropagation();
|
||||
closeAllSelect(this);
|
||||
var items = this.nextElementSibling;
|
||||
items.classList.toggle("select-hide");
|
||||
this.classList.toggle("select-arrow-active");
|
||||
});
|
||||
|
||||
// Close the dropdown when clicking outside of it
|
||||
document.addEventListener("click", function(e) {
|
||||
closeAllSelect(null);
|
||||
});
|
||||
}
|
||||
|
||||
function closeAllSelect(elmnt) {
|
||||
var x = document.getElementsByClassName("select-items");
|
||||
var y = document.getElementsByClassName("select-selected");
|
||||
for (var i = 0; i < x.length; i++) {
|
||||
if (y[i] && (elmnt !== y[i].parentNode)) {
|
||||
x[i].classList.add("select-hide");
|
||||
y[i].classList.remove("select-arrow-active");
|
||||
var x, i, j, l, ll, selElmnt, a, b, c;
|
||||
x = document.getElementsByClassName("custom-select");
|
||||
l = x.length;
|
||||
for (i = 0; i < l; i++) {
|
||||
selElmnt = x[i].getElementsByTagName("select")[0];
|
||||
ll = selElmnt.length;
|
||||
a = document.createElement("DIV");
|
||||
a.setAttribute("class", "select-selected");
|
||||
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
|
||||
x[i].appendChild(a);
|
||||
b = document.createElement("DIV");
|
||||
b.setAttribute("class", "select-items select-hide");
|
||||
for (j = 0; j < ll; j++) {
|
||||
|
||||
c = document.createElement("DIV");
|
||||
c.innerHTML = selElmnt.options[j].innerHTML;
|
||||
c.addEventListener("click", function (e) {
|
||||
var y, k, s, h, sl, yl;
|
||||
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
|
||||
sl = s.length;
|
||||
h = this.parentNode.previousSibling;
|
||||
for (k = 0; k < sl; k++) {
|
||||
if (s.options[k].innerHTML == this.innerHTML) {
|
||||
s.selectedIndex = k;
|
||||
h.innerHTML = this.innerHTML;
|
||||
if (this.innerHTML === "Annually | $19.95" || this.innerHTML === "Annually | $29.95" || this.innerHTML === "Annually | $34.95" || this.innerHTML === "Annually | $39.95") {
|
||||
document.getElementById("selected-text").innerHTML = "Includes free shipping and lockbox! ";
|
||||
} else if (this.innerHTML === "Semi-Annually | $24.95" || this.innerHTML === "Semi-Annually | $34.95" || this.innerHTML === "Semi-Annually | $44.95" || this.innerHTML === "Semi-Annually | $37.95" || this.innerHTML === "Semi-Annually | $37.95") {
|
||||
document.getElementById("selected-text").innerHTML = "Includes free shipping!";
|
||||
} else if (this.innerHTML === "Monthly | $27.95" || this.innerHTML === "Monthly | $37.95" || this.innerHTML === "Monthly | $39.95" || this.innerHTML === "Monthly | $47.95" || this.innerHTML === "Monthly | $34.95") {
|
||||
document.getElementById("selected-text").innerHTML = "";
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
h.click();
|
||||
});
|
||||
c.setAttribute("data-price", selElmnt.options[j].getAttribute("data-price"));
|
||||
b.appendChild(c);
|
||||
}
|
||||
x[i].appendChild(b);
|
||||
a.addEventListener("click", function (e) {
|
||||
e.stopPropagation();
|
||||
closeAllSelect(this);
|
||||
var items = this.nextElementSibling;
|
||||
items.classList.toggle("select-hide");
|
||||
this.classList.toggle("select-arrow-active");
|
||||
});
|
||||
|
||||
// Close the dropdown when clicking outside of it
|
||||
document.addEventListener("click", function (e) {
|
||||
closeAllSelect(null);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function closeAllSelect(elmnt) {
|
||||
var x = document.getElementsByClassName("select-items");
|
||||
var y = document.getElementsByClassName("select-selected");
|
||||
for (var i = 0; i < x.length; i++) {
|
||||
if (y[i] && (elmnt !== y[i].parentNode)) {
|
||||
x[i].classList.add("select-hide");
|
||||
y[i].classList.remove("select-arrow-active");
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener("click", closeAllSelect);
|
||||
|
||||
document.addEventListener("click", closeAllSelect);
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
{{{ flex-content }}}
|
||||
</script>
|
||||
@@ -1,16 +1,71 @@
|
||||
<!-- Testimonial BEGIN -->
|
||||
<section class="testimonial-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 d-flex justify-content-center mb-4">
|
||||
<img class="testimonial-img border-color-{{border_color}}" src="{{image.url}}" alt="{{image.alt}}" />
|
||||
</div>
|
||||
<div class="col-lg-8 my-auto testimonial-inner-content-wrapper">
|
||||
<h4 class="text-white mb-4 testimonial-title">{{header}}</h4>
|
||||
<div class="testimonial-copy">{{{copy}}}</div>
|
||||
<h5 class="text-white mt-4 testimonial-quote-attribution">{{quote_attribution}}</h5>
|
||||
</div>
|
||||
<section class="testimonial-slice-container p-relative">
|
||||
<div class="container p-relative rounded bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 d-flex justify-content-center mb-4">
|
||||
<div class="g-sky-border p-absolute">
|
||||
<img class="testimonial-img" src="{{image.url}}" alt="{{image.alt}}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8 my-auto testimonial-inner-content-wrapper">
|
||||
<svg width="35" height="29" viewBox="0 0 35 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.93 28.57V18.49C19.93 13.99 21.16 10.06 23.62 6.7C26.08 3.28 29.86 1.18 34.96 0.399999V6.97C32.02 7.33 30.07 8.29 29.11 9.85C28.15 11.41 27.67 13.48 27.67 16.06L22.36 14.98H34.78V28.57H19.93ZM0.4 28.57V18.49C0.4 13.99 1.63 10.06 4.09 6.7C6.55 3.28 10.33 1.18 15.43 0.399999V6.97C12.49 7.33 10.54 8.29 9.58 9.85C8.62 11.41 8.14 13.48 8.14 16.06L2.83 14.98H15.25V28.57H0.4Z" fill="white" />
|
||||
</svg>
|
||||
|
||||
<h3 class="fw-bold f-navy mb-2">{{header}}</h3>
|
||||
<div class="f-black">{{{copy}}}</div>
|
||||
<p class="f-black mt-4">
|
||||
{{quote_attribution}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-absolute sonar">
|
||||
<svg width="614" height="1023" viewBox="0 0 614 1023" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.4" clip-path="url(#clip0_252_476)">
|
||||
<path opacity="0.72" d="M511.505 322.371C537.093 322.371 561.87 327.405 585.129 337.235C607.659 346.763 627.901 360.42 645.24 377.77C662.58 395.11 676.237 415.352 685.776 437.882C695.616 461.13 700.64 485.917 700.64 511.505C700.64 537.094 695.605 561.871 685.776 585.129C676.248 607.659 662.59 627.901 645.24 645.24C627.901 662.58 607.659 676.238 585.129 685.776C561.881 695.616 537.093 700.64 511.505 700.64C485.917 700.64 461.14 695.606 437.882 685.776C415.352 676.248 395.11 662.59 377.77 645.24C360.43 627.901 346.773 607.659 337.235 585.129C327.394 561.881 322.37 537.094 322.37 511.505C322.37 485.917 327.405 461.14 337.235 437.882C346.763 415.352 360.42 395.11 377.77 377.77C395.11 360.431 415.352 346.773 437.882 337.235C461.13 327.395 485.917 322.371 511.505 322.371Z" fill="url(#paint0_linear_252_476)" fill-opacity="0.8" />
|
||||
<path opacity="0.62" d="M511.505 278.933C383.262 278.933 278.933 383.262 278.933 511.505C278.933 639.748 383.262 744.078 511.505 744.078C639.748 744.078 744.078 639.748 744.078 511.505C744.078 383.262 639.748 278.933 511.505 278.933ZM511.505 268.646C544.333 268.646 576.152 275.095 606.036 287.733C634.963 299.965 660.947 317.502 683.227 339.783C705.508 362.063 723.035 388.047 735.278 416.974C747.916 446.858 754.365 478.677 754.365 511.505C754.365 544.333 747.916 576.152 735.278 606.036C723.045 634.963 705.508 660.947 683.227 683.227C660.947 705.508 634.963 723.035 606.036 735.278C576.152 747.916 544.333 754.365 511.505 754.365C478.677 754.365 446.858 747.916 416.974 735.278C388.047 723.045 362.063 705.508 339.783 683.227C317.502 660.947 299.976 634.963 287.733 606.036C275.095 576.152 268.646 544.333 268.646 511.505C268.646 478.677 275.095 446.858 287.733 416.974C299.965 388.047 317.502 362.063 339.783 339.783C362.063 317.502 388.047 299.976 416.974 287.733C446.858 275.095 478.677 268.646 511.505 268.646Z" fill="url(#paint1_linear_252_476)" fill-opacity="0.8" />
|
||||
<path opacity="0.53" d="M511.505 224.75C353.388 224.75 224.761 353.388 224.761 511.495C224.761 669.601 353.399 798.239 511.505 798.239C669.612 798.239 798.25 669.601 798.25 511.495C798.25 353.388 669.612 224.75 511.505 224.75ZM511.505 214.91C551.583 214.91 590.434 222.774 626.954 238.22C662.278 253.157 694.004 274.564 721.225 301.785C748.446 329.007 769.843 360.732 784.79 396.056C800.236 432.577 808.1 471.427 808.1 511.505C808.1 551.583 800.236 590.434 784.79 626.954C769.853 662.278 748.446 694.004 721.225 721.225C694.004 748.446 662.278 769.843 626.954 784.79C590.434 800.236 551.583 808.1 511.505 808.1C471.427 808.1 432.577 800.236 396.056 784.79C360.732 769.853 329.007 748.446 301.785 721.225C274.564 694.004 253.168 662.278 238.22 626.954C222.774 590.434 214.91 551.583 214.91 511.505C214.91 471.427 222.774 432.577 238.22 396.056C253.157 360.732 274.564 329.007 301.785 301.785C329.007 274.564 360.732 253.168 396.056 238.22C432.577 222.774 471.427 214.91 511.505 214.91Z" fill="url(#paint2_linear_252_476)" fill-opacity="0.8" />
|
||||
<path opacity="0.43" d="M511.505 170.578C323.515 170.578 170.578 323.515 170.578 511.505C170.578 699.496 323.515 852.432 511.505 852.432C699.496 852.432 852.432 699.496 852.432 511.505C852.432 323.515 699.496 170.578 511.505 170.578ZM511.505 161.185C558.823 161.185 604.705 170.464 647.862 188.719C689.583 206.37 727.05 231.636 759.212 263.798C791.374 295.961 816.64 333.428 834.292 375.149C852.547 418.306 861.825 464.188 861.825 511.505C861.825 558.823 852.547 604.705 834.292 647.862C816.64 689.583 791.374 727.05 759.212 759.212C727.05 791.374 689.583 816.64 647.862 834.292C604.705 852.547 558.823 861.825 511.505 861.825C464.188 861.825 418.306 852.547 375.149 834.292C333.428 816.64 295.961 791.374 263.798 759.212C231.636 727.05 206.37 689.583 188.719 647.862C170.464 604.705 161.185 558.823 161.185 511.505C161.185 464.188 170.464 418.306 188.719 375.149C206.37 333.428 231.636 295.961 263.798 263.798C295.961 231.636 333.428 206.37 375.149 188.719C418.306 170.464 464.188 161.185 511.505 161.185Z" fill="url(#paint3_linear_252_476)" fill-opacity="0.8" />
|
||||
<path opacity="0.34" d="M511.505 116.406C293.651 116.406 116.406 293.651 116.406 511.505C116.406 729.359 293.651 906.605 511.505 906.605C729.359 906.605 906.605 729.359 906.605 511.505C906.605 293.651 729.359 116.406 511.505 116.406ZM511.505 107.46C566.073 107.46 618.986 118.153 668.779 139.217C716.898 159.573 760.107 188.708 797.21 225.801C834.302 262.893 863.448 306.112 883.794 354.231C904.857 404.024 915.55 456.938 915.55 511.505C915.55 566.073 904.857 618.986 883.794 668.779C863.438 716.898 834.302 760.107 797.21 797.209C760.117 834.302 716.898 863.448 668.779 883.794C618.986 904.857 566.073 915.55 511.505 915.55C456.938 915.55 404.024 904.857 354.231 883.794C306.113 863.437 262.904 834.302 225.801 797.209C188.708 760.117 159.563 716.898 139.206 668.779C118.143 618.986 107.45 566.073 107.45 511.505C107.45 456.938 118.143 404.024 139.206 354.231C159.563 306.112 188.698 262.904 225.801 225.801C262.893 188.708 306.113 159.562 354.231 139.217C404.024 118.153 456.938 107.46 511.505 107.46Z" fill="url(#paint4_linear_252_476)" fill-opacity="0.8" />
|
||||
<path opacity="0.24" d="M511.505 62.2231C263.778 62.2231 62.2336 263.767 62.2336 511.495C62.2336 759.222 263.778 960.766 511.505 960.766C759.233 960.766 960.777 759.222 960.777 511.495C960.777 263.767 759.233 62.2231 511.505 62.2231ZM511.505 53.7249C573.312 53.7249 633.268 65.8325 689.697 89.7044C744.213 112.765 793.163 145.77 835.207 187.803C877.241 229.837 910.256 278.798 933.306 333.313C957.178 389.742 969.285 449.698 969.285 511.495C969.285 573.291 957.178 633.257 933.306 689.676C910.245 744.192 877.241 793.142 835.207 835.186C793.174 877.22 744.213 910.235 689.697 933.285C633.268 957.157 573.312 969.265 511.505 969.265C449.698 969.265 389.743 957.157 333.313 933.285C278.798 910.224 229.847 877.22 187.803 835.186C145.77 793.153 112.755 744.192 89.7046 689.676C65.8326 633.247 53.725 573.291 53.725 511.495C53.725 449.698 65.8326 389.732 89.7046 333.313C112.765 278.798 145.77 229.847 187.803 187.803C229.837 145.77 278.798 112.755 333.313 89.7044C389.743 65.8325 449.698 53.7249 511.505 53.7249Z" fill="url(#paint5_linear_252_476)" fill-opacity="0.8" />
|
||||
<path opacity="0.15" d="M511.505 8.05094C233.893 8.05094 8.05094 233.893 8.05094 511.505C8.05094 789.117 233.893 1014.96 511.505 1014.96C789.117 1014.96 1014.96 789.117 1014.96 511.505C1014.96 233.893 789.107 8.05094 511.505 8.05094ZM511.505 1023C442.459 1023 375.471 1009.48 312.406 982.797C251.493 957.032 196.79 920.158 149.816 873.184C102.842 826.21 65.9574 771.507 40.2027 710.594C13.5223 647.539 0 580.552 0 511.505C0 442.459 13.5223 375.471 40.2027 312.406C65.9678 251.493 102.842 196.79 149.816 149.816C196.79 102.842 251.493 65.9574 312.406 40.2027C375.461 13.5223 442.448 0 511.505 0C580.562 0 647.539 13.5223 710.605 40.2027C771.517 65.9678 826.22 102.842 873.194 149.816C920.168 196.79 957.053 251.493 982.808 312.406C1009.48 375.471 1023.01 442.459 1023.01 511.505C1023.01 580.552 1009.49 647.539 982.808 710.605C957.043 771.517 920.168 826.22 873.194 873.194C826.22 920.168 771.517 957.053 710.605 982.808C647.539 1009.48 580.552 1023.01 511.505 1023.01V1023Z" fill="url(#paint6_linear_252_476)" fill-opacity="0.8" />
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_252_476" x1="511.505" y1="322.371" x2="511.505" y2="700.64" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E8F4FF" />
|
||||
<stop offset="1" stop-color="#9BCDFF" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_252_476" x1="511.505" y1="268.646" x2="511.505" y2="754.365" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E8F4FF" />
|
||||
<stop offset="1" stop-color="#9BCDFF" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_252_476" x1="511.505" y1="214.91" x2="511.505" y2="808.1" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E8F4FF" />
|
||||
<stop offset="1" stop-color="#9BCDFF" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_252_476" x1="511.505" y1="161.185" x2="511.505" y2="861.825" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E8F4FF" />
|
||||
<stop offset="1" stop-color="#9BCDFF" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_252_476" x1="511.5" y1="107.46" x2="511.5" y2="915.55" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E8F4FF" />
|
||||
<stop offset="1" stop-color="#9BCDFF" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_252_476" x1="511.505" y1="53.7249" x2="511.505" y2="969.265" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E8F4FF" />
|
||||
<stop offset="1" stop-color="#9BCDFF" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_252_476" x1="511.505" y1="0" x2="511.505" y2="1023.01" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E8F4FF" />
|
||||
<stop offset="1" stop-color="#9BCDFF" />
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_252_476">
|
||||
<rect width="1023" height="1023" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Testimonial END -->
|
||||
36
wp/wp-content/themes/medicalalert/tpl/video_copy.tpl
Normal file
36
wp/wp-content/themes/medicalalert/tpl/video_copy.tpl
Normal file
@@ -0,0 +1,36 @@
|
||||
<!-- Col2 Media Highlights BEGIN -->
|
||||
<section class="video-copy-slice-container mb-5 bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}} {{text_color}} p-relative">
|
||||
<div class="p-absolute sonar-svg-right-big">
|
||||
<svg width="1182" height="1289" viewBox="0 0 1182 1289" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_252_455)">
|
||||
<path opacity="0.72" d="M644.507 406.193C676.748 406.193 707.968 412.537 737.274 424.922C765.662 436.928 791.167 454.136 813.015 475.998C834.864 497.846 852.072 523.351 864.091 551.74C876.49 581.032 882.82 612.265 882.82 644.507C882.82 676.748 876.476 707.968 864.091 737.274C852.085 765.662 834.877 791.167 813.015 813.015C791.167 834.864 765.662 852.072 737.274 864.091C707.981 876.49 676.748 882.82 644.507 882.82C612.265 882.82 581.045 876.476 551.74 864.091C523.351 852.085 497.846 834.877 475.998 813.015C454.149 791.167 436.941 765.662 424.922 737.274C412.523 707.981 406.193 676.748 406.193 644.507C406.193 612.265 412.537 581.045 424.922 551.74C436.928 523.351 454.136 497.846 475.998 475.998C497.846 454.149 523.351 436.941 551.74 424.922C581.032 412.523 612.265 406.193 644.507 406.193Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.62" d="M644.507 351.461C482.918 351.461 351.461 482.918 351.461 644.506C351.461 806.095 482.918 937.552 644.507 937.552C806.095 937.552 937.552 806.095 937.552 644.506C937.552 482.918 806.095 351.461 644.507 351.461ZM644.507 338.499C685.87 338.499 725.963 346.625 763.617 362.549C800.066 377.962 832.806 400.059 860.88 428.133C888.954 456.207 911.038 488.947 926.464 525.396C942.389 563.05 950.514 603.143 950.514 644.506C950.514 685.87 942.389 725.963 926.464 763.617C911.051 800.066 888.954 832.806 860.88 860.88C832.806 888.954 800.066 911.038 763.617 926.464C725.963 942.388 685.87 950.514 644.507 950.514C603.143 950.514 563.05 942.388 525.396 926.464C488.947 911.051 456.207 888.954 428.133 860.88C400.059 832.806 377.975 800.066 362.549 763.617C346.625 725.963 338.499 685.87 338.499 644.506C338.499 603.143 346.625 563.05 362.549 525.396C377.962 488.947 400.059 456.207 428.133 428.133C456.207 400.059 488.947 377.975 525.396 362.549C563.05 346.625 603.143 338.499 644.507 338.499Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.53" d="M644.507 283.19C445.276 283.19 283.203 445.276 283.203 644.493C283.203 843.711 445.289 1005.8 644.507 1005.8C843.724 1005.8 1005.81 843.711 1005.81 644.493C1005.81 445.276 843.724 283.19 644.507 283.19ZM644.507 270.791C695.005 270.791 743.958 280.699 789.974 300.162C834.484 318.983 874.458 345.956 908.758 380.256C943.057 414.555 970.017 454.529 988.851 499.039C1008.31 545.055 1018.22 594.008 1018.22 644.507C1018.22 695.005 1008.31 743.958 988.851 789.974C970.03 834.484 943.057 874.458 908.758 908.758C874.458 943.057 834.484 970.017 789.974 988.851C743.958 1008.31 695.005 1018.22 644.507 1018.22C594.008 1018.22 545.055 1008.31 499.039 988.851C454.529 970.03 414.555 943.057 380.256 908.758C345.956 874.458 318.996 834.484 300.162 789.974C280.699 743.958 270.791 695.005 270.791 644.507C270.791 594.008 280.699 545.055 300.162 499.039C318.983 454.529 345.956 414.555 380.256 380.256C414.555 345.956 454.529 318.996 499.039 300.162C545.055 280.699 594.008 270.791 644.507 270.791Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.43" d="M644.507 214.932C407.635 214.932 214.932 407.635 214.932 644.507C214.932 881.378 407.635 1074.08 644.507 1074.08C881.378 1074.08 1074.08 881.378 1074.08 644.507C1074.08 407.635 881.378 214.932 644.507 214.932ZM644.507 203.097C704.127 203.097 761.94 214.788 816.318 237.789C868.888 260.031 916.097 291.866 956.622 332.391C997.147 372.916 1028.98 420.125 1051.22 472.695C1074.23 527.073 1085.92 584.886 1085.92 644.507C1085.92 704.128 1074.23 761.94 1051.22 816.318C1028.98 868.888 997.147 916.097 956.622 956.622C916.097 997.147 868.888 1028.98 816.318 1051.22C761.94 1074.23 704.127 1085.92 644.507 1085.92C584.886 1085.92 527.073 1074.23 472.695 1051.22C420.125 1028.98 372.916 997.147 332.391 956.622C291.866 916.097 260.031 868.888 237.789 816.318C214.787 761.94 203.097 704.128 203.097 644.507C203.097 584.886 214.787 527.073 237.789 472.695C260.031 420.125 291.866 372.916 332.391 332.391C372.916 291.866 420.125 260.031 472.695 237.789C527.073 214.788 584.886 203.097 644.507 203.097Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.34" d="M644.507 146.674C370.006 146.674 146.674 370.006 146.674 644.507C146.674 919.007 370.006 1142.34 644.507 1142.34C919.007 1142.34 1142.34 919.007 1142.34 644.507C1142.34 370.006 919.007 146.674 644.507 146.674ZM644.507 135.402C713.263 135.402 779.935 148.875 842.675 175.416C903.305 201.065 957.749 237.776 1004.5 284.513C1051.24 331.251 1087.96 385.708 1113.6 446.338C1140.14 509.078 1153.61 575.75 1153.61 644.507C1153.61 713.263 1140.14 779.935 1113.6 842.675C1087.95 903.305 1051.24 957.749 1004.5 1004.5C957.762 1051.24 903.305 1087.96 842.675 1113.6C779.935 1140.14 713.263 1153.61 644.507 1153.61C575.75 1153.61 509.078 1140.14 446.338 1113.6C385.708 1087.95 331.264 1051.24 284.513 1004.5C237.776 957.762 201.052 903.305 175.403 842.675C148.862 779.935 135.389 713.263 135.389 644.507C135.389 575.75 148.862 509.078 175.403 446.338C201.052 385.708 237.763 331.264 284.513 284.513C331.251 237.776 385.708 201.052 446.338 175.416C509.078 148.875 575.75 135.402 644.507 135.402Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.24" d="M644.507 78.4024C332.365 78.4024 78.4155 332.352 78.4155 644.493C78.4155 956.635 332.365 1210.58 644.507 1210.58C956.648 1210.58 1210.6 956.635 1210.6 644.493C1210.6 332.352 956.648 78.4024 644.507 78.4024ZM644.507 67.6945C722.385 67.6945 797.93 82.9503 869.032 113.029C937.723 142.086 999.401 183.673 1052.38 236.636C1105.34 289.599 1146.94 351.29 1175.98 419.981C1206.06 491.083 1221.32 566.628 1221.32 644.493C1221.32 722.358 1206.06 797.917 1175.98 869.006C1146.93 937.696 1105.34 999.375 1052.38 1052.35C999.414 1105.31 937.723 1146.91 869.032 1175.96C797.93 1206.04 722.385 1221.29 644.507 1221.29C566.628 1221.29 491.083 1206.04 419.981 1175.96C351.29 1146.9 289.612 1105.31 236.636 1052.35C183.673 999.388 142.073 937.696 113.029 869.006C82.9503 797.904 67.6945 722.358 67.6945 644.493C67.6945 566.628 82.9503 491.07 113.029 419.981C142.086 351.29 183.673 289.612 236.636 236.636C289.599 183.673 351.29 142.073 419.981 113.029C491.083 82.9503 566.628 67.6945 644.507 67.6945Z" fill="white" fill-opacity="0.3" />
|
||||
<path opacity="0.15" d="M644.507 10.1443C294.71 10.1443 10.1443 294.71 10.1443 644.507C10.1443 994.303 294.71 1278.87 644.507 1278.87C994.303 1278.87 1278.87 994.303 1278.87 644.507C1278.87 294.71 994.29 10.1443 644.507 10.1443ZM644.507 1289C557.506 1289 473.101 1271.96 393.637 1238.34C316.886 1205.88 247.96 1159.42 188.771 1100.23C129.583 1041.04 83.1076 972.114 50.6562 895.363C17.0383 815.912 0 731.507 0 644.507C0 557.506 17.0383 473.101 50.6562 393.637C83.1207 316.886 129.583 247.96 188.771 188.771C247.96 129.583 316.886 83.1076 393.637 50.6562C473.088 17.0383 557.493 0 644.507 0C731.52 0 815.912 17.0383 895.376 50.6562C972.127 83.1207 1041.05 129.583 1100.24 188.771C1159.43 247.96 1205.91 316.886 1238.36 393.637C1271.96 473.101 1289.01 557.506 1289.01 644.507C1289.01 731.507 1271.97 815.912 1238.36 895.376C1205.89 972.127 1159.43 1041.05 1100.24 1100.24C1041.05 1159.43 972.127 1205.91 895.376 1238.36C815.912 1271.96 731.507 1289.01 644.507 1289.01V1289Z" fill="white" fill-opacity="0.3" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_252_455">
|
||||
<rect width="1289" height="1289" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h2 class="text-center">{{header}}</h2>
|
||||
<div class="video-copy my-4 mx-auto f-white">
|
||||
{{{video_copy}}}
|
||||
</div>
|
||||
<div class="ratio ratio-16x9 m-auto">
|
||||
<iframe src="https://player.vimeo.com/video/{{video}}" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Col2 Media Highlights END -->
|
||||
Reference in New Issue
Block a user