JSFiddle - React, Tailwind, and code Playground

by mbellm

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>SuperMegaAwesome Landing Page | Matt Bell</title>
    <link rel="stylesheet" type="text/css" href="./Stylesheets/CSS/main.css">
    <link rel="stylesheet" type="text/css" href="./Stylesheets/CSS/normalize.css">
  </head>

  <body>
    <header>
      <p id="logo">Super<span>Mega</span>Awesome</p>

      <nav>
        <a href="#">Home</a>
        <a href="#">Portfolio</a>
        <a href="#">Services</a>
        <a href="#">Get in touch</a>
      </nav>
    </header>

    <section id="hero">
      <div id="hero_overlay">
        <div class="wrapper">
          <div id="content">
            <h1 class="title">We create beautiful products</h1>
            <h2 class="sub_title">Truffaut DIY keffiyeh, twee messenger bag venmo locavore organic master cleanse marfa gochujang selvage</h2>
            <div class="button_wrapper">
              <a href="#" class="button button_highlight">Learn More</a>
              <a href="#" class="button button_secondary">Play Video</a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div>hELLO</div>
    <div>HELLOOO</div>
    <footer>Hello</footer>
  </body>

</html>

CSS

body {
  font-family: "Brandon Grotesque", Helvetica, sans-serif;
}

.wrapper {
  width: 90vw;
  height: 100%;
  margin: 0 auto;
  background-color: rgba(100, 100, 0, 0.4);
}

header {
  position: fixed;
  height: 10vh;
  width: 100vw;
}

header #logo {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1.35rem;
  position: absolute;
  left: 10vw;
  top: 50%;
  transform: translateY(-50%);
}

header #logo span {
  font-weight: 300;
}

header nav {
  position: absolute;
  right: 10vw;
  top: 50%;
  transform: translateY(-50%);
}

header nav a {
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
  margin-left: 3vw;
}

#hero {
  background-image: url(../../images/banner_background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  height: 95vh;
}

#hero #hero_overlay {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
}

#hero .title,
#hero .sub_title {
  color: #FFFFFF;
  text-align: center;
}

#hero .title {
  font-size: 3.5rem;
}

/*# sourceMappingURL=main.css.map */

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  padding: 0;
  margin: 0;
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
  padding: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts...