index.html

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

<head>
  <title>Ammielle Wambo Becker</title>
  <meta name="viewport" content="width=500, initial-scale=1">
  <meta name="description" content="Ammielle WB's personal site">
  <meta charset="utf-8">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <!-- CSS Stylesheet -->
  <link rel="stylesheet" href="styles.css">

  <!-- Moving Letters JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

  <!-- FontAwesome -->
  <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

  <!-- Begin Mailchimp Signup Form -->
  <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Playfair+Display:ital@1&display=swap" rel="stylesheet">

  <!-- Set Favicon -->
  <link rel="icon" type="image/png" href="my-favicon-circle.png"/>
</head>

<body>
  <nav class="navbar fixed-top navbar-expand-lg navbar-dark purple-bg">
    <a class="navbar-brand active subtitle" href="index.html">Ammielle Wambo Becker<span class="sr-only">(current)</span></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="about.html">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="projects.html">Projects</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Engagements
          </a>
          <div class="dropdown-menu bg-light" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="academic.html">Academic</a>
            <a class="dropdown-item" href="clubs.html">Clubs</a>
            <a class="dropdown-item" href="service.html">Service</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
  </nav>


  <div class="banner">
      <h1 class="ml16"><span>A</span><span>m</span><span>m</span><span>i</span><span>e</span><span>l</span><span>l</span><span>e</span><span> </span><span>W</span><span>B</span></h1>
  </div>
  <img class="personal-pic" src="personal-pic.jpeg" alt="a picture of Ammielle WB, in a black mock neck and white cardigan, smiling">

  <div class="text-section purple-text">
    <h2>My name is Ammielle Wambo Becker and I'm 15 years old.</h2>
    <h3>I'm on a journey towards creating positive social change.</h3>
<br>
    <h4>My pronouns are she/her.</h4>
  </div>

  <div class="who-am-i purple-bg text-section">
  <h2>Who am I?</h2>
  <h3 class="who-am-i">Above all, I'm a student. I'm always learning from my surroundings, my success and my failure.</h3>
  <p class="who-am-i">
    But I'm also a developer, a biotech enthusiast, an advocate and a writer.
  </p>
</div>

  <div class="my-quotes subtitle purple-text">
  <div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#Carousel" data-slide-to="0" class="active"></li>
      <li data-target="#Carousel" data-slide-to="1"></li>
      <li data-target="#Carousel" data-slide-to="2"></li>
    </ol>

  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="100">
      <h2>The desire to reach for the stars is ambitious. The desire to reach hearts is wise. <br /><br /> - Maya Angelou</h2>
    </div>
    <div class="carousel-item" data-interval="100">
      <h2>Success is only meaningful and enjoyable if it feels like your own. <br /><br /> - Michelle Obama</h2>
    </div>
    <div class="carousel-item" data-interval="100">
      <h2>Think of discomfort as currency - it's the price you pay to learn some pretty crucial things. <br /><br /> - Lilly Singh</h2>
    </div>
  </div>

  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>


<div class="newsletter gradient-color">
<div id="mc_embed_signup">
<h2 class="white-text">Subscribe to my monthly newsletter</h2>
<form action="https://mailchi.us2.list-manage.com/subscribe/post?u=c436778fbbff034a01a1bd7ac&amp;id=03ed8a9006" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
  <div id="mc_embed_signup_scroll">

<div class="mc-field-group form-group">
<label for="mce-EMAIL" class="regular-font">Email address</label>
<input type="email" value="" name="EMAIL" class="required email form-control regular-font" id="mce-EMAIL" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div id="mce-responses" class="clear">
  <div class="response" id="mce-error-response" style="display:none"></div>
  <div class="response" id="mce-success-response" style="display:none"></div>
</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
  <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c436778fbbff034a01a1bd7ac_03ed8a9006" tabindex="-1" value=""></div>
  <div class="clear">
    <button type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-dark btn-lg regular-font">Submit</button>
  </div>
  </div>
</form>
</div>


</div>
  <footer>
    <p class="purple-text">Get in touch</p>
    <div class="socials">
      <a href="mailto:ammiellewb@gmail.com"><i class="fas fa-envelope fa-2x purple-text"></i></a>
      <a href="https://www.linkedin.com/in/ammielle-wb-6538231b2/"><i class="fab fa-linkedin fa-2x purple-text"></i></a>
      <a href="https://www.instagram.com/amms.wb/"><i class="fab fa-instagram fa-2x purple-text"></i></a>
      <a href="https://twitter.com/ammswb"><i class="fab fa-twitter fa-2x purple-text"></i></a>
      <a href="https://www.youtube.com/channel/UCsp5LFDrt9Ut6pkZBvtOaYA"><i class="fab fa-youtube fa-2x purple-text"></i></a>
      <a href="https://github.com/ammiellewb"><i class="fab fa-github fa-2x purple-text"></i></a>
      <a href="https://medium.com/@amms.wb"><i class="fab fa-medium-m fa-2x purple-text"></i></a>
    </div>
    <br>
    <br>
    <div>
      <small class="purple-text">&copy; 2020 <a class="purple-text" href="index.html">Ammielle WB</a>. All rights reserved.</small>
    </div>
  </footer>

  <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
  <script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
  <!--End mc_embed_signup-->
  <script type="text/javascript">
    var textWrapper = document.querySelector('.ml16');
    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

    anime.timeline({
        loop: true
      })
      .add({
        targets: '.ml16 .letter',
        translateY: [-100, 0],
        easing: "easeOutExpo",
        duration: 1400,
        delay: (el, i) => 30 * i
      }).add({
        targets: '.ml16',
        opacity: 0,
        duration: 1000,
        easing: "easeOutExpo",
        delay: 1000
      });

    // MDB Lightbox Init
    $(function() {
      $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
    });
  </script>
</body>

</html>