@Fresko1991

Как создать такой блок?

60c13bfcd4eaf072865550.jpeg
Пытался задать очередность с помощью, grid-template-areas, но не выходит.
60c13c8e0045a305614709.jpeg
<section class="contacts">
        <div class="container">
            <h1 class="contacts-header">
                Контакты
            </h1>
            <div class="contacts-content">
                <div class="contacts-information">
                    <div class="contacts-description1">
                        <p>
                            Адрес 
                        </p>
                    </div>
                    <div class="contacts-description2">
                        <p>
                            Телефоны
                        </p>
                    </div>
                    <div class="contacts-description3">
                        <p>
                            E-mail
                        </p>
                    </div>
                    <div class="contacts-description4">
                        <p>
                            График
                        </p>
                    </div>
                </div>
                <div class="contacts-photo">
                    <div class="contacts-btn-container">
                        <button>
                            Построить маршрут
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

.contacts-header {
    font-style: normal;
    font-weight: normal;
    font-size: 40px;
    line-height: 40px;
    color: #333333;
    text-indent: 40px;
    padding-top: 40px;
}
.contacts-content {
    width: 1168px;
    height: 684px;
    background-color:#FFFFFF;
    border-radius: 15px;
}

.contacts-description1 {
    grid-area: contacts-description1;
    word-spacing: 10px;
}
.contacts-description2 {
    grid-area: contacts-description2;
    word-spacing: 10px;
}
.contacts-description3 {
    grid-area: contacts-description3;
    word-spacing: 10px;
}
.contacts-description4 {
    grid-area: contacts-description4;
    word-spacing: 10px;
}
.contacts-photo {
    grid-area: contacts-photo;
    width: 653px;
    height: 528px;
    border-radius: 15px;
    cursor: pointer;
    background-image: url(/src/img/contacts.png);
    background-repeat: no-repeat;
}
.contacts-information {
    display: 
    "contacts-description1 contacts-description1  contacts-photo "
    "contacts-description2 contacts-description2  contacts-photo "
    "contacts-description3 contacts-description3  contacts-photo "
    "contacts-description4 contacts-description4  contacts-photo "
}
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 2
@alekcena
В попытках обрести навыки и умения
Делите блок на 2 части с помощью флекса
Левые вкладки и картинка.
Далее левые вкладки тем же флексом.
Ответ написан
3Create
@3Create
Как вариант:
Общий div_1.
Внутри div_left и div_right.
К div_left применяем width: 40% и margin-left: 0 (c margin точно не помню)
К div_right применяем width: 60%
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы