<header class="container">
<div class="header-logo">
<img src="http://jakimez.ru/sites/all/themes/vladweb/img/logo.png" alt="logo">
</div>
<nav class="header-menu">
<ul>
<li class="navigation-menu">Главная</li>
<li class="navigation-menu">Наши Услуги</li>
<li class="navigation-menu">Цены</li>
<li class="navigation-menu">Контакты</li>
</ul>
</nav>
<div class="header-contacts">
8(4922)33-56-09
<br>info@jakimez.ru
</div>
</header>
.container {
max-width: 1000px;
margin: 0 auto;
}
header {
display: flex;
justify-content: space-between;
}
<br>
- это переход на новую строку, именно на новую строку, а не абзац (для этого есть <p>
) и, тем более, не для задания отступов между блоками (для этого есть padding и margin).что страшного - то может быть, если использовать
@media (min-width: 400px) {}
- это не media-переменная для телефона, это media-запрос, срабатывающий когда ширина больше 400px, т.е. это также и планшеты, и десктопы. Такое поведение абсолютно логично и правильно, это mobile first. Когда вы будете прописывать остальные media для устройств побольше - они будут добавлять и перезаписывать основные стили и стили из предыдущих media-запросов.@media (min-width: ...) and (max-width: ...) {}
background: rgb(0, 181, 197);
background: -moz-linear-gradient(30deg, rgb(0, 181, 197) 0%, rgb(0, 140, 164) 100%);
background: -webkit-linear-gradient(30deg, rgb(0, 181, 197) 0%, rgb(0, 140, 164) 100%);
background: -o-linear-gradient(30deg, rgb(0, 181, 197) 0%, rgb(0, 140, 164) 100%);
background: -ms-linear-gradient(30deg, rgb(0, 181, 197) 0%, rgb(0, 140, 164) 100%);
background: linear-gradient(120deg, rgb(0, 181, 197) 0%, rgb(0, 140, 164) 100%);
<div class="logo">
<a href="#"><strong>. one</strong>town</a>
</div>
<input type="text" class="email" value="Enter Your Email Address" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<div class="item1">
<div class="date">Дата</div>
<div class="text">Текст</div>
</div>
<div class="item2">
<div class="date">Дата</div>
<div class="text">Текст</div>
</div>
как правильно разбивать сайт перед версткой