Last active
October 22, 2021 15:36
-
-
Save Fprince333/22bcec9a5f77e2e6609e24a04ae1576f to your computer and use it in GitHub Desktop.
#HereToBeHeard Inline HtML
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| main { | |
| margin-bottom: 0; | |
| } | |
| #section-2--block-3 { | |
| text-align: center; | |
| } | |
| #section-2--block-3 | |
| > div | |
| > div | |
| > div | |
| > div.block.block-layout-builder.block-field-blockblock-contentcategory-cardsfield-text-formatted | |
| > div | |
| > div | |
| > p { | |
| font-size: 1rem; | |
| line-height: 28px; | |
| margin: 1.5em 0; | |
| font-family: marscentrano1-book; | |
| color: #3c3c3c; | |
| font-weight: 400; | |
| } | |
| #section-2--block-4 > div > div > div:nth-child(10) { | |
| display: none; | |
| } | |
| .block-layout-builder a { | |
| color: #0000a0; | |
| text-decoration: underline; | |
| } | |
| .block-layout-builder a:hover { | |
| color: #00d7b9; | |
| } | |
| #green-background a:hover { | |
| color: #ffffff; | |
| } | |
| .btn { | |
| font-family: marscentrano1-bold; | |
| color: #fff !important; | |
| background-color: #0000a0; | |
| border-color: #0000a0; | |
| border-radius: 0; | |
| text-decoration: none !important; | |
| min-width: 210px; | |
| min-height: 50px; | |
| line-height: normal; | |
| padding: 15px; | |
| white-space: normal; | |
| } | |
| .btn:hover { | |
| color: #fff !important; | |
| background-color: #00d7b9; | |
| border-color: #00d7b9; | |
| } | |
| .mars-component .btn { | |
| height: auto; | |
| } | |
| .breadcrumb { | |
| margin-bottom: 0; | |
| } | |
| .no-margin { | |
| margin: 0 !important; | |
| } | |
| .no-margin-bottom { | |
| margin-bottom: 0 !important; | |
| } | |
| .p-padding { | |
| padding-bottom: 20px; | |
| } | |
| .thumbnail-icon { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .thumbnail-icon img { | |
| height: 150px !important; | |
| width: auto !important; | |
| } | |
| .logo-row { | |
| margin-top: 0; | |
| } | |
| .logo-row img { | |
| width: auto !important; | |
| } | |
| .white-text { | |
| color: #ffffff !important; | |
| } | |
| .blue-text { | |
| color: #0000a0 !important; | |
| } | |
| .green-text { | |
| color: #00d7b9 !important; | |
| } | |
| .green-background { | |
| background-color: #00d7b9 !important; | |
| } | |
| .mars-component p { | |
| margin-bottom: 10px; | |
| margin-top: 0px; | |
| } | |
| .mars-component p a:not(.btn) { | |
| display: inline; | |
| } | |
| .mars-component .videoPoster { | |
| width: 101%; | |
| height: 101%; | |
| } | |
| .embed-responsive .embed-responsive-item, | |
| .embed-responsive embed, | |
| .embed-responsive iframe, | |
| .embed-responsive object, | |
| .embed-responsive video { | |
| border: 1px solid rgb(0, 215, 185); | |
| } | |
| .component--category-cards | |
| .field--name-field-block-reference | |
| .field--name-field-media-reference-single | |
| img { | |
| width: 100%; | |
| } | |
| @media (max-width: 719px) { | |
| section.mars-component .gallery .card-style-default, | |
| .article-gallery-component .card-style-default { | |
| width: 100%; | |
| max-width: 363px; | |
| } | |
| section.mars-component .gallery .card-style-default .card figure img, | |
| .article-gallery-component .card-style-default .card figure img { | |
| object-fit: cover; | |
| } | |
| } | |
| @media (max-width: 1200px) { | |
| .component--category-cards .category-cards-content { | |
| max-width: 720px; | |
| } | |
| .component--category-cards .field--name-field-block-reference { | |
| justify-content: space-between; | |
| } | |
| } | |
| @media (min-width: 720px) { | |
| .mars-component .col-md-4 { | |
| padding-right: 20px; | |
| padding-left: 20px; | |
| } | |
| } | |
| @media (min-width: 720px) and (max-width: 1200px) { | |
| .component--category-cards | |
| .field--name-field-block-reference | |
| > .field__item { | |
| width: 48%; | |
| } | |
| .mars-component .inline-video-row .embed-responsive-1by1 .video-btns { | |
| width: 30px; | |
| height: 30px; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .mars-component .media-bg-hldr .media-bg-content .media-bg-half-width { | |
| width: 51%; | |
| } | |
| } | |
| </style> | |
| <script> | |
| function handleVideoButtonPositon() { | |
| if (window.innerWidth >= 1200) { | |
| document | |
| .querySelector(".video-btns") | |
| .style.setProperty("position", "absolute", "important"); | |
| document.querySelector(".video-btns").style.top = "33%"; | |
| document.querySelector(".video-btns").style.left = "50%"; | |
| } else { | |
| document | |
| .querySelector(".video-btns") | |
| .style.setProperty("position", "relative", "important"); | |
| document.querySelector(".video-btns").style.top = "0"; | |
| document.querySelector(".video-btns").style.left = "0"; | |
| } | |
| } | |
| window.onresize = handleVideoButtonPositon; | |
| window.addEventListener("DOMContentLoaded", (event) => { | |
| document.querySelector(".mars-video__wrapper.sixteen-nine").innerHTML = | |
| "<img src='https://www.mars.com/sites/g/files/jydpyr316/files/2021-10/htbh-background.jpg' alt='#HereToBeHeard' style='width: 100%; height: 100%; object-fit: cover; min-height: 500px;'/>"; | |
| handleVideoButtonPositon(); | |
| document | |
| .querySelector(".inline-video-row") | |
| .querySelectorAll(".col-md-3") | |
| .forEach((el) => { | |
| el.classList.remove("col-md-3"); | |
| el.classList.add("col-md-2"); | |
| }); | |
| document | |
| .querySelector(".inline-video-row") | |
| .style.setProperty("display", "flex"); | |
| document | |
| .querySelector(".inline-video-row") | |
| .style.setProperty("justify-content", "space-between"); | |
| document | |
| .querySelectorAll(".rich-text-editor")[1] | |
| .style.setProperty("background-color", "#00D7B9"); | |
| document | |
| .querySelectorAll(".rich-text-editor")[1] | |
| .style.setProperty("margin-bottom", "-1px"); | |
| document | |
| .querySelectorAll(".rich-text-editor")[1] | |
| .style.setProperty("padding-top", "30px"); | |
| document | |
| .querySelector(".mars-video-row") | |
| .style.setProperty("background-color", "#00D7B9"); | |
| document | |
| .querySelectorAll(".rich-text-editor")[3] | |
| .style.setProperty("background-color", "#0000A0"); | |
| document | |
| .querySelectorAll(".rich-text-editor")[3] | |
| .style.setProperty("padding", "30px 0"); | |
| document | |
| .querySelectorAll(".rich-text-editor")[3] | |
| .style.setProperty("color", "white"); | |
| document | |
| .querySelectorAll(".rich-text-editor")[4] | |
| .style.setProperty("background-color", "#00D7B9"); | |
| document | |
| .querySelectorAll(".rich-text-editor")[4] | |
| .style.setProperty("padding", "30px 0"); | |
| document | |
| .querySelectorAll(".rich-text-editor")[5] | |
| .style.setProperty("background-color", "#FFDC00"); | |
| document | |
| .querySelectorAll(".rich-text-editor")[5] | |
| .style.setProperty("padding", "30px 0"); | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment