Testing out Easel.io Ouput

by adamschwartz

HTML

<!DOCTYPE HTML>
<html lang="en">
  
  <head>
    <meta charset="utf-8" />
    <title>Demo</title>
  </head>
  
  <body>
    <div id="page-wrapper">
      <div class="rectangle">
        <div class="text">easel.io</div>
        <div class="text-1">About</div>
        <div class="text-2">Home</div>
        <div class="text-3">Contact Us</div>
      </div>
      <div class="rectangle-1">
        <div class="path"></div>
        <p class="textarea">Take me for a test drive.</p>
      </div>
      <div class="oval">
        <div class="text-4">1</div>
      </div>
      <p class="textarea-1">1. Click the icon in the sidebar to bring up the library.
        <br/>2. Drag elements into the space below.</p>
      <div class="rectangle-2"></div>
      <div class="text-5">Make Things Quickly</div>
      <div class="path-3"></div>
      <div class="path-4"></div>
      <p class="textarea-2">Easel's goal is to let you get ideas out quickly. Easel comes with pre-packaged
        reusable elements. Give it a shot, make a form in the box to the right.</p>
      <div class="rectangle-3">
        <div class="rectangle-4">
          <div class="rectangle-5">
            <div class="text-6">Button 2</div>
          </div>
          <div class="rectangle-6">
            <div class="text-7">Change my color</div>
          </div>
          <p class="textarea-3">1. Double click the button body
            <br/>2. Click the big blue circle to edit the color
            <br/>3. Watch button 2's color change!</p>
          <div class="rectangle-7">
            <div class="text-8">Make me an element!</div>
          </div>
          <p class="textarea-4">1. Select both the button body and text
            <br/>2. Press</p>
        </div>
        <div class="oval-1">
          <div class="text-9">2</div>
        </div>
        <div class="text-10">Cut Repetition</div>
        <p class="textarea-7">Web design is made up of many similar objects. Today’s tools force the designer
          to...

CSS

html, body {
  margin: 0px;
  padding: 0px;
  background-color: #fff
}
#page-wrapper {
  position: relative;
  width: 960px;
  /* centers the document */
  margin: 0 auto;
  /*
  hides anything drawn off canvas.
  remove overflow and height to see things drawn off canvas.
  */
  overflow: hidden;
  height: 1450px;
}
.rectangle {
  background: #262a30;
  border: none;
  width: 960px;
  height: 60px;
  border-radius: 0px;
  -moz-box-shadow: inset 0px -2px 2px 0px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: inset 0px -2px 2px 0px rgba(0, 0, 0, 0.35);
  -o-box-shadow: inset 0px -2px 2px 0px rgba(0, 0, 0, 0.35);
  box-shadow: inset 0px -2px 2px 0px rgba(0, 0, 0, 0.35);
  position: absolute;
  top: 0px;
  left: 0px
}
.text {
  color: #ffffff;
  font-family:"lobster";
  font-size: 18pt;
  font-weight: normal;
  font-style: normal;
  text-align: left;
  text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 19px;
  left: 10px
}
.text-1 {
  color: #ffffff;
  font-family:"helvetica";
  font-size: 11pt;
  font-weight: 300;
  font-style: normal;
  text-align: left;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.94);
  position: absolute;
  top: 22px;
  left: 810px
}
.text-2 {
  color: #ffffff;
  font-family:"helvetica";
  font-size: 11pt;
  font-weight: 300;
  font-style: normal;
  text-align: left;
  text-shadow: 0px 1px 3px rgba(255, 255, 255, 0.46);
  position: absolute;
  top: 22px;
  left: 741px
}
.text-3 {
  color: #ffffff;
  font-family:"helvetica";
  font-size: 11pt;
  font-weight: 300;
  font-style: normal;
  text-align: left;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.94);
  position: absolute;
  top: 23px;
  left: 876px
}
.rectangle-1 {
  background: #3b424b;
  background-image: -moz-linear-gradient(270deg, #3b424b 0%, #343a42 100%);
  background-image: -webkit-linear-gradient(270deg, #3b424b 0%, #343a42 100%);
  background-image: -o-linear-gradient(270deg, #3b424b 0%, #343a42 100%);
  background-image: linear-gradient(270deg, #3b424b 0%,...