modules.html

<!DOCTYPE html>
<html lang="en">

<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-C0QWHF7NRK"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-C0QWHF7NRK');
</script>


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description"
        content="AI Ethics: Global Perspectives is a free, online course designed to raise awareness and help institutions work toward a more responsible use of AI. It brings together leading experts in the field of AI from around the world to consider ethical ramifications of AI and rectify initiatives that might be harmful to particular people and groups in society." />
    <meta property="og:type" content="website" />
   <meta property="og:title" content="AI Ethics: Global Perspectives" />
    <meta property="og:description"
        content="AI Ethics: Global Perspectives is a free, online course designed to raise awareness and help institutions work toward a more responsible use of AI. It brings together leading experts in the field of AI from around the world to consider ethical ramifications of AI and rectify initiatives that might be harmful to particular people and groups in society." />
    <meta property="og:image" content="img/thumbnail.png" />
        <meta property="og:image" content="https://aiethicscourse.org/img/thumbnail.png" />
    <meta property="twitter:image" content="https://aiethicscourse.org/img/thumbnail.png" />
    <title>AI Ethics: Global Perspectives</title>
    <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://use.typekit.net/kwv5eho.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://unpkg.com/@directus/sdk-js@5.3.4/dist/directus-sdk.umd.min.js"></script>
    <link href="css/styles.css" rel="stylesheet">
</head>
<header class="gl-header">
    <a class="govlab-logo" href="index.html">
        AI Ethics: <span id="title-id">Global Perspectives</span>
    </a>
    <div class="menu">
            <a href="modules.html">MODULES</a>
            <a href="instructors.html">INSTRUCTORS</a>
            <a href="webinar-series.html">Webinar Series</a>
            <a href="partners.html">PARTNERS</a>
            <a href="contact.html">REGISTER HERE</a>
    </div>
</header>

<body>
    <div class="heading" onload="expand()">
        <h1>Modules</h1>
        <p>New course modules will be released on a monthly basis. If you would like to be notified of updates to the course, please fill out the form <a target="_blank" href="contact.html">here.</a>
        </p>
    </div>
    <div class="lecture-page" id="home-page">
     
        <div class="lecture-row">
        <div class="lecture-item"  v-for="module in lectureData">
        <div v-bind:class="module.lecture_live=='0'?'lecture-module module-next':'lecture-module'">
      
            <p v-if="module.lecture_live=='0'" class="lecture-mod-item">
                <span id="mod-coming-soon">Coming soon</span>
            </p>
            <h2>{{module.title}}</h2>
            <p class="module-description" v-if="module.short_description">{{module.short_description}}</p>
           
            <ul>
                <li v-for="(faculty_item,index) in module.faculty">
                    
                    <span id="headshot" v-if="faculty_item.faculty_junction_id.headshot"><img v-bind:src="faculty_item.faculty_junction_id.headshot.data.thumbnails[3].url"></span>
                    <!-- <span id="expert-name">{{faculty_item.faculty_junction_id.name}},</span>&nbsp{{faculty_item.faculty_junction_id.title}},
                    {{faculty_item.faculty_junction_id.organization}}</li> -->
                    <span id="expert-name">{{faculty_item.faculty_junction_id.name}}</li><span
                        v-if="index != module.faculty.length-1">&nbsp</span></span>
            </ul>

            <a v-if="module.lecture_live=='1'" target="_blank" :href="'lectures/' + module.slug">Watch the lecture</a>
            
        </div>
        </div>
    </div>

<div class="separator">
    <h2>Partners</h2>
</div>
<div id="partners" class="white-section">
    <div v-html="indexData[0].partner_section_text">

    </div>
    <div class="logo-section">
        <div class="logo-row">
            <div v-for="supporter in supporterData" class="logo-col">
                <a v-if="supporter.url" target="_blank" :href="supporter.url"><img v-bind:src="supporter.logo.data.thumbnails[3].url"></a>
            </div>

        </div>

    </div>
</div>
</div>
</body>
<footer>
    <!-- <a target="_blank" href="pledge.html"><img id="covid-pledge" src="img/cropped-OCP_WP_logo_240x240.png"></a> -->
    <img src="img/cc-logo.png">
    <p>This work is licensed under a <a target="_blank" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons
            Attribution-ShareAlike 4.0 International License</a>.</p>
    <!-- <p id="privacy"><a target="_blank" href="privacy.html">Privacy Policy</a> and <a target="_blank" href="terms.html">Terms of Use</a>.</p> -->
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src='https://unpkg.com/vue@2.0.3/dist/vue.js'></script>
<script src="https://unpkg.com/vue-meta/dist/vue-meta.min.js"></script>

<script src="js/ai-ethics.js"></script>

</html>