@flos_ocimum

Как добавить черный цвет в футер?

В CSS указываю, чтобы задний фон моего футера был черного цвета, но в браузере ничего не отображается, хотя в хейдере делала также и всё получилось.

HTML разметка

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Iphone 14 pro</title>
</head>
<body>
    <header class="header">
        <div class="container">
           <nav class="nav">
            <ul class="menu">
                <li class="menu-item">
                    <a href="#" class="menu-link">Что нового</a>
                </li>
                <li class="menu-item">
                    <a href="#" class="menu-link">Цвет</a>
                </li>
                <li class="menu-item">
                    <a href="#" class="menu-link">Заказать</a>
                </li>
            </ul>
            <a class="logo">
                <img src="img/logo.svg" alt="логотип" class="logo-img">
            </a>
            
            <a href="tel:380504565656" class="phone">+38 050-456-56-56</a>
           </nav>
        </div>
    </header>
    <main class="main">
        <section class="headline">
            <div class="container">
                <h1 class="title">IPHONE 14 PRO</h1>
                <img src="img/iphone.png" alt="IPHONE 14 PRO" class="headline-img">
                <a href="#" class="headline-btn">ВЫБРАТЬ</a>

            </div>
        </section>
        <section class="new">
            <div class="container">
                <h2 class="new-title">ЧТО НОВОГО</h2>
                <div class="new-info">
                    <div class="new-text">
                        <p>Все модели оснащены однокристальной системой A16 Bionic, 48-мегапиксельной основной камерой и экранами ProMotion с
                             защитой Ceramic Shield и частотным диапазоном 1 — 120 Гц, а также ускоренной памятью LPDDR5. Дизайн линейки обновлен, на
                              фронтальной панели смартфонов два выреза. </p>

                        <p>Все iPhone 14 в США будут продаваться без лотка для SIM-карт: производитель заявляет, что улучшенная технология eSIM позволит перенести старые
                             электронные сим-карты на новые смартфоны.
                        </p>

                        <p>Обновлены фронтальная камера (она снабжена автофокусом и быстрее распознает пользователя в условиях недостаточной освещенности) и сенсор основной камеры.
                        </p>
                        <b>
                            iPhone 14 Pro вышел в новом дизайне — без фирменной «челки». Также в ассортименте появился новый цвет. В смартфоне, в отличие от «обычных» 
                            14-х айфонов, установлен процессор A16 Bionic, который может 
                            за секунду производить 4 трлн операций с фото.
                        </b>
                    </div>
                    <img class="images-new" src="img/iphone-news1.jpg" alt="iphone news">
                </div>
            </div>
        </section>
        <section class="color">
            <div class="container">
                <h2 class="color-title">
                    ВЫБЕРИ СВОЙ ЦВЕТ
                </h2>
                <ul class="color-list">
                    <li class="color-item">
                        <img src="img/color-1.jpg" alt="">
                        <h3>Silver</h3>
                        <p>серебристый</p>
                    </li>
                    <li class="color-item">
                        <img src="img/color-2.jpg" alt="">
                        <h3>Deep purple</h3>
                        <p>темно фиолетовый</p>
                    </li>
                    <li class="color-item">
                        <img src="img/color-3.jpg" alt="">
                        <h3>Gold</h3>
                        <p>золотой</p>
                    </li>
                    <li class="color-item">
                        <img src="img/color-4.jpg" alt="">
                        <h3>Space Black</h3>
                        <p>космический черный</p>
                    </li>
                </ul>
                  <!смотреть на верстка сайта для начинающих 2.56.05!>
            </div>
        </section>
        <section class:"contacts">
            <div class="container">
                <div class="contacts-inner">
                    <form class="contacts-form" action="#">
                        <h2 class="contacts-title">ХОЧЕШЬ IPHONE 14 PRO?</h2>
                        <input class="contacts-input" type="text"
                         placeholder="Ваше имя">
                        <input class="contacts-input" type="tel"
                        placeholder="Номер телефона">
                        <p>В ближайшее время наш менеджер свяжется с Вами</p>
                        <button tipe="submit">ЗАКАЗАТЬ</button>
                    </form>
                    <img src="img/big_phone.jpg" alt="iphone-photo">

                </div>
            </div>
        </section>
    </main>
    <footer class"footer">
        <div class="container">
            <div class="footer-inner">
                <a class="footer-link" href="#">Политика конфиденциальности</a>
                <a class="logo">
                    <img src="img/logo.svg" alt="логотип" class="logo-img">
                </a>
                
                <a href="tel:380504565656" class="phone">+38 050-456-56-56</a>
            </div>
        </div>
    </footer>
