Использование JavaScript для наложения на страницу, но я не могу заставить его всплыть в текущем разделе или в текущей позиции

Question

Раздел «Мои пионеры» должен сначала исчезнуть, сдвинуть вправо при щелчке, чтобы освободить место для наложения, а затем вернуться в положение c после закрытия наложения. Информационный оверлей, представляющий собой небольшой профиль, по-прежнему отображается в верхней части страницы. Любая помощь будет очень полезна. Я попытался внести некоторые изменения в положение оверлея в моем CSS, но пока это не сработало.

Заранее спасибо за любые рекомендации.

(function(){
  'use strict';

const desktop = document.querySelector('#desktop');

const crenshaw = document.querySelector('#crenshaw');
const hooks = document.querySelector('#hooks');
const steinem = document.querySelector('#steinem');
const lorde = document.querySelector('#lorde');

const crenshawhov = document.querySelector('#crenshawhov');
const hookshov = document.querySelector('#hookshov');
const steinemhov = document.querySelector('#steinemhov');
const lordehov = document.querySelector('#lordehov');

const crenshawclose = document.querySelector('#crenshawclose');
const hooksclose = document.querySelector('#hooksclose');
const steinemclose = document.querySelector('#steinemclose');
const lordeclose = document.querySelector('#lordeclose');

const crenshawpic = document.querySelector('#crenshawpic');
const hookspic = document.querySelector('#hookspic');
const steinempic = document.querySelector('#steinempic');
const lordepic = document.querySelector('#lordepic');

const crenshawpic2 = document.querySelector('#crenshawpic2');
const hookspic2 = document.querySelector('#hookspic2');
const steinempic2 = document.querySelector('#steinempic2');
const lordepic2 = document.querySelector('#lordepic2');


//img hover for buttons

crenshaw.addEventListener('mouseover',function(){
  crenshawpic.src='https://today.uri.edu/wp-content/uploads/2016/09/Crenshaw4.jpg';
})

crenshaw.addEventListener('mouseout',function(){
  crenshawpic.src='https://today.uri.edu/wp-content/uploads/2016/09/Crenshaw4.jpg';
})

hooks.addEventListener('mouseover',function(){
  hookspic.src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQz4Q7JCIkTBRCtZrqsgvzvTveXhOUcRTOcrcy2mkeu800tfJ4h';
})

hooks.addEventListener('mouseout',function(){
  hookspic.src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQz4Q7JCIkTBRCtZrqsgvzvTveXhOUcRTOcrcy2mkeu800tfJ4h';
})

steinem.addEventListener('mouseover',function(){
  steinempic.src='https://1hx5ll3ickiy2waa471l3o2x-wpengine.netdna-ssl.com/wp-content/uploads/2013/04/www.thecatholicthing.org_images_i-had-an-abortion-gloria-steinem-illuminati-pyramid-ms-magazine-freemason-300x300.jpg';
})

steinem.addEventListener('mouseout',function(){
  steinempic.src='https://1hx5ll3ickiy2waa471l3o2x-wpengine.netdna-ssl.com/wp-content/uploads/2013/04/www.thecatholicthing.org_images_i-had-an-abortion-gloria-steinem-illuminati-pyramid-ms-magazine-freemason-300x300.jpg';
})

lorde.addEventListener('mouseover',function(){
  lordepic.src='images/audrelorde.jpeg';
})

lorde.addEventListener('mouseout',function(){
  lordepic.src='images/audrelorde.jpeg';
})

//overlay behavior

crenshaw.addEventListener('click',function(){
  crenshawhov.style.left='50%';
  desktop.style.marginLeft='125%';
})

hooks.addEventListener('click',function(){
  hookshov.style.left='50%';
  desktop.style.marginLeft='125%';
})

steinem.addEventListener('click',function(){
  steinemhov.style.left='50%';
  desktop.style.marginLeft='125%';
})

lorde.addEventListener('click',function(){
  lordehov.style.left='50%';
  desktop.style.marginLeft='125%';
})

//desktop close behavior

crenshawclose.addEventListener('click',function(){
  crenshawhov.style.left='-50%';
  desktop.style.marginLeft='25%';
})

hooksclose.addEventListener('click',function(){
  hookshov.style.left='-50%';
  desktop.style.marginLeft='25%';
})

steinemclose.addEventListener('click',function(){
  steinemhov.style.left='-50%';
  desktop.style.marginLeft='25%';
})

lordeclose.addEventListener('click',function(){
  lordehov.style.left='-50%';
  desktop.style.marginLeft='25%';
})



//img hover for overlays

crenshawpic2.addEventListener('mouseover',function(){
  crenshawpic2.src='https://today.uri.edu/wp-content/uploads/2016/09/Crenshaw4.jpg';
})

crenshawpic2.addEventListener('mouseout',function(){
  crenshawpic2.src='https://today.uri.edu/wp-content/uploads/2016/09/Crenshaw4.jpg';
})

hookspic2.addEventListener('mouseover',function(){
  hookspic2.src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQz4Q7JCIkTBRCtZrqsgvzvTveXhOUcRTOcrcy2mkeu800tfJ4h';
})

hookspic2.addEventListener('mouseout',function(){
  hookspic2.src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQz4Q7JCIkTBRCtZrqsgvzvTveXhOUcRTOcrcy2mkeu800tfJ4h';
})

steinempic2.addEventListener('mouseover',function(){
  steinempic2.src='https://1hx5ll3ickiy2waa471l3o2x-wpengine.netdna-ssl.com/wp-content/uploads/2013/04/www.thecatholicthing.org_images_i-had-an-abortion-gloria-steinem-illuminati-pyramid-ms-magazine-freemason-300x300.jpg';
})

steinempic2.addEventListener('mouseout',function(){
  steinempic2.src='https://1hx5ll3ickiy2waa471l3o2x-wpengine.netdna-ssl.com/wp-content/uploads/2013/04/www.thecatholicthing.org_images_i-had-an-abortion-gloria-steinem-illuminati-pyramid-ms-magazine-freemason-300x300.jpg';
})

lordepic2.addEventListener('mouseover',function(){
  lordepic2.src='images/audrelorde.jpeg';
})

lordepic2.addEventListener('mouseout',function(){
  lordepic2.src='images/audrelorde.jpeg';
})

//navigation bar
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
};

(function() {
  var elements;
  var windowHeight;

  function init() {
    elements = document.querySelectorAll('.hidden');
    windowHeight = window.innerHeight;
  }

  function checkPosition() {
    for (var i = 0; i < elements.length; i++) {
      var element = elements[i];
      var positionFromTop = elements[i].getBoundingClientRect().top;

      if (positionFromTop - windowHeight <= 0) {
        element.classList.add('fade-in-element');
        element.classList.remove('hidden');
      }
    }
  }

  window.addEventListener('scroll', checkPosition);
  window.addEventListener('resize', init);

  init();
  checkPosition();
})();


}());

