8,959
edits
| No edit summary | No edit summary | ||
| Line 5: | Line 5: | ||
| .life-wrapper { | .life-wrapper { | ||
|      display: flex; |      display: flex; | ||
|      align-items: center;  |      align-items: center; | ||
|      justify-content: center;  |      justify-content: center; | ||
|      width: 100%; |      width: 100%; | ||
|      height: 100vh;  |      height: 100vh; | ||
| } | } | ||
| Line 15: | Line 15: | ||
|      display: flex; |      display: flex; | ||
|      align-items: center; |      align-items: center; | ||
|      width: 150px;  |      width: 150px; | ||
| } | } | ||
| .pillar { | .pillar { | ||
|      width: 5px; |      width: 5px; | ||
|      height:  |      height: 50px; | ||
|      background-color: #D02019; |      background-color: #D02019; | ||
| } | } | ||
| .left-pillar { | .left-pillar { | ||
|      margin-right: 50px;  |      margin-right: 50px; | ||
| } | } | ||
| .right-pillar { | .right-pillar { | ||
|      transform: rotate(20deg);  |      transform: rotate(20deg); | ||
|      margin-left: -35px;  |      margin-left: -35px; | ||
| } | } | ||
| .bridge-beam { | .bridge-beam { | ||
|      position: absolute; |      position: absolute; | ||
|      width: 10px;  |      width: 10px; | ||
|      height: 5px;  |      height: 5px; | ||
|      background-color: #D02019; |      background-color: #D02019; | ||
|      top: 50%;  |      top: 50%; | ||
|      left: calc(50% - 30px - 38px);  |      left: calc(50% - 30px - 38px); | ||
|      transform: translateY(-50%);  |      transform: translateY(-50%); | ||
| } | } | ||
| .survival-text { | .survival-text { | ||
|      margin-left: 1.5em;  |      margin-left: 1.5em; | ||
|      font-size: 16px;  |      font-size: 16px; | ||
|     font-family: Arial, sans-serif; | |||
|     font-weight: bold; | |||
|     color: #000; | |||
| } | } | ||