Multi Color Responsive Service Portal Design in ServiceNow with widget code

1st Widget Code:

HTML:

<div class="row">
   <div class="col-xs-6">
     <div class="box" style="height: 400px;width: 100%;background-color: deeppink;"> 
            <br><br>
<h1 class="ng-binding" style="
    text-align: center; color:white;
">Order Something</h1>
       <br>
       <input type="text" placeholder="Search.." class="form-control" style="width: 354px;margin-left: 124px;">
       <br>
       <img src="wc.png" role="presentation" style="
    height: 150px;
    width: 200px;
    margin-left: 179px;
">
      </div>
     </div>
   <div class="col-xs-6" style="padding-left: 0px;padding-right: 0px;">
         <div class="row">
  <div class="column" style="background-color:white;">
    <br><br>
   <h2 style="text-align: center;">Report an Incident</h2>
  </div>
  <div class="column" style="background-color:greenyellow;">
    <br><br>
  <h2 style="text-align: center;    color: white;">My Tickets</h2>
  </div>
  <div class="column" style="background-color:mediumpurple;">
    <br><br>
   <h2 style="text-align: center;    color: white;">My Approvals</h2>
  </div>
  <div class="column" style="background-color:lightslategray;">
    <br><br>
   <h2 style="text-align: center;    color: white;">My profile</h2>
  </div>
</div>
         </div>
           </div>

CSS

* {
  box-sizing: border-box;
}
 /* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 20rem !important;
}

2nd Widget:

HTML:

<div class="row">
   <div class="col-xs-6">
     <div class="box" style="height: 400px;width: 100%;background-color: red;"> 
            <br><br>
<h1 class="ng-binding" style="
    text-align: center; color:white;
">Order Something</h1>
       <br>
       <input type="text" placeholder="Search.." class="form-control" style="width: 354px;margin-left: 124px;">
       <br>
       <img src="wc.png" role="presentation" style="
    height: 150px;
    width: 200px;
    margin-left: 179px;
">
      </div>
     </div>
   <div class="col-xs-6">
     <div class="box" style="height: 400px;width: 100%;background-color: yellow;"> 
            <br><br>
<h1 class="ng-binding" style="
    text-align: center; color:white;
">Order Something</h1>
       <br>
       <input type="text" placeholder="Search.." class="form-control" style="width: 354px;margin-left: 124px;">
       <br>
       <img src="wc.png" role="presentation" style="
    height: 150px;
    width: 200px;
    margin-left: 179px;
">
      </div>
     </div>
          </div>

CSS:

* {
  box-sizing: border-box;
}
 /* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 20rem !important;
}