* {
  box-sizing: border-box;
}

body {
  width:100%;
  background: #f6bcd5;
  margin-bottom: 200px;
}


#navbar {
  background-color: #5b6aa5;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: top 0.3s;
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1em;
}

#navbar a {
  float: left;
  display: block;
  color: #f6bcd5;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #f6bcd5;
  color: #5b6aa5;
}

#hero {
  margin-left: 48%;
}

h1 {
  text-align: left;
  width: 100%;
  font-size: 3em;
  font-weight: 900;
  margin-bottom: 0px;
  color:#5b6aa5;
}

#desktop {
  width: 100%;
  margin-left:0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: margin 1.5s;
  margin-bottom: 200px;
}

img {
  text-align:center;
  margin:0;
}


#crenshaw, #steinem, #hooks, #lorde {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 2.2%;
  justify-content: center;
  align-content: center;
}

#crenshaw {

  background-color: #f6bcd5;
}

#hooks {
  background-color:#f6bcd5;
}

#steinem {
  background-color: #f6bcd5;
}

#lorde {
  background-color:#f6bcd5;
}

#overlays {
  display: flex;
  width: 100%;
  margin: auto;
  
}

#crenshawhov, #hookshov, #steinemhov, #lordehov {
  display: flex;
  flex-direction: column;
  position: absolute;
  width:100%;
  top: 15.5%;
  left: -50%;
  padding-bottom: 3%;
  background: #5b6aa5;
  transform: translateX(-50%);
  transition: left 1.5s;
}

