Skip to content

Instantly share code, notes, and snippets.

@Fprince333

Fprince333/htbh.html

Last active October 22, 2021 15:36
Show Gist options
  • Save Fprince333/22bcec9a5f77e2e6609e24a04ae1576f to your computer and use it in GitHub Desktop.
Save Fprince333/22bcec9a5f77e2e6609e24a04ae1576f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Fprince333 revised this gist Oct 22, 2021. No changes.
  2. Fprince333 revised this gist Oct 22, 2021. 1 changed file with 19 additions and 1 deletion.
    20 changes: 19 additions & 1 deletion htbh.html
    View file
    Original file line number Diff line number Diff line change
    @@ -41,15 +41,19 @@
    border-radius: 0;
    text-decoration: none !important;
    min-width: 210px;
    height: 50px;
    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;
    }
    @@ -92,6 +96,9 @@
    margin-bottom: 10px;
    margin-top: 0px;
    }
    .mars-component p a:not(.btn) {
    display: inline;
    }
    .mars-component .videoPoster {
    width: 101%;
    height: 101%;
    @@ -109,6 +116,17 @@
    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;
  3. Fprince333 revised this gist Oct 22, 2021. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions htbh.html
    View file
    Original file line number Diff line number Diff line change
    @@ -20,6 +20,9 @@
    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;
    @@ -204,7 +207,5 @@
    document
    .querySelectorAll(".rich-text-editor")[5]
    .style.setProperty("padding", "30px 0");
    document.querySelector(".paragraph--type--mars-gallery").style.display =
    "none";
    });
    </script>
  4. Fprince333 revised this gist Oct 22, 2021. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions htbh.html
    View file
    Original file line number Diff line number Diff line change
    @@ -204,5 +204,7 @@
    document
    .querySelectorAll(".rich-text-editor")[5]
    .style.setProperty("padding", "30px 0");
    document.querySelector(".paragraph--type--mars-gallery").style.display =
    "none";
    });
    </script>
  5. Fprince333 revised this gist Oct 21, 2021. 1 changed file with 27 additions and 3 deletions.
    30 changes: 27 additions & 3 deletions htbh.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,9 +2,6 @@
    main {
    margin-bottom: 0;
    }
    a {
    color: #0000a0;
    }
    #section-2--block-3 {
    text-align: center;
    }
    @@ -23,6 +20,33 @@
    color: #3c3c3c;
    font-weight: 400;
    }
    .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;
    height: 50px;
    line-height: normal;
    padding: 15px;
    }
    .btn:hover {
    color: #fff !important;
    background-color: #00d7b9;
    border-color: #00d7b9;
    }
    .breadcrumb {
    margin-bottom: 0;
    }
  6. Fprince333 revised this gist Oct 21, 2021. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions htbh.html
    View file
    Original file line number Diff line number Diff line change
    @@ -107,6 +107,11 @@
    height: 30px;
    }
    }
    @media (min-width: 1024px) {
    .mars-component .media-bg-hldr .media-bg-content .media-bg-half-width {
    width: 51%;
    }
    }
    </style>
    <script>
    function handleVideoButtonPositon() {
  7. Fprince333 revised this gist Oct 21, 2021. 1 changed file with 26 additions and 7 deletions.
    33 changes: 26 additions & 7 deletions htbh.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,9 @@
    main {
    margin-bottom: 0;
    }
    a {
    color: #0000a0;
    }
    #section-2--block-3 {
    text-align: center;
    }
    @@ -26,6 +29,9 @@
    .no-margin {
    margin: 0 !important;
    }
    .no-margin-bottom {
    margin-bottom: 0 !important;
    }
    .p-padding {
    padding-bottom: 20px;
    }
    @@ -43,8 +49,17 @@
    .logo-row img {
    width: auto !important;
    }
    .white-text {
    color: #ffffff !important;
    }
    .blue-text {
    color: #0000a0;
    color: #0000a0 !important;
    }
    .green-text {
    color: #00d7b9 !important;
    }
    .green-background {
    background-color: #00d7b9 !important;
    }
    .mars-component p {
    margin-bottom: 10px;
    @@ -75,12 +90,22 @@
    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;
    }
    }
    </style>
    <script>
    @@ -111,12 +136,6 @@
    el.classList.remove("col-md-3");
    el.classList.add("col-md-2");
    });
    document
    .querySelector(".inline-video-row")
    .querySelectorAll(".video-btns")
    .forEach((el) => {
    el.style.setProperty("opacity", 0);
    });
    document
    .querySelector(".inline-video-row")
    .style.setProperty("display", "flex");
  8. Fprince333 revised this gist Oct 20, 2021. 1 changed file with 64 additions and 10 deletions.
    74 changes: 64 additions & 10 deletions htbh.html
    View file
    Original file line number Diff line number Diff line change
    @@ -37,22 +37,73 @@
    height: 150px !important;
    width: auto !important;
    }
    .logo-row {
    margin-top: 0;
    }
    .logo-row img {
    width: auto !important;
    }
    .blue-text {
    color: #0000a0;
    }
    .mars-component p {
    margin-bottom: 10px;
    margin-top: 0px;
    }
    .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: 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) and (max-width: 1200px) {
    .component--category-cards
    .field--name-field-block-reference
    > .field__item {
    width: 48%;
    }
    }
    </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'/>";
    document
    .querySelector(".video-btns")
    .style.setProperty("position", "absolute", "important");
    document.querySelector(".video-btns").style.top = "33%";
    document.querySelector(".video-btns").style.left = "50%";
    "<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")
    @@ -77,7 +128,10 @@
    .style.setProperty("background-color", "#00D7B9");
    document
    .querySelectorAll(".rich-text-editor")[1]
    .style.setProperty("padding-top", "60px");
    .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");
    @@ -86,7 +140,7 @@
    .style.setProperty("background-color", "#0000A0");
    document
    .querySelectorAll(".rich-text-editor")[3]
    .style.setProperty("padding", "60px 0");
    .style.setProperty("padding", "30px 0");
    document
    .querySelectorAll(".rich-text-editor")[3]
    .style.setProperty("color", "white");
    @@ -95,12 +149,12 @@
    .style.setProperty("background-color", "#00D7B9");
    document
    .querySelectorAll(".rich-text-editor")[4]
    .style.setProperty("padding", "60px 0");
    .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", "60px 0");
    .style.setProperty("padding", "30px 0");
    });
    </script>
  9. Fprince333 created this gist Oct 20, 2021.
    106 changes: 106 additions & 0 deletions htbh.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,106 @@
    <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;
    }
    .breadcrumb {
    margin-bottom: 0;
    }
    .no-margin {
    margin: 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 img {
    width: auto !important;
    }
    .blue-text {
    color: #0000a0;
    }
    </style>
    <script>
    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'/>";
    document
    .querySelector(".video-btns")
    .style.setProperty("position", "absolute", "important");
    document.querySelector(".video-btns").style.top = "33%";
    document.querySelector(".video-btns").style.left = "50%";
    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")
    .querySelectorAll(".video-btns")
    .forEach((el) => {
    el.style.setProperty("opacity", 0);
    });
    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("padding-top", "60px");
    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", "60px 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", "60px 0");
    document
    .querySelectorAll(".rich-text-editor")[5]
    .style.setProperty("background-color", "#FFDC00");
    document
    .querySelectorAll(".rich-text-editor")[5]
    .style.setProperty("padding", "60px 0");
    });
    </script>