index_v2.html


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


<!-- HEADER -->
<head>

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

    gtag('config', 'UA-161931112-1');
  </script>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.slim.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- p5 library -->
  <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" type="image/png" href="img/favicon.png" />


  <!-- UPDATE THESE -->

  <!-- Facebook tags -->
  <meta property="og:title" content="Multiplicity">
  <meta property="og:description" content="Global examinations of the internet, youth & society.">
  <meta property="og:image" content="https://www.multiplicity.tech/img/thumbnail.png"> 
  <meta property="og:url" content="https://www.multiplicity.tech"> 
  <meta property="og:site_name" content="multiplicity">
  <meta property="og:type" content="website" />
  <meta name="theme-color" content="#02012F"/>


  <!-- Twitter tags -->
  <meta name="twitter:title" content="Multiplicity">
  <meta name="twitter:description" content="Global examinations of the internet, youth & society.">
  <meta name="twitter:image" content="https://www.multiplicity.tech/img/thumbnail.png">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image:alt" content="multiplicity logo">
  <meta name="twitter:site" content="@multiplicity_x">


  <title>Multiplicity</title>

  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="styles.css" rel="stylesheet">
  <link href="shared.css" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet"> 

  <script src="src/script.js"></script>

</head>


<body class="d-flex flex-column" style="overflow-x: hidden;">


  <!-- Header & Nav -->


   <nav class="navbar navbar-expand-lg" style="margin-left: 2%; margin-right: 2%;">

    <div class="d-flex flex-grow-1"> 

      <span class="w-100 d-block"></span>

      <a class="navbar-brand" href="#">
        multiplicity<span class="txt-rotate"
        data-period = "2000"
        data-rotate = '[ ".fandom", ".tech", ".privacy", ".exile", ".identity", ".diaspora", ".archive", ".bias", ".gaming", ".home", ".climate", ".nature", ".food", ".apps", ".flash", ".art", ".earth", ".youth", ".music", ".women", ".finance", ".media"]'></span>
      </a>
 

      <!-- d-lg-none -->
      <div class="w-100 text-right">

        <button class="navbar-toggler flex-fill" type="button" data-toggle="collapse" data-target="#myNavbar">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse text-right w-100" id="myNavbar">
          <ul class="navbar-nav ml-auto flex-nowrap">
     <!--                <li class="nav-item">
              <a href="twitter.com" class="nav-link"><img src="img/twitter.png" style="height: 2.1rem;;"></a>
            </li>
              <li class="nav-item">
              <a href="instagram.com" class="nav-link"><img src="img/instagram.png" style="height: 1.5rem;"></a>
            </li> -->
            <li class="nav-item">
              <a target="_blank" href="about.html" class="nav-link">About</a>
            </li>
          </ul>

        </div>


      </div> 


    </div>

  </nav>


  <!-- Cover Page Content -->

<div>
  <!-- <div id="page-content"> -->
    <div class="container text-center">
      <div class="row justify-content-center">

<!-- old order: tona, tom, rastra, munib, jihyun, lujain, grace, origin -->

<!-- new order: jihyun, lujain, rastra, tona, tom, munib, grace-->