#crenshawhov p, #hookshov p, #steinemhov p, #lordehov p {
  width: 100%;
  padding: 5%;
  font-size: 1em;
  color: #f6bcd5;
}

#crenshawhov {
  background-color:#5b6aa5;
}

#hookshov {
  background-color:#5b6aa5;
}

#steinemhov {
  background-color:#5b6aa5;
}

#lordehov {
  background-color:#5b6aa5;
}

p {
  width: 100%;
  margin: 0;
  padding: 1% 10%;
  font-size: 1.3em;
  line-height: 1.3em;
  color: #5b6aa5;
}

#crenshawhov img, #hookshov img, #steinemhov img, #lordehov img {
  margin: auto;
  padding-top: 4%
}

#crenshawclose, #hooksclose, #steinemclose, #lordeclose {
  color:#5b6aa5;
  position: absolute;
  top: 3%;
  right: 3%;
  cursor: pointer;
}

#pioneers {
  margin-left: 10%;
  margin-bottom: 200px;
  font-family: 'Playfair Display', serif;
  font-size: 1em;
  color: #5b6aa5;
  text-decoration: none;
}




/* footer */

footer {
  width: 100%;
  position: fixed;
  height:100px;
  left: 0;
  bottom: 0;
  margin: 0px;
  background-color: hsl(334, 76%, 85%, 0);
}

footer nav ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  list-style-type: none;
}

footer nav ul li {
  margin: 1% 1%;
  width: 30%;
}

footer nav ul li a {
  padding: 2%;
  text-decoration: none;
  font-size: 0.5em;
  color: #f6bcd5;
}

a:hover {
  color: black;
}

#writing {
  margin-left:10%;
  margin-right: 150px;
  margin-bottom: 200px;
  margin-top: -400px;
}

#writing h1 {
  margin-bottom: 100px;
  margin-left: 15%
}

#writing a:link, a:visited, a:active {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 1em;
  /* padding-left: 100px; */
  color: #5b6aa5;
  text-decoration: none;
  list-style-type: none;
  max-width:800px;
  font-weight: 700;
}

@keyframes fade-in {
  from {opacity: 0; transform: scale(.7,.7)}
  to {opacity: 1;}
}
.fade-in-element {
animation: fade-in 3s;
}

.hidden {
  opacity: 0;
}

#writing2 {
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 200px;
}

#writing2 a:link, a:visited, a:active {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 1em;
  /* padding-left: 100px; */
  color: #5b6aa5;
  text-decoration: none;
  list-style-type: none;
  max-width:800px;
  font-weight: 700;
}

#subscribe {
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 200px;
}

#writing2 p {
  color: #5b6aa5;
}


/* form */
#newContact {
  display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%;
        text-align: center;
  /* padding:20px; */
  align-content:left;


}

input[type=submit] {
  display: inline-block;
  font-family: 'Playfair Display', serif;
  /* border: none; */
  border: 3px solid #5b6aa5;
  background-color: hsl(334, 76%, 85%);
  color:#5b6aa5;
  /* border-radius: 4px; */
  border-style: solid;
  padding: 10px 10px;
  align-content: center;
  font-weight:900;
}

::placeholder {
  font-family: 'Playfair Display', serif;
  font-weight: 300;
  color: hsl(334, 76%, 85%);
  text-align:left;
  vertical-align: center;
  font-size: 1em;
}

input[type=button], input[type=text], input[type=email] {
  display: inline-block;
  background-color: #5b6aa5;
  border: none;
  font-family: 'Playfair Display', serif;
  font-size: 1em;
  color: hsl(334, 76%, 85%);
  padding: 16px 16px;
  width:37%;
  text-decoration: none;
  margin: 4px 2px;
  margin-left: auto;
  margin-right: auto;
}

