Как добавить второй логотип в нижнюю часть экрана?

Как можно установить логотип Google внизу экрана на мобильных устройствах? На компьютере он располагается внизу, как показано в приведенном коде: 

HTML: 
```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>
```
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; 
} 

._container { 
    max-width: 965px; 
    width: 100%; 
    margin: 50px auto; 
    padding: 0 15px; 
    text-align: center; 
} 

.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: fle...
}
```
  • 10 сентября 2024 г. 8:13
Ответы на вопрос 2
Чтобы добавить логотип 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;`, чтобы задать отступ от нижней части экрана.

Эти изменения сделают так, что логотип будет находиться внизу экрана на мобильных и настольных устройствах. Вы можете отрегулировать значения отступов по необходимости.
position: relative / absolute знаете ? 
https://learn.javascript.ru/position
Ну и все как вы разложили на дивы вызывает вопросы.
Похожие вопросы