Inserting HTML & CSS based Product Card from CodePen.io

Theme: Astra
Builder: Elementor Free
CodePen URL: https://codepen.io/hexagoncircle/pen/XWbWKwL

On my website main page, I want to insert the CSS Product Card (current 4×1) into a 4×3 layout (4x horizontal ; 3x vertical). Currently, the section has text stating “CSS Product Card section here”. I’ve given the Section a CSS ID of “home.section.05″.

I’ve tried CodeSnippets but it’s not working as I’d hoped, due to my limited knowledge. I’m not a programmer as you can probably tell ??

I’ve edited the 4×1 codepen (edit is in this post) and added my own images and text, I’m happy to redo this, so you can use the original codepen if it makes things easier for you.

Thank you for your assistance! ??

______
______
HTML:
______
______
”

- var cards = [{ title: 'Onsite Support', copy: 'When you need onsite support, we can have the xyz', button: 'Read More' }, { title: 'Procurement', copy: 'The right machine with quality after-sales support', button: 'Read More' }, { title: 'Remote Support', copy: 'Fast support when you need it most', button: 'Read More' }, { title: 'Backups', copy: 'Automated, managed backups', button: 'Read More' }]

mixin card(title, copy, button)
  .card
    .content
      h2.title= title
      p.copy= copy
      button.btn= button

main.page-content
  each card in cards
    +card(card.title, card.copy, card.button)

______
______
CSS:
______
______
”

@import url('https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap');

$imageIds: '1578357078586-491adf1aa5ba', '1525547719571-a2d4ac8945e2', '1525182008055-f88b95ff7980', '1517819655378-25fe37197692';

$bp-md: 600px;
$bp-lg: 800px;

:root {
  --d: 1000ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
  --font-sans: 'Rubik', sans-serif;
  --font-serif: 'Cardo', serif;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

.page-content {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  max-width: 1024px;
  margin: 0 auto;
  font-family: var(--font-sans);
  
  @media (min-width: $bp-md) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @media (min-width: $bp-lg) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {  
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 1rem;
  width: 100%;
  text-align: center;
  color: whitesmoke;
  background-color: whitesmoke;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1), 
    0 2px 2px rgba(0,0,0,0.1), 
    0 4px 4px rgba(0,0,0,0.1), 
    0 8px 8px rgba(0,0,0,0.1),
    0 16px 16px rgba(0,0,0,0.1);
  
  @media (min-width: $bp-md) {
    height: 350px;
  }
  
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    background-size: cover;
    background-position: 0 0;
    transition: transform calc(var(--d) * 1.5) var(--e);
    pointer-events: none;
  }
  
  &:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    pointer-events: none;
    background-image: linear-gradient(
      to bottom,
      hsla(0, 0%, 0%, 0) 0%,
      hsla(0, 0%, 0%, 0.009) 11.7%,
      hsla(0, 0%, 0%, 0.034) 22.1%,
      hsla(0, 0%, 0%, 0.072) 31.2%,
      hsla(0, 0%, 0%, 0.123) 39.4%,
      hsla(0, 0%, 0%, 0.182) 46.6%,
      hsla(0, 0%, 0%, 0.249) 53.1%,
      hsla(0, 0%, 0%, 0.320) 58.9%,
      hsla(0, 0%, 0%, 0.394) 64.3%,
      hsla(0, 0%, 0%, 0.468) 69.3%,
      hsla(0, 0%, 0%, 0.540) 74.1%,
      hsla(0, 0%, 0%, 0.607) 78.8%,
      hsla(0, 0%, 0%, 0.668) 83.6%,
      hsla(0, 0%, 0%, 0.721) 88.7%,
      hsla(0, 0%, 0%, 0.762) 94.1%,
      hsla(0, 0%, 0%, 0.790) 100%
    );
    transform: translateY(-50%);
    transition: transform calc(var(--d) * 2) var(--e);
  }
  
  @each $id in $imageIds {
    $i: index($imageIds, $id);
    
    &:nth-child(#{$i}):before {
      background-image: url(https://images.unsplash.com/photo-#{$id}?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
    }
  }
}

.content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 1rem;
  transition: transform var(--d) var(--e);
  z-index: 1;
  
  > * + * {
    margin-top: 1rem;
  }
}

.title {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.2;
}

.copy {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.35;
}

.btn {
  cursor: pointer;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
  color: white;
  background-color: black;
  border: none;
  
  &:hover {
    background-color: lighten(black, 50%);
  }
  
  &:focus {
    outline: 1px dashed yellow;
    outline-offset: 3px;
  }
}

@media (hover: hover) and (min-width: $bp-md) {
  .card:after {
    transform: translateY(0);
  }
  
  .content {
    transform: translateY(calc(100% - 4.5rem));
    
    > *:not(.title) {
      opacity: 0;
      transform: translateY(1rem);
      transition:
        transform var(--d) var(--e),
        opacity var(--d) var(--e);
    }
  }
  
  .card:hover,
  .card:focus-within {
    align-items: center;

    &:before { transform: translateY(-4%); }
    &:after { transform: translateY(-50%); }

    .content {
      transform: translateY(0);

      > *:not(.title) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(var(--d) / 8);
      }
    }
  }
  
  .card:focus-within {
    &:before,
    &:after,
    .content,
    .content > *:not(.title) {
      transition-duration: 0s;
    }
  }
}

Thank you again! ??

Regards

Nerd22

• This topic was modified 2 years, 7 months ago by nerd22.
• This topic was modified 2 years, 7 months ago by nerd22.
• This topic was modified 2 years, 7 months ago by nerd22.
• This topic was modified 2 years, 7 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

The page I need help with: [log in to see the link]