input {
  margin-bottom: 7px;
}

.alert{
  text-align:center;
  padding:10px;
  background: #5b6aa5;
  color:#f6bcd5;
  margin-bottom:10px;
  display:none;
}

#contact {
  margin-left:10%;
}

#contact img {
  padding:0;
  margin-left:12%;
}


@media only screen and (min-width: 769px) {
  h1 {
    text-align: left;
    width: 90vh;
    padding: 3% 6%;
    font-size: 4em;
  }

  #crenshaw, #hookspic, #steinempic, #lordepic{
    opacity: 1;
    transition: opacity .5s;
  }


  #desktop {
    max-width: 750px;
    display: flex;
    align-items: center;
    flex-direction: row;
    /* position: absolute; */
    width: 80%;
    margin-left: 0;
    transition: all 1.3s ease;

    width: 50%;
    min-height: 50%;
    padding: 0;
    margin-left: 300px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
  }

  #crenshaw, #steinem, #hooks, #lorde {
    display: flex;
    align-content: center;
    align-self:center;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0px, 0px, 0px;
    transform: scale(1);

    border-radius: 0%;
    cursor: pointer;

    transition: transform .5s;
  }

  #crenshaw {
    background-color: #5b6aa5;
    margin: 0;
    padding: 0, 0, 0;
  }

  #hooks {
    background-color: #5b6aa5;
    margin: 0;
    padding: 0, 0, 0;
  }

  #steinem {
    background-color: #5b6aa5;
    margin: 0;
    padding: 0, 0, 0;
  }

  #lorde {
    background-color: #5b6aa5;
    margin: 0;
    padding: 0, 0, 0;
  }

  #crenshaw img, #hooks img, #steinem img, #lorde img {
    margin: 0;
    padding: 0, 0, 0;
    opacity: 1;
  }

  #crenshaw img:hover, #hooks img:hover, #steinem img:hover, #lorde img:hover {
    margin: 0;
    padding: 0, 0, 0;
    opacity: 1;
  }

  #crenshaw:hover, #hooks:hover, #steinem:hover, #lorde:hover {
    transform: scale(1.15);
  }

  #crenshawhov, #hookshov, #steinemhov, #lordehov {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    position: absolute;
    width: 55%;
    top: 50%;
    left: -200%;
    transform: translate(-50%,-40%);
    padding: 3%;
    border-radius: 0%;
    transition: left 1.3s ease;
  }

  #crenshawhov p, #hookshov p, #steinemhov p, #lordehov p {
    width: 100%;
    padding: 5%;
    font-size: 1em;
  }

  #crenshawhov img, #hookshov img, #steinemhov img, #lordehov img {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0, 0, 0;
  }

  #crenshawhov {
    background-color: #5b6aa5;
  }

  #hookshov {
    background-color:#5b6aa5;
  }

  #steinemhov {
    background-color:#5b6aa5;
  }

  #lordehov {
    background-color: #5b6aa5;
  }

  footer {
    width: 100%;
    margin-top: 25px;
  }

  footer nav ul li {
    margin: 3% 0.5% 1%;
    width: 15%;
  }

  footer nav ul li a {
    padding: 0%;
    color: #5b6aa5;
  }
}


  h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 4em;
  }

  h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 2em;
    font-style: italic;
    color: #5b6aa5;
    padding-left: 100px;
  }

  ol {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.5em;
    padding-left: 100px;
    color: #5b6aa5;
    text-decoration: none;
  }

  ul {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.5em;
    padding-left: 100px;
    color: #5b6aa5;
    text-decoration: none;
    list-style: none;
  }

