Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"My MUFG"
Bootstrap 3.3.0 Snippet by
jindalv
3.3.0
Preview
HTML
CSS
JS
View Full Screen
Fork
Fork this
1.3K
 
0 Fav
Post to Facebook
Tweet this
<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="no-gutter row"> <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 navPanel "> <div class="panel"> <div class="panel-heading"> <img src="https://secure.gravatar.com/avatar/de9b11d0f9c0569ba917393ed5e5b3ab?s=140&r=g&d=mm" class="img-responsive" alt="Cinque Terre"> </div> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#"><i class="fa fa-home fa-fw"></i>Welcome to MUFG</a></li> <li><a href=""><i class="fa fa-list-alt fa-fw"></i>About Me</a></li> <li><a href=""><i class="fa fa-file-o fa-fw"></i>Notifications</a></li> <li><a href=""><i class="fa fa-bar-chart-o fa-fw"></i>Tasks</a></li> <li><a href=""><i class="fa fa-newspaper-o fa-fw"></i>Newsfeed</a></li> <li><a href=""><i class="fa fa-tasks fa-fw"></i>Followed Departments & Teams</a></li> <li><a href=""><i class="fa fa-calendar fa-fw"></i>Followed Documents</a></li> <li><a href=""><i class="fa fa-book fa-fw"></i>Applications</a></li> <li><a href=""><i class="fa fa-pencil fa-fw"></i>Forms & Templates</a></li> <li><a href=""><i class="fa fa-cogs fa-fw"></i>IT Help</a></li> <li><a href=""><i class="fa fa-cogs fa-fw"></i>MUFG Calendars</a></li> <li><a href=""><i class="fa fa-cogs fa-fw"></i>Managed Content</a></li> </ul> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 col-xl-12"> <div class="row mysiteHeaders text-center"> <div class="col5 col-sm-6 boxes"> <div class="boxTitle"> <p class="text-center">My Blog</p> </div> <div class="boxIconText"> <i class="fa fa-rss fa-2x" aria-hidden="true"></i> <strong>4</strong> </div> </div> <div class="col5 col-sm-6 boxes"> <div class="boxTitle"> <p class="text-center">My Email</p> </div> <div class="boxIconText"> <i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i> <strong>4</strong> </div> </div> <div class="col5 col-sm-6 boxes"> <div class="boxTitle"> <p class="text-center">My Invite</p> </div> <div class="boxIconText"> <i class="fa fa-calendar fa-2x" aria-hidden="true"></i> <strong>4</strong> </div> </div> <div class="col5 col-sm-6 boxes"> <div class="boxTitle"> <p class="text-center">My Notifications</p> </div> <div class="boxIconText"> <i class="fa fa-bell-o fa-2x" aria-hidden="true"></i> <strong>4</strong> </div> </div> <div class="col5 col-sm-6 boxes"> <div class="boxTitle"> <p class="text-center">My Tasks</p> </div> <div class="boxIconText"> <i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i> <strong>4</strong> </div> </div> </div> <div class="row collapseContainer"> <a data-toggle="collapse" data-target="#collapseFollowingSection" aria-expanded="false" aria-controls="collapseExample"> <p class="sectionHeading"><span>I'm Following</span></p> </a> <div class="collapse in" id="collapseFollowingSection"> <div class="card card-block"> <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 sectionInfo"> <h5>Departments and Teams</h5> <hr> <ul class="list-style"> <li><a href="#">2015 EOY Bloack Models</a></li> <li><a href="#">2015 EOY Bloack Models</a></li> <li><a href="#">2015 EOY Bloack Models</a></li> </ul> <button type="button" class="btn btn-primary">Edit List</button> </div> <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 sectionInfo"> <h5 class="follow_sectionHeading">Documents</h5> <hr> <ul class="list-style"> <li><a href="#">MUFG Authorization for Expedite Policy and Procedures</a></li> </ul> <button type="button" class="btn btn-primary">Edit List</button> </div> <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 sectionInfo"> <h5 class="follow_sectionHeading">Applications</h5> <hr> <ul class="list-style"> <li><a href="#">Workday</a></li> <li><a href="#">SIGMA</a></li> <li><a href="#">Finance Calculator</a></li> </ul> <button type="button" class="btn btn-primary">Edit List</button> </div> <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 sectionInfo"> <h5 class="follow_sectionHeading">Forms & Templates</h5> <hr> <ul class="list-style"> <li><a href="#">MUFG Identity Style Guide English.pdf</a></li> <li><a href="#">Memo Workflow Process</a></li> <li><a href="#">Compliance Gifts and Entertainment</a></li> </ul> <button type="button" class="btn btn-primary">Edit List</button> </div> </div> </div> </div> <div class="row collapseContainer deviceOffset"> <a data-toggle="collapse" data-target="#collapseCommonActionsSection" aria-expanded="false" aria-controls="collapseExample"> <p class="sectionHeading"><span>Common Actions</span></p> </a> <div class="collapse in" id="collapseCommonActionsSection"> <div class="card card-block"> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-xl-3 twoColumnsGrid"> <a class="eachbox boxLink0" href="https://twitter.com/cghubs"> <div class="eachicon"> <i class="fa fa-fw fa-code-fork"></i> </div> <div class="description"> <span class="ng-binding"></span> <span>Workday(Vacation + Timesheet) </span> </div> </a> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-xl-3 twoColumnsGrid"> <a class="eachbox boxLink1" href="https://twitter.com/cghubs"> <div class="eachicon"> <i class="fa fa-fw fa-headphones"></i> </div> <div class="description"> <span class="ng-binding"></span> <span>Get IT Help</span> </div> </a> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-xl-3 twoColumnsGrid"> <a class="eachbox boxLink2" href="https://twitter.com/cghubs "> <div class="eachicon"> <i class="fa fa-fw fa-ravelry"></i> </div> <div class="description"> <span class="ng-binding"></span> <span>View Org Chart</span> </div> </a> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-xl-3 twoColumnsGrid"> <a class="eachbox boxLink3" href="https://twitter.com/cghubs"> <div class="eachicon"> <i class="fa fa-fw fa-pencil"></i> </div> <div class="description"> <span class="ng-binding"></span> <span>Go to SIGMA</span> </div> </a> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-xl-3 twoColumnsGrid"> <a class="eachbox boxLink4" href="https://twitter.com/cghubs"> <div class="eachicon"> <i class="fa fa-fw fa-sitemap"></i> </div> <div class="description"> <span class="ng-binding"></span> <span>Request a Team Site</span> </div> </a> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-xl-3 twoColumnsGrid"> <a class="eachbox boxLink5" href="https://twitter.com/cghubs"> <div class="eachicon"> <i class="fa fa-fw fa-line-chart"></i> </div> <div class="description"> <span class="ng-binding"></span> <span>View StepUP Daily Practice</span> </div> </a> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-xl-3 twoColumnsGrid"> <a class="eachbox boxLink6" href="https://twitter.com/cghubs"> <div class="eachicon"> <i class="fa fa-fw fa-file"></i> </div> <div class="description"> <span class="ng-binding"></span> <span>View Reports Library</span> </div> </a> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-xl-3 twoColumnsGrid"> <a class="eachbox boxLink7" href="https://twitter.com/cghubs"> <div class="eachicon"> <i class="fa fa-fw fa-clock-o"></i> </div> <div class="description"> <span class="ng-binding"></span> <span>View Pay Statements</span> </div> </a> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-xl-3 twoColumnsGrid"> <a class="eachbox boxLink8" href="https://twitter.com/cghubs"> <div class="eachicon"> <i class="fa fa-fw fa-unlock-alt"></i> </div> <div class="description"> <span class="ng-binding"></span> <span>Request Access</span> </div> </a> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-xl-3 twoColumnsGrid"> <a class="eachbox boxLink9" href="https://twitter.com/cghubs"> <div class="eachicon"> <i class="fa fa-fw fa-globe"></i> </div> <div class="description"> <span class="ng-binding"></span> <span>Book Your Travel</span> </div> </a> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-xl-3 twoColumnsGrid"> <a class="eachbox boxLink10" href="https://twitter.com/cghubs"> <div class="eachicon"> <i class="fa fa-fw fa-briefcase"></i> </div> <div class="description"> <span class="ng-binding"></span> <span>Access to Corporate Crsis Management Site</span> </div> </a> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-xl-3 twoColumnsGrid"> <a class="eachbox boxLink11" href="https://twitter.com/cghubs"> <div class="eachicon"> <i class="fa fa-fw fa-link"></i> </div> <div class="description"> <span class="ng-binding"></span> <span>View Most Popular Links</span> </div> </a> </div> </div> </div> </div> </div> </div>
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) { /* For landscape layouts only */ .deviceOffset { margin-right: 100px; margin-left: 100px; } .deviceOffset .twoColumnsGrid { width: 50%; } } @media(min-width: 992px) { .col5 { width: 20%; float: left; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } } a.eachbox { font-weight: 300; display: inline-block; text-decoration: none !important; color: white !important; padding: 20px 30px; margin: 5px 0 0 6px; width: 100%; } a.eachbox .eachicon { line-height: 32px; font-size: 30px; display: inline-block; vertical-align: middle; border-right: 1px solid rgba(255, 255, 255, 0.25); padding-right: 15px; width : 50px; } a.eachbox .description { display: inline-block; vertical-align: middle; padding-left: 10px; width: 180px; height: 32px; } a.eachbox.twitter { -webkit-transition: background-color 0.25s ease-in-out; transition: background-color 0.25s ease-in-out; } /* only remove padding of middle columns */ .downarrow i { margin-top: 40px; } .collapseContainer a:hover, .collapseContainer a { color: #BA0100; text-decoration: none; } .boxTitle p { font: 14px sans-serif; padding-top: 10px; text-align: center; letter-spacing: 0.5px; } p.sectionHeading { position: relative; z-index: 1; text-align: center; margin-top: 15px; } .sectionInfo h5 { font-weight: 700; padding-top: 15px; } .list-style { list-style: inherit !important; padding-left: 20px; } p.sectionHeading:before { border-top: 2px solid #dfdfdf; content: ""; //margin: 0 auto; /* this centers the line to the full width specified */ position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */ top: 50%; left: 0; right: 0; bottom: 0; width: 95%; z-index: -1; margin-left: 20px; } p.sectionHeading span { /* to hide the lines from behind the text, you have to set the background color the same as the container */ background: #fff; padding: 0 15px; font-size: 20px } .status { font-family: 'Source Sans Pro', sans-serif; } .navPanel .panel-body { background-color: #EDEDED; } .panel-body .nav a { font-size: 12px; color: #000; } .panel-body .nav-pills>li.active>a { background-color: #BA0100; ; } .navPanel { padding-left: 10px; padding-right: 0px; background-color: #EDEDED; } .navPanel .panel-heading img { width: 100%; } .navPanel .panel-heading { padding: 0px; } .boxIconText strong { font-size: 28px; font-weight: 300; } .navPanel li { border-bottom: 1px solid #fff; } .boxes { border-radius: 0px; background-color: #BA0100; color: #fff; font-weight: 300; border-right: 1px solid #fff; border-top: 1px solid #fff; padding-top:10px; }
$( document ).ready(function() { $("#collapseCommonActionsSection a").each(function( index ) { //var pickColors = "#" + Math.floor(Math.random()*16777215).toString(16); var randomColor = ["#39aa33", "#40415b", "#81153d", "#d03f30", "#eea90f","#d40933"]; var pickColors = randomColor[Math.floor(Math.random() * 5)]; $("#collapseCommonActionsSection .boxLink"+index).css("background-color", pickColors); //console.log( "#collapseCommonActionsSection a:nth-child("+ index +")" + " :" + randomColor); }); });
Related:
See More
Free Template
Material Kit
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76