I'm currently working on an asp.net MVC layout page and I'm trying to create a layout where the left side and right side are gray.
However, I'm not sure how to achieve this using HTML, CSS, or Bootstrap.
I specifically need to know how to designate the left and right sides as gray areas.
Here is an example of the layout I am aiming for:
The layout page should look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Resignation Submission Form</title>
<style>
.container {
width: 80%;
margin-top: -50px;
margin-left: 130px;
padding-left: 130px;
}
.header {
width: 100%;
display: flex;
}
.header-Title {
flex: 1;
font-family: Arial;
}
.header-CompanyLogo {
width: 150mm;
display: flex;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="header-Title">
<b style="font-size:11px;"></b>
<br />
<b style="font-size:11px;"></b>
<br />
<b style="font-size:11px;"></b>
<br />
<b style="font-size:11px;"></b>
<br />
<b style="font-size:30px;">Employee Self Service</b>
<br /><br />
<b style="font-size:12px;"><u></u></b>
</div>
</div>
</div>
<hr/>
<div class="container body-content">
<footer>
<p>Resignation Submission Form Application</p>
</footer>
</div>
</body>
</html>
https://i.sstatic.net/Yjloi.png
Updated post
I just need to adjust the script above to have the left and right sides gray, excluding the middle section. Can anyone help me with this?
Could someone provide a fiddle or a sample to demonstrate this, please?