Вот такая вот штука(код ниже). Валидатор матерится, хотя визуально эффект получился :
Element div not allowed as child of element label in this context
Помогите исправить ошибки, буду благодарен
.cases {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
padding-top: 52px;
}
.case1, .case2, .case3 {
float: left;
margin:10px 46px 0 0;
width: 270px;
height: 420px;
border: 1px solid #EDEDED;
cursor: pointer;
display: block;
}
.marker {
display: block;
width: 30%;
height: 2px;
margin: 0 auto;
background-color: #00B533;
opacity: 0;
transition: 0.3s;
}
#case1, #case2, #case3 {
display: none;
}
#case1:checked + .marker {
opacity: 1;
}
#case1:checked ~ .case-btn, #case2:checked ~ .case-btn, #case3:checked ~ .case-btn {
background: #00B533;
color: #fff;
}
/*#case2:checked ~ .case-btn{*/
/*background: #00B533;*/
/*}*/
/*#case3:checked ~ .case-btn{*/
/*background: #00B533;*/
/*}*/
#case2:checked + .marker {
opacity: 1;
}
#case3:checked + .marker {
opacity: 1;
}
.case-header {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
border-bottom: 1px solid #EDEDED;
height: 110px;
}
.case-title {
display: block;
width: 100%;
font-family: "Roboto Medium";
font-size: 14px;
text-align: center;
padding: 25px 0;
margin: 0 auto;
}
.round {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border: 2px solid #00B533;
border-radius: 50%;
margin: 0 auto;
font-family: "Roboto Medium";
font-size: 23px;
background: #fff;
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1);
}
.round p:last-child {
font-family: "Roboto Light Italic";
font-size: 10px;
}
.case-description {
text-align: center;
padding-top: 75px;
}
.case-description ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.case-description ul li {
padding-top: 18px;
}
.case-btn {
display: block;
margin: 35px auto 0;
height: 30px;
width: 120px;
background: #fff;
border: 1px solid #EDEDED;
border-radius: 20px;
transition: 0.3s;
}
.case-btn:hover {
background: #00B533;
color: #ffffff;
}
.case-btn:focus {
outline: none;
}
<div class="cases">
<div class="case1">
<label for="case1">
<input type="radio" id="case1" name="choice" />
<div class="marker"></div>
<div class="case-header">
<p class="case-title">BLABLABLA</p>
<div class="round">
</div>
</div>
<div class="case-description">
<ul>
<li >
<p>Some Text</p>
</li>
<li >
Some Text
</li>
<li >
<p>Some Text</p>
</li>
<li >Some Text</li>
</ul>
</div>
<button class="case-btn">PURCHASE</button>
</label>
</div>
</div>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Я начинающий программист и не могу самостоятельно найти ответ на вопрос:
"Оформите предоплату на журнал" как сделать чтобы первые два слова были одного цвета и размера, а последнее другогоТолько не используя css (верстка...
Здравствуйте! Подскажите, пожалуйста, что не так делаюЕсли задаю маркер с прописанными вручную координатами, он отображается на карте, а если...