Search code examples
javascripthtmljquerycssbootstrap-4

How to design gray from left side of page and right side of page?

I work on asp.net MVC layout page . I need to make page layout layout from left side of page and right side of page are gray .

but I don't know how to do that using html and CSS or bootstrap .

exactly what I need is to how to assign left side and right side with gray as image

sample I need to make it as below :

layout page as below :

<!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%;
    grid-template-columns:34mm 102mm 34mm;*/
            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 class="header-CompanyLogo">
            <img src="~/Images/CompanyLogo.jpg" style="max-height: 23mm; margin: 1px;" />
        </div>*@
        </div>
    </div>
    <hr/>
  
    <div class="container body-content">
        
        <footer>
            <p>Resignation Submission Form Application</p>
        </footer>
    </div>

  


   

</body>
</html>

sample gray from left and right

Updated post

only need to modify script above to accept gray on left and right only exclude middle so can you help me ?

can you show me on fiddle or sample please ?

Solution

  • I updated the CSS part of the code, so you can see now that the left and right sides of the page are gray, while the middle content area is white:

    <!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>
        body {
            margin: 0;
            padding: 0;
            background-color: #b5b7bb; /* Set the background color for the entire page */
        }

        .container {
            max-width: 80%; /* Set a max-width for the content area */
            margin: 0 auto; /* Center the content area horizontally */
            background-color: #fff; /* Set the background color of the container to gray */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow to the content area */
        }

        .header {
            text-align: center;
            padding: 20px;
        }

        .header-Title {
            font-family: Arial;
        }

        .body-content {
            padding: 20px;
        }

        footer {
            text-align: center;
            padding: 10px;
        }
    </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>
        <hr />
        <div class="container body-content">
            <!-- Your content goes here -->
        </div>
        <footer>
            <p>Resignation Submission Form Application</p>
        </footer>
    </div>
</body>
</html>