#dailycssimages 47 - Your Choice - Dots&Co Window

dailycssimages-47-your-choice-dots-co-window.markdown

#dailycssimages 47 - Your Choice - Dots&Co Window

A Pen by Carolyn Cochran on CodePen.

License.

index.html

<div class="wrapper">
  <div class="mountain">
    <div class="tree-1">
      <div class="trunk"></div>
    </div>
    <div class="tree-2">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="trunk-2"></div>
    <div class="trunk-3"></div>
    <div class="trunk-4"></div>
  </div>
  <div class="land">
    <div class="land-top"></div>
    <div class="land-bottom"></div>
  </div>
  <div class="house"></div>
  <div class="ocean">
    <div class="wave"></div>
  </div>
</div>

script.js

// Source: https://static1.squarespace.com/static/546e6e17e4b04b54a39744b5/57a92960bebafbbe8b50971a/57a92b8c579fb3835f5a9f58/1470704549608/Dots_06.png

style.css

* { 
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
      box-sizing: border-box; 
}

body {
  height: 100%;
  background: #ECE9E6;
    background: -webkit-linear-gradient(to left, #ECE9E6 , #FFFFFF);
    background: linear-gradient(to left, #ECE9E6 , #FFFFFF);
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 400px;
  width: 400px;
  border: 10px solid snow;
  border-radius: 50%;
  -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
  overflow: hidden;
  background-color: #CAEEE4;
  -webkit-box-shadow: 2px 2px 11px -4px rgba(133,133,133,1);
    -moz-box-shadow: 2px 2px 11px -4px rgba(133,133,133,1);
      box-shadow: 2px 2px 11px -4px rgba(133,133,133,1);
}

.mountain {
  position: absolute;
  width: 15em;
  height: 30em;
  background-color: #48392F;
  border-top-left-radius: 4em;
  border-top-right-radius: 4em;
  top: 10%;
  left: 50%;
  z-index: 2;
}

.tree-1 {
  position: relative;
  background-color: #39821C;
  width: 6em;
  height: 15em;
  border-radius: 4em;
  top: 9%;
  left: 3%;
}

.trunk {
  width: 0;
	height: 0;
	border-left: 0.5em solid transparent;
	border-right: 0.5em solid transparent;
	border-bottom: 20em solid #011E09;
  top: 30%;
  position: absolute;
  left: 40%;
}

.tree-2 > div {
  position: absolute;
  background-color: #8EB740;
  width: 5em;
  height: 5em;
  border-radius: 50%;
}

.tree-2 > div:nth-child(1) {
  position: absolute;
  top: 23%;
  left: 17%;
  opacity: 0.8;
    filter: alpha(opacity=80);
  z-index: 6;
}

.tree-2 > div:nth-child(2) {
  position: absolute;
  top: 5%;
  left: 27%;
  opacity: 0.9;
    filter: alpha(opacity=90);
}

.tree-2 > div:nth-child(3) {
  position: absolute;
  top: 18%;
  left: 53%;
}

.trunk-2 {
  width: 0;
	height: 0;
	border-left: 0.5em solid transparent;
	border-right: 0.5em solid transparent;
	border-bottom: 15em solid #011E09;
  top: 30%;
  position: absolute;
  left: 35%;
  -ms-transform: rotate(-3deg); 
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  z-index: 7;
}

.trunk-3 {
  width: 0;
	height: 0;
	border-left: 0.5em solid transparent;
	border-right: 0.5em solid transparent;
	border-bottom: 20em solid #011E09;
  top: 15%;
  position: absolute;
  left: 43%;
}

.trunk-4 {
  width: 0;
	height: 0;
	border-left: 0.5em solid transparent;
	border-right: 0.5em solid transparent;
	border-bottom: 15em solid #011E09;
  top: 25%;
  position: absolute;
  left: 60%;
  -ms-transform: rotate(3deg); 
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
}

.land {
  width: 12em;
  height: 7em;
  background-color: #92BB40;
  position: relative;
  z-index: 1;
  top: 40%;
  left: 0;
}

.land:before, .land:after {
  background: inherit;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  z-index: -1;
  -webkit-backface-visibility: hidden;
}

.land:before {
  top: 0;
  -webkit-transform: skewY(10deg);
          transform: skewY(10deg);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
}

.land:after {
  bottom: 0;
  -webkit-transform: skewY(-10deg);
          transform: skewY(-10deg);
  -webkit-transform-origin: 100%;
          transform-origin: 100%;
}

.land-top {
  width: 12em;
  height: 2em;
  background-color: #E1E555;
  position: relative;
  z-index: -1;
  top: -15%;
  left: 2%;
  -ms-transform: rotate(10deg); 
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}

.land-bottom {
  width: 12em;
  height: 2em;
  background-color: #39831C;
  position: relative;
  z-index: 1;
  top: 86%;
  left: 2%;
  -ms-transform: rotate(-10deg); 
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

/* .house {
  position: relative;
  width: 3em;
  height: 3em;
  background-color: #E9F5F5;
  z-index: 1;
  left: 4em;
  top: 1em;
} */


.ocean {
  width: 10em;
  height: 10em;
  background-color: #82D0CE;
  position: relative;
  z-index: -2;
  top: 40%;
  left: 8%;
}

/* .wave {
  position: relative;
  height: 1em;
  width: 10em;
  background: #CAEEE4;
  top: 25%;
}

.wave:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 5em;
  height: 2em;
  background-color: #82D0CE;
  right: -5px;
  top: 0.5em;
}

.wave:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 5.5em;
  height: 2em;
  background-color: #82D0CE;
  left: 0.5em;
  top: 0.5em;
} */