<!doctype html>
<html>
      <head>
          <title>
                DES 157 Interaction Design II | Final Project
          </title>
          <meta charset="UTF-8">
          <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
            <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
            <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <script src="https://kit.fontawesome.com/2a34b16d48.js" crossorigin="anonymous"></script>
            <meta name="HandheldFriendly" content="true">
            <link rel="stylesheet" href="styles.css">
      </head>
  <body>
      <header id="top">
        <div id="hero">
        <img src="images/hands.png" alt="vector drawing of clasping hands" width="375">
        
      </div>
      </header>

      <div id="navbar">
        <a href="index.html">Home</a>
        <a href="#pioneers">Pioneers</a>
        <a href="#writing2">Get Involved</a>
        <a href="#subscribe">Subscribe</a>
        <a href="#contact">Contact</a>
        <a href="mailto:avvalverde@ucdavis.edu"><i class="far fa-envelope"></i></a>
        <a href="http://www.instagram.com/amanda_01.pdf"><i class="fab fa-instagram"></i></a>
        <a href="https://www.linkedin.com/in/amandavvalverde/"><i class="fab fa-linkedin"></i></a>
      </div>

      <section id="writing">
        <div class="hidden">
        <h1>
          Intersectional Feminism:<BR>Inclusivity & Representation
        </h1>
        <h2>
          What is Intersectional Feminism?
        </h2>
        <ol>
          <li>It looks at the intersections between systems of oppression and domination</li>
          <li>Privilege and oppression are not blanket terms or can be solved with a general approach</li>
          <li>Looks at the unique experiences of individuals</li>
          <li>Studies the privileges around gender, race, ethnicity, class, disability, religion, sexuality, etc.</li>
        </ol>

        <h2>
          How can I be an intersectional feminist ally?
        </h2>

        <p>The barriers faced by a middle class woman living in Melbourne are not the same as those of a queer woman living in rural Fiji.  Women aren’t just exposed to sexism – racism, ableism, ageism, homophobia, transphobia, and religious persecution are intrinsically linked to how diverse women experience inequality.
        <p>As a feminist movement, we need to advocate for the equality of all women – not just those who experience the same barriers as we do.</p>
        <p>To begin to understand the additional degrees of difficulty some women live with, it’s important to look at your own privilege. This can feel like a personal attack, but it isn’t. It’s about noting that your personal history may mean that in some way, you’ve been spared the oppression another woman may have experienced.</p>
        <p>You may not know what it’s like to live as a person with a disability, or have never had to deal with racism. But a woman who has may not have experienced discrimination that you have, like homophobia. Checking your privilege isn’t about creating a sliding scale of who’s worse off – it’s about learning and understanding the views of other feminists, and remembering that we’re all in this together. True equality leaves no one behind.</p>
      </div>
    </section>

    <div id="pioneers">
    <div class="hidden">
      <h1>
        Pioneers of Intersectional Feminism<BR>
      </h1>
      <h2>
        Explore information and writings of these powerful women.
      </h2>
      <section id="desktop">
        <section id="crenshaw">
          <img id="crenshawpic" src="https://today.uri.edu/wp-content/uploads/2016/09/Crenshaw4.jpg" alt="Kimberlé Williams Crenshaw" height="200">
        </section>
        <section id="hooks">
          <img id="hookspic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQz4Q7JCIkTBRCtZrqsgvzvTveXhOUcRTOcrcy2mkeu800tfJ4h" alt="bell hooks" height="200">
        </section>
        <section id="steinem">
          <img id="steinempic" src="https://1hx5ll3ickiy2waa471l3o2x-wpengine.netdna-ssl.com/wp-content/uploads/2013/04/www.thecatholicthing.org_images_i-had-an-abortion-gloria-steinem-illuminati-pyramid-ms-magazine-freemason-300x300.jpg" alt="Gloria Steinem" height="200">
        </section>
        <section id="lorde">
          <img src="images/audrelorde.jpeg" alt="Audre Lorde" height="200">
        </section>
      </section>
      </div>
    </div>

      <section id="overlays">
        <section id="crenshawhov">
          <img id="crenshawpic2" src="https://today.uri.edu/wp-content/uploads/2016/09/Crenshaw4.jpg" alt="Kimberlé Williams Crenshaw" height="200">
                    <p>Kimberlé Williams Crenshaw<br><br>
                    American lawyer, civil rights advocate, philosopher, and a leading scholar of critical race theory
                    <br><br>Developed the theory of intersectionality</p>
          <div id="crenshawclose"> <p>close</p> </div>
        </section>
        <section id="hookshov">
          <img id="hookspic2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQz4Q7JCIkTBRCtZrqsgvzvTveXhOUcRTOcrcy2mkeu800tfJ4h" alt="bell hooks" width="200">
          <p>bell hooks<br><br>American author, professor, feminist, and social activist<br><br>hooks' writing has been the intersectionality of race, capitalism, and gender, and what she describes as their ability to produce and perpetuate systems of oppression and class domination</p>
          <div id="hooksclose"> <p>close</p> </div>
        </section>
        <section id="steinemhov">
          <img id="steinempic2" src="https://1hx5ll3ickiy2waa471l3o2x-wpengine.netdna-ssl.com/wp-content/uploads/2013/04/www.thecatholicthing.org_images_i-had-an-abortion-gloria-steinem-illuminati-pyramid-ms-magazine-freemason-300x300.jpg" alt="Gloria Steinem" height="200">
          <p>Gloria Steinem<br><br>American feminist, journalist, and social political activist<br><br>Steinem was a columnist for New York magazine, and a co-founder of Ms. magazine. In 1969, Steinem published an article, "After Black Power, Women's Liberation", which brought her to national fame as a feminist leader.</p>
          <div id="steinemclose"> <p>close</p> </div>
        </section>
        <section id="lordehov">
          <img id="lordepic2" src="images/audrelorde.jpeg" alt="Audre Lorde" height="200">
          <p>Audre Lorde<br><br>American writer, feminist, womanist, librarian, and civil rights activist. She was a self-described “black, lesbian, mother, warrior, poet,” who dedicated both her life and her creative talent to confronting and addressing injustices of racism, sexism, classism, and homophobia. As a poet, she is best known for technical mastery and emotional expression, as well as her poems that express anger and outrage at civil and social injustices she observed throughout her life.</p>
          <div id="lordeclose"> <p>close</p> </div>
        </section>
      </section>

      <div id="writing2">
        <div class="hidden">
      <h1>
        Get Involved:<BR>
        Local Volunteer Opportunities
      </h1>
  
        <h2>
          Volunteering your time, knowledge, and skills to a local cause is an excellent way to affect change in your community.
        </h2>
        <p>Paragraph Text</p>
      
      </div>
    </div>

    <div id="subscribe">
      <div class="hidden">
    <h1>
      Subscribe &<br>
      Stay Current
    </h1>

      <h2>
        We invite you to join our mailing list for updates about local events, volunteer opportunities, further resources, and new articles or essays that will be published here. Your contact information will never be shared with third parties.
      </h2>

    <div class="alert">Your information has been sent!</div>  
    <form class="sucess-none" id="newContact">
      <div class="inputs">
          <input type="text" value="" name="FNAME" class="required name" id="name" required placeholder="Name">
          <input type="email" value="" name="EMAIL" class="required email" id="email" required placeholder="E-mail">
          <input type="text" value="" name="MESSAGE" class="required email" id="message" placeholder="Comments & Questions">
        </div>
      <div style="position: absolute; left: -5000px;" aria-hidden="true">
          <input type="text" name="b_96d9e6e519173af7bdbdab9d_23138bd741" tabindex="-1" value="">
      </div>
      <input type="submit" class="btn" value="Submit" name="subscribe" id="submitContact">
    </form>
    </div>
    </div>

    <div id="contact">
      <div class="hidden">
    <h1>
      Contact
    </h1>
      <img src="images/profile.jpg" alt="Amanda" height="250">
      <h2>
        Amanda<br>
        Web Developer & Feminist Killjoy<br>
        email@gmail.com<br>
      </h2>
      <p>Feel free to contact me for design inquiries and sharing additional resources.</p>
    </div>
    </div>
    




      <footer>
        <nav>
          <ul>
            <li><a href="#top">top</a></li>
            <li><a href="https://validator.w3.org/check?uri=referer">valid html 5</a></li>
            <li><a href="https://jigsaw.w3.org/css-validator/check/referer">valid css</a></li>
          </ul>
        </nav>
      </footer>
      <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"></script>
      <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-database.js"></script>
      <script src="script.js"></script>
    </body>
  </html>