Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

При движении картинки не двигается внутренний текст. Такое чувство, что текст вообще не внутри картинки.

Лот Знаток (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 месяцев назад
Я попробовал, но там тоже самое
Похожие вопросы