add a nav to the right of the jumbotron
This commit is contained in:
Mark Eaton
@@ -0,0 +1,48 @@
|
||||
<style>
|
||||
|
||||
/* style jumbotron */
|
||||
|
||||
.jumbotron {
|
||||
color: white;
|
||||
background-color: #003466;
|
||||
}
|
||||
|
||||
.link-list {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
/* style for nav by the jumbotron */
|
||||
.nav-by-jumbotron {
|
||||
background-color: #bbb;
|
||||
border-radius: 5px;
|
||||
padding: 17px 17px 16px 17px;
|
||||
}
|
||||
|
||||
.nav-item-border {
|
||||
border-bottom: solid grey 1px;
|
||||
}
|
||||
|
||||
/* style the panels with the text content */
|
||||
.panel>.show-panel {
|
||||
background-color: #003466;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hide-body-border {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.glyphicon-panel-title {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.content-panel-title {
|
||||
color: white;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
padding: 2px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<body class="s-lib-public-body">
|
||||
<!-- BEGIN: Page Header -->
|
||||
{{public_header}}
|
||||
<!-- END: Page Header -->
|
||||
<!-- BEGIN: Content Header -->
|
||||
<div id="s-lib-public-header" class="s-lib-header container s-lib-side-borders">
|
||||
<div id="s-lib-bc">
|
||||
{{breadcrumbs}}
|
||||
</div>
|
||||
<h1 id="s-lib-public-header-title">{{title}}</h1>
|
||||
<div id="s-lib-public-header-desc">{{system_intro}}</div>
|
||||
</div>
|
||||
<!-- END: Content Header -->
|
||||
<!-- BEGIN: Nav Bar -->
|
||||
<div id="s-lib-public-nav" class="container s-lib-side-borders">
|
||||
{{page_nav}}
|
||||
</div>
|
||||
<!-- END: Nav Bar -->
|
||||
<!-- BEGIN: content -->
|
||||
<div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
|
||||
<div id="s-lg-index-cols" class="row container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<div class="jumbotron">
|
||||
<h1 class="display-4">OneSearch goes here</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="nav-by-jumbotron">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item nav-item-border"><a class="nav-link" href="#">Link to a library service</a></li>
|
||||
<li class="nav-item nav-item-border"><a class="nav-link" href="#">Link to another library service</a></li>
|
||||
<li class="nav-item nav-item-border"><a class="nav-link" href="#">Another Link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">One last link Link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<div class="panel panel-default hide-body-border">
|
||||
<div class="panel-heading show-panel">
|
||||
<span class="panel-title content-panel-title">A list of links</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<ul class="link-list">
|
||||
<li><a href="#">One</a></li>
|
||||
<li><a href="#">Two</a></li>
|
||||
<li><a href="#">Three</a></li>
|
||||
<li><a href="#">Four</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ul class="link-list">
|
||||
<li><a href="#">Five</a></li>
|
||||
<li><a href="#">Six</a></li>
|
||||
<li><a href="#">Seven</a></li>
|
||||
<li><a href="#">Eight</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default hide-body-border">
|
||||
<div class="panel-heading show-panel">
|
||||
<span class="panel-title content-panel-title">Some Content</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-default hide-body-border">
|
||||
<div class="panel-heading show-panel">
|
||||
<span class="panel-title content-panel-title">Other Content</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: content -->
|
||||
<!-- BEGIN: Page Footer -->
|
||||
<div style="height:10px; background-color:#ff4e00"></div>
|
||||
<div style="height:50px; background-color:#003466; color:white; padding:5px 20px 0px 20px">
|
||||
<span>
|
||||
Robert J. Kibbee Library, 2001 Oriental Blvd, Brooklyn, NY, 11235<br>
|
||||
</span>
|
||||
<span style="float:right" class="whiteahrefs">
|
||||
<a href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365">Login to LibApps</a>
|
||||
</span>
|
||||
<span style="clear:both" class="whiteahrefs">
|
||||
718-368-5632 | <a href="mailto:reference.desk@kbcc.cuny.edu">reference.desk@kbcc.cuny.edu</a> |
|
||||
<a href="https://www.twitter.com/kbcclibrary">@kbcclibrary</a>
|
||||
</span>
|
||||
</div>
|
||||
<!-- END: Page Footer -->
|
||||
<div id="s-lib-alert" title="">
|
||||
<div id="s-lib-alert-content"></div>
|
||||
</div>
|
||||
<div id="s-lib-popover-title" class="hide">
|
||||
<span class="text-info"><strong>title</strong></span>
|
||||
<button type="button" id="popclose" class="close" onclick="jQuery('.s-lib-popover').popover('hide')">×</button>
|
||||
</div>
|
||||
<div id="s-lib-popover-content" class="hide"><i class="fa fa-refresh fa-spin"></i> Loading...
|
||||
<button class="btn btn-default btn-sm popclose" type="button">Close</button>
|
||||
</div>
|
||||
<div id="s-lib-scroll-top" title="Back to Top">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-square-o fa-stack-2x"></i>
|
||||
<i class="fa fa-angle-double-up fa-stack-1x" style="position:relative; bottom:2px;"></i>
|
||||
</span>
|
||||
</div>
|
||||
<!-- BEGIN: Custom Footer -->
|
||||
{{public_footer}}
|
||||
<!-- END: Custom Footer -->
|
||||
</body>
|
||||
Reference in New Issue
Block a user