BHP Prompotions - Product Element Markup & Styling

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

BHP Prompotions - Product Element Markup & Styling

A Pen by Fred Shequine on CodePen.

License.

index.html

<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>

style.less

// 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;
}