Changes

45,711 bytes removed ,  09:32, 26 October 2020
Replaced content with "<span class="navbar-toggler-icon"></span>"
Line 1: Line 1: −
<!DOCTYPE html>
+
<span class="navbar-toggler-icon"></span>
<html lang="en" dir="ltr">
  −
  <head>
  −
      <title>Cloud Adpotion Journey</title>
  −
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  −
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  −
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  −
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  −
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  −
      <link rel="stylesheet" href="redesign.css">
  −
      </link>
  −
      <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700;800&display=swap" rel="stylesheet">
  −
      <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght@300&display=swap" rel="stylesheet">
  −
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous">
  −
      <link href ="style.css" type = "text/css" rel = "stylesheet">
  −
      <meta charset="utf-8">
  −
  </head>
  −
  <body>
  −
      <div class="container-fluid ">
  −
        <!-- Header jumbotron -->
  −
        <!--
  −
        Bootstrap Jumbotron that is used as a hedaer for the website. It is used
  −
        on every page, and contains the team logo image and the Governement of Canada
  −
        image.
  −
          -->
  −
        <div class="jumbotron-fluid ssc-header fixed-top">
  −
            <div class="row md-auto">
  −
              <img src="pics/cloud_logo.png" class="img-fluid" alt="">
  −
              <p class="h4 title-text">Cloud Product Management & Services <br> Gestion et Services de Produits Infonuagique
  −
              </p>
  −
              <img src="pics/ssc_title_white.png" class="img-fluid ssc-title float-right" alt="" style = "position: absolute; right:0%; width: 40%" >
  −
            </div>
  −
        </div>
  −
        <!-- End of header jumbotron -->
  −
        <!-- Navbar -->
  −
        <!--
  −
        A Boostrap navbar that is consistent throughout the website. It is in fixed position,
  −
        and has a set top position in order to be under the header. Contains a home
  −
        icon from Font Awesome (that links back to the redesign-landing page).
  −
        Also has links to all other sections of the website, including team, support,
  −
        and workflow. This is the main navigation element for the users
  −
        -->
  −
        <nav class="navbar navbar-ssc navbar-expand-lg navbar-light bg-light fixed-top" style= "position: fixed; top: 136px;">
  −
            <a class="navbar-brand" href="redesign-landing.html"><i class="fas fa-home"></i></a>
  −
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
  −
            <span class="navbar-toggler-icon"></span>
  −
            </button>
  −
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
  −
              <ul class="navbar-nav mr-auto">
  −
                  <li class="nav-item active">
  −
                    <a class="nav-link" href="redesign-workflow.html">Workflow</a>
  −
                  </li>
  −
                  <li class="nav-item active dropdown">
  −
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  −
                    Teams
  −
                    </a>
  −
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  −
                        <a class="dropdown-item" href="team.html">CCoE</a>
  −
                        <a class="dropdown-item" href="#">Other</a>
  −
                        <a class="dropdown-item" href="#">Team 3</a>
  −
                    </div>
  −
                  </li>
  −
                  <li class="nav-item active dropdown">
  −
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  −
                    Documentation
  −
                    </a>
  −
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  −
                        <a class="dropdown-item" href="redesign-workflow.html#GENERAL-INFORMATION">General Information</a>
  −
                        <a class="dropdown-item" href="redesign-workflow.html#PROGRAM-INITIATION">Program Initiation</a>
  −
                        <a class="dropdown-item" href="redesign-workflow.html#CLOUD-READINESS-PROCESSES">Cloud Readiness Processes</a>
  −
                        <a class="dropdown-item" href="redesign-workflow.html#CLOUD-SERVICES-ESTABLISHMENT">Cloud Services Establishment</a>
  −
                        <a class="dropdown-item" href="redesign-workflow.html#CLOUD-GOVERNANCE-PROCESSES">Cloud Governance Processes</a>
  −
                        <a class="dropdown-item" href="redesign-workflow.html#PROGRAM-EVOLOUTION">Program Evoloution</a>
  −
                        <a class="dropdown-item" href="redesign-workflow.html#LESSONS-LEARNED">Lessons Learned</a>
  −
                    </div>
  −
                  </li>
  −
                  <li class="nav-item active dropdown">
  −
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  −
                    Support
  −
                    </a>
  −
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  −
                        <a class="dropdown-item" href="support.html">Contact Us</a>
  −
                        <a class="dropdown-item" href="https://docs.google.com/forms/d/e/1FAIpQLSfqqhEv9xc_QwUj5qynrL3V-bCmduomSteAgKCTIheU75hjBA/viewform">Provide a Feedback</a>
  −
                    </div>
  −
                  </li>
  −
              </ul>
  −
            </div>
  −
        </nav>
  −
        <!-- End of navbar -->
  −
        <!-- Splash jumbotron -->
  −
        <!--
  −
        A Bootstrap jumbotron that informs the user what page they are on,
  −
        and gives a brief unique title and description depending on the page.
  −
        It is used on every page, except for the playbook pages.
  −
        -->
  −
        <br><br><br><br><br><br><br><br><br>
  −
        <div class="jumbotron-fluid ssc-splash">
  −
            <div class="col">
  −
              <h1 class="display-3">The Cloud Adoption Journey</h1>
  −
              <p class="display-5">Advice and Guidance at Every Step</p>
  −
            </div>
  −
        </div>
  −
        <!-- Info jumbotron -->
  −
        <!--
  −
        Bootstrap jumbotron with a Bootstrap card nested inside. Gives a
  −
        simple description of the workflow diagram.
  −
        -->
  −
        <div class="jumbotron bg-light text-center">
  −
            <div class="row">
  −
              <div class="col">
  −
                  <div class="card shadow">
  −
                    <div class="card-body">
  −
                        <p class="h4 card-title ssc-text">Take your Cloud Adoption Journey one step at a time!</p>
  −
                        <p class="card-body ssc-text">The following workflow shows all the steps of your Cloud Adoption Journey. Need more? Simply click on any step to see more details and documentation!</p>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
        </div>
  −
        <!-- End of info jumbotron -->
  −
        <!-- Start of new workflow diagram table -->
  −
        <!--
  −
        The Diagram table is an HTML table that has Bootstrap buttons or img
  −
        inserted in the cells. Buttons link to  jumbotrons with the same ID
  −
        below. Spacing between the cells was done with the headers by forcing a
  −
        set width. Uses styling from the redesign.css.
  −
        -->
  −
        <table class="table-responsive workflow-diagram text-center">
  −
            <thead>
  −
              <tr>
  −
                  <th>Cloud Adoption Journey Workflow</th>
  −
                  <th style="width: 6%"></th>
  −
                  <th></th>
  −
                  <th style="width: 4%"></th>
  −
                  <th></th>
  −
                  <th style="width: 4%"></th>
  −
                  <th></th>
  −
                  <th style="width: 4%"></th>
  −
                  <th></th>
  −
                  <th style="width: 4%"><img src="pics/line_horz.png"/><br><img src="pics/dot_line_horz.png"/></th>
  −
                  <th>Process Flow <br>Iterative/Ongoing</th>
  −
                  <th></th>
  −
              </tr>
  −
            </thead>
  −
            <tbody>
  −
              <tr>
  −
                  <th scope="row">
  −
                    <a class="btn lightblue_card  btn-block"  href = "#PROGRAM-INITIATION">
  −
                        Program Initiation</button>
  −
                  </th>
  −
                  <td></td>
  −
                  <td class="lightblue_tron"> <a class="btn lightblue_card btn-block"  href = "redesign-workflow.html#PROGRAM-INITIATION">Cloud Program Definition</button></td>
  −
                  <td class="lightblue_tron"><img src="pics/arrow_right.png"/></td>
  −
                  <td class="lightblue_tron"> <a class=" btn lightblue_card btn-block"  href = "#PROGRAM-INITIATION">Cloud Program Leadership</button></td>
  −
                  <td class="lightblue_tron"><img src="pics/arrow_right.png"/></td>
  −
                  <td class="lightblue_tron"> <a class=" btn lightblue_card btn-block"  href = "#PROGRAM-INITIATION">Cloud Program Planning</button></td>
  −
                  <td class="lightblue_tron"></td>
  −
                  <td class="lightblue_tron"></td>
  −
                  <td class="lightblue_tron"></td>
  −
                  <td class="lightblue_tron"></td>
  −
                  <td></td>
  −
              </tr>
  −
              <tr>
  −
              <td><img src="pics/arrow_down.png"/></td>
  −
              <td></td>
  −
              <td><img src="pics/arrow_up_dot.png"/></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td><img src="pics/arrow_down.png"/></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td></td>
  −
              </tr>
  −
              <tr>
  −
              <th scope="row"> <a class=" btn orange_card btn-block"  href = "#CLOUD-READINESS-PROCESSES">Cloud Readiness Processes</button></th>
  −
              <td></td>
  −
              <td class="orange_tron"><img src="pics/dot_line_vert.png"/></td>
  −
              <td class="orange_tron"></td>
  −
              <td class="orange_tron"></td>
  −
              <td class="orange_tron"></td>
  −
              <td class="orange_tron"> <a class=" btn orange_card  btn-block"  href = "#CLOUD-READINESS-PROCESSES">Cloud Initiation Processes</button></td>
  −
              <td class="orange_tron"><img src="pics/arrow_right.png"/></td>
  −
              <td class="orange_tron"> <a class=" btn orange_card  btn-block"  href = "#CLOUD-READINESS-PROCESSES">Cloud Governance Establishment</button></td>
  −
              <td class="orange_tron"><img src="pics/arrow_right.png"/></td>
  −
              <td class="orange_tron"> <a class=" btn orange_card btn-block"  href = "#CLOUD-READINESS-PROCESSES">Cloud Direction Creation</button></td>
  −
              </tr>
  −
              <tr>
  −
              <td><img src="pics/arrow_down.png"/></td>
  −
              <td></td>
  −
              <td><img src="pics/dot_line_vert.png"/></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td><img src="pics/arrow_down.png"/></td>
  −
              </tr>
  −
              <tr>
  −
              <th scope="row"> <a class=" btn yellow_card btn-block"  href = "#CLOUD-SERVICES-ESTABLISHMENT">Cloud Services Establishment</button></th>
  −
              <td></td>
  −
              <td class="yellow_tron"><img src="pics/dot_line_vert.png"/></td>
  −
              <td class="yellow_tron"> <p style="font-size: 16px;">Ongoing continuous improvement processes</p></td>
  −
              <td class="yellow_tron"></td>
  −
              <td class="yellow_tron"></td>
  −
              <td class="yellow_tron"> <a class=" btn yellow_card btn-block"  href = "#CLOUD-SERVICES-ESTABLISHMENT">Cloud Core Services</button></td>
  −
              <td class="yellow_tron"><img src="pics/arrow_left.png"/></td>
  −
              <td class="yellow_tron"> <a class=" btn yellow_card btn-block"  href = "#CLOUD-SERVICES-ESTABLISHMENT" >Foundational Services</button></td>
  −
              <td class="yellow_tron"><img src="pics/arrow_left.png"/></td>
  −
              <td class="yellow_tron"> <a class=" btn yellow_card btn-block"  href = "#CLOUD-SERVICES-ESTABLISHMENT">Workload Analysis</button></td>
  −
              </tr>
  −
              <tr>
  −
              <td><img src="pics/recycle.png"/></td>
  −
              <td></td>
  −
              <td><img src="pics/dot_line_vert.png"/></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td><img src="pics/arrow_down.png"/></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td><img src="pics/arrow_up_dot.png"/><p style="font-size: 14px">Iterative for each new application/workload migration<p></td>
  −
              </tr>
  −
              <tr>
  −
              <th scope="row"> <a class=" btn green_card btn-block"  href = "#CLOUD-GOVERNANCE-PROCESSES">Cloud Governance Processes</button></th>
  −
              <td></td>
  −
              <td class="green_tron"><img src="pics/dot_line_vert.png"/></td>
  −
              <td class="green_tron"></td>
  −
              <td class="green_tron"></td>
  −
              <td class="green_tron"></td>
  −
              <td class="green_tron"> <a class=" btn green_card btn-block"  href = "#CLOUD-GOVERNANCE-PROCESSES">Assesment Processes</button></td>
  −
              <td class="green_tron"><img src="pics/arrow_right.png"/></td>
  −
              <td class="green_tron"> <a class=" btn green_card btn-block"  href = "#CLOUD-GOVERNANCE-PROCESSES">Approval Processes</button></td>
  −
              <td class="green_tron"><img src="pics/arrow_right.png"/></td>
  −
              <td class="green_tron"> <a class=" btn green_card btn-block"  href = "#CLOUD-GOVERNANCE-PROCESSES">Deployment Lifecycle Processes</button></td>
  −
              </tr>
  −
              <tr>
  −
              <td><img src="pics/arrow_down.png"/></td>
  −
              <td></td>
  −
              <td><img src="pics/dot_line_vert.png"/></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td></td>
  −
              <td><img src="pics/line_vert.png"/></td>
  −
              </tr>
  −
              <tr>
  −
              <th scope="row"> <a class=" btn blue_card btn-block"  href = "#PROGRAM-EVOLOUTION">Program Evoloution</button></th>
  −
              <td></td>
  −
              <td class="blue_tron"> <a class=" btn blue_card btn-block"  href = "#PROGRAM-EVOLOUTION"> Program Improvement</button></td>
  −
              <td class="blue_tron"><img src="pics/arrow_left.png"/></td>
  −
              <td class="blue_tron"> <a class=" btn blue_card btn-block"  href = "#PROGRAM-EVOLOUTION">Program Monitoring</button></td>
  −
              <td class="blue_tron"><img src="pics/arrow_left.png"/></td>
  −
              <td class="blue_tron"> <a class=" btn blue_card btn-block"  href = "#PROGRAM-EVOLOUTION">Cloud Readiness Evoloution</button></td>
  −
              <td class="blue_tron"><img src="pics/arrow_left.png"/></td>
  −
              <td class="blue_tron"><img src="pics/line_horz.png"/></td>
  −
              <td class="blue_tron"><img src="pics/line_horz.png"/></td>
  −
              <td id = "GENERAL-INFORMATION" class="blue_tron"><img src="pics/line_corner.png"/><td>
  −
              </tr>
  −
            </tbody>
  −
        </table>
  −
        <!-- End of new workflow diagram table -->
  −
        <!-- Start of the general info links -->
  −
        <div class="jumbotron mt-3 ">
  −
          <div class="row align-items-center">
  −
            <div class="col-lg-3">
  −
              <div class="card shadow mt-4">
  −
                <div class="card-body">
  −
                  <div id = "PROGRAM-INITIATION"  class="card-body h4 ssc-text">General Information
  −
                  </div>
  −
                </div>
  −
              </div>
  −
            </div>
  −
            <div class="col-lg-9">
  −
              <div class="jumbotron  shadow mt-3">
  −
                <div class="card-deck text-center">
  −
                  <div class="card  shadow">
  −
                    <div class="card-header h5">Cloud Awareness
  −
                    </div>
  −
                    <div class="card-body">Understanding the core components of Cloud, its benefits and the direction of the Government of Canada’s Cloud First strategy is a critical step when deciding to start your Cloud Adoption Journey.
  −
                    </div>
  −
                    <a class="card-footer" href = "HTML_PLAYBOOKS/Cloud Awareness.html">Link</a>
  −
                  </div>
  −
                  <div class="card  shadow">
  −
                    <div class="card-header h5">Cloud Adoption Journey
  −
                    </div>
  −
                    <div class="card-body">Understanding the big picture of your Cloud Adoption Journey is the first step in creating the end-game Cloud vision for your Department.
  −
                    </div>
  −
                    <a class="card-footer" href = "HTML_PLAYBOOKS/Cloud Adoption Journey.html">Link</a>
  −
                  </div>
  −
                  <div class="card  shadow">
  −
                    <div class="card-header h5">Cloud Adoption Program
  −
                    </div>
  −
                    <div class="card-body">Understanding the key components and processes involved in your Cloud Adoption Program will enable you to be agile as you move towards a successful Cloud adoption.
  −
                    </div>
  −
                    <a class="card-footer" href = "HTML_PLAYBOOKS/Cloud Adoption Program.html">Link</a>
  −
                  </div>
  −
                </div>
  −
              </div>
  −
            </div>
  −
          </div>
  −
        </div>
  −
        <!-- End of the General Info links -->
  −
        <!-- Start of lightblue links -->
  −
 
  −
        <!--
  −
        The links to the various playbooks are jumbotrons with cards placed on
  −
        top. The jumbotron is split into a row with multiple columns. There is
  −
        a title card in the first column, then a card-deck containing the various
  −
        link cards in the other column. This pattern repeats with all the links.
  −
 
  −
        The links in the cards will take the user to the indiviudal pages created
  −
        for each of the playbooks.
  −
 
  −
        The general links above also follow a similar format
  −
 
  −
        -->
  −
 
  −
        <div class="jumbotron lightblue_tron">
  −
            <div class="row align-items-center">
  −
              <div class="col-lg-3">
  −
                  <div class="card lightblue_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div class="card-body h4 ssc-text">Program Initiation
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-9">
  −
                  <div class="jumbotron lightblue_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card lightblue_card shadow">
  −
                          <div class="card-header h5">Cloud Adoption Program Initiation
  −
                          </div>
  −
                          <div class="card-body">Understanding and establishing the key components required to initiate your Cloud Adoption Program is the first phase of creating a successful Cloud Adoption Program.
  −
                          </div>
  −
                          <a class="card-footer" href = "HTML_PLAYBOOKS/Cloud Adoption Program Initiation.html">Link</a>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
            <div class="row align-items-center justify-content-end">
  −
              <div class="col">
  −
              </div>
  −
              <div class="col-lg-3">
  −
                  <div class="card lightblue_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div class="card-body h4 ssc-text">Cloud Program Definition
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-8">
  −
                  <div class="jumbotron lightblue_tron shadow  mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card lightblue_card shadow">
  −
                          <div class="card-header h5">Coming Soon...
  −
                          </div>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
            <div class="row align-items-center justify-content-end">
  −
              <div class="col">
  −
              </div>
  −
              <div class="col-lg-3">
  −
                  <div class="card lightblue_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div class="card-body h4 ssc-text">Cloud Program Leadership
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-8">
  −
                  <div class="jumbotron lightblue_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card lightblue_card shadow">
  −
                          <div id = "CLOUD-READINESS-PROCESSES" class="card-header h5">Coming Soon...
  −
                          </div>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
            <div class="row align-items-center justify-content-end">
  −
              <div class="col">
  −
              </div>
  −
              <div class="col-lg-3">
  −
                  <div class="card lightblue_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div  class="card-body h4 ssc-text">Cloud Program Planning
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-8">
  −
                  <div class="jumbotron lightblue_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card lightblue_card shadow">
  −
                          <div  class="card-header h5">Coming Soon...
  −
                          </div>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
        </div>
  −
        <!-- End of lightblue links -->
  −
        <!-- Start of orange links -->
  −
        <div class="jumbotron orange_tron">
  −
            <div class="row align-items-center">
  −
              <div class="col-lg-3">
  −
                  <div class="card orange_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div  class="card-body h4 ssc-text">Cloud Readiness Processes
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-9">
  −
                  <div class="jumbotron orange_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card orange_card shadow">
  −
                          <div class="card-header h5">Coming Soon...
  −
                          </div>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
            <div class="row align-items-center justify-content-end">
  −
              <div class="col">
  −
              </div>
  −
              <div class="col-lg-3">
  −
                  <div class="card orange_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div class="card-body h4 ssc-text">Cloud Initiation Processes
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-8">
  −
                  <div class="jumbotron orange_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card orange_card shadow">
  −
                          <div class="card-header h5">Cloud Adoption Objectives and KPIs Workshop
  −
                          </div>
  −
                          <div class="card-body">Clearly aligning the Cloud Adoption Objectives and KPIs with your departmental business objectives is a critical step of getting ready to start your Cloud Adoption Journey.
  −
                          </div>
  −
                          <a class="card-footer" href = "HTML_PLAYBOOKS/Cloud Adoption Objectives and KPIs Workshop.html">Link</a>
  −
                        </div>
  −
                        <div class="card orange_card shadow">
  −
                          <div class="card-header h5">Cloud Readiness Assessment
  −
                          </div>
  −
                          <div class="card-body">Clearly understanding your Departments Cloud readiness in terms of people, process, and technology and actively working to improve the required areas will allow you to be prepared for your Cloud Adoption Journey.
  −
                          </div>
  −
                          <a class="card-footer" href = "HTML_PLAYBOOKS/Cloud Readiness Assessment.html">Link</a>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
            <div class="row align-items-center justify-content-end">
  −
              <div class="col">
  −
              </div>
  −
              <div class="col-lg-3">
  −
                  <div class="card orange_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div class="card-body h4 ssc-text">Cloud Governance Establishment
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-8">
  −
                  <div class="jumbotron orange_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card orange_card shadow">
  −
                          <div class="card-header h5">Governance Teams
  −
                          </div>
  −
                          <div class="card-body">Establishing the required Cloud Governance Teams to drive the all parts of the organization towards a successful Cloud Adoption Journey is crucial.
  −
                          </div>
  −
                          <a class="card-footer" href = "HTML_PLAYBOOKS/Governance Teams.html">Link</a>
  −
                        </div>
  −
                        <div class="card orange_card shadow">
  −
                          <div class="card-header h5">Governance Processes
  −
                          </div>
  −
                          <div class="card-body">Establishing and obtaining alignment on the key Governance Processes at the beginning of your Cloud Adoption Journey is important in order to enable easy governance of your Cloud Program later on.
  −
                          </div>
  −
                          <a class="card-footer" href = "HTML_PLAYBOOKS/Governance Processes.html">Link</a>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
            <div class="row align-items-center justify-content-end">
  −
              <div class="col">
  −
              </div>
  −
              <div class="col-lg-3">
  −
                  <div class="card orange_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div id = "CLOUD-SERVICES-ESTABLISHMENT" class="card-body h4 ssc-text">Cloud Direction Creation
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-8">
  −
                  <div class="jumbotron orange_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card orange_card shadow">
  −
                          <div class="card-header h5">Cloud Services High Level Design
  −
                          </div>
  −
                          <div class="card-body">Defining the guiding design principles and the desired end state of your Cloud implementation in terms of People, Process, Technology allows a phased implementation to proceed with the clear end state goal.
  −
                          </div>
  −
                          <a class="card-footer" href = "HTML_PLAYBOOKS/Cloud Services High Level Design.html">Link</a>
  −
                        </div>
  −
                        <div class="card orange_card shadow">
  −
                          <div class="card-header h5">Cloud Adoption Roadmap
  −
                          </div>
  −
                          <div class="card-body">It is critical to define the high level Roadmap Phasing  and Roadmap Phasing Order in order to determine what groupings and order of workloads/applications should be moved to the Cloud to best enable the Department meet their business objectives.
  −
                          </div>
  −
                          <a class="card-footer" href = "HTML_PLAYBOOKS/Cloud Adoption Roadmap.html">Link</a>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
        </div>
  −
        <!-- End of orange links -->
  −
        <!-- Start of yellow links -->
  −
        <div class="jumbotron yellow_tron">
  −
            <div class="row align-items-center">
  −
              <div class="col-lg-3">
  −
                  <div class="card yellow_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div  class="card-body h4 ssc-text">Cloud Services Establishment
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-9">
  −
                  <div class="jumbotron yellow_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card yellow_card shadow">
  −
                          <div class="card-header h5">Coming Soon...
  −
                          </div>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
            <div class="row align-items-center justify-content-end">
  −
              <div class="col">
  −
              </div>
  −
              <div class="col-lg-3">
  −
                  <div class="card yellow_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div class="card-body h4 ssc-text">Cloud Core Services
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-8">
  −
                  <div class="jumbotron yellow_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card yellow_card shadow">
  −
                          <div class="card-header h5">Cloud Core Services Establishment
  −
                          </div>
  −
                          <div class="card-body">Coming Soon...
  −
                          </div>
  −
                          <a class="card-footer" href = "#">Link</a>
  −
                        </div>
  −
                        <div class="card yellow_card shadow">
  −
                          <div class="card-header h5">Cloud Core Services Deployment
  −
                          </div>
  −
                          <div class="card-body">Coming Soon...
  −
                          </div>
  −
                          <a class="card-footer" href = "#">Link</a>
  −
                        </div>
  −
                        <div class="card yellow_card shadow">
  −
                          <div class="card-header h5">Cloud Core Services Implementation and Operations
  −
                          </div>
  −
                          <div class="card-body"> Coming Soon...
  −
                          </div>
  −
                          <a class="card-footer" href = "#">Link</a>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
            <div class="row align-items-center justify-content-end">
  −
              <div class="col">
  −
              </div>
  −
              <div class="col-lg-3">
  −
                  <div class="card yellow_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div class="card-body h4 ssc-text">Foundational Services
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-8">
  −
                  <div class="jumbotron yellow_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card yellow_card shadow">
  −
                          <div class="card-header h5">Foundational Services Establishment
  −
                          </div>
  −
                          <div class="card-body">Coming Soon...
  −
                          </div>
  −
                          <a class="card-footer" href = "#">Link</a>
  −
                        </div>
  −
                        <div class="card yellow_card shadow">
  −
                          <div class="card-header h5">Foundational Services Deployment
  −
                          </div>
  −
                          <div class="card-body">Coming Soon...
  −
                          </div>
  −
                          <a class="card-footer" href = "#">Link</a>
  −
                        </div>
  −
                        <div class="card yellow_card shadow">
  −
                          <div class="card-header h5">Foundational Services Implementation and Operations
  −
                          </div>
  −
                          <div class="card-body">Coming Soon...
  −
                          </div>
  −
                          <a class="card-footer" href = "#">Link</a>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
            <div class="row align-items-center justify-content-end">
  −
              <div class="col">
  −
              </div>
  −
              <div class="col-lg-3">
  −
                  <div class="card yellow_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div class="card-body h4 ssc-text">Workload Analysis
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-8">
  −
                  <div class="jumbotron yellow_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card yellow_card shadow">
  −
                          <div class="card-header h5">Workload Analysis Establishment
  −
                          </div>
  −
                          <div class="card-body">Coming Soon...
  −
                          </div>
  −
                          <a class="card-footer" href = "#">Link</a>
  −
                        </div>
  −
                        <div class="card yellow_card shadow">
  −
                          <div class="card-header h5">Workload Analysis Execution
  −
                          </div>
  −
                          <div class="card-body">Coming Soon...
  −
                          </div>
  −
                          <a class="card-footer" href = "#">Link</a>
  −
                        </div>
  −
                        <div class="card yellow_card shadow">
  −
                          <div id = "CLOUD-GOVERNANCE-PROCESSES" class="card-header h5">Workload Migration Implementation and Operations
  −
                          </div>
  −
                          <div class="card-body">Coming Soon...
  −
                          </div>
  −
                          <a class="card-footer" href = "#">Link</a>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
        </div>
  −
        <!-- End of yellow links -->
  −
        <!-- Start of green links -->
  −
        <div class="jumbotron green_tron">
  −
            <div class="row align-items-center">
  −
              <div class="col-lg-3">
  −
                  <div class="card green_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div class="card-body h4 ssc-text">Cloud Governance Processes
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-9">
  −
                  <div class="jumbotron green_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card green_card shadow">
  −
                          <div class="card-header h5">Governance Processes
  −
                          </div>
  −
                          <div class="card-body">Establishing and obtaining alignment on the key Governance Processes at the beginning of your Cloud Adoption Journey is important in order to enable easy governance of your Cloud Program later on.
  −
                          </div>
  −
                          <a class="card-footer" href = "#">Link</a>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
            <div class="row align-items-center justify-content-end">
  −
              <div class="col">
  −
              </div>
  −
              <div class="col-lg-3">
  −
                  <div class="card green_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div class="card-body h4 ssc-text">Assessment Processes
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-8">
  −
                  <div class="jumbotron green_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card green_card shadow">
  −
                          <div class="card-header h5">Coming Soon...
  −
                          </div>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
            <div class="row align-items-center justify-content-end">
  −
              <div class="col">
  −
              </div>
  −
              <div class="col-lg-3">
  −
                  <div class="card green_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div class="card-body h4 ssc-text">Approval Processes
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-8">
  −
                  <div class="jumbotron green_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card green_card shadow">
  −
                          <div class="card-header h5">Coming Soon...
  −
                          </div>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
            <div class="row align-items-center justify-content-end">
  −
              <div class="col">
  −
              </div>
  −
              <div class="col-lg-3">
  −
                  <div class="card green_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div  id = "PROGRAM-EVOLOUTION" class="card-body h4 ssc-text"> Deployment Lifecycle Processes
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-8">
  −
                  <div class="jumbotron green_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card green_card shadow">
  −
                          <div class="card-header h5">Coming Soon...
  −
                          </div>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
        </div>
  −
        <!-- End of green links -->
  −
        <!-- Start of blue links -->
  −
        <div class="jumbotron blue_tron">
  −
            <div class="row align-items-center">
  −
              <div class="col-lg-3">
  −
                  <div class="card blue_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div  class="card-body h4 ssc-text">Program Evoloution
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-9">
  −
                  <div class="jumbotron blue_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card blue_card shadow">
  −
                          <div class="card-header h5">Cloud Program Evoloution
  −
                          </div>
  −
                          <div class="card-body"> Understanding that Cloud adoption continues to evolve indefinitely and establishing ongoing continuous improvement processes is the final phase of a successful Cloud Adoption Program.
  −
                          </div>
  −
                          <a class="card-footer" href = "HTML_PLAYBOOKS/Cloud Program Evolution.html">Link</a>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
            <div class="row align-items-center justify-content-end">
  −
              <div class="col">
  −
              </div>
  −
              <div class="col-lg-3">
  −
                  <div class="card blue_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div class="card-body h4 ssc-text">Cloud Readiness Evoloution
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-8">
  −
                  <div class="jumbotron blue_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card blue_card shadow">
  −
                          <div class="card-header h5">Coming Soon...
  −
                          </div>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
            <div class="row align-items-center justify-content-end">
  −
              <div class="col">
  −
              </div>
  −
              <div class="col-lg-3">
  −
                  <div class="card blue_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div class="card-body h4 ssc-text">Program Monitoring
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-8">
  −
                  <div class="jumbotron blue_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card blue_card shadow">
  −
                          <div class="card-header h5">Coming Soon...
  −
                          </div>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
            <div class="row align-items-center justify-content-end">
  −
              <div class="col">
  −
              </div>
  −
              <div class="col-lg-3">
  −
                  <div class="card blue_card shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div class="card-body h4 ssc-text"> Program Improvement
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-8">
  −
                  <div class="jumbotron blue_tron shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card blue_card shadow">
  −
                          <div class="card-header h5">Coming Soon...
  −
                          </div>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
        </div>
  −
        <div class="jumbotron ">
  −
            <div class="row align-items-center">
  −
              <div class="col-lg-3">
  −
                  <div class="card  shadow mt-4">
  −
                    <div class="card-body">
  −
                        <div id = "LESSONS-LEARNED" class="card-body h4 ssc-text">Lessons Learned
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
              <div class="col-lg-9">
  −
                  <div class="jumbotron  shadow mt-3">
  −
                    <div class="card-deck text-center">
  −
                        <div class="card  shadow">
  −
                          <div class="card-header h5 ">Coming Soon...
  −
                          </div>
  −
                        </div>
  −
                    </div>
  −
                  </div>
  −
              </div>
  −
            </div>
  −
        </div>
  −
      </div>
  −
  </body>
  −
</html>
 
54

edits