h2 CSS Grid Layout
  br
  | Credit Card

.credit-card
  .provider
    i.fab.fa-cc-visa
  .number xxxx xxxx xxxx xx80
  .good-through-label
    | good
    br
    | through
  .good-through-value 09/24
  .holder Jane Doe
  .validity valid
  a.select(href="#") Select
View Compiled
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');


body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: "Lato";
  font-weight: 300;
  font-size: 24px;
  background: #2b2b2b;
  background-position: center center;
  background-size: 200%;
  background-image: url(https://images.unsplash.com/photo-1457062673746-3c8d0b60aa44?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80);
  background-blend-mode: multiply;
}

h2  {
  display: block;
  color: white;
  font-weight: 300;
  text-align: center;
}

.credit-card {
  font-family: 'Share Tech Mono', monospace;
  color: white;
  border: 1px solid rgba(white, 0.2);
  border-radius: 0.5rem;
  
  backdrop-filter: blur(4px);
  background: rgba(white, 0.2);
  box-shadow: 0px 0px 8px 2px rgba(black, 0.2);
  
  padding: 1rem;
  
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-row-gap: 0.5rem;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 0.35rem;
  
  grid-template-areas: 
    "provider . . ."
    "number number number number"
    "good-through-label good-through-value . validity"
    "holder holder holder select";
  
  > .provider {
    grid-area: provider;
  }
  
  > .number {
    grid-area: number;
  }
  
  > .good-through-label {
    grid-area: good-through-label;
    
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-size: 0.65rem;
  }
  
  > .good-through-value {
    grid-area: good-through-value;
  }
  
  > .holder {
    grid-area: holder;
  }
  
  > .validity {
    grid-area: validity;
    
    border: 1px solid #44a333;
    font-size: 1rem;
    background: #57c443 linear-gradient(45deg, rgba(black, 0), rgba(white, 0.25) 100%);
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    box-shadow: 2px 3px 6px 0px rgba(black, 0.5);
  }
  
  > .select {
    grid-area: select;
    
    background: #2ca7d8 linear-gradient(45deg, rgba(black, 0), rgba(white, 0.25) 100%);
    border: 1px solid #1482ce;
    color: white;
    font-family: 'Lato', sans-serfi;
    font-size: 1rem;
    text-decoration: none;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    box-shadow: 2px 3px 6px 0px rgba(black, 0.5);
    
    transition: box-shadow 250ms, transform 250ms;
    
    &:active {
      box-shadow: 0px 0px 4px 0px rgba(black, 0.2);
      transform: translate(-1px, -1px);
    }
  }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.