Untitled

dabblet.css

body {
  font-family: "Lato", Helvetica, Arial, sans-serif;
}

.container {
  width: 400px;
  margin: 200px auto;
}

button {
  padding: 10px 19px;
  font-size: 17px;
  line-height: 1.471;
  border-radius: 6px;
  color: #ffffff;
  background-color: #3498db;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
}

input {
  border: 2px solid #000;
  color: #34495e;
  font-size: 17px;
  line-height: 1.567;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: none;
  vertical-align: middle;
}

input:focus {
  outline: 0;
}

h1 {
  border-bottom: 3px solid #000;
  display: inline-block;
  margin-bottom: 0;
  padding-bottom: 4px;
}

p {
  font-size: 26px;
}

label {
  font-size: 26px;
  vertical-align: middle;
  margin-bottom: 10px;
  display: block;
}

a {
  cursor: pointer;
  display: block;
  margin-bottom: 4px;
}

.yes {
  color: #1abc9c;
}

.no {
  color: #e74c3c;
}

dabblet.html

<div class="container">
  <img src="https://lh4.googleusercontent.com/-xcoUZc0Sz8E/UvPUjj_O58I/AAAAAAAAAMk/KnxxTM9wTNs/w426-h237/lunchboxe.png">
  <form>
    <input type="text" placeholder="your email :)">
    <button>Sign Up</button>
  </form>
</div>
<hr>
<div class="container">
  <h1>Today's Lunch</h1>
  <p>
    Black Forest Ham and Apple
  </p>
  <p>
    <a class="yes">That sounds yummy!</a>
    <a class="no">I have other plans.</a>
  </p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}