Мне нужно повторить psd сайт, но у меня не все выходит. Надо навигатор через flex сделать, но у меня justify-content ставит текст вертикально. На скрине под цифрой 1 так должно выглядеть.
Следующая вопрос. Как сделать эти 3 таблицы в таком же расположении? Они у меня в самом верху слились в едино, а сделать так, как под цифрой 2 не могу. Это тоже через flex.
И последний вопрос. Как расположить текст под цифрой 3 так же? Он у меня только вверху держится, на середину выходит только "Студия". Также flex.
Заранее спасибо.
<body>
<header class="">
<div class="main">
<img class="" src="../img/8379fbcfa44cd4323daa88f3fb01d2db.png" alt="фото">
<div class="tel">
<p>+7(981)314364</p>
</div>
<h1 class="main h1">Наши сайты заставляют работать Ваш бизнес</h1>
<p class="main p1">Большинство веб-студий считаю окончанием работы загрузку сайта в интернет. Но почти никто не умеет делать проекты, которые работают и приносят прибыль.</p>
<div class="t">
<div class="t1">
<h2>518</h2>
<p>оказанных услуг</p>
</div>
<div class="t2">
<h2>345</h2>
<p>проектов</p>
</div>
<div class="t3">
<h2>218</h2>
<p>постоянных клиентов</p>
</div>
</div>
</div>
<nav class="nv">
<div class="">
<div class="logo1">logo</div>
<a class="g1" href="">Главная</a>
<a href="">О нас</a>
<a href="">Услуги</a>
<a href="">Наши работ</a>
<a href="">Контакты</a>
</div>
</nav>
</header>
<div class="glav">
<h2>Студия</h2>
<p>Основная специализация — проектирование сайтов и landing page.
Наша команда, состоящая из дизайнеров, маркетологов и программистов,
поддерживает каждый проект на протяжении всей его жизни. Студия
занимается разработкой индивидуального дизайна, оптимизацией
скорости работы продукта, предоставляет услуги по продвижению сайтов.</p>
</div>
<footer>
</footer>
</body>
body {
background-color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 0px;
}
.main {
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: center;
color: white;
line-height: 3.5rem;
}
.h1 {
width: 55%;
height: 55%;
position: absolute;
display: inherit;
align-items: center;
font-size: 50px;
text-align: center;
flex-wrap: wrap;
}
.p1 {
width: 55%;
height: 85%;
position: absolute;
display: inherit;
align-items: center;
font-size: 30px;
text-align: center;
flex-wrap: wrap;
}
.tel {
color: orange;
display: flex;
width: 100%;
justify-content: flex-end;
position: absolute;
font-size: 40px;
font-weight: bold;
margin-right: 100px;
}
.t {
width: 100%;
height: 100%;
position: absolute;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: baseline;
line-height: 1.5rem;
}
.t1 {
position: absolute;
display: inherit;
width: 10%;
padding: 5px;
border: 2px solid;
border-color: rgba(255, 255, 255, 0.5);
text-align: center;
font-weight: bold;
}
.t2 {
position: absolute;
display: inherit;
padding: 5px;
border: 2px solid;
border-color: rgba(255, 255, 255, 0.5);
font-weight: bold;
}
.t3 {
position: absolute;
display: inherit;
padding: 5px;
border: 2px solid;
border-color: rgba(255, 255, 255, 0.5);
font-weight: bold;
}
.nv {
width: 100%;
display: flex;
flex-direction: row-reverse;
border-bottom: 5px solid gray;
border-top: 5px solid gray;
font-size: 25px;
font-weight: bold;
}
.nv a {
width: 100%;
display: flex;
justify-content: space-evenly;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.g1 {
color: orange;
}
.logo1 {
display: flex;
position: absolute;
justify-content: flex-start;
float: left;
}
.glav {
width: 100%;
height: 100%;
background-image: url(../img/WE.png);
position: absolute;
display: flex;
justify-content: space-around;
align-content: flex-end;
text-align: left;
}
.glav h2 {
width: 33%;
height: inherit;
display: flex;
font-size: 30px;
text-align: center;
}
.glav p {
width: 33%;
height: inherit;
float: left;
display: flex;
flex-wrap: wrap;
font-size: 20px;
}
Сам psd сайт, если нужен
psd-html-css.ru/templates/besplatnyy-psd-shablon-v... 
