Не знаю как сверстать текст над картинкой. Многое пробовал, возможно где-то есть ошибка. Помогите пожалуйста.
header {
height: 88px;
}
header nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
font-family: 'Gilroy-Bold', sans-serif;
text-align: center;
}
header nav ul li {
white-space: nowrap;
color: rgb(0, 0, 0);
font-size: 18px;
text-transform: uppercase;
display: inline-block;
margin: 70px 70px;
}
header nav ul li a {
color: rgb(0, 0, 0);
text-decoration: none;
}
header nav ul li a:hover {
color: rgb(0, 0, 0);
text-decoration: underline;
}
header hr {
border: none;
/* Убираем границу */
background-color: rgb(0, 0, 0);
/* Цвет линии */
color: rgb(0, 0, 0);
/* Цвет линии для IE6-7 */
height: 5px;
/* Толщина линии */
}
article h2 {
font-family: 'Gilroy-Bold';
font-size: 47.3392px;
}
.content {
padding-top: 128px;
display: flex;
justify-content: space-between;
}
.img {
text-align: center;
}
div.img img {
height: 387px;
width: 944px;
}
article div ul {
list-style-type: none;
padding: 0;
margin-left: 451px;
display: flex;
font-family: 'Gilroy-Bold', sans-serif;
text-align: center;
}
ul li {
white-space: nowrap;
color: rgb(0, 0, 0);
font-size: 18px;
text-transform: uppercase;
margin: 70px 84px;
}
.text_sm {
font-size: 16px;
writing-mode: vertical-rl;
}
<div class="container">
<header class="row no-gutters">
<nav class="col-8">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About me</a></li>
<li><a href="">Skills</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Contacts</a></li>
</ul>
</nav>
<hr>
</header>
</div>
<article class="row no-gutters">
<div class="content row">
<ul>
<li>
<h2>Denis<br> Novik</h2>
</li>
<li>
<h3> UX | UI designer <br>24 years old, Minsk</h3>
</li>
<li>
<h2 class="text_sm">RU|ENG</h2>
</li>
</ul>
</div>
<div class="img">
<img class="img-adaptive" src="img/BSPP2266.png">
</div>
</article>