Skip to content

Instantly share code, notes, and snippets.

@fshequin

fshequin/bhp-prompotions-product-element-markup-styling.markdown

Created March 6, 2024 17:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fshequin/8ffc55e33b033b6997e16a14f9fa9c71 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fshequin/8ffc55e33b033b6997e16a14f9fa9c71 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. fshequin created this gist Mar 6, 2024.
    7 changes: 7 additions & 0 deletions bhp-prompotions-product-element-markup-styling.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    BHP Prompotions - Product Element Markup & Styling
    --------------------------------------------------


    A [Pen](https://codepen.io/fshequin/pen/mdgeJyd) by [Fred Shequine](https://codepen.io/fshequin) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/mdgeJyd).
    12 changes: 12 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    <div class="promotion">
    <div class="wp-block-group product is-layout-grid wp-container-core-group-is-layout-1 wp-block-group-is-layout-grid product">
    <figure class="wp-block-image size-full">
    <a href="#">
    <img fetchpriority="high" decoding="async" width="700" height="700" src="https://bhp.btcny.net/wp-content/uploads/2023/07/77244BLKL.jpg" alt="" class="wp-image-10523" />
    </a>
    </figure>
    <p class="has-text-align-left card-right wp-container-content-1">
    <a href="#">Passage/Hall/Closet</a>
    </p>
    </div>
    </div>
    233 changes: 233 additions & 0 deletions style.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,233 @@
    // promotions.less
    // FGS 2-28-2024


    // Colors

    @grey: #8e9091;
    @blue: #3C4D8D;
    @gold: #B6985E;

    // InstaBio Colors:

    @bio-blue: #3665a9;
    @light-blue: #eaf5ff;

    @screen-sm: 768px;

    // body

    body {
    background-color: @bio-blue;
    }

    #logo {
    .promotions-logo {
    border: 2px solid @grey;
    border-radius: 100%;
    max-width: 110px;
    margin: 10px auto 10px auto;
    }
    p {
    color: white !important;
    text-align: center;
    }
    .company-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 2px;
    }
    .explore-now {
    font-size: 14px;
    font-weight: 500;
    }
    }
    .promotion {
    margin-top: 100px; // remove from live
    h2.promotion-title {
    font-family: "Saira Semi Condensed", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 42px;
    letter-spacing: 1.15px;
    margin-bottom: 25px;
    //text-transform: uppercase;
    color: white !important;
    text-shadow: 3px 3px 3px darken(@blue, 10%);
    a {
    color: white;
    }
    a:hover {
    color: palegoldenrod;
    text-decoration: none;
    }
    }
    .wp-block-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    //grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
    grid-gap: 0;
    margin-bottom: 20px;
    max-width: 700px;
    //min-width: 400px;
    margin-right: auto;
    margin-left: auto;
    background-color: white;
    border-radius: 16px;
    border: 1px solid black;
    box-shadow: 5px 5px 0px 0px rgba(42,55,110,0.85);
    &:hover {
    box-shadow: 7px 7px 0px 0px rgba(42,55,110,0.85);
    //box-shadow: 0px 0px 10px 4px @gold;
    border: 2px solid white;
    transform: translate(-5px, -5px);
    transition-property: transform;
    transition-timing-function: ease-in-out;
    transition-duration: 0.25s;
    }
    }
    .wp-block-image {
    img {
    width: 100%;
    height: auto;
    border: 1px solid transparent;
    border-radius: 16px;
    padding-top: 15px;
    }
    }
    p, p a {
    //background-color: white;
    font-size: 20px;
    color: @blue;
    }
    p.card-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: @light-blue;
    border: 1px solid transparent;
    border-radius: 0px 16px 16px 0px;
    padding-left: 12px;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0;
    //font-weight: 700;
    float: right;
    a {
    color: @blue;
    }
    }
    .post-edit-link {
    color: white !important;
    }
    .bhp-label {
    color: white;
    }
    .bhp-link {
    text-align: center;
    color: orange;
    line-height: 1.5;
    font-size: 24px;
    }
    .btn-copy-text {
    //color:#233b58;
    font-weight: 700;
    letter-spacing: 1;
    &:hover {
    color:#233b58;
    }
    }

    }
    @media(max-width: 768px){ // maybe this should happen at a smaller width? FGS 3-5-2024
    .promotion {
    h2.promotion-title, h2.promotion-title a {
    font-size: 42px;
    letter-spacing: 1.15px;
    margin-bottom: 25px;
    }
    .wp-block-image img {
    width: 85%;
    //height: auto;
    }
    p.card-right a {
    font-size: 14px;
    padding-left: 0px;
    }
    p.bhp-link, p.bhp-label {
    font-size: 16px;
    }
    }
    }
    @media(max-width: 532px){
    .promotion {
    h2.promotion-title, h2.promotion-title a {
    font-size: 26px;
    letter-spacing: 1.1px;
    margin-bottom: 20px;
    }
    }
    }

    // footer

    .footerSocialWrapper {
    border-top: none;
    }
    #footer, #footer p, #footer a {
    color: white;
    }

    .saira-semi condensed-thin {
    font-family: "Saira Semi Condensed", sans-serif;
    font-weight: 100;
    font-style: normal;
    }

    .saira-semi condensed-extralight {
    font-family: "Saira Semi Condensed", sans-serif;
    font-weight: 200;
    font-style: normal;
    }

    .saira-semi condensed-light {
    font-family: "Saira Semi Condensed", sans-serif;
    font-weight: 300;
    font-style: normal;
    }

    .saira-semi condensed-regular {
    font-family: "Saira Semi Condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
    }

    .saira-semi condensed-medium {
    font-family: "Saira Semi Condensed", sans-serif;
    font-weight: 500;
    font-style: normal;
    }

    .saira-semi condensed-semibold {
    font-family: "Saira Semi Condensed", sans-serif;
    font-weight: 600;
    font-style: normal;
    }

    .saira-semi condensed-bold {
    font-family: "Saira Semi Condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    }

    .saira-semi condensed-extrabold {
    font-family: "Saira Semi Condensed", sans-serif;
    font-weight: 800;
    font-style: normal;
    }

    .saira-semi condensed-black {
    font-family: "Saira Semi Condensed", sans-serif;
    font-weight: 900;
    font-style: normal;
    }