JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<script src="http://fonts.googleapis.com/css?family=Roboto:700"></script>
<body>
<section id="first">
<!-- <div class="container"> -->
<div id="annoucement" class="row">
<div class="col-md-4 col-md-offset-4">
<h1>Lorem ipsum<br>solor sic amet!</h1>
</div>
</div>
<div id="biographies" class="row">
<div class="col-md-4 col-md-offset-4 panel panel-default">
<div class="panel-body">
<!-- <div class="col-md-4"> -->
<p>Lorem ipsum dolor sic amet</p>
</div>
</div>
</div>
</section>
<section id="second">
<div class="row gallery">
<div class="col-md-4 col-md-offset-4">
<p>sdfsdfsf</p>
<!-- Image gallery boxes -->
</div>
</div>
</div>
</section>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
CSS
body {
padding-top: 20px;
font-size: 16px;
font-family: "Open Sans",serif;
background: transparent;
}
/*h1 {
font-family: "Abel", Arial, sans-serif;
font-weight: 400;
font-size: 40px;
}*/
/* Override B3 .panel adding a subtly transparent background */
.panel {
background-color: rgba(255, 255, 255, 0.6);
}
#first {
background: url(http://placehold.it/1350x890/37FDFC/&text=photo1) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 800px;
/*height: 800px;*/
/*padding-bottom: 200px;*/
}
#second {
background: url(http://placehold.it/1350x890/FFFF00/&text=photo2) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 800px;
}
#annoucement {
font-family: 'Roboto', sans-serif;
text-align: center;
color: white;
text-transform: uppercase;
}
h1 {
font-family: 'Roboto';
}