diff --git a/human.js b/human.js
index e69de29..a95fbf5 100644
--- a/human.js
+++ b/human.js
@@ -0,0 +1,15 @@
+function Human() {
+ return this;
+}
+
+Human.prototype.generatePerson = function() {
+
+};
+
+Human.prototype.generateFlowers = function() {
+
+};
+
+Human.prototype.generateFlower = function() {
+
+}
\ No newline at end of file
diff --git a/human.less b/human.less
index 2b3ea0c..a8dd67e 100644
--- a/human.less
+++ b/human.less
@@ -4,10 +4,10 @@ body {
}
.person {
- top: 160px;
- left: 30%;
- position: absolute;
- z-index: 100;
+ bottom: 340px;
+ left: 30%;
+ position: absolute;
+ z-index: 100;
}
.face {
@@ -17,31 +17,31 @@ body {
height: 150px;
border-radius: 35px 35px 80px 80px;
box-shadow: 0 1px 1px 0 #EBC3A9;
-}
-
-.face:before {
- transform: rotate(-45deg);
- transform-origin: 0 100%;
- left: 85px;
- box-shadow: 0 1px 1px 0 #E9C8B4;
-}
-
-.face:after {
- left: 0;
- transform: rotate(45deg);
- transform-origin: 100% 100%;
- box-shadow: 1px 1px 1px 0 #E9C8B4;
-}
-
-.face:before, .face:after {
- position: absolute;
- content: '';
- top: 70px;
- width: 85px;
- height: 120px;
- background: #FFE8DC;
- border-radius: 50px 50px 30px 30px;
- z-index: 1;
+
+ &:before, &:after {
+ position: absolute;
+ content: '';
+ top: 70px;
+ width: 85px;
+ height: 120px;
+ background: #FFE8DC;
+ border-radius: 50px 50px 30px 30px;
+ z-index: 1;
+ }
+
+ &:before {
+ transform: rotate(-45deg);
+ transform-origin: 0 100%;
+ left: 85px;
+ box-shadow: 0 1px 1px 0 #E9C8B4;
+ }
+
+ &:after {
+ left: 0;
+ transform: rotate(45deg);
+ transform-origin: 100% 100%;
+ box-shadow: 1px 1px 1px 0 #E9C8B4;
+ }
}
.neck {
@@ -54,29 +54,29 @@ body {
.chest {
position: relative;
-}
-.chest:before, .chest:after {
- position: absolute;
- content: '';
- margin-left: -40px;
- width: 140px;
- height: 180px;
- background: #FFE8DC;
-}
-
-.chest:before {
- transform: rotate(10deg);
- transform-origin: 100% 100%;
- left: 90px;
- border-radius: 5px 50px;
-}
-
-.chest:after {
- left: 20px;
- transform-origin: 0 100%;
- transform: rotate(-10deg);
- border-radius: 50px 5px;
+ &:before, &:after {
+ position: absolute;
+ content: '';
+ margin-left: -40px;
+ width: 140px;
+ height: 180px;
+ background: #FFE8DC;
+ }
+
+ &:before {
+ transform: rotate(10deg);
+ transform-origin: 100% 100%;
+ left: 90px;
+ border-radius: 5px 50px;
+ }
+
+ &:after {
+ left: 20px;
+ transform-origin: 0 100%;
+ transform: rotate(-10deg);
+ border-radius: 50px 5px;
+ }
}
.dress {
@@ -89,39 +89,41 @@ body {
width: 100px;
border-radius: 30px 30px 80px 80px;
margin-left: -15px;
-}
-.dress:after {
- content: '';
- display: block;
- position: relative;
- width: 120px;
- border-bottom: 410px solid #A8CCFF;;
- border-left: 70px solid transparent;
- border-right: 70px solid transparent;
- margin-left: -80px;
-}
-
-.hands:before, .hands:after {
- position: absolute;
- content: '';
- display: block;
- width: 55px;
- height: 110px;
- background: #FFE8DC;
- border-radius: 50%;
- z-index: 1;
- margin-top: 132px;
-}
-
-.hands:before {
- transform: rotate(-70deg);
- margin-left: 5px;
-}
-
-.hands:after {
- transform: rotate(70deg);
- margin-left: 110px;
+ &:after {
+ content: '';
+ display: block;
+ position: relative;
+ width: 120px;
+ border-bottom: 410px solid #A8CCFF;;
+ border-left: 70px solid transparent;
+ border-right: 70px solid transparent;
+ margin-left: -80px;
+ }
+}
+
+.hands {
+ &:before, &:after {
+ position: absolute;
+ content: '';
+ display: block;
+ width: 55px;
+ height: 110px;
+ background: #FFE8DC;
+ border-radius: 50%;
+ z-index: 1;
+ margin-top: 132px;
+ }
+
+ &:before {
+ transform: rotate(-70deg);
+ margin-left: 5px;
+ }
+
+ &:after {
+ transform: rotate(70deg);
+ margin-left: 110px;
+ }
}
.eye {
@@ -133,38 +135,38 @@ body {
background: linear-gradient(to bottom, #B2B2B2, #DBDBDB 25%, #FFFFFF);
margin: 60px 0 0 33px;
z-index: 2;
-}
-.eye:before, eye:after {
- content: '';
- display: block;
- width: 27px;
- position: absolute;
- height: 27px;
- border-radius: 20px;
- margin: 7px 0 0px 5px;
- background: radial-gradient(ellipse at center, #00D9FF, rgb(0, 140, 184) 45%, rgb(0, 137, 209) 45%, rgb(0, 60, 75) 72%);
+ &:before {
+ content: '';
+ display: block;
+ width: 27px;
+ position: absolute;
+ height: 27px;
+ border-radius: 20px;
+ margin: 7px 0 0px 5px;
+ background: radial-gradient(ellipse at center, #00D9FF, rgb(0, 140, 184) 45%, rgb(0, 137, 209) 45%, rgb(0, 60, 75) 72%);
+ }
}
.left {
box-shadow: -1px -3px 4px 1px #2C1F1A, inset 0px 4px 2px 0px #323232, -2px -1px 6px 1px #0978D7;
transform: rotate(-30deg);
-}
-
-.left .hotspot {
- transform: rotate(30deg);
-}
-.right .hotspot {
- transform: rotate(70deg);
+ .spot {
+ transform: rotate(30deg);
+ }
}
.right {
box-shadow: 2px 3px 4px 1px #2C1F1A, inset -4px 0px 2px 0px #323232, 1px 3px 6px 1px #0978E7;
transform: rotate(-70deg);
+
+ .spot {
+ transform: rotate(70deg);
+ }
}
-.hotspot {
+.spot {
width: 13px;
height: 16px;
border-radius: 50%;
@@ -173,30 +175,30 @@ body {
position: relative;
margin: 12px 0 0 11px;
box-shadow: 0 0 1px 1px #3B322A;
-}
-
-.hotspot:before {
- content: '';
- width: 10px;
- position: absolute;
- height: 12px;
- background-color: white;
- border-radius: 50%;
- margin: -3px 0 0 7px;
- box-shadow: 0 0 5px 1px #FFFFFF, 0 0 5px 1px #CDF0FF;
- opacity: .8;
-}
-.hotspot:after {
- content: '';
- width: 3px;
- position: absolute;
- height: 3px;
- background-color: white;
- border-radius: 50%;
- margin: 10px 0 0 -2px;
- box-shadow: 0 0 7px 2px #FFFFFF, 0 0 7px 2px #AEEAFF;
- opacity: .9;
+ &:before {
+ content: '';
+ width: 10px;
+ position: absolute;
+ height: 12px;
+ background-color: white;
+ border-radius: 50%;
+ margin: -3px 0 0 7px;
+ box-shadow: 0 0 5px 1px #FFFFFF, 0 0 5px 1px #CDF0FF;
+ opacity: .8;
+ }
+
+ &:after {
+ content: '';
+ width: 3px;
+ position: absolute;
+ height: 3px;
+ background-color: white;
+ border-radius: 50%;
+ margin: 10px 0 0 -2px;
+ box-shadow: 0 0 7px 2px #FFFFFF, 0 0 7px 2px #AEEAFF;
+ opacity: .9;
+ }
}
.nose {
@@ -209,28 +211,28 @@ body {
margin: 18px 0 0px 74px;
z-index: 2;
border-radius: 20px;
-}
-.nose:before {
- content: '';
- border-bottom: 16px solid #F2D2C2;
- border-left: 4px solid transparent;
- border-right: 4px solid transparent;
- width: 13px;
- position: relative;
- margin: -24px 0 0 -10px;
- display: block;
-}
-
-.nose:after {
- content: '';
- display: block;
- background-image: linear-gradient(to top, #FFF6F2 15%, #ffe8dc);
- width: 15px;
- z-index: 4;
- position: relative;
- height: 16px;
- margin: -16px 0 0 -7px;
+ &:before {
+ content: '';
+ border-bottom: 16px solid #F2D2C2;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ width: 13px;
+ position: relative;
+ margin: -24px 0 0 -10px;
+ display: block;
+ }
+
+ &:after {
+ content: '';
+ display: block;
+ background-image: linear-gradient(to top, #FFF6F2 15%, #ffe8dc);
+ width: 15px;
+ z-index: 4;
+ position: relative;
+ height: 16px;
+ margin: -16px 0 0 -7px;
+ }
}
.lips {
@@ -243,17 +245,17 @@ body {
display: block;
box-shadow: 0 0 2px 0 #5E0000;
border-radius: 50%;
-}
-.lips:after {
- display: block;
- content: '';
- width: 31px;
- height: 17px;
- position: absolute;
- background: linear-gradient(to bottom, rgba(239,197,202,1) 0%, rgba(210,75,90,1) 50%, rgba(186,39,55,1) 51%, rgba(241,142,153,1) 100%);
- margin: -4px 0 0 2px;
- border-radius: 50%;
+ &:after {
+ display: block;
+ content: '';
+ width: 31px;
+ height: 17px;
+ position: absolute;
+ background: linear-gradient(to bottom, rgba(239,197,202,1) 0%, rgba(210,75,90,1) 50%, rgba(186,39,55,1) 51%, rgba(241,142,153,1) 100%);
+ margin: -4px 0 0 2px;
+ border-radius: 50%;
+ }
}
.hair {
@@ -272,66 +274,16 @@ body {
background: linear-gradient(to bottom,rgba(199,34,0,1) 30%, rgba(234,40,3,1) 51%,rgba(255, 67, 0, 1) 75%,rgba(199,34,0,1) 100%);
position: absolute;
z-index: 1;
-}
-
-#heart {
- display: none;
- position: relative;
- width: 100px;
- height: 90px;
-}
-
-.field1 {
- width: 80%;
- bottom: -400px;
- left: 0;
- position: fixed;
- height: 600px;
- border-radius: 0 50% 50% 0;
- background: linear-gradient(to bottom, #5CBA4C 10%, #279414 25%, #0B4D00);
- display: inline-block;
-}
-.field2 {
- width: 50%;
- bottom: -250px;
- right: -100px;
- position: fixed;
- z-index: -1;
- height: 400px;
- border-radius: 50% 50% 0 0;
- background: linear-gradient(to bottom, #71BA52, #338924);
- display: inline-block;
-}
+ &:before, &:after {
+ content: '';
+ position: absolute;
+ opacity: .3;
+ border-radius: 50%;
+ z-index: 5;
+ }
-.field3 {
- width: 70%;
- bottom: 0;
- right: -50px;
- position: fixed;
- z-index: -2;
- height: 200px;
- border-radius: 50%;
- background: linear-gradient(to bottom, #D6FADA, #AAD793, #9EBE99, #77A171);
- display: inline-block;
-}
-
-.sky {
- width: 100%;
- height: 850px;
- z-index: -3;
- background: linear-gradient(to bottom, #6BC3FF, #51CBFF, #52CAFF, #7BD5FF, #C9EAFA, #EAFBFF, #FFFEE8);
- position: relative;
-}
-
-.forelock:before, .forelock:after {
- content: '';
- position: absolute;
- opacity: .3;
- border-radius: 50%;
- z-index: 5;
-}
-.forelock:before {
+ &:before {
display: block;
width: 180px;
height: 100px;
@@ -339,9 +291,10 @@ body {
margin: 20px 0 0 20px;
}
-.forelock:after {
+&:after {
width: 150px;
height: 40px;
background: linear-gradient(to top, transparent, #fff);
margin: 20px 0 0 35px;
+}
}
\ No newline at end of file
diff --git a/nature.less b/nature.less
new file mode 100644
index 0000000..7aab40a
--- /dev/null
+++ b/nature.less
@@ -0,0 +1,42 @@
+.field1 {
+ width: 80%;
+ bottom: -400px;
+ left: 0;
+ position: fixed;
+ height: 600px;
+ border-radius: 0 50% 50% 0;
+ background: linear-gradient(to bottom, #5CBA4C 10%, #279414 25%, #0B4D00);
+ display: inline-block;
+}
+
+.field2 {
+ width: 50%;
+ bottom: -250px;
+ right: -100px;
+ position: fixed;
+ z-index: -1;
+ height: 400px;
+ border-radius: 50% 50% 0 0;
+ background: linear-gradient(to bottom, #71BA52, #338924);
+ display: inline-block;
+}
+
+.field3 {
+ width: 70%;
+ bottom: 0;
+ right: -50px;
+ position: fixed;
+ z-index: -2;
+ height: 200px;
+ border-radius: 50%;
+ background: linear-gradient(to bottom, #D6FADA, #AAD793, #9EBE99, #77A171);
+ display: inline-block;
+}
+
+.sky {
+ width: 100%;
+ min-height: 850px;
+ z-index: -3;
+ background: linear-gradient(to bottom, #6BC3FF, #51CBFF, #52CAFF, #7BD5FF, #C9EAFA, #EAFBFF, #FFFEE8) no-repeat;
+ position: relative;
+}
\ No newline at end of file