research.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html>
<!--<![endif]-->

<head>
  <!-- Google Tag Manager -->
  <script>
    (function (w, d, s, l, i) {
      w[l] = w[l] || []; w[l].push({
        'gtm.start':
          new Date().getTime(), event: 'gtm.js'
      }); var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-TCTKHLK');
  </script>
  <!-- End Google Tag Manager -->

  <title>Shef.AI | Research</title>
  <!-- Favicon -->
  <link rel="shortcut icon" type="image/x-icon" href="images/favicons/favicon.png" />
  <link rel="apple-touch-icon" sizes="57x57" href="images/favicons/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="images/favicons/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="images/favicons/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="images/favicons/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="images/favicons/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="images/favicons/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="images/favicons/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="images/favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="images/favicons/favicon-16x16.png">
  <link rel="manifest" href="images/favicons/manifest.json">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="images/favicons/ms-icon-144x144.png">
  <meta name="theme-color" content="#ffffff">
  <!-- HTML Meta Tags -->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="description" content="Data Science and Artificial Intelligence at The University of Sheffield">
  <meta name="keywords" content="Data Science, Artificial Intelligence, Sheffield, University, Health, Medical Sciences, Science, Engineering, Software, Open Source">
  <meta name="author" content="Sina Tabakhi">
  <!-- Mobile Specific Meta -->
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <!-- Facebook Meta Tags -->
  <meta property="og:title" content="Shef.AI | Research" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://shef-ai.github.io/" />
  <meta property="og:description" content="Data Science and Artificial Intelligence at The University of Sheffield" />
  <meta property="og:image" content="https://shef-ai.github.io/images/favicons/favicon.png" />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="400" />
  <meta property="og:image:height" content="400" />
  <meta property="og:image:alt" content="Shef.AI Logo" />


  <!-- CSS
  ================================================== -->
  <!-- Themefisher Icon font -->
  <link rel="stylesheet" href="plugins/themefisher-font/style.css">
  <!-- bootstrap.min css -->
  <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
  <!-- Lightbox.min css -->
  <link rel="stylesheet" href="plugins/lightbox2/dist/css/lightbox.min.css">
  <!-- animation css -->
  <link rel="stylesheet" href="plugins/animate/animate.css">
  <!-- Slick Carousel -->
  <link rel="stylesheet" href="plugins/slick/slick.css">
  <!-- Main Stylesheet -->
  <link rel="stylesheet" href="css/style.css">
  <!-- Chart Stylesheet -->
  <link rel="stylesheet" href="charts/research-portfolio/inspector.css">

</head>

<body id="body">
  <!-- Google Tag Manager (noscript) -->
  <noscript>
    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TCTKHLK" height="0" width="0"
      style="display:none;visibility:hidden"></iframe>
  </noscript>
  <!-- End Google Tag Manager (noscript) -->

  <!--
  Start Preloader
  ==================================== -->
  <div id="preloader">
    <div class='preloader'>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <!--
  End Preloader
  ==================================== -->


  <!--
  Fixed Navigation
  ==================================== -->
  <div id="header-section"></div>
  <!--
  End Fixed Navigation
  ==================================== -->


  <section class="single-page-header">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h2>Research</h2>
          <ol class="breadcrumb header-bradcrumb justify-content-center">
            <li class="breadcrumb-item"><a href="index.html" class="text-white">Home</a></li>
            <li class="breadcrumb-item active">Research</li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="promo-video section-sm">
    <div class="container">
      <div class="row " id="research-section">
        <!-- section title -->
        <div class="col-12">
          <div class="title text-center">
            <h2>Research Areas and Interest Groups</h2>
          </div>
        </div>
      </div>
      <div style="margin-top: 20px;">
        <a href="research-areas.html" class="btn btn-main">View All</a>
      </div>
    </div>
  </section>

  <section class="pricing-table " id="pricing">
    <div class="container">
      <div class="row" id="software-section">
        <!-- section title -->
        <div class="col-12">
          <div class="title title-white text-center ">
            <h2>Current Software</h2>
          </div>
        </div>
      </div> <!-- End row -->
      <div style="margin-top: 20px;">
        <a href="software.html" class="btn btn-main">View All</a>
      </div>
    </div> <!-- End container -->
  </section> <!-- End section -->

  <section class="portfolio section-sm bg-gray">
    <div class="container-fluid">
      <div class="row">
        <!-- section title -->
        <div class="col-12">
          <div class="title text-center">
            <h2>Sheffield Portfolio</h2>
          </div>
        </div>
      </div> <!-- end row -->
    </div> <!-- end container -->

    <div class="container-fluid col-md-8">
      <div id="research-chart-section">
        <script type="module">
          import define from "./charts/research-portfolio/index.js";
          import { Runtime, Library, Inspector } from "./charts/research-portfolio/runtime.js";
          const runtime = new Runtime();
          const main = runtime.module(define, Inspector.into(document.body));
        </script>
      </div>
    </div> <!-- end container -->
  </section> <!-- end section -->

  <div id="footer-section"></div>
  <!-- end Footer Area
    ========================================== -->


  <!-- 
    Essential Scripts
    =====================================-->
  <!-- Main jQuery -->
  <script src="plugins/jquery/jquery.min.js"></script>

  <!-- Form Validation -->
  <script src="plugins/form-validation/jquery.form.js"></script>
  <script src="plugins/form-validation/jquery.validate.min.js"></script>

  <!-- Bootstrap4 -->
  <script src="plugins/bootstrap/js/bootstrap.min.js"></script>
  <!-- Parallax -->
  <script src="plugins/parallax/jquery.parallax-1.1.3.js"></script>
  <!-- lightbox -->
  <script src="plugins/lightbox2/dist/js/lightbox.min.js"></script>
  <!-- Owl Carousel -->
  <script src="plugins/slick/slick.min.js"></script>
  <!-- filter -->
  <script src="plugins/filterizr/jquery.filterizr.min.js"></script>
  <!-- Smooth Scroll js -->
  <script src="plugins/smooth-scroll/smooth-scroll.min.js"></script>
  <!-- Custom js -->
  <script src="js/script.js"></script>
  <!-- Read Json -->
  <script src="js/script-research.js"></script>

  <script>
    $(function () {
      $("#header-section").load("header.html");
      $("#footer-section").load("footer.html");
    });
  </script>

</body>

</html>