If you're looking to enhance your design, consider implementing a background color for the body and adjusting the margin-top for the footer. You can achieve this effect by utilizing the following CSS code:
body, html {
height: 100%;
margin: 0;
background:#191919;
}
.hero-image {
background-color: #6c7cd0;
padding: 200px 0;
transform: skew(0deg, -10deg);
margin-top: -150px
}
.hero-text {
transform: skew(0deg, 10deg);
text-align: center;
}
.wrapper {
transform: skew(0deg, -10deg);
background: #191919;
color: white;
}
section, article {
transform: skew(0deg, 10deg);
padding: 20px;
}
.wrapper::after{
transform: skew(0deg, -10deg);
}
div > h1 {
margin-top: 50px;
}
footer {
text-align: center;
background: #6c7cd0;
color: white;
margin-top:50px;
padding: 20px;
}
Please keep in mind that adjustments may be necessary for larger viewports due to potential skewing issues within your layout.
We hope these suggestions prove to be helpful!