<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); }); });