A web page created at CodePen.io.
html, body {
margin: 0px;
padding: 0px;
background-color: #ffffff
}
#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%, #343a42 100%);
border: 1px solid #4d5662;
width: 962px;
height: 121px;
border-radius: 0px;
position: absolute;
top: 60px;
left: -2px
}
.path {
background: #3b424b;
border: none;
width: 12px;
height: 6px;
-moz-box-shadow: inset 0px 1px 0px 0px #4d5662;
-webkit-box-shadow: inset 0px 1px 0px 0px #4d5662;
-o-box-shadow: inset 0px 1px 0px 0px #4d5662;
box-shadow: inset 0px 1px 0px 0px #4d5662;
position: absolute;
top: -5px;
left: 757px
}
.textarea {
color: #ffffff;
font-family:"raleway";
font-size: 30pt;
font-weight: Normal;
font-style: normal;
text-align: center;
line-height: 1.2;
width: 620px;
position: absolute;
top: 42px;
left: 172px;
margin: 0
}
.rectangle-2 {
background: #f1f3f5;
border: 1px solid #dfe1e3;
width: 380px;
height: 193px;
border-radius: 5px;
position: absolute;
top: 233px;
left: 530px
}
.textarea-1 {
color: #474747;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 300px;
margin: 21px 0 0 44px;
position: relative
}
.path-1 {
background: #222222;
border: none;
width: 7px;
height: 14px;
position: absolute;
top: 0px;
left: 91px
}
.path-2 {
background: #222222;
border: none;
width: 7px;
height: 14px;
position: absolute;
top: 0px;
left: 83px
}
.oval {
background: #fafcff;
background-image: -moz-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: -webkit-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: -o-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
border: none;
width: 50px;
height: 50px;
-moz-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
-webkit-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
-o-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
position: absolute;
top: 208px;
left: 505px;
border-radius: 25px / 25px
}
.text-4 {
color: #333333;
font-family:"lobster";
font-size: 20pt;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7);
line-height: 50px;
}
.text-5 {
color: #333333;
font-family:"helvetica";
font-size: 23pt;
font-weight: 300;
font-style: normal;
text-align: left;
position: absolute;
top: 273px;
left: 50px
}
.path-3 {
border: 1px solid rgba(199, 199, 199, 0.85);
width: 249px;
height: 81.7111968353313px;
position: absolute;
top: 311px;
left: 263px
}
.path-4 {
border: 1px solid rgba(198, 198, 198, 0.95);
width: 14.5px;
height: 17.51022705948583px;
position: absolute;
top: 302px;
left: 511px
}
.textarea-2 {
color: #4f4f4f;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 419px;
position: absolute;
top: 323px;
left: 51px;
margin: 0
}
.rectangle-3 {
background: #f1f3f5;
border: 1px solid #dfe1e3;
width: 970px;
height: 411px;
border-radius: 0px;
-moz-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
-o-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
position: absolute;
top: 471px;
left: -3px
}
.rectangle-4 {
background: #fafcff;
border: 1px solid #dfe1e3;
width: 380px;
height: 311px;
border-radius: 5px;
position: absolute;
top: 49px;
left: 53px
}
.rectangle-5 {
background: #4453ad;
border: 1px solid #151e33;
width: 100px;
height: 40px;
border-radius: 5px;
-moz-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
-webkit-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
-o-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
position: absolute;
top: 21px;
left: 240px
}
.text-6 {
color: #ffffff;
font-family:"helvetica";
font-size: 12pt;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.7);
line-height: 40px;
}
.rectangle-6 {
background: #4453ad;
border: 1px solid #151e33;
width: 180px;
height: 40px;
border-radius: 5px;
-moz-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
-webkit-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
-o-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
position: absolute;
top: 21px;
left: 40px
}
.text-7 {
color: #ffffff;
font-family:"helvetica";
font-size: 12pt;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.7);
line-height: 40px;
}
.textarea-3 {
color: #474747;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 300px;
position: absolute;
top: 81px;
left: 40px;
margin: 0
}
.rectangle-7 {
background: #eb4a21;
background-image: -moz-linear-gradient(270deg, #eb4a21 0%, #b02300 100%);
background-image: -webkit-linear-gradient(270deg, #eb4a21 0%, #b02300 100%);
background-image: -o-linear-gradient(270deg, #eb4a21 0%, #b02300 100%);
background-image: linear-gradient(270deg, #eb4a21 0%, #b02300 100%);
border: 1px solid #eb4921;
width: 300px;
height: 40px;
border-radius: 4px;
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6), 0px 2px 4px 0px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6), 0px 2px 4px 0px rgba(0, 0, 0, 0.8);
-o-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6), 0px 2px 4px 0px rgba(0, 0, 0, 0.8);
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6), 0px 2px 4px 0px rgba(0, 0, 0, 0.8);
position: absolute;
top: 190px;
left: 40px
}
.text-8 {
color: #ffffff;
font-family:"helvetica";
font-size: 12pt;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0px -1px 0px rgba(94, 38, 22, 0.7);
line-height: 40px;
}
.textarea-4 {
color: #474747;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 300px;
position: absolute;
top: 244px;
left: 40px;
margin: 0
}
.rectangle-8 {
background: #2c2c2c;
background-image: -moz-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -webkit-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -o-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
border: none;
width: 28px;
height: 19px;
border-radius: 3px;
-moz-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-webkit-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-o-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
position: absolute;
top: 22px;
left: 92px
}
.textarea-5 {
color: #ebebeb;
font-family:"helvetica";
font-size: 9pt;
font-weight: normal;
font-style: normal;
text-align: center;
line-height: 19px;
;
text-shadow: 0px 1px 1px #1c1c1c;
margin: 0
}
.rectangle-9 {
background: #2c2c2c;
background-image: -moz-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -webkit-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -o-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
border: none;
width: 28px;
height: 19px;
border-radius: 3px;
-moz-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-webkit-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-o-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
position: absolute;
top: 22px;
left: 62px
}
.textarea-6 {
color: #ebebeb;
font-family:"helvetica";
font-size: 9pt;
font-weight: normal;
font-style: normal;
text-align: center;
line-height: 19px;
;
text-shadow: 0px 1px 1px #1c1c1c;
margin: 0
}
.oval-1 {
background: #fafcff;
background-image: -moz-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: -webkit-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: -o-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
border: none;
width: 50px;
height: 50px;
-moz-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
-webkit-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
-o-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
position: absolute;
top: 24px;
left: 407px;
border-radius: 25px / 25px
}
.text-9 {
color: #333333;
font-family:"lobster";
font-size: 20pt;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7);
line-height: 50px;
}
.text-10 {
color: #333333;
font-family:"helvetica";
font-size: 23pt;
font-weight: 300;
font-style: normal;
text-align: left;
position: absolute;
top: 79px;
left: 493px
}
.textarea-7 {
color: #4f4f4f;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 419px;
position: absolute;
top: 132px;
left: 494px;
margin: 0
}
.oval-2 {
background: #fafcff;
background-image: -moz-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: -webkit-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: -o-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
border: none;
width: 50px;
height: 50px;
-moz-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
-webkit-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
-o-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
position: absolute;
top: 908px;
left: 506px;
border-radius: 25px / 25px
}
.text-11 {
color: #333333;
font-family:"lobster";
font-size: 20pt;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7);
line-height: 50px;
}
.text-12 {
color: #333333;
font-family:"helvetica";
font-size: 23pt;
font-weight: 300;
font-style: normal;
text-align: left;
position: absolute;
top: 929px;
left: 51px
}
.rectangle-10 {
background: #f1f3f5;
border: 1px solid #dfe1e3;
width: 380px;
height: 160px;
border-radius: 5px;
position: absolute;
top: 933px;
left: 530px
}
.rectangle-11 {
background: #4453ad;
border: 1px solid #151e33;
width: 302px;
height: 42px;
border-radius: 5px;
-moz-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
-webkit-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
-o-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
position: absolute;
top: 20px;
left: 40px
}
.text-13 {
color: #ffffff;
font-family:"lobster";
font-size: 16pt;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.7);
line-height: 42px;
}
.textarea-8 {
color: #474747;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 300px;
position: absolute;
top: 88px;
left: 41px;
margin: 0
}
.rectangle-12 {
background: #2c2c2c;
background-image: -moz-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -webkit-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -o-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
border: none;
width: 50px;
height: 19px;
border-radius: 3px;
-moz-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-webkit-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-o-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
position: absolute;
top: 22px;
left: 94px
}
.textarea-9 {
color: #ebebeb;
font-family:"helvetica";
font-size: 9pt;
font-weight: normal;
font-style: normal;
text-align: center;
line-height: 19px;
;
text-shadow: 0px 1px 1px #1c1c1c;
margin: 0
}
.rectangle-13 {
background: #2c2c2c;
background-image: -moz-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -webkit-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -o-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
border: none;
width: 28px;
height: 19px;
border-radius: 3px;
-moz-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-webkit-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-o-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
position: absolute;
top: 22px;
left: 146px
}
.textarea-10 {
color: #ebebeb;
font-family:"helvetica";
font-size: 9pt;
font-weight: normal;
font-style: normal;
text-align: center;
line-height: 19px;
;
text-shadow: 0px 1px 1px #1c1c1c;
margin: 0
}
.rectangle-14 {
background: #2c2c2c;
background-image: -moz-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -webkit-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -o-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
border: none;
width: 28px;
height: 19px;
border-radius: 3px;
-moz-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-webkit-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-o-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
position: absolute;
top: 22px;
left: 64px
}
.textarea-11 {
color: #ebebeb;
font-family:"helvetica";
font-size: 9pt;
font-weight: normal;
font-style: normal;
text-align: center;
line-height: 19px;
;
text-shadow: 0px 1px 1px #1c1c1c;
margin: 0
}
.textarea-12 {
color: #4f4f4f;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 419px;
position: absolute;
top: 973px;
left: 51px;
margin: 0
}
.rectangle-15 {
background: #f1f3f5;
border: 1px solid #dfe1e3;
width: 970px;
height: 199px;
border-radius: 0px;
-moz-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
-o-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
position: absolute;
top: 1147px;
left: -9px
}
.textarea-13 {
color: #262626;
font-family:"helvetica neue";
font-size: 13pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 620px;
margin: 36px 0 0 176px
}
.rectangle-16 {
background: #262a30;
border: 1px solid #282829;
width: 970px;
height: 150px;
border-radius: 0px;
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
-o-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
position: absolute;
top: 1344px;
left: -9px
}
.text-14 {
color: #ffffff;
font-family:"lobster";
font-size: 14pt;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0px 1px 1px #000000;
line-height: 150px;
}
.textarea-14 {
color: #4f4f4f;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 460px;
position: absolute;
top: 1633px;
left: 10px;
margin: 0
}
.textarea-15 {
color: #4f4f4f;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 460px;
position: absolute;
top: 1940px;
left: 50px;
margin: 0
}
<!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="rectangle-2">
<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>
<div class="oval">
<div class="text-4">1</div>
</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 copy/paste groups of layers around.
<br/>
<br/>Easel allows you to create reusable 'elements' by simply grouping with a special
command. Then you can change them in one place, and they change everywhere.</p>
</div>
<div class="oval-2">
<div class="text-11">3</div>
</div>
<div class="text-12">It fits the Web</div>
<div class="rectangle-10">
<div class="rectangle-11">
<div class="text-13">export me!!</div>
</div>
<p class="textarea-8">1. Click the button
<br/>2. Press</p>
</div>
<p class="textarea-12">Easel makes implementation easier by exporting single elements to HTML/CSS.
<br/>
<br/>With integrated web fonts and by using the browser’s type engine, text is rendered
exactly as it will on your website. </p>
<div class="rectangle-15">
<p class="textarea-13">The current web design process is broken. People use image editing tools for creation,
share screenshots/flat exports over email, and spend more time than necessary manually
translating the design into a working product. We believe the future of application
design is in the browser with tools that understand the medium and the process.</p>
</div>
<div class="rectangle-16">
<div class="text-14">@easelapp</div>
</div>
<p class="textarea-14">Easel makes implementation easier by exporting single elements to HTML/CSS.
<br/>
<br/>With integrated web fonts and by using the browser’s type engine, text is rendered
exactly as it will on your website. </p>
<p class="textarea-15">Easel's goal is allowing you to get your ideas out as quickly as possible. Maybe
you want to create a beautiful button?</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen · A Pen by adhd360</title>
<!--
Copyright (c) 2012 adhd360, http://codepen.io/adhd360
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<style>
html, body {
margin: 0px;
padding: 0px;
background-color: #ffffff
}
#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%, #343a42 100%);
border: 1px solid #4d5662;
width: 962px;
height: 121px;
border-radius: 0px;
position: absolute;
top: 60px;
left: -2px
}
.path {
background: #3b424b;
border: none;
width: 12px;
height: 6px;
-moz-box-shadow: inset 0px 1px 0px 0px #4d5662;
-webkit-box-shadow: inset 0px 1px 0px 0px #4d5662;
-o-box-shadow: inset 0px 1px 0px 0px #4d5662;
box-shadow: inset 0px 1px 0px 0px #4d5662;
position: absolute;
top: -5px;
left: 757px
}
.textarea {
color: #ffffff;
font-family:"raleway";
font-size: 30pt;
font-weight: Normal;
font-style: normal;
text-align: center;
line-height: 1.2;
width: 620px;
position: absolute;
top: 42px;
left: 172px;
margin: 0
}
.rectangle-2 {
background: #f1f3f5;
border: 1px solid #dfe1e3;
width: 380px;
height: 193px;
border-radius: 5px;
position: absolute;
top: 233px;
left: 530px
}
.textarea-1 {
color: #474747;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 300px;
margin: 21px 0 0 44px;
position: relative
}
.path-1 {
background: #222222;
border: none;
width: 7px;
height: 14px;
position: absolute;
top: 0px;
left: 91px
}
.path-2 {
background: #222222;
border: none;
width: 7px;
height: 14px;
position: absolute;
top: 0px;
left: 83px
}
.oval {
background: #fafcff;
background-image: -moz-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: -webkit-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: -o-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
border: none;
width: 50px;
height: 50px;
-moz-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
-webkit-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
-o-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
position: absolute;
top: 208px;
left: 505px;
border-radius: 25px / 25px
}
.text-4 {
color: #333333;
font-family:"lobster";
font-size: 20pt;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7);
line-height: 50px;
}
.text-5 {
color: #333333;
font-family:"helvetica";
font-size: 23pt;
font-weight: 300;
font-style: normal;
text-align: left;
position: absolute;
top: 273px;
left: 50px
}
.path-3 {
border: 1px solid rgba(199, 199, 199, 0.85);
width: 249px;
height: 81.7111968353313px;
position: absolute;
top: 311px;
left: 263px
}
.path-4 {
border: 1px solid rgba(198, 198, 198, 0.95);
width: 14.5px;
height: 17.51022705948583px;
position: absolute;
top: 302px;
left: 511px
}
.textarea-2 {
color: #4f4f4f;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 419px;
position: absolute;
top: 323px;
left: 51px;
margin: 0
}
.rectangle-3 {
background: #f1f3f5;
border: 1px solid #dfe1e3;
width: 970px;
height: 411px;
border-radius: 0px;
-moz-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
-o-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
position: absolute;
top: 471px;
left: -3px
}
.rectangle-4 {
background: #fafcff;
border: 1px solid #dfe1e3;
width: 380px;
height: 311px;
border-radius: 5px;
position: absolute;
top: 49px;
left: 53px
}
.rectangle-5 {
background: #4453ad;
border: 1px solid #151e33;
width: 100px;
height: 40px;
border-radius: 5px;
-moz-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
-webkit-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
-o-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
position: absolute;
top: 21px;
left: 240px
}
.text-6 {
color: #ffffff;
font-family:"helvetica";
font-size: 12pt;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.7);
line-height: 40px;
}
.rectangle-6 {
background: #4453ad;
border: 1px solid #151e33;
width: 180px;
height: 40px;
border-radius: 5px;
-moz-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
-webkit-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
-o-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
position: absolute;
top: 21px;
left: 40px
}
.text-7 {
color: #ffffff;
font-family:"helvetica";
font-size: 12pt;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.7);
line-height: 40px;
}
.textarea-3 {
color: #474747;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 300px;
position: absolute;
top: 81px;
left: 40px;
margin: 0
}
.rectangle-7 {
background: #eb4a21;
background-image: -moz-linear-gradient(270deg, #eb4a21 0%, #b02300 100%);
background-image: -webkit-linear-gradient(270deg, #eb4a21 0%, #b02300 100%);
background-image: -o-linear-gradient(270deg, #eb4a21 0%, #b02300 100%);
background-image: linear-gradient(270deg, #eb4a21 0%, #b02300 100%);
border: 1px solid #eb4921;
width: 300px;
height: 40px;
border-radius: 4px;
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6), 0px 2px 4px 0px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6), 0px 2px 4px 0px rgba(0, 0, 0, 0.8);
-o-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6), 0px 2px 4px 0px rgba(0, 0, 0, 0.8);
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6), 0px 2px 4px 0px rgba(0, 0, 0, 0.8);
position: absolute;
top: 190px;
left: 40px
}
.text-8 {
color: #ffffff;
font-family:"helvetica";
font-size: 12pt;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0px -1px 0px rgba(94, 38, 22, 0.7);
line-height: 40px;
}
.textarea-4 {
color: #474747;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 300px;
position: absolute;
top: 244px;
left: 40px;
margin: 0
}
.rectangle-8 {
background: #2c2c2c;
background-image: -moz-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -webkit-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -o-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
border: none;
width: 28px;
height: 19px;
border-radius: 3px;
-moz-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-webkit-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-o-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
position: absolute;
top: 22px;
left: 92px
}
.textarea-5 {
color: #ebebeb;
font-family:"helvetica";
font-size: 9pt;
font-weight: normal;
font-style: normal;
text-align: center;
line-height: 19px;
;
text-shadow: 0px 1px 1px #1c1c1c;
margin: 0
}
.rectangle-9 {
background: #2c2c2c;
background-image: -moz-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -webkit-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -o-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
border: none;
width: 28px;
height: 19px;
border-radius: 3px;
-moz-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-webkit-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-o-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
position: absolute;
top: 22px;
left: 62px
}
.textarea-6 {
color: #ebebeb;
font-family:"helvetica";
font-size: 9pt;
font-weight: normal;
font-style: normal;
text-align: center;
line-height: 19px;
;
text-shadow: 0px 1px 1px #1c1c1c;
margin: 0
}
.oval-1 {
background: #fafcff;
background-image: -moz-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: -webkit-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: -o-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
border: none;
width: 50px;
height: 50px;
-moz-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
-webkit-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
-o-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
position: absolute;
top: 24px;
left: 407px;
border-radius: 25px / 25px
}
.text-9 {
color: #333333;
font-family:"lobster";
font-size: 20pt;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7);
line-height: 50px;
}
.text-10 {
color: #333333;
font-family:"helvetica";
font-size: 23pt;
font-weight: 300;
font-style: normal;
text-align: left;
position: absolute;
top: 79px;
left: 493px
}
.textarea-7 {
color: #4f4f4f;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 419px;
position: absolute;
top: 132px;
left: 494px;
margin: 0
}
.oval-2 {
background: #fafcff;
background-image: -moz-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: -webkit-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: -o-linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
background-image: linear-gradient(270deg, #fafcff 0%, #d7d9db 100%);
border: none;
width: 50px;
height: 50px;
-moz-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
-webkit-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
-o-box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
box-shadow: 0px 1px 2px 0px #8a8a8a, inset 0px 0px 3px 0px #fafcff;
position: absolute;
top: 908px;
left: 506px;
border-radius: 25px / 25px
}
.text-11 {
color: #333333;
font-family:"lobster";
font-size: 20pt;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7);
line-height: 50px;
}
.text-12 {
color: #333333;
font-family:"helvetica";
font-size: 23pt;
font-weight: 300;
font-style: normal;
text-align: left;
position: absolute;
top: 929px;
left: 51px
}
.rectangle-10 {
background: #f1f3f5;
border: 1px solid #dfe1e3;
width: 380px;
height: 160px;
border-radius: 5px;
position: absolute;
top: 933px;
left: 530px
}
.rectangle-11 {
background: #4453ad;
border: 1px solid #151e33;
width: 302px;
height: 42px;
border-radius: 5px;
-moz-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
-webkit-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
-o-box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
box-shadow: inset 0px 0px 30px 0px #6f8bb5, 0px 8px 0px 0px #1f3053, 0px 10px 5px 0px #000000;
position: absolute;
top: 20px;
left: 40px
}
.text-13 {
color: #ffffff;
font-family:"lobster";
font-size: 16pt;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.7);
line-height: 42px;
}
.textarea-8 {
color: #474747;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 300px;
position: absolute;
top: 88px;
left: 41px;
margin: 0
}
.rectangle-12 {
background: #2c2c2c;
background-image: -moz-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -webkit-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -o-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
border: none;
width: 50px;
height: 19px;
border-radius: 3px;
-moz-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-webkit-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-o-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
position: absolute;
top: 22px;
left: 94px
}
.textarea-9 {
color: #ebebeb;
font-family:"helvetica";
font-size: 9pt;
font-weight: normal;
font-style: normal;
text-align: center;
line-height: 19px;
;
text-shadow: 0px 1px 1px #1c1c1c;
margin: 0
}
.rectangle-13 {
background: #2c2c2c;
background-image: -moz-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -webkit-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -o-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
border: none;
width: 28px;
height: 19px;
border-radius: 3px;
-moz-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-webkit-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-o-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
position: absolute;
top: 22px;
left: 146px
}
.textarea-10 {
color: #ebebeb;
font-family:"helvetica";
font-size: 9pt;
font-weight: normal;
font-style: normal;
text-align: center;
line-height: 19px;
;
text-shadow: 0px 1px 1px #1c1c1c;
margin: 0
}
.rectangle-14 {
background: #2c2c2c;
background-image: -moz-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -webkit-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: -o-linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
background-image: linear-gradient(270deg, #2c2c2c 0%, #303030 100%);
border: none;
width: 28px;
height: 19px;
border-radius: 3px;
-moz-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-webkit-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
-o-box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
box-shadow: 0px 1px 0px 0px #0d0d0d, 0px 3px 0px 0px #262626, inset 0px -1px 2px 0px rgba(55, 55, 55, 0.7);
position: absolute;
top: 22px;
left: 64px
}
.textarea-11 {
color: #ebebeb;
font-family:"helvetica";
font-size: 9pt;
font-weight: normal;
font-style: normal;
text-align: center;
line-height: 19px;
;
text-shadow: 0px 1px 1px #1c1c1c;
margin: 0
}
.textarea-12 {
color: #4f4f4f;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 419px;
position: absolute;
top: 973px;
left: 51px;
margin: 0
}
.rectangle-15 {
background: #f1f3f5;
border: 1px solid #dfe1e3;
width: 970px;
height: 199px;
border-radius: 0px;
-moz-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
-o-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
position: absolute;
top: 1147px;
left: -9px
}
.textarea-13 {
color: #262626;
font-family:"helvetica neue";
font-size: 13pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 620px;
margin: 36px 0 0 176px
}
.rectangle-16 {
background: #262a30;
border: 1px solid #282829;
width: 970px;
height: 150px;
border-radius: 0px;
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
-o-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
position: absolute;
top: 1344px;
left: -9px
}
.text-14 {
color: #ffffff;
font-family:"lobster";
font-size: 14pt;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0px 1px 1px #000000;
line-height: 150px;
}
.textarea-14 {
color: #4f4f4f;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 460px;
position: absolute;
top: 1633px;
left: 10px;
margin: 0
}
.textarea-15 {
color: #4f4f4f;
font-family:"helvetica neue";
font-size: 12pt;
font-weight: 300;
font-style: normal;
text-align: left;
line-height: 1.6;
width: 460px;
position: absolute;
top: 1940px;
left: 50px;
margin: 0
}
</style>
<style>
#codepen-footer, #codepen-footer * {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
#codepen-footer {
display: block !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
padding: 0 10px !important;
margin: 0 !important;
height: 30px !important;
line-height: 30px !important;
font-size: 12px !important;
color: #eeeeee !important;
background-color: #505050 !important;
text-align: left !important;
background: -webkit-linear-gradient(top, #505050, #383838) !important;
background: -moz-linear-gradient(top, #505050, #383838) !important;
background: -ms-linear-gradient(top, #505050, #383838) !important;
background: -o-linear-gradient(top, #505050, #383838) !important;
border-top: 1px solid black !important;
border-bottom: 1px solid black !important;
border-radius: 0 !important;
border-image: none !important;
box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important;
z-index: 300 !important;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important;
letter-spacing: 0 !important;
word-spacing: normal !important;
word-spacing: 0 !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;
}
#codepen-footer a {
color: #a7a7a7 !important;
text-decoration: none !important;
text-shadow: none !important;
border: 0 !important;
}
#codepen-footer a:hover {
color: white !important;
}
</style>
<script>
// Kill alerts, confirmations and prompts
// window.alert = function(){}; we're going to allow alerts for now
window.confirm = function(){};
window.prompt = function(){};
window.open = function(){};
window.print = function(){};
</script>
</head>
<body>
<!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="rectangle-2">
<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>
<div class="oval">
<div class="text-4">1</div>
</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 copy/paste groups of layers around.
<br/>
<br/>Easel allows you to create reusable 'elements' by simply grouping with a special
command. Then you can change them in one place, and they change everywhere.</p>
</div>
<div class="oval-2">
<div class="text-11">3</div>
</div>
<div class="text-12">It fits the Web</div>
<div class="rectangle-10">
<div class="rectangle-11">
<div class="text-13">export me!!</div>
</div>
<p class="textarea-8">1. Click the button
<br/>2. Press</p>
</div>
<p class="textarea-12">Easel makes implementation easier by exporting single elements to HTML/CSS.
<br/>
<br/>With integrated web fonts and by using the browser’s type engine, text is rendered
exactly as it will on your website. </p>
<div class="rectangle-15">
<p class="textarea-13">The current web design process is broken. People use image editing tools for creation,
share screenshots/flat exports over email, and spend more time than necessary manually
translating the design into a working product. We believe the future of application
design is in the browser with tools that understand the medium and the process.</p>
</div>
<div class="rectangle-16">
<div class="text-14">@easelapp</div>
</div>
<p class="textarea-14">Easel makes implementation easier by exporting single elements to HTML/CSS.
<br/>
<br/>With integrated web fonts and by using the browser’s type engine, text is rendered
exactly as it will on your website. </p>
<p class="textarea-15">Easel's goal is allowing you to get your ideas out as quickly as possible. Maybe
you want to create a beautiful button?</p>
</div>
</body>
</html>
<div id="codepen-footer">
<a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a>
<a href="/adhd360/pen/HhjFg" target="_blank">Edit this Pen</a>
</div>
</body>
</html>