Как заполнить пустое поле CSS [закрыт]

html{ 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 
 
body{ 
    margin: 0; 
    padding: 0; 
 
    width: 100%; 
    font-family: "Roboto-Medium", Roboto, "PT Sans Narrow", Arial, sans-serif; 
    font-size: 16px; 
    line-height: 24px; 
    font-weight: 400; 
    color: #283136; 
 
    background-color: #ffffff; 
} 
 
main{ 
    margin: 0; 
    padding: 0; 
} 
img{ 
    width: 100%; 
    height: auto; 
} 
 
.visually-hidden:not(:focus):not(:active), 
input[type='checkbox'].visually-hidden, 
input[type='radio'].visually-hidden{ 
    width: 1px; 
    height: 1px; 
    margin: -1px; 
    border: 0; 
    padding: 0; 
 
    white-space: nowrap; 
 
    clip-path: inset(100%); 
    clip: rect(0 0 0 0); 
    overflow: hidden; 
} 
 
h3,h2,h1{ 
    color: black; 
} 
a{ 
    text-decoration: none; 
} 
 
.sliders{ 
    position: relative; 
} 
.slider{ 
    display: block; 
    margin-bottom: 20px; 
    width: auto; 
 
    animation-name: slidersAnimation; 
    animation-duration: 2s; 
} 
.sliders .button{ 
    display: inline-block; 
    padding: 15px 55px; 
    margin-bottom: inherit; 
    max-width: 100%; 
} 
.slider-1{ 
    position: relative; 
    display: none; 
} 
.slider-2{ 
    display: none; 
    position: relative; 
} 
.slider-3{ 
    display: none; 
    position: relative; 
} 
.slider-indicators{ 
    position: absolute; 
    bottom: 100px; 
    left: 50%; 
 
    margin: 0; 
    padding: 0; 
    margin-left: -65px; 
 
    display: flex; 
    list-style: none; 
} 
.slider-indicator{ 
    display: block; 
    margin: 15px; 
} 
.slider-text{ 
    display: flex; 
    order: -1; 
    flex-direction: column; 
    width: 380px; 
} 
.slider-text h2{ 
    font-size: 55px; 
    line-height: 55px; 
    text-transform: none; 
} 
.slider-text p{ 
    font-size: 16px; 
    line-height: 24px; 
    text-transform: none; 
    color: #283136; 
} 
.about-left{ 
    width: 660px; 
} 
.about-left h2{ 
    font-size: 45px; 
    line-height: 45px; 
} 
.about-right { 
    width: 360px; 
} 
.about-left h3{ 
    font-size: 16px; 
    line-height: 24px; 
    font-weight: bold; 
    margin-bottom: 30px; 
} 
.about-right h3 { 
    font-size: 16px; 
    line-height: 24px; 
    font-weight: bold; 
    margin-bottom: 55px; 
} 
.about-left p:last-of-type{ 
    margin-bottom: 45px; 
} 
.about-right .item-right { 
    font-size: 45px; 
    line-height: 10px; 
    font-weight: bold; 
} 
/*На кнопки*/ 
.button{ 
    transition-property: background-color, color, border; 
    transition-duration: 150ms, 100ms, 50ms; 
 
    font: inherit; 
 
    cursor: pointer; 
 
    text-align: center; 
    vertical-align: middle; 
    text-transform: uppercase; 
 
    font-size: 16px; 
    line-height: 18px; 
    font-weight: bold; 
 
    border: none; 
    border-radius: 4px; 
} 
 
.button-red{ 
    color: #ffffff; 
    background-color: #fb565a; 
} 
.button-yellow{ 
    color: #ffffff; 
    background-color: #efc84a; 
} 
.button-green{ 
    color: #ffffff; 
    background-color: #00ca74; 
} 
.button-grey{ 
    color: #000000; 
    background-color: #eeeeee; 
} 
/* Навигационное меню с самого верха*/ 
.main-header{  
    margin: 0; 
    padding: 0; 
 
    text-transform: uppercase; 
    font-size: 16px; 
    line-height: 30px; 
    color: #000000; 
    font-weight: bold; 
 
    background-color: #eeeeee; 
 
    padding-left: 140px; 
    margin-bottom: 80px;; 
} 
.main-header h1{ 
    padding: 110px; 
 
    font-size: 55px; 
    line-height: 55px; 
 
    text-align: center; 
    text-transform: none; 
} 
.main-header-logo{ 
    align-items: baseline; 
} 
 
.main-navigation{ 
    display: flex; 
    justify-content: space-between; 
 
    align-items: baseline; 
    margin: 0; 
    padding: 0; 
} 
 
.site-navigation, 
.user-navigation{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
 
    margin-top: 40px; 
    margin-bottom: 10px; 
} 
.user-navigation { 
    margin-right: 55px; 
} 
 
.user-navigation .login-link{ 
    position: relative; 
    padding-left: 85px; 
} 
.login-link::before{ 
    content: ""; 
 
    position: absolute; 
    top: 38px; 
    left: 45px; 
 
    width: 18px; 
    height: 18px; 
 
    background-image: url("/img/ico/cart-icon.svg"); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    opacity: 0.45; 
} 
.site-navigation a, 
.user-navigation a{ 
    color: #000000; 
    display: block; 
    padding: 30px 50px 20px 50px; 
} 
 
 
/*Раздел преимуществ*/ 
.feautures-list{ 
    list-style: none; 
 
    display: flex; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    width: 1100px; 
 
    padding: auto; 
    margin: auto; 
} 
.feautures-item{ 
    text-align: left; 
    width: 300px; 
    margin-bottom: 80px; 
} 
 
.feautures-item h3{ 
    text-transform: uppercase; 
    font-size: 24px; 
    line-height: 30px; 
} 
.feautures-item p{ 
    margin-bottom: 35px; 
} 
.feautures-item .button{ 
    padding: 15px 40px; 
} 
/*Модальное окно*/ 
.modal{ 
    font-size: 16px; 
    line-height: 18px; 
} 
.modal button{ 
    padding: 18px 85px; 
} 
.modal legend{ 
    font-size: 45px; 
    line-height: 45px; 
} 
.modal-appointment { 
    display: none; 
    font: inherit; 
 
    background-color: white; 
    border: 2px solid #000000; 
    box-shadow: 0 20px 20px 1px black; 
 
    margin: 0; 
    padding: 85px 100px; 
 
    position: fixed; 
    top:120px; 
    left: 120px; 
} 
.form-appointment-inputs{ 
    display: flex; 
    flex-direction: row; 
    justify-content: flex-start; 
 
    list-style: none; 
 
    margin: 0; 
    padding: 0; 
} 
.form-appointment-inputs li { 
    margin: 0; 
    padding: 0; 
 
    margin-top: 12px; 
    margin-right: 40px; 
 
} 
.form-appointment-inputs li:last-child{ 
    margin-right: 0; 
} 
.form-input-text textarea{ 
    display: block; 
    width: 100%; 
    box-sizing: border-box; 
} 
.modal-appointment input{ 
    min-width: 200px; 
} 
.modal-appointment input, 
.modal-appointment textarea{ 
    font: inherit; 
    color: #a1a1a1; 
 
    background-color: transparent; 
    border: 2px solid #d7dcde; 
    outline: none; 
 
    padding: 12px 15px; 
    margin-bottom: 35px; 
} 
 
.modal-appointment fieldset{ 
    border: none; 
    padding: 0; 
    margin: 0; 
} 
.modal-appointment legend{ 
    font-size: 45px; 
    line-height: 45px; 
 
    font-weight: bold; 
    margin-bottom: 35px; 
} 
.form-appointment-close{ 
    position: absolute; 
    top: 80px; 
    right: 90px; 
    opacity: 0.3; 
    width: auto; 
} 
.form-appointment-close:hover, 
.form-appointment-close:focus 
{ 
    opacity: 1; 
} 
.form-appointment-close:active{ 
    opacity: 0.1; 
} 
 
.form-paragraph{ 
    margin: 0; 
    margin-bottom: 10px; 
 
    font-size: 16px; 
    line-height: 18px; 
    font-weight: bold; 
} 
 
.orders-right{ 
    display: flex; 
    justify-content: space-between; 
    width: 360px; 
    padding: 0; 
 
    list-style: none; 
} 
 
.about-logo{ 
    margin: auto; 
    padding: auto; 
} 
.about-logo img{ 
    opacity: 0.2; 
} 
.about-logo img:active{ 
    transition: opacity 25ms linear; 
    opacity: 0.1; 
} 
.orders-logo{ 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-around; 
    width: auto; 
 
    border-top: 2px solid #eeeeee; 
    border-bottom: 2px solid #eeeeee; 
 
    padding: 45px 65px 45px 40px; 
    margin: auto; 
 
    margin-bottom: 80px; 
 
    list-style: none; 
} 
 
/**/ 
.main-footer{ 
    color: #000000; 
 
    background-color: #ffffff; 
} 
.logo-social{ 
    display: flex; 
    justify-content: flex-start; 
    padding: 0; 
 
    list-style: none; 
} 
.logo-social-circle{ 
    display: flex; 
    background-color: #e1e1e1; 
 
    width: 80px; 
    height: 80px; 
    margin: 12px; 
 
    border-radius: 50%; 
    justify-content: center; 
} 
.logo-social-circle:hover, 
.logo-social-circle:focus{ 
    transition: background-color 150ms ease-in; 
    background-color: #e74246; 
} 
.logo-social-circle:active{ 
    transition: background-color, border 25ms ease-in; 
    background-color: #d7373b; 
 
    border-top: solid 3px #c13135; 
    box-sizing: border-box; 
} 
.logo-social-circle img{ 
    padding: 30px; 
} 
.logo-social-circle img:active{ 
    opacity: 0.3; 
} 
 
/**/ 
.content{ 
    display: flex; 
} 
.content-sort{ 
    display: flex; 
    justify-content: flex-start; 
    margin: 0; 
    padding: 0; 
 
    font-size: 14px; 
    line-height: 18px; 
    text-transform: uppercase; 
 
    list-style: none; 
} 
 
.sort-content-items{ 
    display: flex; 
    justify-content: space-between; 
    width: 360px; 
    align-items: center; 
 
    font-weight: bold; 
} 
 
.content-sort-item label{ 
    opacity: 0.3; 
    margin-right: 25px; 
} 
.content-sort-item input:checked + label{ 
    opacity: 1; 
} 
.content-sort-item:last-child label{ 
    margin-right: 0; 
} 
.content-sort-updown{ 
    display: flex; 
    justify-content: flex-end; 
 
    list-style: none; 
     
    margin: 0; 
    padding: 0; 
} 
 
.pagination-list{ 
    display: flex; 
    flex-direction: row; 
    list-style: none; 
} 
.pagination-item{ 
    margin-right: 11px; 
 
    border: 3px solid #eeeeee; 
    border-radius: 3px; 
    box-sizing: border-box; 
    background-color: #eeeeee; 
} 
 
.pagination-item-current{ 
    background-color: #ffffff; 
} 
.pagination-item:last-child a{ 
    padding: 15px 78px; 
} 
 
 
/*Columns*/ 
 
.studio-column{ 
    display: flex; 
    justify-content: space-between; 
 
    border-top: 2px #eeeeee solid; 
    color: #283136; 
 
    padding: auto; 
    margin: auto; 
 
    padding-top: 40px; 
    margin-bottom: 80px; 
    width: 1160px; 
} 
.studio-column h3{ 
    text-transform: uppercase; 
    color: black; 
 
    font-size: 16px; 
    line-height: 24px; 
} 
 
.orders-left{ 
    list-style: none; 
    margin-left: 0; 
    padding: 0; 
} 
.orders-item-left{ 
    position: relative; 
    padding: 0 0 0 35px; 
} 
.orders-item-left::before{ 
    content: ""; 
 
    position: absolute; 
    top: 12px; 
    left: 1px; 
    width: 25px; 
    height: 2px; 
 
    background-color: #fb565a; 
} 
 
/*Logotipes*/ 
 
.contacts{ 
    position: relative; 
    color: #666666; 
    background-color: #ffffff; 
 
    margin-bottom: 70px; 
} 
.card{ 
    position: relative; 
    width: 100%; 
} 
.card img{ 
    min-height: 415px; 
} 
.modal-show-form{ 
    position: absolute; 
    top: 55px; 
    left: 140px; 
 
    padding: 50px; 
 
    background-color: white; 
} 
.modal-show-form .button{ 
    width: 100%; 
    padding: 15px; 
} 
 
.footer-column{ 
    display: flex; 
    justify-content: flex-start; 
 
    margin-left: 140px; 
    margin-right: 200px; 
    padding: 0; 
    margin-bottom: 70px; 
} 
 
.logo-right{ 
    margin-left: 140px; 
} 
.logo-right h3{ 
    font-size: 36px; 
    line-height: 36px; 
    color:black; 
} 
 
.sidebar-left{ 
    margin: 0; 
    padding: 0; 
} 
.sidebar{ 
    margin: 0; 
    padding: 0; 
 
    width: 260px; 
    font-size: 16px; 
    line-height: 20px; 
    color: #283136; 
} 
.sidebar .button{ 
    width: 100%; 
    padding: 15px; 
} 
.sidebar fieldset{ 
    margin: 0; 
    padding: 0; 
 
    border: none; 
 
    margin-bottom: 60px; 
} 
.sidebar legend{ 
 
    font-size: 18px; 
    line-height: 30px; 
    text-transform: uppercase; 
    font-weight: bold; 
    color: #000000; 
 
    margin-bottom: 50px; 
} 
 
.sort-content{ 
    display: flex; 
    flex-wrap: nowrap; 
    justify-content: space-between; 
 
} 
.sort-content h3{ 
    align-content: flex-end; 
    margin-left: 140px; 
} 
 
.catalog{ 
    display: flex; 
    flex-wrap: wrap; 
    align-items: stretch; 
    justify-content: space-between; 
    width: 760px; 
 
    margin-left: 140px; 
} 
 
.catalog-item{ 
    display: block; 
    position: relative; 
 
    margin-bottom: 35px; 
} 
.catalog-item .button{ 
    display: block; 
 
    padding: 15px 60px; 
} 
 
.price-hidden{ 
    position: absolute; 
    bottom: 0; 
    right: 0; 
 
    display: none; 
    flex-direction: column; 
    align-items: center; 
    padding-top: 30px; 
 
    width: 100%; 
    min-height: 230px; 
    text-align: center; 
 
    color: #666666; 
    background-color: #eeeeee; 
} 
.price-hidden h3{ 
    font-size: 18px; 
    line-height: 30px; 
 
    text-transform: uppercase; 
 
    color: #000000; 
} 
.over-pic{ 
    opacity: 0.12; 
} 
 
.general-container{ 
    display: flex; 
} 
.main-column{ 
    display: flex; 
} 
.flex-price-column{ 
    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
 
    width: 260px; 
 
    color: #283136; 
    text-transform: uppercase; 
} 
.price-quantity input{ 
    width: 80px; 
    height: 38; 
 
    background-color: #eeeeee; 
    border: 0; 
    border-radius: 3px; 
 
    margin-left: 13px; 
} 
 
.price-range input{ 
    width: 260px; 
    height: 80px; 
    background-color: #eeeeee; 
    border-radius: 3px; 
} 
.sidebar-input{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
.sidebar-input li{ 
    position: relative; 
 
    padding-left: 35px; 
    margin-bottom: 16px; 
}

<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
    <meta charset="utf-8"> 
    <!--<meta http-equiv="refresh" content="8">--> 
    <title>Дизайн-студия NERDS</title> 
    <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&amp;subset=latin,cyrillic" 
        rel="stylesheet"> 
    <link rel="stylesheet" href="/css/main-mini.css"> 
    <link rel="stylesheet" href="/css/normalize.css"> 
 
</head> 
 
<body> 
    <header class="main-header"> 
        <nav class="main-navigation"> 
            <a href="nerds.loc" class="main-header-logo"> 
                <img src="img/nerds-logo.svg" id="logotipe" width="160" alt="Логотип дизайн-студии NERDS"> 
            </a> 
 
            <ul class="site-navigation"> 
                <li> 
                    <a href="nerds-info.html">Студия</a> 
                </li> 
                <li> 
                    <a href="nerds-clients.html">Клиенты</a> 
                </li> 
                <li> 
                    <a href="nerds-catalog.html">Магазин</a> 
                </li> 
                <li> 
                    <a href="nerds-contacts.html">Контакты</a> 
                </li> 
            </ul> 
            <ul class="user-navigation"> 
                <a href="#" class="login-link"> 
                    <!--<li class="trash-box"> 
                        <img src="/img/ico/cart-icon.png" id="trash-box-img" alt="Корзина"> 
                    </li>--> 
                    <li class="trash-box"> 
                        Корзина 
                    </li> 
                </a> 
            </ul> 
        </nav> 
 
        <section class="sliders"> 
            <!-- Радио-баттонс сделаю в диве пока --> 
            <!-- А тут меняющиеся слайдеры, тоже пока на ДИВАХ --> 
            <div class="slider slider-1"> 
                <div class="slider-img"> 
                    <img src="img/nerds-index-slide1.png"> 
                </div> 
                <div class="slider-text"> 
                    <h2 class="slider-headline">Долго, дорого, Скрупулёзно</h2> 
                    <p>Математически выверенный дизайн для вашего сайта или мобильного приложения</p> 
                    <p><a class="sliders-button button-red button">Узнать больше</a></p> 
                </div> 
            </div> 
            <div class="slider slider-2"> 
                <div class="slider-img"> 
                    <img src="img/nerds-index-slide2.png"> 
                </div> 
                <div class="slider-text"> 
                    <h2 class="slider-headline">Любим математику как никто другой</h2> 
                    <p>Никакого креатива, только математические формулы для расчета идеальных пропорций</p> 
                    <p><a class="sliders-button button-red button">Узнать больше</a></p> 
                </div> 
            </div> 
            <div class="slider slider-3"> 
                <div class="slider-img"> 
                    <img src="img/nerds-index-slide3.png"> 
                </div> 
                <div class="slider-text"> 
                    <h2 class="slider-headline">Только ночь, только хардкор</h2> 
                    <p>Работать днем, как все? Мы против этого. Ближе к полуночи работа только начинается</p> 
                    <p><a class="sliders-button button-red button">Узнать больше</a></p> 
                </div> 
            </div> 
 
            <ul class="slider-indicators"> 
                <li> 
                    <input class="slider-indicator" name="slider-indicator" type="radio" value="1" checked> 
                </li> 
                <li> 
                    <input class="slider-indicator" name="slider-indicator" type="radio" value="2"> 
                <li> 
                <li> 
                    <input class="slider-indicator" name="slider-indicator" type="radio" value="3"> 
                </li> 
            </ul> 
 
        </section> 
 
    </header> 
 
    <main class="container"> 
        <h1 type="hidden" class="visually-hidden">Мы — маленькая, но гордая дизайн-студия из Краснодара NERDS</h1> 
        <h2 class="visually-hidden">Наши преимущества</h2> 
        <section class="feautures"> 
            <ul class="feautures-list"> 
                <li class="feautures-item"> 
                    <img src="img/illustration-1.jpg" alt="Картинка изображающая веб-сайты"> 
                    <h3>Веб-сайты</h3> 
                    <p>Мир никогда не будет прежним после того как увидит ваш сайт!</p> 
                    <p><a class="button-red button">Заказать</a></p> 
                </li> 
                <li class="feautures-item"> 
                    <img src="img/illustration-2.jpg" alt="Картинка изображающая приложения"> 
                    <h3>Приложения</h3> 
                    <p>Покорите топ-10 приложений в AppStore и Google Play</p> 
                    <p><a class="button-green button">Заказать</a></p> 
                </li> 
                <li class="feautures-item"> 
                    <img src="img/illustration-3.jpg" alt="Картинка изображающая презентации"> 
                    <h3>Презентации</h3> 
                    <p>Вы даже не подозреваете, насколько вы изумительны!</p> 
                    <p><a class="button-yellow button">Заказать</a></p> 
                </li> 
            </ul> 
        </section> 
 
        <div class="studio-column"> 
            <section class="about-left"> 
                <!-- Левый описание --> 
                <h2>Мы — маленькая, но гордая дизайн-студия из Краснодара.</h2> 
                <p>Исповедуем принципы минимализма и чистоты. Ставим математический расчёт выше креатива. Работаем не 
                    покладая рук, как роботы.</p> 
                <h3>Выполняем заказы на разработку: </h3> 
                <ul class="orders-left"> 
                    <li class="orders-item-left">Веб-сайтов любой сложности</li> 
                    <li class="orders-item-left">Моболиных приложений дл iOS и Android</li> 
                    <li class="orders-item-left">Слайдшоу и видео для корпоративных презентаций</li> 
                </ul> 
            </section> 
            <section class="about-right"> 
                <!-- Правый описание --> 
                <img src="img/nerds-illustration.jpg" alt="Логотип кампании NERDS"> 
                <h3>с 2004 года Любим точность во всем:</h3> 
                <ul class="orders-right"> 
                    <li class="orders-item-right"> 
                        <span class="item-right">146 <sup>%</sup></span><br> 
                        Уровень<br> 
                        самоотдачи 
                    </li> 
                    <li class="orders-item-right"> 
                        <span class="item-right">100 <sup>%</sup></span><br> 
                        Соблюдение<br> 
                        сроков 
                    </li> 
                    <li class="orders-item-right"> 
                        <span class="item-right">50 <sup>%</sup></span><br> 
                        Минимальная<br> 
                        предоплата 
                    </li> 
                </ul> 
            </section> 
        </div> 
        <section class="about-logo"> 
            <!-- Нижние логотипы под описаниями --> 
            <ul class="orders-logo"> 
                <li class="orders-item-logo"> 
                    <a href="#"> 
                    <img src="img/logo-1.png" alt="Логотип HTML academy"> 
                    </a> 
                </li> 
                <li class="orders-item-logo"> 
                    <a href="#"> 
                    <img src="img/logo-2.png" alt='Логотип барбершоп "Бородинский"'> 
                    </a> 
                </li> 
                <li class="orders-item-logo"> 
                    <a href="#"> 
                    <img src="img/logo-3.png" alt="Логотип Pink"> 
                    </a> 
                </li> 
                <li class="orders-item-logo"> 
                    <a href="#"> 
                    <img src="img/logo-4.png" alt="Логотип Mishka"> 
                    </a> 
                </li> 
            </ul> 
        </section> 
 
    </main> 
 
    <footer class="main-footer"> 
 
        <section class="contacts"> 
            <div class="card"> 
                <img src="img/map-marker.jpg" alt="Наше расположение на карте"> 
            </div> 
            <div class="modal-show-form"> 
                <h2>NЁRDS DESIGN STUDIO</h2> 
                <p> 
                    191186, Санкт-Петербург, <br> 
                    ул. Б. Конюшенная, д. 19/8 
                </p> 
                <p>тел. +7 (812) 275-75-75</p> 
                <p><button class="button button-red" id="open-form">Напишите нам</button></p> 
            </div> 
        </section> 
 
        <!--<img src="img/map-marker.jpg" alt="Карта, как проехать">--> 
        <div class="footer-column"> 
            <section class="logo-social"> 
                <ul class="logo-social"> 
                    <!-- Картинки-ссылки для соц. сетей --> 
                    <a class="logo-social-button" href="#"> 
                        <li class="logo-social-circle"> 
                            <img src="img/vk-icon.svg" alt="Логотип VK"> 
                        </li> 
                    </a> 
 
                    <a class="logo-social-button" href="#"> 
                        <li class="logo-social-circle"> 
                            <img src="img/fb-icon.svg" alt="Логотип Facebook"> 
                        </li> 
                    </a> 
 
                    <a class="logo-social-button" href="#"> 
                        <li class="logo-social-circle"> 
                            <img src="img/insta-icon.svg" alt="Логотип Insragramm"> 
                        </li> 
                    </a> 
                </ul> 
            </section> 
            <section class="logo-right"> 
                <h3 class="footer-right">Давайте дружить, это выгодно!</h3> 
                <p><span class="footer-right-p">Скидка 10% для друзей из социальных сетей.</span></p> 
            </section> 
        </div> 
    </footer> 
 
    <section class="modal modal-appointment"> 
 
        <form class="form-appointment"> 
            <fieldset> 
                <legend>Напишите нам</legend> 
 
                <img class="form-appointment-close" src="img/ico/close-cross-form.svg"> 
                <!--Кнопка закрытия--> 
 
                <ul class="form-appointment-inputs"> 
                    <li class="form-input-item"> 
                        <label for="name"> 
                            <p class="form-paragraph">Ваше Имя Фамилия:</p> 
                        </label> 
                        <input class="form-text" type="text" name="name" id="name" placeholder="Имя Фамилия" required> 
                    </li> 
                    <li class="form-input-item"> 
                        <label for="email"> 
                            <p class="form-paragraph">Ваш e-mail:</p> 
                        </label> 
                        <input class="form-text" type="email" name="email" id="email" placeholder="Ваш e-mail" required> 
                    </li> 
                </ul> 
 
                <div class="form-input-text"> 
                    <label> 
                        <p class="form-paragraph">Текст письма</p> 
                        <textarea class="form-textarea" name="text" id="text" required></textarea> 
                    </label> 
                </div> 
            </fieldset> 
            <button type="submit" class="button-submit button-red button">Отправить</button> 
        </form> 
 
    </section> 
    <div class="overlay"></div> 
    <script src="/js/script.js"></script> 
</body> 
 
</html>