<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;
}
На iOS в Safari автопроигрывание отключено. Такая вот позиция Apple - чтобы батарейку не жрало. Поэтому там показывается видео со значком Play, на который надо нажать, после чего видео начинает играть на полный экран.
Как вы организовываете код на фронтенде? Чем пользуетесь, собираете, где храните?