Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Untitled Document</title>
- <style type="text/css">
- body
- {
- margin: 0px;
- font-family: Arial, Helvetica, sans-serif;
- font-size: 12px;
- color: #333333;
- }
- .rmf-container
- {
- margin: 0 auto;
- width: 70%;
- }
- .rmf-header
- {
- padding: 20px 0px;
- }
- .rmf-logo
- {
- width: 30%;
- float: left;
- }
- .rmf-nav
- {
- width: 70%;
- float: left;
- font-family: Arial, Helvetica, sans-serif;
- font-size: 13px;
- font-weight: bold;
- color: #9b9b9b;
- text-transform: uppercase;
- text-align: right;
- }
- .clear
- {
- clear: both;
- }
- .rmf-banner
- {
- background-image: url('images/main-banner.png');
- background-size: cover; /* <------ */
- background-repeat: no-repeat;
- background-position: center center; /* optional, center the image */
- height: 170px;
- -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
- -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
- box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
- }
- .rmf-actions
- {
- border-radius: 0px 0px 20px 20px;
- -moz-border-radius: 0px 0px 20px 20px;
- -webkit-border-radius: 0px 0px 20px 20px;
- border: 0px solid #000000;
- background: rgba(255,255,255,1);
- background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,246,254,1) 100%);
- background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(243,246,254,1)));
- background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,246,254,1) 100%);
- background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,246,254,1) 100%);
- background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,246,254,1) 100%);
- background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(243,246,254,1) 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f6fe', GradientType=0 );
- -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
- -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
- box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
- height: 50px;
- width: 260px;
- float: right;
- z-index: -1;
- }
- h1
- {
- padding: 20px 0px;
- margin-top: 0px;
- }
- /*******************************/
- .tabs {
- position: relative;
- overflow: hidden;
- margin: 0 auto;
- /*width: 100%; */
- font-weight: 300;
- font-size: 1.25em;
- }
- /* Nav */
- .tabs nav {
- text-align: left;
- }
- .tabs nav ul {
- position: relative;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: -moz-flex;
- display: -ms-flex;
- display: flex;
- margin: 0 auto;
- padding: 0;
- max-width: 1200px;
- list-style: none;
- -ms-box-orient: horizontal;
- -ms-box-pack: left;
- -webkit-flex-flow: row wrap;
- -moz-flex-flow: row wrap;
- -ms-flex-flow: row wrap;
- flex-flow: row wrap;
- justify-content: flex-start;
- }
- .tabs nav ul li {
- position: relative;
- z-index: 1;
- display: block;
- margin: 0;
- text-align: left;
- padding: 0 35px;
- }
- .tabs nav a {
- position: relative;
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- line-height: 2.5;
- }
- .tabs nav a span {
- vertical-align: middle;
- font-size: 0.75em;
- }
- .tabs nav li.tab-current a {
- color: #74777b;
- }
- .tabs nav a:focus {
- outline: none;
- }
- /* Content */
- .content-wrap {
- position: relative;
- }
- .content-wrap section {
- display: none;
- margin: 0 auto;
- padding: 1em;
- max-width: 1200px;
- text-align: left;
- }
- .content-wrap section.content-current {
- display: block;
- }
- .content-wrap section p {
- margin: 0;
- padding: 0.75em 0;
- color: rgba(40,44,42,0.05);
- font-weight: 900;
- font-size: 4em;
- line-height: 1;
- }
- /* Fallback */
- .no-js .content-wrap section {
- display: block;
- padding-bottom: 2em;
- border-bottom: 1px solid rgba(255,255,255,0.6);
- }
- .no-flexbox nav ul {
- display: block;
- }
- .no-flexbox nav ul li {
- min-width: 15%;
- display: inline-block;
- }
- @media screen and (max-width: 58em) {
- .tabs nav a.icon span {
- display: none;
- }
- .tabs nav a:before {
- margin-right: 0;
- }
- }
- /*****************************/
- /* Triangle and line */
- /*****************************/
- .tabs-style-linetriangle nav ul {
- border-bottom: 1px solid rgba(0,0,0,0.2);
- }
- .tabs-style-linetriangle nav a {
- overflow: visible;
- -webkit-transition: color 0.2s;
- transition: color 0.2s;
- }
- .tabs-style-linetriangle nav a span {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-size: 1em;
- }
- .tabs-style-linetriangle nav li.tab-current a:after,
- .tabs-style-linetriangle nav li.tab-current a:before {
- position: absolute;
- top: 100%;
- left: 50%;
- width: 0;
- height: 0;
- border: solid transparent;
- content: '';
- pointer-events: none;
- }
- .tabs-style-linetriangle nav li.tab-current a:after {
- margin-left: -10px;
- border-width: 10px;
- border-top-color: #e7ecea;
- }
- .tabs-style-linetriangle nav li.tab-current a:before {
- margin-left: -11px;
- border-width: 11px;
- border-top-color: rgba(0,0,0,0.2);
- }
- @media screen and (max-width: 58em) {
- .tabs-style-linetriangle nav {
- font-size: 0.6em;
- }
- }
- </style>
- <script src="modernizr.custom.js"></script>
- </head>
- <body>
- <div class="rmf-container">
- <div class="rmf-header">
- <div class="rmf-logo"><img src="images/kpmg-logo.png" width="126" align="absmiddle" height="50" /></div>
- <div class="rmf-nav">homepage | Activities | Reference | Actions <img src="images/person-icon.png" width="43" height="43" align="absmiddle"/> | <img src="images/live-chat.png" width="63" height="50" align="absmiddle" /></div>
- <div class="clear"></div>
- </div>
- </div>
- <div class="rmf-banner">
- <div class="rmf-container">
- </div>
- </div>
- <div class="rmf-container">
- <div class="rmf-actions"></div>
- <div class="rmf-mainarea">
- <h1> Risk Management Portal</h1>
- <div class="tabs tabs-style-linetriangle">
- <nav>
- <ul>
- <li class="tab-current"><a href="#section-linetriangle-1"><span>Activities</span></a></li>
- <li><a href="#section-linetriangle-2"><span>References</span></a></li>
- <li><a href="#section-linetriangle-3"><span>Actions</span></a></li>
- </ul>
- </nav>
- <div class="content-wrap">
- <section id="section-linetriangle-1" class="content-current"><p>1</p></section>
- <section id="section-linetriangle-2"><p>2</p></section>
- <section id="section-linetriangle-3"><p>3</p></section>
- </div><!-- /content -->
- </div>
- </div>
- </div>
- <script src="cbpFWTabs.js"></script>
- <script>
- (function() {
- [].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) {
- new CBPFWTabs( el );
- });
- })();
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement