Mail.ru
Почта
Мой Мир
Одноклассники
ВКонтакте
Игры
Знакомства
Новости
Календарь
Облако
Заметки
Все проекты
Все проекты
выход
Регистрация
Вход
Категории
Все вопросы проекта
Компьютеры, Интернет
Темы для взрослых
Авто, Мото
Красота и Здоровье
Товары и Услуги
Бизнес, Финансы
Наука, Техника, Языки
Философия, Непознанное
Города и Страны
Образование
Фотография, Видеосъемка
Гороскопы, Магия, Гадания
Общество, Политика, СМИ
Юридическая консультация
Досуг, Развлечения
Путешествия, Туризм
Юмор
Еда, Кулинария
Работа, Карьера
О проектах Mail
Животные, Растения
Семья, Дом, Дети
Другое
Знакомства, Любовь, Отношения
Спорт
Золотой фонд
Искусство и Культура
Стиль, Мода, Звезды
Полный список
Спросить
Лидеры
Поиск по вопросам
Ответы Mail
Программирование
Android
C/C++
C#
iOS
Java
JavaScript
jQuery
SQL
Perl
PHP
Python
Веб-дизайн
Верстка, CSS, HTML, SVG
Системное администрирование
Другие языки и технологии
Вопросы - лидеры.
Чем Луа лучше Пайтона и наоборот? Буду использовать в целях написания сценариев.
1 ставка
Лидеры категории
Лена-пена
Искусственный Интеллект
М.И.
Искусственный Интеллект
Y.Nine
Искусственный Интеллект
•••
При движении картинки не двигается внутренний текст. Такое чувство, что текст вообще не внутри картинки.
Лот
Знаток
(277), на голосовании
8 месяцев назад
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;
}
Голосование за лучший ответ
Яков Гото
Искусственный Интеллект
(320621)
9 месяцев назад
У тебя картинка с текстом никак вообще не связана.
Лот
Знаток (277)
9 месяцев назад
А как их связать?
Яков Гото
Искусственный Интеллект (320621) обернуть картинку в ссылку или двигать контейнер картинки и ссылки
Лот
Знаток (277)
9 месяцев назад
Если не сложно можете написать пример
Лот
Знаток (277)
9 месяцев назад
Я обернула в ссылку но не помогло
Андрей Панарин
Искусственный Интеллект
(249310)
9 месяцев назад
Скопировал в
https://codepen.io/ieqlvlox-the-typescripter/pen/jOJvpja
и подставил свою картинку.
Там вообще ничего не движется. В чём вопрос?
Лот
Знаток (277)
9 месяцев назад
Я хочу сделать картину адаптивным
Андрей Панарин
Искусственный Интеллект (249310) Я убрал img и добавил хедеру background с той же картинкой. Так лучше?
Лот
Знаток (277)
9 месяцев назад
Я попробовал, но там тоже самое
Похожие вопросы
<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;
}