Mail.ru
Почта
Мой Мир
Одноклассники
ВКонтакте
Игры
Знакомства
Новости
Календарь
Облако
Заметки
Все проекты
Все проекты
выход
Регистрация
Вход
Категории
Все вопросы проекта
Компьютеры, Интернет
Темы для взрослых
Авто, Мото
Красота и Здоровье
Товары и Услуги
Бизнес, Финансы
Наука, Техника, Языки
Философия, Непознанное
Города и Страны
Образование
Фотография, Видеосъемка
Гороскопы, Магия, Гадания
Общество, Политика, СМИ
Юридическая консультация
Досуг, Развлечения
Путешествия, Туризм
Юмор
Еда, Кулинария
Работа, Карьера
О проектах Mail
Животные, Растения
Семья, Дом, Дети
Другое
Знакомства, Любовь, Отношения
Спорт
Золотой фонд
Искусство и Культура
Стиль, Мода, Звезды
Полный список
Спросить
Лидеры
Поиск по вопросам
Ответы Mail
Программирование
Android
C/C++
C#
iOS
Java
JavaScript
jQuery
SQL
Perl
PHP
Python
Веб-дизайн
Верстка, CSS, HTML, SVG
Системное администрирование
Другие языки и технологии
Вопросы - лидеры.
Как закрепить камеру игрока на объекте в Roblox Studio?
1 ставка
Meteor Client cfg
1 ставка
Нет модуля в термукс(пайтон). Помогите пожалуйста
1 ставка
Проблема с коллайдером и триггером в Unity
1 ставка
Перенос макета дизайна из Фигмы в Тильду
1 ставка
Лидеры категории
Лена-пена
Искусственный Интеллект
М.И.
Искусственный Интеллект
Y.Nine
Искусственный Интеллект
•••
При движении картинки не двигается внутренний текст. Такое чувство, что текст вообще не внутри картинки.
Лот
Знаток
(277), на голосовании
11 месяцев назад
HTML
<div class="header" >
<img src="img/img1.jpg " alt="cover" class="img__1 " >
<a href="#" class="nav__logo">Pool of Leads <br> <span class="span__logo">Beauty</span> </a>
<div class="nav__menu">
<ul class="nav__list">
<li class="nav__item">Our Offers</li>
<li class="nav__item">Full Offer</li>
<li class="nav__item">Leads Offer</li>
</ul>
<a href="#" class="button"> Contact Us</a>
</div>
<div class="home">
<h2 class="home__title">Make Your Clinic Thrive!</h2>
<h4 class="home__subtitle">Enhancing Your Clinic's Efficiency: We Manage Your Appointments, You Focus on
Patient Care.</h4>
<a href="#" class="button2"> Join now</a>
</div>
</div>
CSS
.header {
position: relative;
height: 1373px;
max-width: 122%;
min-width: 126%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
.img__1{
position: absolute;
width: 120%;
height: 80%;
max-width: 136%;
min-width: 100%;
}
.nav__logo {
width: 330px;
height: 104px;
position: absolute;
font-size: 50px;
color: rgb(0, 0, 0);
font-weight: 600;
font-family: Roboto;
font-weight: 400;
max-width: 1046px;
padding: 30px 240px;
margin: 0 auto;
box-sizing: content-box;
}
.nav__list {
padding-top: 35px;
display: flex;
position: absolute;
column-gap: 60px;
margin-left: auto;
white-space: nowrap;
margin-left: 306px;
}
.nav__item {
color: var(--White, #FFF);
text-align: center;
font-family: Onest;
font-size: 20px;
font-weight: 400;
line-height: 150%;
}
h1{
font-size: clamp(50px, 8vw, 100px);
}
.nav__menu {
display: flex;
justify-content: center;
}
.home {
position: absolute;
margin: 234px 420px 530px 420px;
justify-content: center;
}
.home__title {
width: 1080px;
color: var(--White, #FFF);
text-align: center;
font-family: Syne;
font-size: 140px;
font-weight: 700;
line-height: 90%;
}
.home__subtitle {
width: 620px;
color: var(--White, #FFF);
text-align: center;
font-family: Onest;
font-size: 28px;
font-weight: 400;
line-height: 140%;
margin: 0 auto;
margin-top: 24px;
}
.button2 {
display: flex;
width: 387px;
padding: 16px 24px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 50px;
background: var(--Green-500, #5C7B60);
color: var(--White, #FFF);
font-family: Syne;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 120%;
text-transform: capitalize;
margin: 60px auto;
}
Голосование за лучший ответ
Яков Гото
Искусственный Интеллект
(335078)
1 год назад
У тебя картинка с текстом никак вообще не связана.
Лот
Знаток (277)
1 год назад
А как их связать?
Яков Гото
Искусственный Интеллект (335078) обернуть картинку в ссылку или двигать контейнер картинки и ссылки
Лот
Знаток (277)
1 год назад
Если не сложно можете написать пример
Лот
Знаток (277)
1 год назад
Я обернула в ссылку но не помогло
Андрей Панарин
Искусственный Интеллект
(262016)
1 год назад
Скопировал в
https://codepen.io/ieqlvlox-the-typescripter/pen/jOJvpja
и подставил свою картинку.
Там вообще ничего не движется. В чём вопрос?
Лот
Знаток (277)
1 год назад
Я хочу сделать картину адаптивным
Андрей Панарин
Искусственный Интеллект (262016) Я убрал img и добавил хедеру background с той же картинкой. Так лучше?
Лот
Знаток (277)
1 год назад
Я попробовал, но там тоже самое
Похожие вопросы
<div class="header" >
<img src="img/img1.jpg " alt="cover" class="img__1 " >
<a href="#" class="nav__logo">Pool of Leads <br> <span class="span__logo">Beauty</span> </a>
<div class="nav__menu">
<ul class="nav__list">
<li class="nav__item">Our Offers</li>
<li class="nav__item">Full Offer</li>
<li class="nav__item">Leads Offer</li>
</ul>
<a href="#" class="button"> Contact Us</a>
</div>
<div class="home">
<h2 class="home__title">Make Your Clinic Thrive!</h2>
<h4 class="home__subtitle">Enhancing Your Clinic's Efficiency: We Manage Your Appointments, You Focus on
Patient Care.</h4>
<a href="#" class="button2"> Join now</a>
</div>
</div>
CSS
.header {
position: relative;
height: 1373px;
max-width: 122%;
min-width: 126%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
.img__1{
position: absolute;
width: 120%;
height: 80%;
max-width: 136%;
min-width: 100%;
}
.nav__logo {
width: 330px;
height: 104px;
position: absolute;
font-size: 50px;
color: rgb(0, 0, 0);
font-weight: 600;
font-family: Roboto;
font-weight: 400;
max-width: 1046px;
padding: 30px 240px;
margin: 0 auto;
box-sizing: content-box;
}
.nav__list {
padding-top: 35px;
display: flex;
position: absolute;
column-gap: 60px;
margin-left: auto;
white-space: nowrap;
margin-left: 306px;
}
.nav__item {
color: var(--White, #FFF);
text-align: center;
font-family: Onest;
font-size: 20px;
font-weight: 400;
line-height: 150%;
}
h1{
font-size: clamp(50px, 8vw, 100px);
}
.nav__menu {
display: flex;
justify-content: center;
}
.home {
position: absolute;
margin: 234px 420px 530px 420px;
justify-content: center;
}
.home__title {
width: 1080px;
color: var(--White, #FFF);
text-align: center;
font-family: Syne;
font-size: 140px;
font-weight: 700;
line-height: 90%;
}
.home__subtitle {
width: 620px;
color: var(--White, #FFF);
text-align: center;
font-family: Onest;
font-size: 28px;
font-weight: 400;
line-height: 140%;
margin: 0 auto;
margin-top: 24px;
}
.button2 {
display: flex;
width: 387px;
padding: 16px 24px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 50px;
background: var(--Green-500, #5C7B60);
color: var(--White, #FFF);
font-family: Syne;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 120%;
text-transform: capitalize;
margin: 60px auto;
}