Не работает html и CSS код

Neizvest · 05.Июль.2018 12:32:49

Пропали кнопки внизу, а также перестали работать некоторые атрибуты после вставки этого кода, помогите пожалуйста!
Код
<input class="hide" id="hd-1" type="checkbox" >
<label for="hd-1">Нажмите здесь, если у вашего оператора код больше 3-ех знаков!</label>
<div>Если код вашего оператора имеет 4 и более заков ( допустимый и стандартный код 3 цифры ) - [ 7-(код из 4-ех и более знаков)-999-99-99 то введите в поле любой случайный номер, а свой корректный напишите в стороке комментариев!
</div>

CSS
/* скрываем чекбоксы и блоки с содержанием */
.hide,
.hide + label ~ div {
    display: none;
}
/* вид текста label */
.hide + label {
    margin: 0;
    padding: 0;
    color: green;
    cursor: pointer;
    display: inline-block;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
    color: red;
    border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием  */
.hide:checked + label + div {
    display: block; 
    background: #efefef;
    -moz-box-shadow: inset 3px 3px 10px #7d8e8f;
    -webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
    box-shadow: inset 3px 3px 10px #7d8e8f;
    margin-left: 20px;
    padding: 10px;
    /* чуточку анимации при появлении */
     -webkit-animation:fade ease-in 0.5s; 
     -moz-animation:fade ease-in 0.5s;
     animation:fade ease-in 0.5s; 
}
/* анимация при появлении скрытых блоков */
@-moz-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }   
}
.hide + label:before {
    background-color: #1e90ff;
    color: #fff;
    content: "\002B";
    display: block;
    float: left;
    font-size: 14px; 
    font-weight: bold;
    height: 16px;
    line-height: 16px;
    margin: 3px 5px;
    text-align: center;
    width: 16px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.hide:checked + label:before {
    content: "\2212";
}

Цельный код

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="discription" content="описание">
   <meta name="keywords" content="ключевые слова">
  <title>site</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>Вход/Регистрация</h1>
<hr>
<form action="htsh.ru" method=post>
<p>Ваш пол:</p>
  <label for="id_gender_male"><input type="radio" name="gender" value="male" id="id_gender_male" autofocus>Мужской</label>
  <label for="id_gender_female"><input type="radio" name="gender" value="female" id="id_gender_female" checked="checked">Женский</label>
<br>
<hr>
<div>
<p>Введите дату своего рождения:</p>
<input type="date" class="date" name="date" required>
</div>
<hr>
<br>
<p><label for="age">Ваш возраст:</label></p>
<input type="number" id="age" name="age" min="5" max="200" step=1 autocomplete="on" placeholder="гг" tabindex="4" required>
<hr>
<br>
<p><label for="phone">Введите ваш телефон:</label></p>
<input type="tel" name="phone" id="phone" placeholder="Формат: 7хххххххххх" pattern="7[0-9]{10}" autocomplete="on" tabindex="5" maxlength="11" required>
<input class="hide" id="hd-1" type="checkbox" >
<label for="hd-1">текст!</label>
<div>текст!
</div>
<hr>
<br>
<br>
<p><label for="mail">Введите ваш email:</label></p>
<br>
<input type="email" name="email" id="mail" pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})" placeholder="youradress@mail.com" autocomplete="on" required>
<br>
<br>
<p><label for="login">Логин:</label></p>
<br>
<input type="text" name="login" id="login" maxlength="12" placeholder="Уникальное имя" required>
<br>
<br>
<p><label for="password">Пароль:</label></p>
<br>
<input type="password" name="password" id="password"  placeholder="Пароль для последующего входа" required>
<hr>
<br>
<p><label for="adress"><span>Введите адрес доставки:</span></label></p>
<br>
<input type="text" id="id_adress1" name=country placeholder=Россия disabled required>
<input type="text" id="adress" list="town" name="town" placeholder="город" tabindex="11" required>
<datalist id="town">
<option value="Москва">
<option value="Санкт-Петербург">
<option value="Новгород">
<option value="Новосибирск">
<option value="Екатеринбург">
<option value="Казань">
</datalist>
<input type="text" id="id_adress2" name="street" placeholder="улица" tabindex="12" required>
<input type="text" id="id_adress3" name="house" placeholder="дом" tabindex="13" required>
<input type="text" id="id_adress4" name="flat" placeholder="квартира" tabindex="14" required>
<input type="text" id="id_adress5" name="entrance" placeholder="подъезд" tabindex="15" required>
<input type="text" id="id_adress6" name="index" placeholder="индекс" required>
<hr>
<br>
<textarea cols="45" rows="5" name="comments" wrap="hard">Введите ваши коментарии</textarea>
<br>
<textarea cols="45" rows="5" name="wishes" wrap="hard">Введите ваши пожелания</textarea>
<br>
<p id="photo">Фото (логотип)</p>  
<input type="file" name="photo" accept="image/*">
<hr>
<div class="button">
<label for="subscribe">Подписаться</label>
<input type="checkbox" id="subscribe" class="subscribe" name="subscribe">
<br>
<input type="submit" class="submit" value="Зарегестрироваться">
<input type="reset" class="reset" value="Сбросить">
<!--<button type="submit" class="submit" value="Зарегестрироваться">
<img src="img/20180701172611.png" alt=Регистрация>
</button>
<button type="reset" class="reset" value="Сбросить">
<img src="img/20180701172611.png">
</button>-->
<br>
</div>
</form>
</body>
</html>

CSS

body { 
background: url(img/20180626222607.png);
} 

hr {
padding: 0;
border: none;
border-top: medium double #333;
background-color: #29b0d3;
text-align: center;
}

h1 {
font-size: 38px;
color: black;
}

p {
font-size: 20px;
}

span {
font-size: 22px;
}

em {
color: black;
font-size: 18px;
}

textarea:hover {
background-color: #e8f8fa;
}

label[for="subscribe"] {
font-size: 22px;
}

.adress {
height: 20px;
width: 150px;
margin: 15px;
}

.button {
text-align: center;
}

.submit { 
font-size: 18px;
color: blue;
}

.reset {
font-size: 18px;
color: red;
}

.date {
font-size: 14px;
}

#login {
margin-bottom: 0px;
margin-left: 0px;
}

input[type="text"] {
margin-bottom: 30px;
margin-left: 20px;
}

input {
font-size: 16px;
}

input:hover {
background-color: #ffdec7;
}

input[type="file"]:hover {
background-color: #897cff;
}

input[type="date"] {
background-color: blue;
}

input[type="radio"]:hover {
background-color: blue;
}

/* раскрывающийся блок с текстом */
/* скрываем чекбоксы и блоки с содержанием */
.hide,
.hide + label ~ div {
    display: none;
}
/* вид текста label */
.hide + label {
font-size: 20px;
    margin: 0;
    padding: 25px;
    color: #50c878;
    cursor: pointer;
    display: inline-block;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
    color: red;
    border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием  */
.hide:checked + label + div {
    display: block; 
    background: #efefef;
    -moz-box-shadow: inset 3px 3px 10px #7d8e8f;
    -webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
    box-shadow: inset 3px 3px 10px #7d8e8f;
    margin-left: 20px;
    padding: 10px;
    /* чуточку анимации при появлении */
     -webkit-animation:fade ease-in 0.5s; 
     -moz-animation:fade ease-in 0.5s;
     animation:fade ease-in 0.5s; 
}
/* анимация при появлении скрытых блоков */
@-moz-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }   
}
.hide + label:before {
    background-color: #1e90ff;
    color: #fff;
    content: "\002B";
    display: block;
    float: left;
    font-size: 14px; 
    font-weight: bold;
    height: 16px;
    line-height: 16px;
    margin: 3px 5px;
    text-align: center;
    width: 16px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.hide:checked + label:before {
    content: "\2212";
}

Ineska · 05.Июль.2018 13:53:54

Для демонстрации своего кода пользуйтесь песочницей, например (1) или (2), или бесплатным хостингом Github Pages.

Neizvest · 05.Июль.2018 19:00:20

Там не показывает в чем ошибка, я пользуюсь песочницами

Ineska · 06.Июль.2018 05:46:57

Если бы вы действительно пользовались песочницами, то никогда бы не оформили свою тему с вопросом таким образом. (чем больше усилий приложите вы, тем больше вероятность, что кто-то поможет)

Neizvest · 06.Июль.2018 07:02:57

Песочницы не отображают такие ошибки:)

Ineska · 06.Июль.2018 07:12:18

Песочница показывает, как выглядит то, что вы написали.
А “кашу” из кода вряд ли кто-то будет копировать себе, чтобы смотреть, почему кнопки пропали или что-то не работает.

Valery_S · 06.Июль.2018 07:20:55

Вставьте Ваш код по адресу:
https://validator.w3.org/nu/#textarea

Neizvest · 06.Июль.2018 12:00:45

Все проверил, спасибо за сайт, но ошибка осталась)!

Valery_S · 06.Июль.2018 18:10:39

 /* скрываем чекбоксы и блоки с содержанием */
    .hide,
    .hide + label ~ div {
        display: none;
    }

~ замените на +

Neizvest · 06.Июль.2018 19:54:46

Спасибо, помогли!