<!-- dana, ethan, jaime, jihyun, shabab, youssef, dervla, lujain -->

          <div class="article-card" id="dervla-card">
            <a target="_blank" href="articles/mute-a-country.html">
              <div class="card-title">
                <h2> How to Mute a Country </h2>
                <p>Dervla O'Brien </p>
              </div>
            </a>
            <a target="_blank" id="card-img" href="articles/mute-a-country.html">
              <img src="img/dervla-home.png" alt="header" class="image1" style="margin-left: 0%">
            </a>
          </div>

          <div class="article-card" id="azzam-card">

          <a target="_blank" href="articles/internet-music.html">
            <div class="card-title">
              <h2> Internet, Social Media, and the Music Industry </h2>
              <p>Youssef Azzam</p>
            </div>
          </a>
          <a target="_blank" id="card-img" href="articles/internet-music.html">
            <img src="img/youssef-home.png" alt="header" class="image2" style="margin-top: 7%;">
          </div>


        <div class="article-card" id="dana-card">

          <a target="_blank" href="articles/gendered-experience.html">
            <div class="card-title">
              <h2> Gendered Experience </h2>
              <p>Dana Abu Ali & Deemah Omari</p>
            </div>
          </a>
          <a target="_blank" id="card-img" href="articles/gendered-experience.html">
            <img src="img/dana-deemah-home.gif" alt="header" class="image1">
          </a>
        </div>


        <div class="article-card" id="ethan-card">

          <a target="_blank" href="articles/online-fandoms.html">
            <div class="card-title">
              <h2> Music Fandom in the Age of Viral Reproduction </h2>
              <p>Ethan Fraenkel & Alia Elkattan</p>
            </div>
          </a>
          <a target="_blank" id="card-img" href="articles/online-fandoms.html">
            <img src="img/ethan-home.gif" alt="header" class="image2" style="margin-left: -4%;margin-top: 5%" >
          </a> 
        </div>


        <div class="article-card" id="jihyun2-card">
          <a target="_blank" href="articles/understanding-money.html" >
            <div class="card-title" style="">
              <h2> The Job of Understanding Money </h2>
              <p>Jihyun Kim</p>
            </div>
          </a>
          <a target="_blank" id="card-img" href="articles/understanding-money.html">
            <img src="img/jihyun-2-home.jpg"alt="header" class="image1" style="margin-left: 5%; margin-top: 1%;">
          </a>
        </div>


        <div class="article-card" id= "shabab-card">

          <a target="_blank" class="card-link" href="articles/infographic-industrial-complex.html">
            <div class="card-title">
              <h2> Infographic Industrial Complex </h2>
              <p>Rend Beiruti & Sara Beiruti</p>
            </div>
          </a>
          <a target="_blank" class="card-img" href="articles/infographic-industrial-complex.html">
            <img src="img/shabab-home.gif" class="image2" alt="header" style="margin-left: 8%; margin-top: 5%;">
          </a>
        </div>


          <div class="article-card" id="jaime-card">

            <a target="_blank" href="articles/tolerance-in-the-digital-age.html">
              <div class="card-title">
                <h2> On The Paradox of Tolerance </h2>
                <p>Jaime Andres Fernandez </p>
              </div>
            </a>
            <a target="_blank" id="card-img" href="articles/tolerance-in-the-digital-age.html">
              <img src="img/jaime-home.gif" alt="header" class="image1" style="margin-top: 0%;">
            </a>
          </div>


