JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
NAVBAR
</div>
<header>
<div class="container-fluid">
<div class="row">
<div class="back col-lg-offset-2 col-lg-10 col-md-offset-2 col-md-10 col-sm-offset-2 col-sm-10 hidden-xs"></div>
<div class="bloc_logo_citation">
<div class="row">
<div class="logo col-lg-offset-1 col-lg-2 col-md-offset-1 col-md-2 col-sm-offset-1 col-sm-2 col-xs-offset-3 col-xs-2">LOGO</div>
<div class="citation col-lg-4 col-md-5 col-sm-6 col-xs-6 "><h1>Our work is not about form follows function but <u> form follows beauty</u></h1></div>
</div>
</div>
</div>
</div>
</header>
CSS
body {
width: 100vw;
height: 100vh;
margin: 0;
}
.back
{
background: url(https://media.istockphoto.com/photos/abstract-cubes-retro-styled-colorful-background-picture-id508795172) fixed;
height: 400px;
margin-top: 12px;
position: fixed;
}
/*ensemble logo et citation*/
.bloc_logo_citation
{
position: absolute;
top: 25%;
}
/*bloc logo a 1 col d'offset*/
.logo
{
background-color:grey;
width: 200px;
height: 200px;
padding-left: 0px;
}
/*bloc citation */
.citation
{
background-color: black;
height: 200px;
opacity: 0.9;
}
/*soulignement de la derniere partie de la citation*/
.citation u
{
text-decoration-color: rgb(43,120,166)
}