You need to sign in to do that
Don't have an account?
Starting November 20, the site will be set to read-only.
On December 4, 2023,
Apex Code Development (90768)
General Development (55146)
Visualforce Development (37251)
Lightning (18265)
APIs and Integration (17146)
Trailhead (11680)
Formulas & Validation Rules Discussion (11337)
Other Salesforce Applications (8116)
Jobs Board (6655)
Force.com Sites & Site.com (4842)
Mobile (2694)
You need to sign in to do that
Don't have an account?
You can replace the images and add your own code.
I used bootstrap, but if you dont need you can remove it.
Hope the below code helps you and appreciate your valuable feedback, if it helps.
Thanks, Sunil.
<apex:page showHeader="false"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <style type="text/css"> .panel-heading { color: white !important; } div.col-md-4 { color: white !important; } </style> <div class="row"> <!-- Transactions Actions section - start --> <div class="panel panel-default" style="width:35%; margin:0 auto;"> <!-- Default panel contents --> <div class="panel-heading" style="text-align:center; background-color:red; ">Transaction Actions</div> <div class="panel-body"> <!-- First Row --> <div class="row"> <div class="col-md-2"></div> <div class="col-md-9"> <div class="row"> <div class="col-md-4" style="border-radius:10px; background-color:red; padding:10px; font-size:13px;"> <img src="http://placehold.it/25x25" class="img-circle" /> Select Customer </div> <div class="col-md-2"></div> <div class="col-md-4" style="border-radius:10px; background-color:red; padding:10px; font-size:13px;"> <img src="http://placehold.it/25x25" class="img-circle" /> Add New Customer </div> </div> </div> <div class="col-md-1"></div> </div> <br /> <!-- Second Row --> <div class="row"> <div class="col-md-2"></div> <div class="col-md-9"> <div class="row"> <div class="col-md-4" style="border-radius:10px; background-color:red; padding:10px; font-size:13px;"> <img src="http://placehold.it/25x25" class="img-circle" /> Add New Address </div> <div class="col-md-2"></div> <div class="col-md-4" style="border-radius:10px; background-color:red; padding:10px; font-size:13px;"> <img src="http://placehold.it/25x25" class="img-circle" /> Process Loyalties </div> </div> </div> <div class="col-md-1"></div> </div> <br /> <!-- Third Row --> <div class="row"> <div class="col-md-2"></div> <div class="col-md-9"> <div class="row"> <div class="col-md-4" style="border-radius:10px; background-color:red; padding:10px; font-size:13px;"> <img src="http://placehold.it/25x25" class="img-circle" /> Search Sales Order </div> <div class="col-md-2"></div> <div class="col-md-4" style="border-radius:10px; background-color:red; padding:10px; font-size:13px;"> <img src="http://placehold.it/25x25" class="img-circle" /> View / Send Invoice </div> </div> </div> <div class="col-md-1"></div> </div> <br /> <!-- Fourth Row --> <div class="row"> <div class="col-md-2"></div> <div class="col-md-9"> <div class="row"> <div class="col-md-4" style="border-radius:10px; background-color:red; padding:10px; font-size:13px;"> <img src="http://placehold.it/25x25" class="img-circle" /> Process Return </div> <div class="col-md-2"></div> <div class="col-md-4" style="border-radius:10px; background-color:red; padding:10px; font-size:13px;"> <img src="http://placehold.it/25x25" class="img-circle" /> Subscribe Order </div> </div> </div> <div class="col-md-1"></div> </div> </div> </div> <!-- Transactions Actions section - end --> <!-- Payment Actions section - start --> <div class="panel panel-default" style="width:35%; margin:0 auto;"> <!-- Default panel contents --> <div class="panel-heading" style="text-align:center; background-color:red; ">Payment Actions</div> <div class="panel-body"> <!-- First Row --> <div class="row"> <div class="col-md-2"></div> <div class="col-md-9"> <div class="row"> <div class="col-md-4" style="border-radius:10px; background-color:red; padding:10px; font-size:13px;"> <img src="http://placehold.it/25x25" class="img-circle" /> Loyalty </div> <div class="col-md-2"></div> <div class="col-md-4" style="border-radius:10px; background-color:red; padding:10px; font-size:13px;"> <img src="http://placehold.it/25x25" class="img-circle" /> Credit/Debit </div> </div> </div> <div class="col-md-1"></div> </div> <br /> <!-- Second Row --> <div class="row"> <div class="col-md-2"></div> <div class="col-md-9"> <div class="row"> <div class="col-md-4" style="border-radius:10px; background-color:red; padding:10px; font-size:13px;"> <img src="http://placehold.it/25x25" class="img-circle" /> Bank/Cheque </div> <div class="col-md-2"></div> <div class="col-md-4" style="border-radius:10px; background-color:red; padding:10px; font-size:13px;"> <img src="http://placehold.it/25x25" class="img-circle" /> Cash </div> </div> </div> <div class="col-md-1"></div> </div> </div> </div> <!-- Payment Actions section - end --> <!-- Shipping Actions section - start --> <div class="panel panel-default" style="width:35%; margin:0 auto;"> <!-- Default panel contents --> <div class="panel-heading" style="text-align:center; background-color:red; ">Shipping Actions</div> <div class="panel-body"> <!-- First Row --> <div class="row"> <div class="col-md-2"></div> <div class="col-md-9"> <div class="row"> <div class="col-md-4" style="border-radius:10px; background-color:red; padding:10px; font-size:13px; #gradient >.vertical(#4F364C, #FFFFFF);"> <img src="http://placehold.it/25x25" class="img-circle" /> UPS </div> <div class="col-md-2"></div> <div class="col-md-4"> </div> </div> </div> <div class="col-md-1"></div> </div> </div> </div> <!-- Shipping Actions section - end --> </div> </apex:page>