Untitled
unknown
plain_text
a year ago
3.7 kB
4
Indexable
Never
var eg_logos = ` <div class="eg-container"> <div class="eg_logos__group"> <div class="eg_logos__item"> <img src="https://www.altium.com/sites/default/files/media_icon/2022-01/ArduinoLogo_%C2%AE.svg" alt="Arduino logo" /> </div> <div class="eg_logos__item"> <img src="//cdn-static.altium.com/sites/default/files/media_icon/2021-07/bae_color.svg" alt="BAE" /> </div> <div class="eg_logos__item"> <img src="//cdn-static.altium.com/sites/default/files/media_icon/2021-07/leicamicrosystems_color.svg" alt="Leica" /> </div> <div class="eg_logos__item"> <img src="//cdn-static.altium.com/sites/default/files/media_icon/2021-07/microsoft_color.svg" alt="Microsoft" /> </div> <div class="eg_logos__item"> <img src="//cdn-static.altium.com/sites/default/files/media_icon/2021-07/lyft_color.svg" alt="Lyft"/> </div> <div class="eg_logos__item"> <img src="//cdn-static.altium.com/sites/default/files/media_icon/2021-07/amazon_color.svg" alt="Amazon" /> </div> <div class="eg_logos__item"> <img src="//cdn-static.altium.com/sites/default/files/media_icon/2021-07/facebook_color.svg" alt="Facebook" /> </div> <div class="eg_logos__item"> <img src="//cdn-static.altium.com/sites/default/files/media_icon/2021-07/dell_color.svg" alt="Dell" /> </div> </div> </div ` document.querySelector("body article > section > div.l-container > div.s-hero__in > div.s-hero__btn-wrap").insertAdjacentHTML("afterend", eg_logos) .eg-container{ position: relative; margin-right: auto; margin-left: -8% !important; width: 80%; padding-top: 10px; } .eg_logos__group{ display: flex; flex-wrap: wrap !important; align-items: center; justify-content: center; } .eg_logos__item{ max-width: 100px; flex: 1 0 100px; } .eg_logos__item img { display: block; margin: 0 auto; filter: grayscale(100%); opacity: 0.6; width: 70px; transition: filter .3s,opacity .3s; } .eg_logos__item img:hover { filter: grayscale(0); opacity: 1; cursor: pointer; } @media screen and (max-width: 767px) { .eg-container{ margin-right: auto; margin-left: auto !important; width: 100%; padding-block: 35px; } .eg_logos__group{ justify-content: center !important; } .eg_logos__item{ padding: 8px; } .eg_logos__item{ max-width: 100px; flex: 1 0 90px; } } @media (min-width: 768px) and (max-width: 824px){ .eg-container { position: relative; margin-right: auto; width: 55%; padding-block: 30px; } .eg_logos__item{ max-width: 69px; flex: 1 0 100px; } .eg_logos__item img { display: block; margin: 0 auto; width: 55px; padding: 2px; } } @media (min-width: 825px) and (max-width: 1025px){ .eg-container { position: relative; margin-right: auto; width: 58%; padding-block: 30px; } .eg_logos__item{ max-width: 80px; flex: 1 0 100px; } .eg_logos__item img { display: block; margin: 0 auto; width: 60px; } }