I am trying to create a full-screen header with 2 div elements, similar to the design in this example.
So far, I have attempted to implement this layout, but the div elements are not spanning 100% width, and I also need to add an overlay to the right div (similar to the example).
.masthead {
display: table;
width: 100%;
height: auto;
padding: 200px 0;
text-align: center;
color: #fff;
/*background: url(../img/main_pic.jpg) no-repeat bottom center scroll;*/
background-color: green;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
.masthead .intro-body {
display: table-cell;
vertical-align: middle
}
.masthead .intro-body .brand-heading {
font-size: 50px
}
.masthead .intro-body .intro-text {
font-size: 18px
}
@media (min-width: 768px) {
.masthead {
height: 100%;
padding: 0
}
.masthead .intro-body .brand-heading {
font-size: 100px
}
.masthead .intro-body .intro-text {
font-size: 22px
}
}
.right {
background-color: blue;
}
.left {
background-color: red;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<header class="masthead">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-lg-6 mx-auto left">
<p class="intro-text">left</p>
<a href="#about" class="btn btn-circle js-scroll-trigger">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
<div class="col-lg-6 mx-auto right">
<p class="intro-text">right</p>
<form class="contact-form row">
<div class="col-md-12">
<label></label>
<input type="text" class="form-control" placeholder="name" required>
</div>
<div class="col-md-12">
<label></label>
<input type="email" class="form-control" placeholder="email" required>
</div>
<div class="col-md-6">
<label></label>
<input type="tel" class="form-control" placeholder="tel" required>
</div>
<div class="col-md-6 col-md-offset-4">
<label></label>
<button type="submit" class="btn btn-primary btn-block btn-lg">send</button>
</div>
</form>
</div>
</div>
</div>
</div>
</header>