Skip to content

Instantly share code, notes, and snippets.

@mutukrish

mutukrish/index.html

Created July 18, 2012 06:52
Show Gist options
  • Save mutukrish/3134680 to your computer and use it in GitHub Desktop.
Save mutukrish/3134680 to your computer and use it in GitHub Desktop.
Download ZIP
A web page created at CodePen.io
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen &middot; A Pen by mutukrish</title>
<!--
Copyright (c) 2012 muthukrishnan, http://codepen.io/mutukrish
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>
.x{
-moz-transform: scale(0.8);
margin-left:-39px;
}
.xx{
-moz-transform: scale(.1);
margin-left:-59px;
}
.xxx{
-moz-transform: scale(.9);
margin-left:-100px;
}
#clouds{
padding: 100px 0px 0px 0px;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
margin-bottom:250px;
}
.cloud {
width: 200px; height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
.x1 {
-moz-animation: moveclouds 15s linear infinite;
}
.x2 {
left: 200px;
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-moz-animation: moveclouds 25s linear infinite;
}
.x3 {
left: -250px; top: -200px;
-moz-transform: scale(0.8);
opacity: 0.8;
-moz-animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
-moz-animation: moveclouds 18s linear infinite;
}
.x5 {
left: -150px; top: -150px;
-moz-transform: scale(0.8);
opacity: 0.8;
-moz-animation: moveclouds 20s linear infinite;
}
@-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#twelve-point-star {
height: 100px;
width: 100px;
background: #FAB40A;
position: relative;
float:left;
top:-180px;
left:50px;
box-shadow: 0px -1px 4px yellow, 0px -2px 10px yellow, 0px -10px 20px yellow, 0px -18px 40px yellow;
}
#twelve-point-star:before {
height: 100px;
width: 100px;
background:#FAB40A;
content:"";
position: absolute;
-moz-transform: rotate(30deg);
}
#twelve-point-star:after {
height: 100px;
width: 100px;
background: #FAB40A;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.circle{
width:100px;
height:100px;
position:absolute;
border-radius:100px;
top:1px;
z-index:1;
background: #fcc109; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #fcc109 5%, #fa9e16 12%, #fa9e16 20%, #f7891a 33%, #f3741f 50%, #f3741f 79%, #febf01 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(5%,#fcc109), color-stop(12%,#fa9e16), color-stop(20%,#fa9e16), color-stop(33%,#f7891a), color-stop(50%,#f3741f), color-stop(79%,#f3741f), color-stop(100%,#febf01)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #fcc109 5%,#fa9e16 12%,#fa9e16 20%,#f7891a 33%,#f3741f 50%,#f3741f 79%,#febf01 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #fcc109 5%,#fa9e16 12%,#fa9e16 20%,#f7891a 33%,#f3741f 50%,#f3741f 79%,#febf01 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #fcc109 5%,#fa9e16 12%,#fa9e16 20%,#f7891a 33%,#f3741f 50%,#f3741f 79%,#febf01 100%); /* IE10+ */
background: radial-gradient(center, ellipse cover, #fcc109 5%,#fa9e16 12%,#fa9e16 20%,#f7891a 33%,#f3741f 50%,#f3741f 79%,#febf01 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcc109', endColorstr='#febf01',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.ground{
width:100%;
height:120px;
position:absolute;
top:700px;
background: #f9ddb6; /* Old browsers */
background: -moz-linear-gradient(top, #f9ddb6 18%, #f9c67f 34%, #f9bf6d 51%, #f9c884 64%, #f9d9ac 77%, #f9ce90 92%, #fcbf64 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(18%,#f9ddb6), color-stop(34%,#f9c67f), color-stop(51%,#f9bf6d), color-stop(64%,#f9c884), color-stop(77%,#f9d9ac), color-stop(92%,#f9ce90), color-stop(100%,#fcbf64)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f9ddb6 18%,#f9c67f 34%,#f9bf6d 51%,#f9c884 64%,#f9d9ac 77%,#f9ce90 92%,#fcbf64 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f9ddb6 18%,#f9c67f 34%,#f9bf6d 51%,#f9c884 64%,#f9d9ac 77%,#f9ce90 92%,#fcbf64 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f9ddb6 18%,#f9c67f 34%,#f9bf6d 51%,#f9c884 64%,#f9d9ac 77%,#f9ce90 92%,#fcbf64 100%); /* IE10+ */
background: linear-gradient(top, #f9ddb6 18%,#f9c67f 34%,#f9bf6d 51%,#f9c884 64%,#f9d9ac 77%,#f9ce90 92%,#fcbf64 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9ddb6', endColorstr='#fcbf64',GradientType=0 ); /* IE6-9 */
}
.logo{
height: 200px; width: 160px;
position: relative;
z-index:1;
float:left;
}
#tree {
border-bottom: 200px solid #5b9a68;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
position: absolute; top: 0; left: 0;
height: 0; width: 0;
}
#trunk{
height: 85px; width: 16px;
background: #3b543f;
position: absolute; left: 72px; bottom: -20px;
}
#left-branch{
background: #3b543f;
height: 30px; width: 6px;
position: absolute; left: -10px; top: 15px;
-moz-transform: rotate(-50deg);
}
#right-bottom-branch{
background: #3b543f;
height: 50px; width: 6px;
position: absolute; top: 15px; left: 23px;
-moz-transform: rotate(50deg);
}
#right-top-branch{
background: #3b543f;
height: 27px; width: 6px;
position: absolute; top: 2px; left: 20px;
-moz-transform: rotate(50deg);
}
.mountain{
width: 120px;
height: 120px;
float:right;
margin: 78px -55px 0 10px;
border-radius:0px 30px;
-moz-transform: rotate(-45deg);
-moz-transform-origin: 0 100%;
background: #feccb1; /* Old browsers */
background: -moz-linear-gradient(45deg, #feccb1 0%, #ef9c73 29%, #f17432 44%, #ea5507 51%, #fb955e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#feccb1), color-stop(29%,#ef9c73), color-stop(44%,#f17432), color-stop(51%,#ea5507), color-stop(100%,#fb955e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #feccb1 0%,#ef9c73 29%,#f17432 44%,#ea5507 51%,#fb955e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #feccb1 0%,#ef9c73 29%,#f17432 44%,#ea5507 51%,#fb955e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #feccb1 0%,#ef9c73 29%,#f17432 44%,#ea5507 51%,#fb955e 100%); /* IE10+ */
background: linear-gradient(45deg, #feccb1 0%,#ef9c73 29%,#f17432 44%,#ea5507 51%,#fb955e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.xx-lar{
width:200px;
height:150px;
}
.square {
width: 70px;
height: 50px;
background: #DEB887;
float:left;
position:relative;
z-index:1;
top:130px;
left:500px;
}
.door {
width: 20px;
height: 25px;
background: black;
top:26px;
left:25px;
position:absolute;
z-index:1;
}
.triangle{
width: 0;
height: 0;
border-bottom: 70px solid #DEB887;
border-left:35px solid transparent;
border-right: 35px solid transparent;
position:absolute;
top:-45px;
left:0px;
}
.roof1{
width:40px;height:40px;
background-color:red;
-moz-transform: skewY(140deg);
position:absolute;
z-index:1;
left:-5px;
top:-44px;
}
.roof2{
width:40px;height:40px;
background-color:red;
-moz-transform: skewY(40deg);
position:absolute;
z-index:1;
left:33px;
top:-44px;
}
.sea{
background: #41bdea; /* Old browsers */
background: -moz-linear-gradient(top, #41bdea 0%, #21baed 24%, #21b4e2 36%, #71ceef 56%, #b7deed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#41bdea), color-stop(24%,#21baed), color-stop(36%,#21b4e2), color-stop(56%,#71ceef), color-stop(100%,#b7deed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #41bdea 0%,#21baed 24%,#21b4e2 36%,#71ceef 56%,#b7deed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #41bdea 0%,#21baed 24%,#21b4e2 36%,#71ceef 56%,#b7deed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #41bdea 0%,#21baed 24%,#21b4e2 36%,#71ceef 56%,#b7deed 100%); /* IE10+ */
background: linear-gradient(top, #41bdea 0%,#21baed 24%,#21b4e2 36%,#71ceef 56%,#b7deed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41bdea', endColorstr='#b7deed',GradientType=0 ); /* IE6-9 */
width:610px;
height:30px;
margin-top:325px;
}
.boat{
top:-16px;
left:284px;
position:relative;
height:25px;
background-color:brown;
width:50px;
border-radius: 0 0 50px 50px;
-moz-border-radius: 0 0 50px 50px;
-webkit-border-radius: 0 0 20px 20px;
z-index:-1;
}
.yach{
width:20px;
height:30px;
background: orange;
border-radius: 0 18px 0 0;
-moz-border-radius: 0 18px 0 0;
-webkit-border-radius: 0 90px 0 0;
position:absolute;
top:-29px;
left:3px;
}
</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;
}
#codepen-footer a:hover {
color: white !important;
}
</style>
<script>
// Kill alerts, confirmations and prompts
window.alert = function(){};
window.confirm = function(){};
window.prompt = function(){};
window.open = function(){};
window.print = function(){};
</script>
</head>
<body>
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
<div id="twelve-point-star">
<div class="circle"></div>
</div>
</div>
<div class="logo">
<div id="tree"></div>
<div id="trunk">
<div id="left-branch"></div>
<div id="right-bottom-branch"></div>
<div id="right-top-branch"></div>
</div>
</div>
<div class="logo x">
<div id="tree"></div>
<div id="trunk">
<div id="left-branch"></div>
<div id="right-bottom-branch"></div>
<div id="right-top-branch"></div>
</div>
</div>
<div class="logo xx">
<div id="tree"></div>
<div id="trunk">
<div id="left-branch"></div>
<div id="right-bottom-branch"></div>
<div id="right-top-branch"></div>
</div>
</div>
<div class="logo xxx">
<div id="tree"></div>
<div id="trunk">
<div id="left-branch"></div>
<div id="right-bottom-branch"></div>
<div id="right-top-branch"></div>
</div>
</div>
<div class="square">
<div class="roof1">
</div>
<div class="roof2">
</div>
<div class="triangle">
</div>
<div class="door">
</div>
</div>
<div class="mountain"></div>
<div class="mountain xx-lar"></div>
<div class="mountain x-lar"></div>
<div class="mountain"></div>
<div class="mountain xx-lar"></div>
<div class="mountain x-lar"></div>
<div class="mountain"></div>
<div class="sea">
<div class="boat">
<div class="yach"></div>
</div>
</div>
<div class="ground"></div>
<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>
&nbsp;
<a href="/mutukrish/pen/Jzpmx">Edit this Pen</a>
</div>
</body>
</html>
Raw
markup.html
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
<div id="twelve-point-star">
<div class="circle"></div>
</div>
</div>
<div class="logo">
<div id="tree"></div>
<div id="trunk">
<div id="left-branch"></div>
<div id="right-bottom-branch"></div>
<div id="right-top-branch"></div>
</div>
</div>
<div class="logo x">
<div id="tree"></div>
<div id="trunk">
<div id="left-branch"></div>
<div id="right-bottom-branch"></div>
<div id="right-top-branch"></div>
</div>
</div>
<div class="logo xx">
<div id="tree"></div>
<div id="trunk">
<div id="left-branch"></div>
<div id="right-bottom-branch"></div>
<div id="right-top-branch"></div>
</div>
</div>
<div class="logo xxx">
<div id="tree"></div>
<div id="trunk">
<div id="left-branch"></div>
<div id="right-bottom-branch"></div>
<div id="right-top-branch"></div>
</div>
</div>
<div class="square">
<div class="roof1">
</div>
<div class="roof2">
</div>
<div class="triangle">
</div>
<div class="door">
</div>
</div>
<div class="mountain"></div>
<div class="mountain xx-lar"></div>
<div class="mountain x-lar"></div>
<div class="mountain"></div>
<div class="mountain xx-lar"></div>
<div class="mountain x-lar"></div>
<div class="mountain"></div>
<div class="sea">
<div class="boat">
<div class="yach"></div>
</div>
</div>
<div class="ground"></div>
Raw
style.css
.x{
-moz-transform: scale(0.8);
margin-left:-39px;
}
.xx{
-moz-transform: scale(.1);
margin-left:-59px;
}
.xxx{
-moz-transform: scale(.9);
margin-left:-100px;
}
#clouds{
padding: 100px 0px 0px 0px;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
margin-bottom:250px;
}
.cloud {
width: 200px; height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
.x1 {
-moz-animation: moveclouds 15s linear infinite;
}
.x2 {
left: 200px;
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-moz-animation: moveclouds 25s linear infinite;
}
.x3 {
left: -250px; top: -200px;
-moz-transform: scale(0.8);
opacity: 0.8;
-moz-animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
-moz-animation: moveclouds 18s linear infinite;
}
.x5 {
left: -150px; top: -150px;
-moz-transform: scale(0.8);
opacity: 0.8;
-moz-animation: moveclouds 20s linear infinite;
}
@-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#twelve-point-star {
height: 100px;
width: 100px;
background: #FAB40A;
position: relative;
float:left;
top:-180px;
left:50px;
box-shadow: 0px -1px 4px yellow, 0px -2px 10px yellow, 0px -10px 20px yellow, 0px -18px 40px yellow;
}
#twelve-point-star:before {
height: 100px;
width: 100px;
background:#FAB40A;
content:"";
position: absolute;
-moz-transform: rotate(30deg);
}
#twelve-point-star:after {
height: 100px;
width: 100px;
background: #FAB40A;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.circle{
width:100px;
height:100px;
position:absolute;
border-radius:100px;
top:1px;
z-index:1;
background: #fcc109; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #fcc109 5%, #fa9e16 12%, #fa9e16 20%, #f7891a 33%, #f3741f 50%, #f3741f 79%, #febf01 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(5%,#fcc109), color-stop(12%,#fa9e16), color-stop(20%,#fa9e16), color-stop(33%,#f7891a), color-stop(50%,#f3741f), color-stop(79%,#f3741f), color-stop(100%,#febf01)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #fcc109 5%,#fa9e16 12%,#fa9e16 20%,#f7891a 33%,#f3741f 50%,#f3741f 79%,#febf01 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #fcc109 5%,#fa9e16 12%,#fa9e16 20%,#f7891a 33%,#f3741f 50%,#f3741f 79%,#febf01 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #fcc109 5%,#fa9e16 12%,#fa9e16 20%,#f7891a 33%,#f3741f 50%,#f3741f 79%,#febf01 100%); /* IE10+ */
background: radial-gradient(center, ellipse cover, #fcc109 5%,#fa9e16 12%,#fa9e16 20%,#f7891a 33%,#f3741f 50%,#f3741f 79%,#febf01 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcc109', endColorstr='#febf01',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.ground{
width:100%;
height:120px;
position:absolute;
top:700px;
background: #f9ddb6; /* Old browsers */
background: -moz-linear-gradient(top, #f9ddb6 18%, #f9c67f 34%, #f9bf6d 51%, #f9c884 64%, #f9d9ac 77%, #f9ce90 92%, #fcbf64 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(18%,#f9ddb6), color-stop(34%,#f9c67f), color-stop(51%,#f9bf6d), color-stop(64%,#f9c884), color-stop(77%,#f9d9ac), color-stop(92%,#f9ce90), color-stop(100%,#fcbf64)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f9ddb6 18%,#f9c67f 34%,#f9bf6d 51%,#f9c884 64%,#f9d9ac 77%,#f9ce90 92%,#fcbf64 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f9ddb6 18%,#f9c67f 34%,#f9bf6d 51%,#f9c884 64%,#f9d9ac 77%,#f9ce90 92%,#fcbf64 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f9ddb6 18%,#f9c67f 34%,#f9bf6d 51%,#f9c884 64%,#f9d9ac 77%,#f9ce90 92%,#fcbf64 100%); /* IE10+ */
background: linear-gradient(top, #f9ddb6 18%,#f9c67f 34%,#f9bf6d 51%,#f9c884 64%,#f9d9ac 77%,#f9ce90 92%,#fcbf64 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9ddb6', endColorstr='#fcbf64',GradientType=0 ); /* IE6-9 */
}
.logo{
height: 200px; width: 160px;
position: relative;
z-index:1;
float:left;
}
#tree {
border-bottom: 200px solid #5b9a68;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
position: absolute; top: 0; left: 0;
height: 0; width: 0;
}
#trunk{
height: 85px; width: 16px;
background: #3b543f;
position: absolute; left: 72px; bottom: -20px;
}
#left-branch{
background: #3b543f;
height: 30px; width: 6px;
position: absolute; left: -10px; top: 15px;
-moz-transform: rotate(-50deg);
}
#right-bottom-branch{
background: #3b543f;
height: 50px; width: 6px;
position: absolute; top: 15px; left: 23px;
-moz-transform: rotate(50deg);
}
#right-top-branch{
background: #3b543f;
height: 27px; width: 6px;
position: absolute; top: 2px; left: 20px;
-moz-transform: rotate(50deg);
}
.mountain{
width: 120px;
height: 120px;
float:right;
margin: 78px -55px 0 10px;
border-radius:0px 30px;
-moz-transform: rotate(-45deg);
-moz-transform-origin: 0 100%;
background: #feccb1; /* Old browsers */
background: -moz-linear-gradient(45deg, #feccb1 0%, #ef9c73 29%, #f17432 44%, #ea5507 51%, #fb955e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#feccb1), color-stop(29%,#ef9c73), color-stop(44%,#f17432), color-stop(51%,#ea5507), color-stop(100%,#fb955e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #feccb1 0%,#ef9c73 29%,#f17432 44%,#ea5507 51%,#fb955e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #feccb1 0%,#ef9c73 29%,#f17432 44%,#ea5507 51%,#fb955e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #feccb1 0%,#ef9c73 29%,#f17432 44%,#ea5507 51%,#fb955e 100%); /* IE10+ */
background: linear-gradient(45deg, #feccb1 0%,#ef9c73 29%,#f17432 44%,#ea5507 51%,#fb955e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.xx-lar{
width:200px;
height:150px;
}
.square {
width: 70px;
height: 50px;
background: #DEB887;
float:left;
position:relative;
z-index:1;
top:130px;
left:500px;
}
.door {
width: 20px;
height: 25px;
background: black;
top:26px;
left:25px;
position:absolute;
z-index:1;
}
.triangle{
width: 0;
height: 0;
border-bottom: 70px solid #DEB887;
border-left:35px solid transparent;
border-right: 35px solid transparent;
position:absolute;
top:-45px;
left:0px;
}
.roof1{
width:40px;height:40px;
background-color:red;
-moz-transform: skewY(140deg);
position:absolute;
z-index:1;
left:-5px;
top:-44px;
}
.roof2{
width:40px;height:40px;
background-color:red;
-moz-transform: skewY(40deg);
position:absolute;
z-index:1;
left:33px;
top:-44px;
}
.sea{
background: #41bdea; /* Old browsers */
background: -moz-linear-gradient(top, #41bdea 0%, #21baed 24%, #21b4e2 36%, #71ceef 56%, #b7deed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#41bdea), color-stop(24%,#21baed), color-stop(36%,#21b4e2), color-stop(56%,#71ceef), color-stop(100%,#b7deed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #41bdea 0%,#21baed 24%,#21b4e2 36%,#71ceef 56%,#b7deed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #41bdea 0%,#21baed 24%,#21b4e2 36%,#71ceef 56%,#b7deed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #41bdea 0%,#21baed 24%,#21b4e2 36%,#71ceef 56%,#b7deed 100%); /* IE10+ */
background: linear-gradient(top, #41bdea 0%,#21baed 24%,#21b4e2 36%,#71ceef 56%,#b7deed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41bdea', endColorstr='#b7deed',GradientType=0 ); /* IE6-9 */
width:610px;
height:30px;
margin-top:325px;
}
.boat{
top:-16px;
left:284px;
position:relative;
height:25px;
background-color:brown;
width:50px;
border-radius: 0 0 50px 50px;
-moz-border-radius: 0 0 50px 50px;
-webkit-border-radius: 0 0 20px 20px;
z-index:-1;
}
.yach{
width:20px;
height:30px;
background: orange;
border-radius: 0 18px 0 0;
-moz-border-radius: 0 18px 0 0;
-webkit-border-radius: 0 90px 0 0;
position:absolute;
top:-29px;
left:3px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment