Dribbble - Nature App

Dribbble - Nature App.markdown

Dribbble - Nature App

A Pen by Peter Bork on CodePen.

License.

index.html

<div id="phone">
  <div id="onoff"></div>
  <div id="camera"></div>
  <div id="speaker"></div>
  <div id="speaker2"></div>
  <div id="screen">
    <div id="tree">
      <div id="leaves"></div>
      <div id="stem"></div>
      <div class="branch a"></div>
      <div class="branch b"></div>
      <div class="branch c"></div>
    </div>
    <div id="treeb">
      <div id="leaves"></div>
      <div id="stem"></div>
      <div class="branch a"></div>
      <div class="branch b"></div>
      <div class="branch c"></div>
    </div>
    <div id="treec">
      <div id="leaves"></div>
      <div id="stem"></div>
      <div class="branch a"></div>
      <div class="branch b"></div>
      <div class="branch c"></div>
    </div>
    <div id="treed">
      <div id="leaves"></div>
      <div id="stem"></div>
      <div class="branch a"></div>
      <div class="branch b"></div>
      <div class="branch c"></div>
    </div>
    <div id="treee">
      <div id="leaves"></div>
      <div id="stem"></div>
      <div class="branch a"></div>
      <div class="branch b"></div>
      <div class="branch c"></div>
    </div>
    <div id="sandContainer">
      <div id="waterContainer">
        <div id="waterc"></div>
        <div id="waterb"></div>
        <div id="watera"></div>
      </div>
      <div id="sand"></div>
      
      
    </div>
  </div>
  <div id="home"></div>
  <div id="buttons">
    <div id="white"></div>
    <div id="soundOnOff">
      <div id="flip"></div>
    </div>
    <div id="soundUp">+</div>
    <div id="soundDown">-</div>
    <div id="white2"></div>
  </div>
</div>
<a href="http://dribbble.com/shots/1263022-Nature-App">Inspiration from Dribbble</a>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

*{
  margin: 0;
}
body{
  background-color: #e7c855;
}
a:link{
  color: #333;
  font-family: calibri;
  display: block;
  text-decoration: none;
  text-align: center;
  margin-top: 20px;
}
a:visited{
  color: #333;
}
a:hover{
  text-decoration: underline;
}
#phone{
  width: 430px;
  height: 200px;
  background-color: #fff;
  border-radius: 30px;
  position: absolute;
  z-index: 3;
  margin: 100px auto;
  left: 0; right: 0;
  box-shadow: 0 17px 0 #5f5b58, 0 34px 0 #d6ae42;
}
#onoff{
  width: 2px;
  height: 33px;
  background: #969696;
  position: absolute;
  left: -2px;
  top: 37px;
  border-radius: 10px 0 0 10px;
}
#camera{
  width: 8px; 
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 0; bottom: 0; left: 18px;
  margin: auto;
  background: #4b4b4b;
}
#speaker{
  width: 6px;
  height: 34px;
  background: #969696;
  position: absolute;
  top: 0; bottom: 0; left: 35px;
  margin: auto;
  border-radius: 20px;
}
#speaker2{
  width: 6px;
  height: 6px;
  background: #969696;
  position: absolute;
  top: 125px;  left: 35px;
  margin: auto;
  border-radius: 20px;
}
#screen{
  width: 316px;
  height: 180px;
  background-color: #3dba66;
  margin-left: 60px;
  margin-top: 10px;
}
#tree{
  position: absolute;
  top: -40px;
  left: 76px;
  -webkit-animation: wind 10s infinite linear;
}
#leaves{
	width: 0;
	height: 0;
	border-left: 28px solid transparent;
	border-right: 28px solid transparent;
	border-bottom: 80px solid #2a794b;
}
#stem{
  background: #344a3a;
  width: 8px;
  height: 27px;
  position: absolute;
  top: 62px; right: 0; left: 0; 
  margin: auto;
}
.branch{
  background: #344a3a;
  width: 3px;
  height: 15px;
  position: absolute;
}
.branch.a{
  top: 68px; right: 0; left: 30px; 
  -webkit-transform: rotate(55deg);
}
.branch.b{
  height: 12px;
  top: 64px; right: 0; left: 29px; 
  -webkit-transform: rotate(55deg);
}
.branch.c{
  width: 4px;
  top: 64px; right: 0; left: 22px; 
  -webkit-transform: rotate(-55deg);
}

#treeb{
  position: absolute;
  top: 22px;
  left: 126px;
  -webkit-transform: scale(0.6);
}
#treec{
  position: absolute;
  top: -28px;
  left: 180px;
  -webkit-animation: wind 12s infinite linear;
}
#treed{
  position: absolute;
  top: -45px;
  left: 245px;
  -webkit-transform: scale(0.6);
  
}
#treee{
  position: absolute;
  top: -15px;
  left: 270px;
  -webkit-animation: wind 5s infinite linear;
}
#sandContainer{
  width: 316px;
  height: 180px;
  position: relative;
  overflow: hidden;
}
#waterContainer{
  position: relative;
  top: 0px;
  left: 0px;
  -webkit-animation: waves 10s infinite linear;
}
#waterc{
  background: #158ab7;
  width: 980px; 
  height: 1000px;
  border-radius: 470px;
  position: absolute;
  top: 120px;
  left: -150px;
  z-index: 4;
}
#waterb{
  background: #199ed0;
  width: 980px; 
  height: 1000px;
  border-radius: 470px;
  position: absolute;
  top: 110px;
  left: -180px;
  z-index: 3;
}
#watera{
  background: #22b5e6;
  width: 980px; 
  height: 1000px;
  border-radius: 470px;
  position: absolute;
  top: 100px;
  left: -210px;
  z-index: 2;
}
#sand{
  background: #d1c481;
  width: 980px; 
  height: 1000px;
  border-radius: 470px;
  position: absolute;
  top: 80px;
  left: -250px;
  z-index: 1;
}

#home{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px #eab550 solid;
  background: #fff;
  position: absolute;
  top: 0; bottom: 0; right: 9px;
  margin: auto;
}
#buttons{
  width: 430px;
  height: 17px;
  margin-top: 10px;
  position: relative;
}
#white{
  width: 3px;
  height: 100%;
  background: #fff;
  position: absolute;
  left: 38px;
}
#soundOnOff{
  width: 30px;
  height: 10px;
  background: #464241;
  position: absolute;
  top: 3px;
  left: 58px;
  border-radius: 4px;
  box-shadow: inset 0 -2px 1px #353432;
}
#flip{
  width: 26px;
  height: 3px;
  border-radius: 30px;
  background: #969696;
  position: absolute;
  top: 3px; left: 2px;
}
#soundUp{
  width: 12px;
  height: 12px;
  background: #969696;
  border-radius: 50%;
  line-height: 11px;
  text-align: center;
  font-size: 12px;
  color: #797876;
  position: absolute;
  top: 3px; left: 100px;
  box-shadow: 0 -2px 1px #464241;
}
#soundDown{
  width: 12px;
  height: 12px;
  background: #969696;
  border-radius: 50%;
  line-height: 12px;
  text-align: center;
  font-size: 18px;
  color: #797876;
  position: absolute;
  top: 3px; left: 123px;
  box-shadow: 0 -2px 1px #464241;
}
#white2{
  width: 3px;
  height: 100%;
  background: #fff;
  position: absolute;
  right: 38px;
}

@-webkit-keyframes wind{
  from{
    -webkit-transform: rotateY(0deg);
  }
50%{
  -webkit-transform: rotateY(40deg);
}
to{
  -webkit-transform: rotateY(0deg);
}
}

@-webkit-keyframes waves{
  from{
    top: 0px;
    left: 0px;
  }
50%{
  top: -10px;
  left: -10px;
}
to{
  top: 0px;
  left: 0px;
}
}