My sweet girl

mail@pastecode.io avatar
unknown
html
2 years ago
841 B
2
Indexable
<!DOCTYPE html>
<html>
<head>
  <style>
    .heart {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      transform: rotate(45deg);
    }
    
    .heart::before,
    .heart::after {
      content: '';
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: red;
    }
    
    .heart::before {
      border-radius: 100px 100px 0 0;
      top: -50px;
      left: 0;
    }
    
    .heart::after {
      border-radius: 100px 100px 100px 0;
      top: 0;
      left: 50px;
    }
    
    .name {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="heart">
    <div class="name">John Doe</div>
  </div>
</body>
</html>