</body>
</html>


CSS стили
a{
    text-decoration: none;
    color:inherit;
}
ul{
    margin:0;
    padding:0;
    list-style:none;
}
body{
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: #0A0A0A;

}
.header{
    background-color: #0A0A0A;
    padding: 33px 0 32px;
    color: #717171;
    font-size: 24px;
    line-height:29px;


}
.container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;

}
.nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.menu{
    display: flex;
    flex-grow: 1;
    flex-basis: 0;
    /*для начала просто запомни и используй
     эту штуку, чтобы выровнять лого по центру*/
}
.phone{
    flex-grow: 1;
    flex-basis: 0;
    text-align: right;
    font-size: 24px;
    line-height: 29px;

}

.menu-item{
    padding-right:30px;
}

.headline{
    background-color:#F5F5F7;
    text-align: center;
    padding: 70px 0 40px;
    
}
.title{
    text-transform: uppercase;
    margin-bottom:0 0 40px;
    color: #490E84;
    font-weight: 700;
    font-size: 64px;
    line-height: 77px;
}
.headline-img{
    margin-bottom:25px;
}
.headline-btn{
    display: inline-block;
    font-weight:700;
    font-size:24px;
    line-height: 29px;
    color: #FFF;
    background-color: #490E84;
    padding: 22px 117px 19px;
    border-radius: 30px;
}
.new{
    padding:90px 0 150px;
}
.new-title, 
.color-title {
    margin: 0 0 50px;
    text-transform: uppercase;
    text-align: center;
    color: #717171;
    font-weight:700;
    font-size: 32px;
    line-height:39px;
}
.new-info{
    display: flex;
    align-items: center;

}
.new-text,p{
    max-width: 560px;
    margin: 0 0 30px;
    
}
.new-text,b{
    max-width: 560px;
    font-size: 20px;
    line-height: 26px;
    display:block;
}
.images-new{
    margin: 190px;
}
.color{
    padding-bottom:150px;

}
.color-list{
    display: flex;
    justify-content: space-between;
    text-align: center;
}
.color-item img{
margin-bottom:20px;
}
.color-item h3{
    margin-bottom:10px;
    font-size:20px;
    line-height:26px;
    font-weight:700;
}
.color-item p{
    margin:0;
    font-size:14px;
    line-height:18px;
    font-weight: 400;
}
.contacts-inner{
    display:flex;
    background-color: #574B63;
    color:#FFF;
}
.contacts-form{
    width:100%;
    padding: 140px 100px;
    text-align: center;
}
.contacts-title{
    font-weight:700;
    font-size:32px;
    line-height:39px;
    margin: 0 0 60px;
    text-transform: uppercase;
    text-align: left;

}
.contacts-input{
    padding: 10px 0;
    border:none;
    border-bottom: 1px solid #fff;
    display: block;
    width: 100%;
    margin-bottom: 20px;
    background-color: #574B63;
}
.contacts-input::placeholder{
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: #fff;
    opacity:50%;
    font-family: 'inter', sans-serif;
}
.contacts-form p{
    margin:30px 0;
    opacity:0.5;
    text-align: center;
}
.contacts-form button{
    border:none;
    text-transform: uppercase;
    color:#574B63;
    background-color: #FFF;
    border-radius: 30px;
    padding: 16px 81px;
    font-weight: 700px;
    font-size: 14px;
    line-height: 18px;
    cursor: pointer;
    
}

.footer-link{
    flex-basis: 0;
    flex-grow: 1;
}

.footer-inner{
    
    color:#717171;
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding:50px 0;
}
.footer{
    background-color: # #0A0A0A;
}
  • Вопрос задан
  • 53 просмотра
Решения вопроса 1
mizutsune
@mizutsune
Frontend Developer
- <footer class"footer">
+ <footer class="footer">

- background-color: # #0A0A0A;
+ background-color: #0A0A0A;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы