@media (max-width: 992px) {...}
@media (max-width: 768px) {...}@media (min-width: 768px) {...}
@media (min-width: 992px) {...}<header class="header">
<div class="header-form">
<div class="form">float:right</div>
</div>
<div class="header-logo">
<div class="logo">float:left</div>
</div>
<div class="header-search">
<div class="search">float:left</div>
</div>
</header>.header {
background-color: red;
width: 100%;
height: 400px;
}
.header-form {
float: right;
width: 20%;
}
.header-logo {
float: left;
width: 30%;
}
.header-search {
float: left;
width: 50%;
}
.logo {
height: 50px;
background-color: blue;
}
.search {
background-color: green;
height: 50px;
}
.form {
background-color: orange;
height: 50px;
}<input type="checkbox" name="ch" id="ch">
<label for="ch"></label>label {
display: block;
width: 20px;
height: 20px;
background: #fff;
border:2px solid red;
border-radius: 50%;
position: relative;
cursor: pointer;
}
label:after {
content: '';
display: block;
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: 5px;
display: none;
}
input[type="checkbox"]{
display: none;
}
input[type="checkbox"]:checked~label:after {
display: block;
}Есть пара человечков, на них нарисованы органы. При ховере подсветка, при клике модалка с инфой.
-webkit-box-shadow: 0px 0px 0px 60px rgba(95,90,71,1);
-moz-box-shadow: 0px 0px 0px 60px rgba(95,90,71,1);
box-shadow: 0px 0px 0px 60px rgba(95,90,71,1);h1 и p обернуть в div обязательно и задатьfloat: left, тогда и для формы сработает float: right<header class="top_header">
<div class="wrap">
<div class="header__left">
<h1><span>Н</span>азвание сайта</h1>
<p>Подзаголовок сайта или какой-нибудь слоган.</p>
</div>
<form class="search__form">
<input type="search" name="q" placeholder="Поиск...">
<input type="submit" value=""></p>
</form>
</div>
</header>.wrap {
max-width: 980px;
width: 100%;
margin: 0 auto;
}