Currently, I am working on creating a slanted line that stretches across the entire page. However, there seems to be a small gap on both the left and right margins of the line.
Here is the HTML code:
<div class="container-fluid">
<div class="row shine">
<div class="col-lg-7 shine-content text-center">
<h3>No.1 Bestseller</h3>
<h1>Rouge Volupte Shine</h1>
<p>Satin finish. Iconic lipstick. Highly pigmented. A wardrobe of iconic colors that symbolises audacious feminine strength.</p>
</div>
<div class="col-lg-5 shine-img d-flex justify-content-center px-5">
</div>
</div>
<hr>
<div class="container-fluid">
<div class="row rouge">
<div class="col-lg-6 rouge-img d-flex justify-content-center px-5">
<div class="col-lg-6 rouge-content text-center">
<h1>Rouge Pur Couture</h1>
<p>In just one stroke, luxurious and highly pigmented colour dresses the lips with a radiant satin finish. Rouge Pur Couture delivers the promise of edgy style and ultimate feminine strength. </p>
</div>
</div>
</div>
And this is the CSS code:
hr{
margin:100px 0;
border: 0;
border-top: 2px solid #777777;
position: relative;
transform: rotate(-5deg)
}
You can view the demo here: https://codepen.io/jl-joey/pen/OJXdGJP