Untitled
unknown
plain_text
2 years ago
6.9 kB
4
Indexable
<style> .eg-overview-container { padding: 0 30px 30px; } .eg-overview-wrapper { width: 100%; max-width: 1170px; margin-inline: auto; } .eg-callouts-container { display: flex; gap: 20px; } .eg-callouts img { width: 56px; height: 56px; display: block; object-fit: cover; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); } .eg-callouts { position: relative; border: 2px solid #e1efff; padding: 0 16px 16px 16px; background: rgb(153 204 238 / 14%); flex:1; } .eg-callouts .eg-title { font-weight: 600; font-size: 20px; margin: 38px 0 8px 0; } .eg-callouts .eg-info { font-size: 15px; line-height: 1.5; } .eg-callouts a svg { width: 9px; fill: #1f3d5c; height: 9px; } .eg-callouts a { font-size: 13px; display: flex; align-items: center; margin-block: 7px; justify-content: flex-end; gap: 5px; color: #1f3d5c; font-weight: 600; letter-spacing: 0.4px; } .eg-callouts::before { content: ''; position: absolute; width: 66px; height: 66px; border-radius: 50%; background: white; top: 0; left: 50%; transform: translate(-50%, -50%); } .eg-overview-wrapper>.eg-heading { font-size: 30px; font-weight: 600; text-align: center; margin-bottom: 40px; } @media(max-width: 1099px) { .eg-callouts { flex-basis: 46%; } .eg-callouts-container { flex-wrap: wrap; justify-content: center; gap: 36px; } } @media(max-width: 767px) { .eg-callouts { flex-basis: 100%; max-width: 500px; } .eg-callouts-container { gap: 50px; } .eg-overview-wrapper>.eg-heading { margin-bottom: 50px; } } </style> (function() { try { /* main variables */ var debug = 0; var variation_name = ""; /* all Pure helper functions */ // selector would be the parent div where your are changing css/js function waitForElement(selector, trigger, delayInterval, delayTimeout) { var interval = setInterval(function() { if ( document && document.querySelector(selector) && document.querySelectorAll(selector).length > 0 ) { clearInterval(interval); trigger(); } }, delayInterval); setTimeout(function() { clearInterval(interval); }, delayTimeout); } let egGreaterthanSvg = `<svg aria-hidden="true" focusable="false" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="103.536px" height="103.536px" viewBox="0 0 103.536 103.536" style="enable-background:new 0 0 103.536 103.536;" xml:space="preserve"> <path d="M0.65,91.928c1.221,2.701,3.881,4.3,6.665,4.3c1.006,0,2.029-0.209,3.006-0.65l88.917-40.195 c2.688-1.216,4.381-3.925,4.295-6.873c-0.085-2.948-1.934-5.554-4.687-6.609L9.929,7.794C6.17,6.352,1.933,8.23,0.489,12.001 c-1.447,3.769,0.438,7.995,4.207,9.44l72.569,27.834L4.299,82.255C0.62,83.92-1.012,88.249,0.65,91.928z"/> </svg>`; let egOverviewHTML = ` <section class="eg-overview-container"> <div class="eg-overview-wrapper"> <h2 class="eg-heading">Top Services</h2> <div class="eg-callouts-container"> <!--Certified Translation--> <div class="eg-callouts"> <img src="https://thespanishgroup.org/wp-content/uploads/2020/08/Group-8.png" alt="callout-icon"> <h3 class="eg-title">Certified Translation</h3> <p class="eg-info">Affordable certified translations for any type of immigration process in over 90 languages. Same-day delivery available. USCIS guaranteed approval.</p> <a href="https://thespanishgroup.org/translations/certified-translations-for-official-civil-documents/">Learn more ${egGreaterthanSvg}</a> </div> <!--Professional Translation--> <div class="eg-callouts"> <img src="https://thespanishgroup.org/wp-content/uploads/2020/08/Group-9.png" alt="callout-icon"> <h3 class="eg-title">Translation for businesses (Professional Translation)</h3> <p class="eg-info"> The best option to translate business documents such as employee manuals, product descriptions, financial statements, advertising materials and more.</p> <a href="https://thespanishgroup.org/translations/spanish-document-translations/">Learn more ${egGreaterthanSvg}</a> </div> <!--Legal Translation--> <div class="eg-callouts"> <img src="https://thespanishgroup.org/wp-content/uploads/2020/08/Group-7.png" alt="callout-icon"> <h3 class="eg-title">Legal Translation</h3> <p class="eg-info">Trusted by more than 10 000 law firms. Our field-specialized translators guarantee a high-quality and accurate translation.</p> <a href="https://thespanishgroup.org/translations/legal-translation-services/">Learn more ${egGreaterthanSvg}</a> </div> <!--90+ Languages Supported--> <div class="eg-callouts"> <img src="https://thespanishgroup.org/translations/wp-content/themes/translations/img/global-icon.png" alt="callout-icon"> <h3 class="eg-title">90+ Languages Supported</h3> <p class="eg-info">No matter the language, all translations are carefully examined and checked with the highest quality standards.</p> <a href="https://thespanishgroup.org/translations/document-translations-in-90-plus-languages/">Learn more ${egGreaterthanSvg}</a> </div> </div> </div> </section>`; /* Variation functions */ function init() { document.querySelector("section#processinfo").insertAdjacentHTML("afterend",egOverviewHTML); } /* Initialize variation */ waitForElement("section#processinfo", init, 50, 15000); } catch (e) { if (debug) console.log(e, "error in Test" + variation_name); } })();
Editor is loading...