JSFiddle - React, Tailwind, and code Playground

Posli layout

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="wrapper">
  <section class="sec-main">
    <div class="overlay">
      <div class="center">
        <h1 class="logo">Posli</h1>
        <h2>Posli, advanced team messaging with <br/> to-do functionality.</h2>
        <form id="js-form" action="#" method="post">
          <input id="js-mail" type="email" placeholder="Input Email for Beta" required />
          <button id="js-button" class="button" type="submit" value="Request" role="button">Request</button>
        </form>
      </div>
      <header id="js-nav" role="banner">
        <nav role="navigation">
          <ul class="nav">
            <li><a href="#sec-about">About</a></li>
            <li><a href="#sec-features">Features</a></li>
            <li><a href="#footer">Sign Up</a></li>
          </ul>
        </nav>
      </header>
    </div>
  </section>
  <section id="sec-about" class="sec-about">
    <div class="container">
      <div class="row">
        <div class="col-2">
          <h1>What is Posli</h1>
          <p>Posli is platform that combines the best of instant messaging and task-list management and improves your everyday workflow with simple but efficient user interface.</p>
          <button class="button" type="button" value="Get in line" role="button">Get in line</button>
        </div>
        <div class="col-2"></div>
      </div>
    </div>
  </section>
  <section class="sec-everywhere">
    <div class="container">
      <div class="row">
        <h1>Everywhere</h1>
      </div>
      <div class="row">
        <p>Android, iOS, Mac, PC, Web... work everywhere you want to. You’ll be always ready with our responsive web app and iOS and Android app.</p>
      </div>
     ...

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700);

/*==Typography=*/
body {
  font: 16px "Source sans pro", sans-serif;
}

.sec-main h1,
.sec-main p,
.sec-everywhere h1,
.sec-everywhere p,
.sec-features h1,
.sec-features p,
footer h1,
footer p {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sec-main h1,
  .sec-main p,
  .sec-everywhere h1,
  .sec-everywhere p,
  .sec-features h1,
  .sec-features p,
  footer h1,
  footer p {
    text-align: left;
  }
}

h1,
h2 {
  margin: 0;
}

h1 {
  font-size: 2em;
}

p {
  font-size: 1.125em;
  font-weight: 300;
  line-height: 1.625em;
}

.sec-main h2 {
  margin: .9em 0;
  font-size: 1.75em;
  font-weight: 200;
  line-height: 1.5em;
  text-align: center;
}

.features-post h1 {
  font-size: 1.5em;
}

.features-post p {
  font-size: 1em;
}

footer h1 {
  font-size: 2.125em;
}

/*==Layout==*/
html,
body,
.wrapper {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

section {
  width: 100%;
  min-height: 480px;
}

.container {
  margin: 0 auto;
  padding: 6.625em 0;
  max-width: 60em;
  /*960px*/
  height: 100%;
}
@media screen and (max-width: 768px) {
  .container {
    padding: 3em 0;
  }
}

.row {
  width: 100%;
}

.col-3,
.col-2 {
  float: left;
  padding: 0 1em;
}

.col-3 {
  width: 33.3333333%;
}

.col-2 {
  width: 50%;
}

@media screen and (max-width: 768px) {
  .col-3,
  .col-2 {
    float: none;
    margin: auto;
    padding: 0 1.75em;
    width: 90%;
  }
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.button {
  width: 148px;
  height: 46px;
  font: 700 1em 'Source sans pro', sans-serif;
  text-align: center;
  background: #2ebcea;
  color: #fff;
  border: 0;
  cursor: pointer;
  outline: 0;
  transition: background .25s;
}
.button:focus, .button:hover {
 ...

JavaScript

$(function() {
  $('header a').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: $($.attr(this, 'href')).offset().top
    }, 750);
  });
  var $navTop = $('#js-nav').offset().top;
  $(window).scroll(function() {
    if ($(this).scrollTop() > $navTop) {
      $('#js-nav').addClass('fixed');
    } else {
      $('#js-nav').removeClass('fixed');
    }
  });
  var form = document.getElementById('js-form');
  var mail = document.getElementById('js-mail');
  var button = document.getElementById('js-button');
  if (!Modernizr.input.required) {}
  button.addEventListener('click', function() {
    if (mail.value.length <= 0) {
      mail.style.outlineColor = "#ff0000";
      mail.style.color = "#ff0000";
    }
  });
  $('form').submit(function(e) {
    $('input').hide();
    $('button').addClass('button-full').html('Thank you!').attr({'value': 'Thank you!', 'disabled': true});
    $('.sec-about').find('button').hide();
    e.preventDefault();
  });
});