<!-- issue 2 -->

          <div class="article-card" id="lujain-card">
            <a target="_blank" href="articles/exile-in-the-digital-age.html">
              <div class="card-title">
                <h2> Reflections on Exile in the Digital Age </h2>
                <p>Lujain Ibrahim </p>
              </div>
            </a>
            <a target="_blank" id="card-img" href="articles/exile-in-the-digital-age.html">
              <img src="img/lujain-home.png" alt="header" class="image1" style="margin-top: 7%">
            </a>
          </div>

          <div class="article-card" id="jihyun-card">

          <a target="_blank" href="articles/delivery-nation.html">
            <div class="card-title">
              <h2> Delivery Nation: Challenging the Food Monopoly in South Korea </h2>
              <p>Jihyun Kim</p>
            </div>
          </a>
          <a target="_blank" id="card-img" href="articles/delivery-nation.html">
            <img src="img/jihyun-home.png" alt="header" class="image2" style="margin-top: 0%;">
          </div>


        <div class="article-card" id="rastra-card">

          <a target="_blank" href="articles/internet-vs-nature.html">
            <div class="card-title">
              <h2> Can the internet reconnect humans with the environment? </h2>
              <p>Rastra Bhandari</p>
            </div>
          </a>
          <a target="_blank" id="card-img" href="articles/internet-vs-nature.html">
            <img src="img/rastra-home.png" alt="header" class="image1">
          </a>
        </div>


       <div class="article-card" id= "tona-card">

          <a target="_blank" class="card-link" href="articles/surveillance-black-lives-matter.html">
            <div class="card-title">
              <h2> Domestic Surveillance and Black Lives Matter </h2>
              <p>Oluwatona Campbell</p>
            </div>
          </a>
          <a target="_blank" class="card-img" href="articles/surveillance-black-lives-matter.html">
            <img src="img/tona-home.png" class="image1" alt="header" style="margin-left: 8%; margin-top: 5%;">
          </a>
        </div>


        <div class="article-card" id="munib-card">

          <a target="_blank" href="articles/digital-privacy-epcd.html">
            <div class="card-title">
              <h2> Digital Privacy in European Post-Communist Democracies </h2>
              <p>Munib Mesinovic</p>
            </div>
          </a>
          <a target="_blank" id="card-img" href="articles/digital-privacy-epcd.html">
            <img src="img/munib-home.png" alt="header" class="image2" style="margin-left: -4%;margin-top: 2%s" >
          </a> 
        </div>


        <div class="article-card" id="tom-card">
          <a target="_blank" href="articles/digital-archives.html" >
            <div class="card-title" style="">
              <h2> On the Contingency of the Digital Archive </h2>
              <p>Tom Abi Samra</p>
            </div>
          </a>
          <a target="_blank" id="card-img" href="articles/digital-archives.html">
            <img src="img/tom-home.png" alt="header" class="image2" style="margin-left: 5%; margin-top: 5%;">
          </a>
        </div>


          <div class="article-card" id="grace-card">

            <a target="_blank" href="articles/flash-history.html">
              <div class="card-title">
                <h2> Preserving Our Internet Flash History </h2>
                <p>Grace Huang </p>
              </div>
            </a>
            <a target="_blank" id="card-img" href="articles/flash-history.html">
              <img src="img/grace-home.png" alt="header" class="image1" style="margin-left: 10%;">
            </a>
          </div>


          <div class="article-card" id="origin-card">

            <a target="_blank" href="articles/origin.html">
              <div class="card-title">
                <h2> Letter from the Editors: Why Multiplicity? </h2>
                <p> Alia ElKattan & Team </p>
              </div>
            </a>
            <a target="_blank" id="card-img" href="articles/origin.html">
              <img src="img/thumbnail.png" alt="header" class="image2" style="margin-left: 10%; margin-top: 5%">
            </a>
          </div>


<!-- <script>

var cards = $(".article-card");

for(var i = 0; i < cards.length; i++){
    var target = Math.floor(Math.random() * cards.length -1) + 1;
    var target2 = Math.floor(Math.random() * cards.length -1) +1;
    cards.eq(target).before(cards.eq(target2));
}

</script>
-->

</div>
</div>

</div>
<!-- todo: mailchimp -->


<!-- Footer -->

<footer id="sticky-footer" class="py-1 bg-light text-white">

  <div class="container text-center">
    <!-- <small> 2020</small> -->
    <!-- <medium><a href="https://twitter.com/multiplicity_x"> Twitter </a>, <a href="https://www.instagram.com/multiplicity_x/"> Instagram </a>, and <a href="https://github.com/multiplicitytech/multiplicitytech.github.io"> GitHub</a></medium> -->
        <a href="mailto:multiplicitytech@gmail.com" target="_blank"><img class="navy-filter" src="img/mail.png" style="height: 2.1rem;"></a>  &emsp;
      <a href="https://twitter.com/multiplicity_x" target="_blank"><img class="navy-filter" src="img/twitter.png" style="height: 1.7rem;"></a> &emsp;
      <a href="https://www.instagram.com/multiplicity_x/" target="_blank"><img class="navy-filter" src="img/instagram.png" style="height: 1.8rem;"></a> &emsp;
      <a href="https://github.com/multiplicitytech/multiplicitytech.github.io" target="_blank"><img class="navy-filter" src="img/github.png" style="height: 2.3rem;"> 


  </div>


</footer>


</body>

</html>