Всем привет, помогите со скриптом у меня не показывает фон хотя должен я не понимаю почему? так же почему то кнопка записи не по середине, не удается мне ее поставить по середине и тоже не понимаю почему( <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- подключение шрифта --> <link rel="preconnect" href="https://fonts.googleapis.com"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- подключение сайта к стилям для дальнейшего видо изменнения --> <link rel="stylesheet" href="/css/main.css"> <title>Мечты сбываются</title> </head> <body> <!-- шапка --> <header class="header"> <!-- контейнер делает сетку --> <div class="container"> <!-- хеддер иннер для того чтобы можно было в него расположить лого и навигацию --> <div class="header__inner"> <!-- лого --> <div class="header__logo"> <img src="/img/logo.svg" alt=""> </div> <!-- навигация --> <nav class="nav"> <a class="nav__link" href="">Contact</a> <a class="nav__link" href="">FeedBack</a> <a class="nav__link" href="">Links</a> <a class="nav__link" href="">booking</a> </nav> </div> </div> </header> <!-- intro --> <div class="intro"> <div class="container"> <!-- добавления класса текста по центру --> <div class="intro__inner"> <h1 class="intro__title">Твоя мечта сбудится именно тут!</h1> <!-- текст под заголовком --> <h2 class="intro__subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus in, nesciunt, vero reiciendis libero fugit accusamus ipsum dicta perferendis unde amet placeat ullam vel excepturi molestias obcaecati facilis ab pariatur.</h2> <!-- btn- настройки кнопки btn--red стили кнопки --> <a class="btn btn--red" href="#">Записаться</a> </div> </div> </div> </body> </html> HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- подключение шрифта --> <link rel="preconnect" href="https://fonts.googleapis.com"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- подключение сайта к стилям для дальнейшего видо изменнения --> <link rel="stylesheet" href="/css/main.css"> <title>Мечты сбываются</title> </head> <body> <!-- шапка --> <header class="header"> <!-- контейнер делает сетку --> <div class="container"> <!-- хеддер иннер для того чтобы можно было в него расположить лого и навигацию --> <div class="header__inner"> <!-- лого --> <div class="header__logo"> <img src="/img/logo.svg" alt=""> </div> <!-- навигация --> <nav class="nav"> <a class="nav__link" href="">Contact</a> <a class="nav__link" href="">FeedBack</a> <a class="nav__link" href="">Links</a> <a class="nav__link" href="">booking</a> </nav> </div> </div> </header> <!-- intro --> <div class="intro"> <div class="container"> <!-- добавления класса текста по центру --> <div class="intro__inner"> <h1 class="intro__title">Твоя мечта сбудится именно тут!</h1> <!-- текст под заголовком --> <h2 class="intro__subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus in, nesciunt, vero reiciendis libero fugit accusamus ipsum dicta perferendis unde amet placeat ullam vel excepturi molestias obcaecati facilis ab pariatur.</h2> <!-- btn- настройки кнопки btn--red стили кнопки --> <a class="btn btn--red" href="#">Записаться</a> </div> </div> </div> </body> </html> /* включения шрифта для всего проекта */ body { font-family: 'Open Sans', sans-serif; font-size: 14px; color: #6c7279; margin: 0; background: blue; } * { block-size: border-box; } /* ШАПКА Header */ .header { /* опускаем логотип на 35 пикселей от верха */ /* padding: 35px 0px; */ /* делает весь хеддер вторым слоем */ position: absolute; top: 0; left: 0; z-index: 1000; /* ширина для шапки */ width: 100%; /* высота */ height: 100px; } /* Контейнер */ .container { /* но максимальная ширина всеравно 1170px */ max-width: 1170px; /* ширина блока 100 процентов */ width: 100%; margin: 0 auto; } .header__inner { display: flex; /* между данными будет пустое место */ justify-content: space-between; /* делает полоску снизу в шапке */ border-bottom: 1px solid #515369; /* опускаем на 35 пикселей от верха */ padding: 35px 0px; /* выравнивает все элементы в хеддере по центру для себя */ align-items: center; } /* Навигация */ .nav { font-size: 13px; font-weight: 700; /* ttu делает все буквы большими */ text-transform: uppercase; display: flex; } .nav__link { color: white; /* tdn уберается подчеркивание под текстом */ text-decoration: none; /* прозрачность */ opacity: 0.75; /* анимация при наведении */ transition: opacity .2s linear; margin-left: 50px; } /* первое слово */ .nav__link:first-child { /* уберает зону делает ее под текст */ margin-left: 0; } /* анимация при наведении на строку */ .nav__link:hover { /* подчеркивает текст при наведении */ /* text-decoration: underline; */ /* вовращает обчную прозрачность при наведении */ opacity: 1; } /* intro */ .intro { /* высота */ height: 750px; /* фоновая картинка; center - позиционирование картинки по центру и повторение /cover чтобы картинка занимала пропорционально всю ширину высоту блока */ background: url(/img/header-bg.jpg) center no-repeat / cover; padding-top: 100px; display: flex; /* каждый элементр в интро будет начинаться с новой строки */ flex-direction: column; /* чтобы выравнить ячейку по центру блока */ justify-content: center; } /* текст по центру */ .intro__inner { max-width: 970px; width: 100%; /* выравнивание по центру */ margin: 0 auto; } /* ЗАГОЛОВОК */ .intro__title { font-family: 'Open Sans', sans-serif; font-size: 65px; color: aliceblue; font-weight: 700; margin: 0 0 30px; text-transform: uppercase; text-align: center; /* расстояние между букв */ line-height: 1.1; } h1, h2, h3, h4, h5, h6 { margin: 0; } p { margin: 0 0 10px; } /* ТЕКСТ ПОД ЗАГОЛОВКОМ */ .intro__subtitle { margin: 0; font-size: 22px; color: white; line-height: 1.5; font-weight: 400; /* выравнивания текста по центру */ text-align: center; /* границы снизу */ margin-bottom: 60px; } /* КНОПКА */ .btn { display: inline-block; /* выравнивание по вертикальной границе по верху */ vertical-align: top; font-size: 13px; color: white; font-weight: 600; /* текст капсом */ text-transform: uppercase; /* убераю подчеркивание */ text-decoration: none; /* внутренние отступы */ padding: 14px 40px; /* скругления углов */ border-radius: 3px; /* шрифт наследуем от родители БОДИ */ font-family: inherit; /* у браузера есть по дефолту границы поэтому пишем */ border: 0; /* изменяет курсор при наведении */ cursor: pointer; /* плавный переход фона */ transition: background .2s linear; margin: 0 auto; } .btn--red { background-color: #e84545; } /* анимация кнопки */ .btn--red:hover { background-color: #dd3434; } CSS /* включения шрифта для всего проекта */ body { font-family: 'Open Sans', sans-serif; font-size: 14px; color: #6c7279; margin: 0; background: blue; } * { block-size: border-box; } /* ШАПКА Header */ .header { /* опускаем логотип на 35 пикселей от верха */ /* padding: 35px 0px; */ /* делает весь хеддер вторым слоем */ position: absolute; top: 0; left: 0; z-index: 1000; /* ширина для шапки */ width: 100%; /* высота */ height: 100px; } /* Контейнер */ .container { /* но максимальная ширина всеравно 1170px */ max-width: 1170px; /* ширина блока 100 процентов */ width: 100%; margin: 0 auto; } .header__inner { display: flex; /* между данными будет пустое место */ justify-content: space-between; /* делает полоску снизу в шапке */ border-bottom: 1px solid #515369; /* опускаем на 35 пикселей от верха */ padding: 35px 0px; /* выравнивает все элементы в хеддере по центру для себя */ align-items: center; } /* Навигация */ .nav { font-size: 13px; font-weight: 700; /* ttu делает все буквы большими */ text-transform: uppercase; display: flex; } .nav__link { color: white; /* tdn уберается подчеркивание под текстом */ text-decoration: none; /* прозрачность */ opacity: 0.75; /* анимация при наведении */ transition: opacity .2s linear; margin-left: 50px; } /* первое слово */ .nav__link:first-child { /* уберает зону делает ее под текст */ margin-left: 0; } /* анимация при наведении на строку */ .nav__link:hover { /* подчеркивает текст при наведении */ /* text-decoration: underline; */ /* вовращает обчную прозрачность при наведении */ opacity: 1; } /* intro */ .intro { /* высота */ height: 750px; /* фоновая картинка; center - позиционирование картинки по центру и повторение /cover чтобы картинка занимала пропорционально всю ширину высоту блока */ background: url(/img/header-bg.jpg) center no-repeat / cover; padding-top: 100px; display: flex; /* каждый элементр в интро будет начинаться с новой строки */ flex-direction: column; /* чтобы выравнить ячейку по центру блока */ justify-content: center; } /* текст по центру */ .intro__inner { max-width: 970px; width: 100%; /* выравнивание по центру */ margin: 0 auto; } /* ЗАГОЛОВОК */ .intro__title { font-family: 'Open Sans', sans-serif; font-size: 65px; color: aliceblue; font-weight: 700; margin: 0 0 30px; text-transform: uppercase; text-align: center; /* расстояние между букв */ line-height: 1.1; } h1, h2, h3, h4, h5, h6 { margin: 0; } p { margin: 0 0 10px; } /* ТЕКСТ ПОД ЗАГОЛОВКОМ */ .intro__subtitle { margin: 0; font-size: 22px; color: white; line-height: 1.5; font-weight: 400; /* выравнивания текста по центру */ text-align: center; /* границы снизу */ margin-bottom: 60px; } /* КНОПКА */ .btn { display: inline-block; /* выравнивание по вертикальной границе по верху */ vertical-align: top; font-size: 13px; color: white; font-weight: 600; /* текст капсом */ text-transform: uppercase; /* убераю подчеркивание */ text-decoration: none; /* внутренние отступы */ padding: 14px 40px; /* скругления углов */ border-radius: 3px; /* шрифт наследуем от родители БОДИ */ font-family: inherit; /* у браузера есть по дефолту границы поэтому пишем */ border: 0; /* изменяет курсор при наведении */ cursor: pointer; /* плавный переход фона */ transition: background .2s linear; margin: 0 auto; } .btn--red { background-color: #e84545; } /* анимация кнопки */ .btn--red:hover { background-color: #dd3434; }
Попробуй в интро background-image вместо background Кнопке добавь ширину фиксированную либо оберни в контейнер c display flex justify-content center
.intro { /* высота */ height: 750px; /* фоновая картинка; center - позиционирование картинки по центру и повторение /cover чтобы картинка занимала пропорционально всю ширину высоту блока */ /*background: url(/img/header-bg.jpg) center no-repeat / cover;*/ background-image: url("/project2/images/image.jpg") ; background-repeat: no-repeat; background-size: cover; padding-top: 100px; display: flex; /* каждый элементр в интро будет начинаться с новой строки */ flex-direction: column; /* чтобы выравнить ячейку по центру блока */ justify-content: center; } .btn { display: block; text-align: center; width: 150px; /* */ /* выравнивание по вертикальной границе по верху */ vertical-align: top; font-size: 13px; color: white; font-weight: 600; /* текст капсом */ text-transform: uppercase; /* убераю подчеркивание */ text-decoration: none; /* внутренние отступы */ padding: 14px 40px; /* скругления углов */ border-radius: 3px; /* шрифт наследуем от родители БОДИ */ font-family: inherit; /* у браузера есть по дефолту границы поэтому пишем */ border: 0; /* изменяет курсор при наведении */ cursor: pointer; /* плавный переход фона */ transition: background .2s linear; margin: 0 auto; } CSS .intro { /* высота */ height: 750px; /* фоновая картинка; center - позиционирование картинки по центру и повторение /cover чтобы картинка занимала пропорционально всю ширину высоту блока */ /*background: url(/img/header-bg.jpg) center no-repeat / cover;*/ background-image: url("/project2/images/image.jpg") ; background-repeat: no-repeat; background-size: cover; padding-top: 100px; display: flex; /* каждый элементр в интро будет начинаться с новой строки */ flex-direction: column; /* чтобы выравнить ячейку по центру блока */ justify-content: center; } .btn { display: block; text-align: center; width: 150px; /* */ /* выравнивание по вертикальной границе по верху */ vertical-align: top; font-size: 13px; color: white; font-weight: 600; /* текст капсом */ text-transform: uppercase; /* убераю подчеркивание */ text-decoration: none; /* внутренние отступы */ padding: 14px 40px; /* скругления углов */ border-radius: 3px; /* шрифт наследуем от родители БОДИ */ font-family: inherit; /* у браузера есть по дефолту границы поэтому пишем */ border: 0; /* изменяет курсор при наведении */ cursor: pointer; /* плавный переход фона */ transition: background .2s linear; margin: 0 auto; }