Host-root Mobile Promo

by Bacher

HTML

<div class="main">
<div class="container">
    <div class="left-panel">
        <h1>Мобильное приложение</h1>
        <p>Ваш почтовый ящик всегда с вами,<br/>где бы вы ни были</p>
        
        <p>Получите ссылку на свой телефон:</p>
        
        <label>
            <input value="+7"/>
            <button>Получить</button>
        </label>
        
        <div class="market">
            <div class="market-button">Загрузите на Google Play</div>
            <div class="market-button">Загрузите в App Store</div>
        </div>
    </div>
    <div class="right-panel">
        <div class="phone"></div>
    </div>
</div>
</div>

CSS

.main {
    height: 400px;
    text-align: center;
    border: 4px solid black;
}

.main:before {
    display: inline-block;
    vertical-align: middle;
    content: '';
    height: 100%;
}

.container {
    display: inline-block;
    text-align: left;
    outline: 1px solid red;
}

.right-panel,
.left-panel {
    display: inline-block;
    vertical-align: middle;
}

.market {
    margin: 10px 0;
}

.market-button {
    display: inline-block;
    width: 150px;
    height: 40px;
    vertical-align: top;
    color: white;
    background: black;
    border: 1px solid gray;
}

.phone {
    width: 150px;
    height: 300px;
    background: black;
}