HSBC UK: agile transformation project microsite, MVP homepage 2020-2021

An internal content hub as part of a change program to agile ways of operating in Wealth and Personal Banking, HSBC UK.

Scroll down for HTML source code.

HTML source code:

<pre class="wp-block-syntaxhighlighter-code"><style>

  @font-face {
  font-family: 'HSBCRg';
  src: url("https://team.global.hsbc/sites/AgileWPB/SiteAssets/UniversNextforHSBCW02-Rg.woff") format("woff")
  }
  
  @font-face {
  font-family: 'HSBCLt';
  src: url("https://team.global.hsbc/sites/AgileWPB/SiteAssets/UniversNextforHSBCW02-Lt.woff") format("woff")
  }
  
  
  #wrapper {
    display: flex;
     margin-top:5%;
     font-family: 'HSBCRg';
  flex-shrink: 0
  }
  
  #left {
    flex: 0 0 60%;
  }
  
  
  
  
  .main-content-header {
      font-size: 20px;
      font-family: 'HSBCRg';
  }
  
  .news-main-header{
      font-size:30px;
      color:#444;
       font-family: 'HSBCRg';
  
  }
  .news-content-header{
      font-size:20px;
      color:#444;
       font-family: 'HSBCRg';
  
  }
  .blog-header{
      font-size:22px;
      color:#444;
       font-family: 'HSBCRg';
  
  }
  .blog-content{
       font-size:16px;
      color:#444;
       font-family: 'HSBCRg';
  }
  
  .main-contents {
      font-size: 18px;
      font-family: 'HSBCLt';
      padding-left: 23px;
  }
  .font-class-rg {
       font-size: 18px;
       font-family: 'HSBCRg';
  }
  .news-reel-heading{
      font-size: 22px;
      font-family: 'HSBCLt';
  
  }
  #right {
    flex: 0.75;
  }
  .vl {
    border-left: 6px solid red;
    height: 100px;
  }
  #left_card{
      flex: 0 0 60%;
  
  
  }
  #right_card{
      flex: 0.75;
  
  }
  #news-row{
    height: 165px !important;
  }
  
  </style>
  <link href="https://team.global.hsbc/sites/AgileWPB/SiteAssets/css/main.css" rel="stylesheet" type="text/css"/>
  <link href="https://team.global.hsbc/sites/AgileWPB/SiteAssets/css/materialize.css" rel="stylesheet" type="text/css"/>
  <a href="https://team.global.hsbc/sites/AgileWPB/SiteAssets/js/blog-home-vue.js">https://team.global.hsbc/sites/AgileWPB/SiteAssets/js/blog-home-vue.js</a>
  <a href="https://team.global.hsbc/sites/AgileWPB/SiteAssets/js/vue.js">https://team.global.hsbc/sites/AgileWPB/SiteAssets/js/vue.js</a>
  <style>
  td,th{
   vertical-align: top !important;
  }
  
  </style>
  
  <div id="wrapper">
    <div id="left" style="margin-left:5%">
        <p class="font-class" style="width:80%; margin-left:2%;font-size:18px;line-height:25px">Welcome to your WPB Agile Ways of Operating (WOO) site! Your go-to place for everything agile ways of 
          operating - as such it's truly agile with regular updates based on what you need, so you can expect to see new content and features 
          added including new learning tools, additional resources and stories of our colleagues working in this way.</p>
          
                   <body>
         <a onclick="TMS.trackEvent({'page_url' : '/agile/home','page_name':'staff portal:agile:home','event_category':'video','event_action':'play','event_content':'charlie nun introduces'})" 
         href="https://players.brightcove.net/1496514754001/default_default/index.html?videoId=6186109861001">
          <img src="https://team.global.hsbc/sites/AgileWPB/SiteAssets/Video%20stills/Agile-ways-of-operating-the-case-for-change-cover-image.png" alt="Video animation about the agie case for change" width="830"
         height="500"></a>
   </body>   
  
                  <div style="width:80%; margin-left:2%; margin-top:6%;font-size:18px;line-height:25px">
                  <p class="font-class">Exciting changes are being made across Wealth and Personal Banking (WPB) to help build a
                              culture of business agility which enables us to provide our customers with the best products
                          and services, and build a bank fit for the future.To make this happen we’re starting to
                                      implement new agile ways of operating, removing barriers and allowing teams to work together
                                      differently in the following ways:</p>
                  <br/>
  
  <ul>
  <li>
  <p class="main-content-header"><img src="https://team.global.hsbc/sites/AgileWPB/SiteAssets/Home/greentick.svg" />   Collective customer obsessed delivery</p>
  <p class="main-contents" >Bringing together people in small cross-functional teams, working towards a series of collective customer outcomes.</p>
  
  </li>
  <li>
  <p class="main-content-header"><img src="https://team.global.hsbc/sites/AgileWPB/SiteAssets/Home/greentick.svg" />   Empowerment with accountability</p>
  <p class="main-contents" >Empowering teams with new tools based on agile work practices, and providing greater
  autonomy to operate and make decisions within guidelines.</p>
  </li>
  <li>
  <p class="main-content-header"><img src="https://team.global.hsbc/sites/AgileWPB/SiteAssets/Home/greentick.svg" />  Simplification</p>
  <p class="main-contents">Accelerating and improving our investment processes with greater clarity on
  strategic direction, deliverables, timing, funding and resourcing.</p>
  </li>
  </ul>
  
  <br/>
  
  
  <p class="font-class">Changing our culture and the way we work takes time – but we’re committed to supporting
  everyone to do it by regularly communicating, providing learning opportunities, measuring
  performance in a new way and changing our governance where required.</p>
  
  <p class="font-class">Please use this site as the ‘go to’ place for information and updates on our new ways of
  operating, the value stream model and to see how business agility is already helping us make
  improvements for our customers.</p>
  </div>
 <body>
         <a href="https://players.brightcove.net/1496514754001/default_default/index.html?videoId=6209573875001"><img src="https://team.global.hsbc/sites/AgileWPB/SiteAssets/Video%20stills/Stories-from-Hong-Kong-video-cover-image.png" alt="Hong Kong learnings from agile" width="830"
         height="500"></a>
   </body>     
  </div>
  <div id="right">
    <div id="blog-container" style="flex: 0.65;">
          <div id="app-blog" style="padding-bottom:20px !important">
                      <h1  class="news-main-header" >The latest in agile</h1>
                       <h3  class="news-content-header" >WOO news and stories around WPB</h3>
                                          <br>
                      <br>
                      <div id="blogs-list-container">
                         <div v-for="item in blogItems" v-if="item.Status != 'Draft'" class="blog-item">
                                              <a v-bind:href="item.URL" class="blog-link" target="_blank">
                              <p class="blog-header" style="color:rgba(0,0,0,0.75)!important;" v-on:click="TMS.trackEvent({'event_content' : item.Title})">{{ item.Title }}</p>
                              <p class="blog-content">{{ $(item.Summary).text()}}</p>
                              <br>
                              <br>
                              <p class="blog-detail">{{ item.ddate }} - {{ item.ReadingTime }} mins read</p>
                              </a> 
                          </div> 
                          <a  style="background-color:#ff0000; color:white; width: 70%; margin-left: 12%" class="btn btn-secondary btn-block downloadGuide" 
                          href="https://team.global.hsbc/sites/AgileWPB/blogfeature/default.aspx" target="_blank">Read more</a>                  
                      </div>
                  </div>
    </div>
    
      <div id="blog-container" style="flex: 0.75;padding-left:0px !important; padding-right:0px !important">
     
      <div id="news-row" class="row" style=" border: 0px !important;background-color: inherit !important">
      <div class="col s6 news-thumbnail" style="background-image: url("https://team.global.hsbc/sites/AgileWPB/SiteAssets/Home/contactcard_icon.svg"); border-left:6px solid #db0011 !important; width:155px">
      </div> 
      <div class="col s6" >
      <p class="main-content-header" style="font-size:16px !important;" >Questions, suggestions and feedback most welcome</p> 
      <p class="main-content-header" style=" font-size:16px !important">
          <a href="mailto:wpbagilewaysofoperating@hsbc.com?subject=WPB Agile WOO: Questions, suggestions and feedback">
            <span style="font-size: 10pt; ">Drop us a line
                <img  src="https://team.global.hsbc/sites/AgileWPB/SiteAssets/Home/Chevron%20right%20thick.svg"/>
            </span></a></p>
      </div></div></div>

     

     
  
      <div id="blog-container" style="flex: 0.75;padding-left:0px !important; padding-right:0px !important">
      
      <div id="news-row" class="row" style=" border: 0px !important;background-color: inherit !important">
      <div class="col s6 news-thumbnail" style="background-image: url("https://team.global.hsbc/sites/AgileWPB/SiteAssets/Home/ask_expert_icon.svg"); border-left:6px solid #db0011 !important; width:169px">
      </div> 
      <div class="col s6" >
      <p class="main-content-header" style="font-size:16px !important" >Ask the experts</p> 
      <p class="main-content-header" style=" font-size:16px !important">
           <a href="mailto:wpbagilewaysofoperating@hsbc.com?subject=WPB Agile WOO: Ask the Experts">   <span style="font-size: 10pt; ">Get in touch
              <img  src="https://team.global.hsbc/sites/AgileWPB/SiteAssets/Home/Chevron%20right%20thick.svg"/>
          </span></a></p>

          
      
      </div></div></div>
  
  
  </div> </div> </div></pre>

Advertisement