| <div class="devot"> | |
| <div class="devot__logo-wrapper"> | |
| <img class="devot__logo" src="logo.svg" alt="Devot Logo" /> | |
| </div> | |
| <div class="devot__content"> | |
| <h1 class="devot__title">Devōt</h1> | |
| <p class="devot__description"> | |
| We are a software company that always goes an extra mile | |
| </p> | |
| </div> | |
| </div> | |
| <style> | |
| .devot { | |
| display: flex; | |
| max-width: 24rem; | |
| align-items: center; | |
| margin: 0 auto; | |
| padding: 1.5rem; | |
| border-radius: 0.5rem; | |
| background-color: rgb(23 37 84); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), | |
| 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .devot__logo-wrapper { | |
| flex-shrink: 0; | |
| } | |
| .devot__logo { | |
| height: 5rem; | |
| width: 5rem; | |
| margin-right: 20px; | |
| } | |
| .devot__content { | |
| margin-left: 1.5rem; | |
| padding-top: 0.25rem; | |
| } | |
| .devot__title { | |
| color: #fff; | |
| font-size: 1.5rem; | |
| } | |
| .devot__description { | |
| color: #fff; | |
| font-size: 0.875rem; | |
| } | |
| </style> |