(Service Portal Design ServiceNow)
Widget 1.
HTML:
<div> <br> <p>Hello John,</p> <p>How can we help you?</p> <br> <p> <input type="search" placeholder="Search..." class="form-control" role="searchbox" style=" width: 400px; "> <p> </div> <br><br>
CSS:
.add-img {
background-image: url("portal1.png");
background-color: #cccccc;
height: 300px;
}
p{
color:white;
margin-left: 79px;
font-size: 26px;
font-weight: 800;
margin-bottom: 0px;
}
Widget 2:
HTML:
<br><br> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="serviceBox"> <div class="service-icon"> <span><i class="fa fa-globe"></i></span> </div> <h3 class="title">Request Something</h3> <p class="description">ServiceNow Request Management delivers employee self-service through a published catalog of services, automated workflows, and service level agreements.</p> </div> </div> <div class="col-md-3 col-sm-6"> <div class="serviceBox" style="background:#14213D !important"> <div class="service-icon"> <span><i class="fa fa-globe"></i></span> </div> <h3 class="title" style="color:#14213D">Approvals</h3> <p class="description">Classic approvals are a legacy process to require authorization on tasks before the work is done.You can define approvals for all tasks and associate users or groups to a task </p> </div> </div> <div class="col-md-3 col-sm-6"> <div class="serviceBox" style="background:#FF8C00"> <div class="service-icon"> <span><i class="fa fa-globe"></i></span> </div> <h3 class="title" style="color:#FF8C00">Knowledge</h3> <p class="description">Knowledge Management supports processes for creating, categorizing, reviewing, and approving articles.(KM) application enables the sharing of information in knowledge</p> </div> </div> <div class="col-md-3 col-sm-6"> <div class="serviceBox green"> <div class="service-icon"> <span><i class="fa fa-rocket"></i></span> </div> <h3 class="title">Announcements</h3> <p class="description">Use announcements to broadcast messages to Service Portal users. Announcements can display in an announcement banner or an announcement widget instance</p> </div> </div> </div> </div>
CSS:
.serviceBox{
color: #fff;
background: linear-gradient(#D0D50F,#7FCE11);
font-family: 'Maven Pro', sans-serif;
text-align: center;
padding: 20px;
border-radius: 40px;
}
.serviceBox .service-icon{
font-size: 50px;
line-height: 80px;
width: 80px;
height: 80px;
margin: 0 auto 20px;
border-radius: 20px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.serviceBox .title{
color: #7FCE11;
background-color: #fff;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
padding: 10px 0;
margin: 0 -20px 15px;
}
.serviceBox .description{
font-size: 15px;
line-height: 22px;
margin: 0;
}
.serviceBox.green{ background: linear-gradient(#109492,#008A65); }
.serviceBox.green .title{ color: #008A65; }
.serviceBox.blue{ background: linear-gradient(#1f96ba, #27436d); }
.serviceBox.blue .title{ color: #27436d; }
.serviceBox.purple{ background: linear-gradient(#c4276b, #473a82); }
.serviceBox.purple .title{ color: #3A2885; }
@media only screen and (max-width: 990px){
.serviceBox{ margin: 0 0 30px; }
}
Widget 3:
HTML:
<br><br> <footer> <div class="footer-gray"> <div class="footer-custom"> <div class="footer-lists"> <div class="footer-list-wrap"> <h6 class="ftr-hdr">Order Toll Free</h6> <ul class="ftr-links-sub"> <li>0000</li> </ul> <h6 class="ftr-hdr">International</h6> </div> <!--/.footer-list-wrap--> <div class="footer-list-wrap"> <h6 class="ftr-hdr">Useful links</h6> <ul class="ftr-links-sub"> <li><a href="https://www.workingcode.in/developer-forum/" rel="nofollow">Knowledge</a></li> <li><a href="https://www.workingcode.in/developer-forum/" rel="nofollow">Announcements</a></li> <li><a href="https://www.workingcode.in/developer-forum/" rel="nofollow">Request Something</a></li> <li><a href="https://www.workingcode.in/developer-forum/" rel="nofollow">Order Something</a></li> <li><a href="https://www.workingcode.in/developer-forum/" rel="nofollow">Approvals</a></li> </ul> </div> <div class="footer-list-wrap"> <h6 class="ftr-hdr">About Workingcode.in</h6> <ul class="ftr-links-sub"> <li><a href="https://www.workingcode.in/developer-forum/" rel="nofollow">Our Company</a></li> </ul> </div> <!--/.footer-list-wrap--> <!--/.footer-list-wrap--> </div> <!--/.footer-lists--> <div class="footer-email"> <h6 class="ftr-hdr">Sign up for exclusive offers and inspiration</h6> <div id="ftr-email" class="ftr-email-form"> <form id="ftrEmailForm" method="post" action="http://em.art.com/pub/rf"> <div class="error">Please enter a valid email address</div> <input type="text" name="email_address_" id="ftrEmailInput" class="input" placeholder="Enter email address" /> <!-- --> <input type="submit" class="button" value="SUBMIT" /> <input type="hidden" name="country_iso2" value=""> <input type="hidden" name="language_iso2" value="en"> <input type="hidden" name="site_domain" value="art.com"> <input type="hidden" name="email_acq_source" value="01-000001"> <input type="hidden" name="email_acq_date" value="" id="ftr-email-date"> <input type="hidden" name="brand_id" value="ART"> </form> </div> <!--/.ftr-email-form--> <div class="ftr-email-privacy-policy"></div> </div> <!--/.footer-email--> <div class="footer-social"> <h6 class="ftr-hdr">Follow Us</h6> <ul> <li> <a href="https://www.facebook.com/art.com" title="Facebook" onclick="_gaq.push(['_trackSocial', 'Facebook', 'Follow', 'Footer', 'undefined', 'True']);"> <img width="24" height="24" alt="Like us on Facebook" src="http://cache1.artprintimages.com/images/jump_pages/rebrand/footer/fb.png"> </a> </li> <li> <a href="https://plus.google.com" title="Google+" onclick="_gaq.push(['_trackSocial', 'GooglePlus', 'Follow', 'Footer', 'undefined', 'True']);"> <img width="24" height="24" alt="Follow us on Google+" src="http://cache1.artprintimages.com/images/jump_pages/rebrand/footer/gplus.png"> </a> </li> <li> <a href="https://pinterest.com/" target="_blank"> <img width="24" height="24" alt="Follow us on Pinterest" src="http://cache1.artprintimages.com/images/jump_pages/rebrand/footer/pin-badge.png"> </a> </li> <li> <a target="_blank" href="http://instagram.com/"> <img width="24" height="24" alt="Follow us on Instagram" src="http://cache1.artprintimages.com/images/jump_pages/rebrand/footer/instagram-badge.png"> </a> </li> <li> <a href="https://www.twitter.com" title="Twitter" onclick="_gaq.push(['_trackSocial', 'Twitter', 'Follow', 'Footer', 'undefined', 'True']);"> <img width="67" alt="Follow us on Twitter" src="http://cache1.artprintimages.com/images/jump_pages/rebrand/footer/twitter.png"> </a> </li> </ul> </div> <!--/.footer-social--> <div class="footer-legal"> <p>© Workingcode.in. All Rights Reserved. | <a href="/help/privacy-policy.html" rel="nofollow">Privacy Policy</a> | <a href="/help/terms-of-use.html" rel="nofollow">Terms of Use</a> | <a href="/help/terms-of-sale.html" rel="nofollow">Terms of Sale</a></p> <p>Welcome to Working Code, the ultimate Servicenow developer forum community. We have hundreds of quality scripts and solutions that address REAL-WORLD challenges. Connect with like-minded developers, exchange knowledge, and stay updated on the latest Servicenow trends and best practices. </p> </div> <!--/.footer-legal--> <div class="footer-payment"> </div> <!--/.footer-payment--> </div> <!--/.footer-custom--> </div> <!--/.footer-gray--> </footer>
CSS:
body,
html {
margin: 0;
padding: 0;
}
.hidden {
display: none;
}
.footer-gray {
background-color: black;
width: 100%;
}
.footer-custom {
color: white;
font: normal normal 12px/1.4 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
max-width: 1008px;
box-sizing: border-box;
margin: 0 auto;
padding: 24px;
}
.footer-custom:after {
display: table;
clear: both;
content: "";
}
.footer-lists:after {
display: table;
clear: both;
content: "";
}
.ftr-hdr {
color: white;
font: 22px/1.4 'BebasNeueRegular', BebasNeue, 'Bebas Neue', Arial, sans-serif;
margin: 1em 0 0;
}
@media only screen and (min-width: 768px) {
.ftr-hdr {
font-size: 18px;
}
}
.footer-list-wrap {
width: 50%;
float: left;
box-sizing: border-box;
}
@media only screen and (min-width: 568px) {
.footer-list-wrap {
width: 33.3333%;
}
}
@media only screen and (min-width: 768px) {
.footer-list-wrap {
width: 25%;
}
}
.ftr-links-sub {
padding: 0;
margin: 0;
}
.ftr-links-sub:after {
display: table;
clear: both;
content: "";
}
.ftr-links-sub li {
display: block;
list-style-type: none;
margin: 0;
padding: 3px 0;
color: #888;
font: normal normal 12px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
text-transform: uppercase;
/*width: 150px;*/
}
.footer-custom a,
.footer-custom a:link,
.footer-custom a:visited,
.ftr-links-sub li .link {
text-decoration: none;
color: #888;
padding: 5px 0;
display: block;
}
.footer-custom .footer-legal a {
display: inline;
}
.footer-custom a:hover,
.footer-custom a:active,
.ftr-links-sub li .link:hover {
text-decoration: underline;
color: #888;
cursor: pointer;
}
@media only screen and (min-width: 768px) {
.footer-custom a, .footer-custom a:link, .footer-custom a:visited, .ftr-links-sub li .link {
padding: 0;
}
}
/* BEGIN EMAIL CAPTURE STYLES*/
.footer-email {
text-align: center;
}
#ftrEmailForm {
height: 44px;
}
#ftrEmailForm .error {
display: none;
color: red;
text-align: left;
}
#ftrEmailForm #ftrEmailInput {
background: none repeat scroll 0 0 #FFF;
border: 1px solid #D6D6D6;
box-sizing: border-box;
color: #888;
float: left;
font: normal normal 14px/1.4 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
padding: 5px;
width: 70%;
height: 100%;
}
#ftrEmailForm #ftrEmailInput:hover {
border: 1px solid #888;
}
#ftrEmailForm #ftrEmailInput:focus {
border: 1px solid #ef9223;
outline: #ef9223 auto 5px;
}
#ftrEmailForm .button {
width: 30%;
height: 100%;
padding: 5px;
float: left;
border: 1px solid #DFDFDF;
box-sizing: border-box;
color: #000;
font: normal bold 18px/1 BebasFamily, BebasNeueRegular, "Bebas Neue", Helvetica, Arial, sans-serif;
text-align: center;
text-transform: uppercase;
background: #FFF;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #e1e1e1));
background: -webkit-linear-gradient(top, white 0, #e1e1e1 100%);
background: -moz-linear-gradient(top, white 0, #e1e1e1 100%);
background: -ms-linear-gradient(top, white 0, #e1e1e1 100%);
background: -o-linear-gradient(top, white 0, #e1e1e1 100%);
background: linear-gradient(to bottom, white 0, #e1e1e1 100%);
cursor: pointer;
vertical-align: middle;
outline: none;
}
#ftrEmailForm .button:hover,
#ftrEmailForm .button:active {
background: black;
color: #FFF;
outline: none;
}
/* BEGIN SOCIAL STYLES*/
.footer-social {
text-align: center;
}
.footer-social ul {
padding: 0;
display: inline-block;
list-style-type: none;
}
.footer-social ul:after {
display: table;
clear: both;
content: "";
}
.footer-social li {
float: left;
margin: 0 15px 0 0;
padding: 0;
}
@media only screen and (min-width: 768px) {
.footer-lists {
width: 100%;
}
.footer-email {
width: 50%;
float: left;
text-align: left;
}
.footer-social {
width: 45%;
margin-left: 5%;
float: left;
text-align: left;
}
}
@media only screen and (min-width: 1008px) {
.footer-lists {
width: 66.6666%;
float: left;
}
.footer-email {
width: 33.3333%;
}
.footer-social {
width: 33.3333%;
float: right;
margin-left: 0;
}
}
.footer-legal {
padding: 15px 0 0;
clear: left;
}
.footer-payment {
text-align: center;
}
@media only screen and (min-width: 768px) {
.footer-legal {
width: 66.6666%;
float: left;
}
.footer-payment {
width: 33.3333%;
float: left;
}
}
@media only screen and (min-width: 1008px) {
.footer-payment {
text-align: left;
}
}
.footer-payment ul {
padding: 0;
display: inline-block;
list-style-type: none;
}
.footer-payment ul li {
display: inline-block;
margin: 0 6px;
}
@media only screen and (min-width: 1008px) {
.footer-payment ul li.ftr-stella {
margin-left: 0;
}
}
.ftr-bbb span,
.ftr-stella span {
background-image: url("http://cache1.artprintimages.com/images/jump_pages/rebrand2/images/subnav2.png");
background-repeat: no-repeat;
background-color: transparent;
cursor: pointer;
display: inline-block;
height: 36px;
margin: 0;
padding: 0;
}
.ftr-bbb span {
background-position: -339px -8px;
width: 96px;
}
.ftr-stella span {
background-position: -339px -107px;
width: 57px;
}