Чтобы добавить логотип Google в нижнюю часть экрана на мобильных устройствах, вы можете использовать CSS для позиционирования элемента и сделать его адаптивным к различным размерам экранов. Я предложу несколько изменений в вашем HTML и CSS.
### Обновленный HTML:
Добавьте новый логотип в нижней части `<div class="page">`:
```html
<div class="page">
<div class="_container">
<div class="page__logo">
logo
</div>
<div class="page__title">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum quisquam nulla aperiam numquam ex sequi quas itaque eius deserunt voluptatem.</div>
<div class="page__actions actions">
<div class="actions__logo">
<img src="img/google.svg" alt="">
Logo
</div>
<a href="" class="actions__button">Кнопка</a>
</div>
</div>
<!-- Новый логотип внизу -->
<div class="page__footer-logo">
<img src="img/google.svg" alt="Google Logo">
</div>
</div>
```
### Обновленный CSS:
Теперь добавим стили для нового элемента, чтобы он был всегда внизу экрана:
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #000;
background-color: #E3EDFF;
}
img {
pointer-events: none;
}
strong { font-weight: 400; }
a { text-decoration: none; }
.page {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
position: relative; /* Устанавливаем относительное позиционирование */
}
._container {
max-width: 965px;
width: 100%;
margin: 50px auto;
padding: 0 15px;
text-align: center;
flex: 1; /* Позволяет контейнеру занимать всю доступную высоту */
}
.page__logo {
margin-bottom: 50px;
}
.page__title {
margin-bottom: 50px;
font-size: 48px;
font-weight: 300;
}
.page__actions {
display: flex;
justify-content: space-between;
align-items: center;
}
.actions__logo {
display: flex;
align-items: center;
}
.page__footer-logo {
position: absolute; /* Абсолютное позиционирование для нижнего логотипа */
bottom: 20px; /* Отступ от нижней части экрана */
left: 50%; /* Центрируем по горизонтали */
transform: translateX(-50%); /* Смещаем на половину ширины элемента для центрирования */
}
```
### Объяснение изменений:
1. **Новый логотип**: Мы добавили новый блок в HTML, чтобы разместить логотип Google внизу страницы.
2. **CSS стили**:
- Задали `position: absolute;` для нового элемента, чтобы он оставался на дне страницы.
- Использовали `left: 50%;` и `transform: translateX(-50%);` для центрирования логотипа по горизонтали.
- Установили `bottom: 20px;`, чтобы задать отступ от нижней части экрана.
Эти изменения сделают так, что логотип будет находиться внизу экрана на мобильных и настольных устройствах. Вы можете отрегулировать значения отступов по необходимости.