form.html

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="utf-8">
    <title>Мишка Форма</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<body class="body">
    <header class="page-header">
        <a class="logo"><img src="img/logo-mobile.svg" alt="Mishka"></a>
        <nav class="main-nav">
            <span class="main-nav__toggle main-nav__toggle--active"></span>
            <ul class="nav-list">
                <li class="nav-list__item"><a href="#" class="nav-list__link">Каталог товаров</a></li>
                <li class="nav-list__item"><a href="#" class="nav-list__link">Вязание на заказ</a></li>
                <li class="nav-list__item"><a href="#" class="nav-list__link">Новые поступления</a></li>
                <li class="nav-list__item"><a href="#" class="nav-list__link">Распродажа</a></li>
            </ul>
        </nav>
        <form action="#" class="search">
            <label class="search__label">
                <span class="search__ico"></span>
                <input type="search">
            </label>
        </form>
        <a href="#" class="basket">Корзина: пока пуста</a>
        <span class="delivery">Бесплатная доставка по России</span>
    </header>
    <main class="form-main">
        <h1 class="page-title">Вязание на заказ</h1>
        <p class="form-main__slogan">Мы будем рады воплотить в жизнь ваши пожелания! Заполните простую форму заказа и мы свяжемся с вами, чтобы уточнить детали.</p>
        <form action="" class="order">
            <div class="order-fieldset">
                <div class="order-fieldset__title">Тип</div>
                <input id="type-accessories" type="radio" name="type" class="order__type-input">
                <input id="type-toys" type="radio" name="type" class="order__type-input">
                <div class="order-fieldset__wrapper">
                    <label for="type-accessories" class="order__radio">Аксессуар для интерьера</label>
                    <label for="type-toys" class="order__radio">Детская игрушка</label>
                </div>
            </div>
            <div class="order-fieldset">
                <div class="order-fieldset__title">Цвет</div>
                <input type="checkbox" class="order__color-input" name="color-white">
                <input type="checkbox" class="order__color-input" name="color-grey">
                <input type="checkbox" class="order__color-input" name="color-tiffany">
                <input type="checkbox" class="order__color-input" name="color-black">
                <input type="checkbox" class="order__color-input" name="color-pink">
                <input type="checkbox" class="order__color-input" name="color-orange">
                <div class="order-fieldset__wrapper order-fieldset__wrapper--color">
                    <label for="color-white" class="order__color">Белый</label>
                    <label for="color-grey" class="order__color">Серый</label>
                    <label for="color-tiffany" class="order__color">«Тиффани»</label>
                    <label for="color-black" class="order__color">Черный</label>
                    <label for="color-pink" class="order__color">Розовый</label>
                    <label for="color-orange" class="order__color">Оранжевый</label>
                </div>
            </div>
            <div class="order-fieldset">
                <div class="order-fieldset__title">ФИО</div>
                <div class="order-fieldset__wrapper">
                    <label class="order__name">Имя:
                        <input type="text" class="order__name-input" placeholder="Введите ваше имя*">
                    </label>
                    <label class="order__name">Фамилия:
                        <input type="text" class="order__name-input" placeholder="Укажите фамилию*">
                    </label>
                    <label class="order__name">Отчество:
                        <input type="text" class="order__name-input" placeholder="Отчество, если желаете">
                    </label>
                </div>
            </div>
            <div class="order-fieldset order-fieldset--contacts">
                <div class="order-fieldset__title order-fieldset__title--contacts">Тел</div>
                <input type="tel" class="order__tel" placeholder="+7 ХХХ ХХ ХХ*">
                <div class="order-fieldset__title order-fieldset__title--contacts order-fieldset__title--email">e-mail</div>
                <input type="email" class="order__email" placeholder="Ваш Email*">
            </div>
            <div class="order-fieldset">
                <div class="order-fieldset__title">Доп</div>
                <div class="order-fieldset__wrapper">
                    <textarea class="order__comment" placeholder="Опишите все пожелания к заказу"></textarea>
                </div>
            </div>
            <footer class="order__required">
                <div class="order__text">*Поля обязательны для заполнения</div>
                <button type="submit" class="btn btn--form">Отправить заказ</button>
            </footer>
        </form>
    </main>
    <footer class="page-footer">
        <div class="logo-footer"><img src="img/logo-mobile.svg"></div>
        <ul class="social">
            <li class="social__item"><a href="#" class="social__link social__link--insta">Мы в Instagram</a></li>
            <li class="social__item"><a href="#" class="social__link social__link--fb">Мы в Facebook</a></li>
            <li class="social__item"><a href="#" class="social__link social__link--tw">Мы в твиттер</a></li>
        </ul>
        <section class="copyright">
            <h3 class="copyright__title">Разработано <a href="#" class="copyright__link copyright__academy">HTML Academy</a></h3>
        </section>
    </footer>
</body>

</html>