Normal Card Design

ホバーでUP

650+

Project
Completed

350+

Your of
Experience

HTML

          
<div class="center-section">
  <div class="about-item">
    <div class="about-text">
      <p class="large-text">650+</p>
      <p class="small-text">Project<br/> Completed</p>
    </div>
  </div>
  <div class="about-item">
    <div class="about-text">
      <p class="large-text">350+</p>
      <p class="small-text">Your of<br/> Experience</p>
    </div>
  </div>
</div>

SCSS

          
.about-item {
  width: 300px;
  height: 200px;
  border: 1px solid gray;
  border-radius: 5px;
  box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease-in-out;
  margin-right: 1rem;
  margin-bottom: 1rem;
  
  &:hover {
    cursor: default;
    border: 1px solid green;
    transform: translateY(-5px);
    box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32);
  }
  .about-text {
    height: 100%;
    align-items: center;
    
    .large-text {
      margin-top: 20px; //suitability
      font-size: 3rem;
      font-weight: 700;
      padding-left: 24px;
      margin-bottom: 0; //suitability
      color: green;
    }
    .small-text {
      position: relative;
      font-size: 24px;
      // padding-top: 6px;
      padding-left: 90px;
      color: black;
      // 文字間隔
      letter-spacing: 2px;
      text-transform: uppercase;
      
      &::before {
        content: "";
        position: absolute;
        left: 30px;
        top: 17px;
        width: 32px;
        height: 1px;
        background-color: gray;
      }
    }
  }
}

TIPs.DESIGN

透き通ったカード

Card 1

Card 2

HTML

          
<div class="center-section back-color">
  <div class="clear-card">
    <h2>Card 1</h2>
  </div>
  <div class="clear-card">
    <h2>Card 2</h2>
  </div>
</div>

SCSS

          
.back-color{
  background-color: lightblue;

  .clear-card{
    display: flex;
    width:300px;
    height:200px;
    backdrop-filter: blur(3px);
    background-color: rgba(white, 0.2);
    border:1px solid rgba(white, 0.1);
    border-radius: 20px;
    box-shadow: 2px 2px 2px rgba(black, 0.1);  
    cursor:pointer;
    margin:15px;
    justify-content: center;
    
    h2{
      align-self: center;
    }
  }
}

TIPs.DESIGN