I'm currently stuck on a project and would appreciate some help.
The Current Layout:
Desired Layout:
Here's the challenge: The parallax images stretch across the screen, but the length of the paragraph in between can vary greatly. The diagonal shapes need to adjust accordingly.
Below is the HTML and CSS code I've been working on:
HTML:
<div class="clearfix bg lbg1">
<div class="col-md-7 col-sm-7 col-xs-12 sideBox leftBox">
<h1>
Why Choose Us?
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
<div class="clearfix bg rbg1">
<div class="col-md-6 col-sm-6 col-xs-12 sideBox rightBox pull-right">
<h1>
What We Offer
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
CSS:
.lbg1{
background-image: url('../images/left1.jpg');
}
.rbg1{
background-image: url('../images/right1.jpg');
}
.lbg2{
background-image: url('../images/left2.jpg');
}
.rbg2{
background-image: url('../images/right2.jpg');
}
.bg{
background-size: cover;
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.leftBox{
padding: 30px 30px 30px 100px;
}
.rightBox{
padding: 30px 100px 30px 30px;
}
.sideBox{
background-color: #fff;
}
.sideBox h1{
font-weight: 900;
margin-bottom: 30px;
}
.sideBox p{
line-height: 2;
font-size: 3rem;
font-weight: 500;
}
.sideBox ul>li{
line-height: 1.5;
list-style: circle;
margin-bottom: 15px;
margin-left: 15px;
font-size: 3rem;
font-weight: 500;
}