JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->



<!-- language: lang-html -->

<!DOCTYPE HTML>
<html>

  <head>
    <link href="styles.css" rel="stylesheet" />
    <link href="stylessheet.css" rel="stylesheet" />
    <meta carset="utf-8" />

  </head>
  <title>Noemie Forcier.</title>

  <body>
    <header>
      <nav>
        <a href="">ABOUT</a>
        <a href="">ARTICLES</a>
        <a href="">PHOTOS</a>
        <a href="">VIDEOS</a>
        <h1>NOEMIE <br /><span class="logo">FORCIER.</span></h1>
        <a href="">CONTACT</a>
        <img src="Images/twitter.png" id="t" />
        <img src="Images/insta.png" id="i" />
        <img src="Images/facebook.png" id="f" />
        <div class="topnav">
          <input type="text" placeholder="Recherche.." />
        </div>
      </nav>

      <div class="slide">
        <div class="top">
        </div>

        <div class="scroll">
          <div class="slide">
            <div class="bottom"></div>
          </div>
        </div>
      </div>

      <script>
        console.log('hi rich');
        //document.body.onscroll = "myFunction";
      </script>

    </header>

    <section>
      <div class="sectionleft"></div>
      <div class="sectionright"></div>
    </section>

    <footer></footer>
  </body>
</html>

<!-- end snippet -->

CSS

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

nav {
  display: flex;
  width: 100%;
  height: 20%;
  background-color: transparent;
  margin-top: 20px;
  align-content: center;
  justify-content: center;
}

.logo {
  padding-left: 10px;
}

a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
  margin: 0 50px;
  padding-top: 70px;
}

a:hover {
  color: gray;
}

header nav h1 {
  font-size: 25px;
  padding-right: 100px;
  padding-top: 25px;
}

.container {
  text-align: center;
  align-content: center;
}

.top {
  min-height: 46vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(Images/top.png);
  width: 100%;
  height: 100%;
}

.bottom {
  min-height: 70vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(Images/bottom.png);
  width: 100%;
  height: 100%;
}

.scroll {}

.slide {
  -moz-animation: showHide 0.5s;
  /* Firefox */
  -webkit-animation: showHide 0.5s;
  /* Safari and Chrome */
  -ms-animation: showHide 0.5s;
  /* IE10 */
  -o-animation: showHide 0.5s;
  /* Opera */
  animation-duration: 2s;
  overflow: hidden
}

@-webkit-keyframes showHide {

  /* Chrome, Safari */
  1% {
    width: 0%
  }

  20% {
    width: 20%;
  }

  40% {
    width: 40%;
  }

  60% {
    width: 60%;
  }

  80% {
    width: 80%;
  }

  100% {
    width: 100%;
  }

  overflow: hidden
}

@-ms-keyframes showHide {

  /* IE10 */
  1% {
    width: 0%
  }

  20% {
    width: 20%;
  }

  40% {
    width: 40%;
  }

  60% {
    width: 60%;
  }

  80% {
    width: 80%;
  }

  100% {
    width: 100%;
  }

  overflow: hidden
}

@-o-keyframes showHide {

  /* Opera */
  1% {
    width: 0%
  }

  20% {
    width: 20%;
  }

  40% {
    width: 40%;
  }

  60% {
    width: 60%;
  }

  80% {
    width: 80%;
  }

  100% {
    width: 100%;
  }

  overflow: hidden
}

@keyframes showHide {
  1% {
    width: 0%
  }

  20% {
    width: 20%;
  }

  40% {
    width: 40%;
  }

  60% {
    width: 60%;
  }

  80% {
    width: 80%;
...