JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<title>Туризм</title>
<body>
<div class="container-fluid turism_main">
<div class="row">
<div class="company-name">
<p>LuckyFox</p>
<p>Travel</p>
</div>
<div class="aside_main col-xs-12">
<a href="#"><img src="img/afterparty.png" alt=""></a>
</div>
</div>
<div class="aside-content">
<div class="aside-contact">
<i class="fa fa-volume-control-phone" aria-hidden="true"></i> Связаться с нами
</div>
<div class="aside-mail">
<i class="fa fa-envelope-o" aria-hidden="true"></i> Подписаться
</div>
<div class="aside-calendar">
<a href="#">Календарь</a>
</div>
<div class="aside-lang">
<span class="active">EN</span> / RU
</div>
</div>
</div>
CSS
.turism_main {
background: gray;
background-size: cover;
height: 100vh;
width: 100vw;
color: #fff;
position: relative;
}
.company-name {
font-size: 2em !important;
letter-spacing: 2px;
opacity: .7;
position: absolute;
right: 45%;
left: 45%;
text-align: center !important;
display: block;
line-height: 1;
margin-top: 15px;
width: 200px;
}
.aside_main {
text-align: right;
padding: 0;
}
.aside-content {
z-index: 999;
position: absolute;
right: -195px;
top: 400px;
transform: rotate(-90deg);
font-size: .8em;
background: black;
}
.aside-content div, .aside-content a{
display: inline-block;
color: white;
}
.aside-content i {
padding-right: 10px;
color: #e9ba02;
font-weight: bold;
}
.aside-contact, .aside-mail {
padding: 5px 10px 5px 10px;
border: 1px solid white;
margin-right: 20px;
}
.aside-calendar, .aside-lang {
margin-left: 20px;
}