"Database search box"
Bootstrap 3.3.0 Snippet by pchilders

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="search-banner"> <div class="row" style=" margin-right: -15px; margin-left: -15px;"> <div class="col-md-offset-2 col-md-4"> <div id="services-box"> <ul> <li class="first">Services For</li> <li><i aria-hidden="true" class="fa fa-chevron-right"></i>  <a href="https://indwes.libguides.com/c.php?g=946037&p=6847447" title="Students">Students</a></li> <li><i aria-hidden="true" class="fa fa-chevron-right"></i>  <a href="https://indwes.libguides.com/c.php?g=946037&p=6847488" title="Faculty">Faculty</a></li> <li><i aria-hidden="true" class="fa fa-chevron-right"></i>  <a href="https://indwes.libguides.com/c.php?g=946037&p=6847565" title="Staff">Staff</a></li> <li><i aria-hidden="true" class="fa fa-chevron-right"></i>  <a href="https://indwes.libguides.com/c.php?g=946037&p=6847567" title="Guests">Guests</a></li> <li><i aria-hidden="true" class="fa fa-chevron-right"></i>  <a href="https://indwes.libguides.com/c.php?g=946037&p=6847570" title="Distance Users">Distance Users</a></li> </ul> </div> </div> <div class="col-md-offset-1 col-md-4"> <div id="resources-box"> <ul> <li class="fone">Popular Resources <a class="view" href="https://indwes.libguides.com/c.php?g=949465&p=7477359">view all</a></li> <li><img alt="EBSCO" loading="lazy" src="https://libapps.s3.amazonaws.com/accounts/13288/images/EBSCO.png" style="width: 16px; height: 16px;" />  <a href="https://search.ebscohost.com/login.aspx?direct=true&authtype=ip,sso&custid=s8876267&groupid=main&profile=relall&defaultdb=a9h" style="font-size:1em" title="Academic Search Complete">Academic Search Complete</a></li> <li><img alt="EBSCO" loading="lazy" src="https://libapps.s3.amazonaws.com/accounts/13288/images/EBSCO.png" style="width: 16px; height: 16px;" />  <a href="https://search.ebscohost.com/login.aspx?authtype=ip,sso&custid=s8876267&groupid=main&profile=relall&defaultdb=bth" title="Business Source Complete">Business Source Complete</a></li> <li><img alt="JSTOR" loading="lazy" src="https://libapps.s3.amazonaws.com/accounts/13288/images/jstor.png" style="width: 16px; height: 16px;" />​  <a href="https://go.openathens.net/redirector/indwes.edu?url=https%3A%2F%2Fwww.jstor.org%2Faction%2FshowAdvancedSearch" title="JSTOR">JSTOR</a></li> <li><img alt="Gale Databases" loading="lazy" src="https://libapps.s3.amazonaws.com/accounts/13288/images/gale.png" style="width: 16px; height: 16px;" />​ <a href="https://go.openathens.net/redirector/indwes.edu?url=http%3A%2F%2Ffind.galegroup.com%2Fmenu%2Fcommonmenu.do%3FuserGroupName%3Dindwesun" title="Gale Databases">Gale Databases</a></li> <li><img alt="ProQuest Databases" loading="lazy" src="https://libapps.s3.amazonaws.com/accounts/13288/images/ProQuest.png" style="width: 16px; height: 16px;" />​ <a href="https://search.proquest.com/databases/advanced?accountid=6363" title="ProQuest Databases">ProQuest Databases</a></li> <li><img alt="Google Scholar" loading="lazy" src="https://libapps.s3.amazonaws.com/accounts/13288/images/Google.png" style="width: 16px; height: 16px;" />  <a href="https://scholar.google.com/" title="Google Scholar">Google Scholar</a></li> </ul> </div> </div> </div> </div>
<style type="text/css">/* Services Box */ .s-lib-side-borders { border-left: 0; border-right: 0; padding-left: 0; padding-right: 0; } /* Begin Services Box */ #services-box { padding:20px; background-color:#fff; /* white */ opacity:.9; filter:alpha(opacity=95); /* For IE8 and earlier */ border-radius:0; height:100%; min-height:301px; min-width:200px; width:100%; float:left; margin:10px 40px 40px 0px; } #services-box ul { padding:30px; margin:-15px 15px; list-style:none } #services-box ul li { padding-bottom:15px; font-family:'Open Sans',sans-serif; line-height:150%; margin:-5px 0; font-size:1.2em; font-weight:700; color:#8a8a8a; } #services-box ul li.first { margin-bottom: 6px; font-size:1.75em; border:0px; } #services-box ul li.last { padding-bottom:0 } #services-box ul li a { color:#000 font-size:.75em; } .view { color:#AB192A; float:right; font-size:.60em; vertical-align:text-bottom; } #services-box ul li a:hover { color:#156570; text-decoration:none } #services-box .icon { width:35px; height:35px; float:left; margin-top:-5px; margin-right:1px } /* End Services Box */ /* Row background */ #search-banner{ background-image: url(https://libapps.s3.amazonaws.com/accounts/13288/images/JLB_LibraryServices_BW.png); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: #fff; max-width: 100%; background-size: cover; background-position: center; padding-left:0px; padding-right:0px; margin-right:0px; margin-left:0px; } /* - End Row Background */ /* - Begin Resources Box */ #resources-box { padding:20px; background-color:#fff; /* white */ opacity:.9; filter:alpha(opacity=95); /* For IE8 and earlier */ border-radius:0; height:100%; min-height:301px; min-width:200px; width:100%; float:left; margin:10px 40px 40px 0 } #resources-box ul { padding:30px; margin:-15px 15px; list-style:none } #resources-box ul li { font-family:'Open Sans',sans-serif; margin:-5px 0; font-weight:700; color:#8a8a8a; padding-bottom:.75em; } #resouces-box ul li.last { padding-bottom:0; } #resources-box ul li a { color:#AB192A0; } #resources-box ul li a:hover { color:#AB192A; text-decoration:none } #resources-box ul li.fone { margin-bottom: 6px; font-size:1.75em; border:0px; } /* End Resources Box */ </style>

Related: See More


Questions / Comments: