diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..096746c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+/node_modules/
\ No newline at end of file
diff --git a/css/flowers.css b/css/flowers.css
new file mode 100644
index 0000000..1151fc4
--- /dev/null
+++ b/css/flowers.css
@@ -0,0 +1,197 @@
+.flowers {
+ z-index: 100;
+ position: absolute;
+ margin: 120px 0 0 90px;
+}
+.leaf {
+ display: inline-block;
+ border-radius: 2px 80%;
+ position: absolute;
+ box-shadow: 0 0 3px rgba(64, 232, 255, 0.75), 0 0 3px rgba(64, 232, 255, 0.75);
+}
+.flower-light {
+ z-index: -1;
+ position: absolute;
+ margin-left: -60px;
+ transform: rotate(10deg);
+}
+.flower .leaf {
+ border: 1px solid #3BB3FA;
+ box-shadow: 0 0 1px 0 #67FBFF;
+ width: 40px;
+ height: 40px;
+}
+.flower-light .leaf {
+ width: 25px;
+ height: 25px;
+ border: 1px solid #35C7FA;
+}
+.flower-medium {
+ z-index: -1;
+ position: absolute;
+ margin: 30px 0 0 -60px;
+ transform: rotate(-10deg);
+}
+.flower-medium .leaf {
+ width: 20px;
+ height: 20px;
+ background: linear-gradient(45deg, rgba(91, 111, 255, 0.64), #7B95FF, #E5D3FF, #7D5AE1, #5F00FF) no-repeat;
+}
+.flower-small .leaf {
+ width: 15px;
+ height: 15px;
+ border-radius: 7px;
+ background: linear-gradient(45deg, rgba(161, 215, 255, 0.64), #D1F9FF, #FFFFFF, #B3F2EE, #B0EFFF) no-repeat;
+ border: 1px solid rgba(28, 167, 237, 0.63);
+}
+.flower-small {
+ margin: 20px 0 0 10px;
+ position: absolute;
+}
+.flower-light .leaf.r0 {
+ left: 15px;
+ top: 30px;
+}
+.flower-light .leaf.r80 {
+ left: -10px;
+ top: 32px;
+}
+.flower-light .leaf.r-10 {
+ left: -15px;
+ top: 10px;
+}
+.flower-light .leaf.r110 {
+ left: 18px;
+ top: 10px;
+}
+.flower-medium .leaf.r0 {
+ left: 10px;
+ top: 25px;
+}
+.flower-medium .leaf.r80 {
+ left: -10px;
+ top: 28px;
+}
+.flower-medium .leaf.r-10 {
+ left: -14px;
+ top: 10px;
+}
+.flower-medium .leaf.r110 {
+ left: 15px;
+ top: 10px;
+}
+.flower-small .leaf.r0 {
+ left: 7px;
+ top: 20px;
+}
+.flower-small .leaf.r80 {
+ left: -7px;
+ top: 20px;
+}
+.flower-small .leaf.r-10 {
+ left: -10px;
+ top: 7px;
+}
+.flower-small .leaf.r110 {
+ left: 10px;
+ top: 7px;
+}
+.flower-small:before {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 10px;
+ height: 10px;
+ background: #FFE000;
+ margin: 13px 0 0 2px;
+ z-index: 3;
+ border-radius: 50%;
+}
+.r45 {
+ background: linear-gradient(45deg, rgba(91, 219, 255, 0.64), #7BD7FF, #B3F5FF, #7FD7FF, #24BBFF) no-repeat;
+ transform: rotate(45deg);
+}
+.r110 {
+ transform: rotate(110deg);
+ background: linear-gradient(45deg, rgba(91, 219, 255, 0.64), #7BD7FF, #B3F5FF, #7FD7FF, #24BBFF) no-repeat;
+ left: 20px;
+ top: 12px;
+}
+.r-10 {
+ transform: rotate(-10deg);
+ background: linear-gradient(45deg, rgba(91, 219, 255, 0.64), #7BD7FF, #B3F5FF, #7FD7FF, #24BBFF) no-repeat;
+ left: -20px;
+ top: 12px;
+}
+.r0 {
+ background: linear-gradient(45deg, rgba(91, 219, 255, 0.64), #7BD7FF, #B3F5FF, #7FD7FF, #24BBFF) no-repeat;
+ left: 15px;
+ top: 37px;
+}
+.r80 {
+ transform: rotate(80deg);
+ background: linear-gradient(45deg, rgba(91, 219, 255, 0.64), #7BD7FF, #B3F5FF, #7FD7FF, #24BBFF) no-repeat;
+ left: -15px;
+ top: 40px;
+}
+.first {
+ margin: 50px 0 0 -50px;
+}
+.second {
+ margin: 70px 0 0 0px;
+ transform: rotate(50deg);
+}
+.third {
+ transform: rotate(120deg);
+ margin: 80px 0 0 100px;
+}
+.flower-medium.second {
+ margin-left: 45px;
+ transform: rotate(45deg);
+}
+.flower-medium.third {
+ transform: rotate(0deg);
+ margin: 20px 0 0 65px;
+}
+.flower-small.second {
+ margin: 25px 0 0 -20px;
+ transform: rotate(10deg);
+}
+.flower-small.third {
+ margin: -10px 0 0 -25px;
+ transform: rotate(0);
+}
+.flower-small.forth {
+ margin: 50px 0 0 -60px;
+ z-index: -2;
+}
+.green.leaf {
+ width: 70px;
+ z-index: -3;
+ height: 60px;
+ background: linear-gradient(45deg, #2A9100, #82E379, #2A9100);
+ border: 1px solid #138100;
+ box-shadow: 0 0 5px 0 #026E04;
+}
+.green.leaf.first {
+ margin: 100px 0 0 0;
+ transform: rotate(45deg);
+}
+.green.leaf.second {
+ margin: 90px 0 0 -20px;
+ transform: rotate(80deg);
+}
+.green.leaf.third {
+ z-index: -4;
+ margin: 100px 0 0 20px;
+ transform: rotate(0);
+}
+.green.leaf.fifth {
+ margin: 85px 0 0 -20px;
+ transform: rotate(20deg);
+ height: 100px;
+ width: 100px;
+ z-index: -5;
+ background: linear-gradient(45deg, #2A9100, #47CA3B, #2A9100);
+ box-shadow: 0 0 5px 0 #026E04;
+}
diff --git a/css/human.css b/css/human.css
new file mode 100644
index 0000000..82346eb
--- /dev/null
+++ b/css/human.css
@@ -0,0 +1,314 @@
+body {
+ margin: 0;
+ padding: 0;
+}
+.person {
+ top: 160px;
+ left: 30%;
+ position: absolute;
+ z-index: 100;
+}
+.face {
+ position: relative;
+ background: #FFE8DC;
+ width: 170px;
+ 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;
+}
+.neck {
+ position: relative;
+ width: 60px;
+ height: 80px;
+ margin-left: 55px;
+ background: #FFE8DC;
+}
+.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;
+}
+.dress {
+ position: relative;
+ top: 35px;
+ border-top: 120px solid #A8CCFF;
+ border-left: 50px solid transparent;
+ border-right: 50px solid transparent;
+ height: 0;
+ 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;
+}
+.eye {
+ display: inline-block;
+ position: relative;
+ width: 35px;
+ height: 38px;
+ border-radius: 10px 30px;
+ 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, #008cb8 45%, #0089d1 45%, #003c4b 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);
+}
+.right {
+ box-shadow: 2px 3px 4px 1px #2C1F1A, inset -4px 0px 2px 0px #323232, 1px 3px 6px 1px #0978E7;
+ transform: rotate(-70deg);
+}
+.hotspot {
+ width: 13px;
+ height: 16px;
+ border-radius: 50%;
+ background-color: black;
+ z-index: 3;
+ 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;
+}
+.nose {
+ position: relative;
+ width: 0;
+ height: 0;
+ border-left: 10px solid transparent;
+ border-right: 10px solid transparent;
+ border-top: 8px solid #f0cbb8;
+ 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;
+}
+.lips {
+ position: relative;
+ z-index: 3;
+ width: 35px;
+ height: 5px;
+ background: linear-gradient(to top, #f85032 0%, #b81f08 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
+ margin: 13px 0 0 67px;
+ 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, #efc5ca 0%, #d24b5a 50%, #ba2737 51%, #f18e99 100%);
+ margin: -4px 0 0 2px;
+ border-radius: 50%;
+}
+.hair {
+ width: 220px;
+ margin-left: -25px;
+ height: 300px;
+ background: linear-gradient(to top, #d22200 30%, #ff4300 60%, #c72200 100%);
+ position: absolute;
+}
+.forelock {
+ width: 220px;
+ height: 120px;
+ border-radius: 50%;
+ margin-top: -55px;
+ background: linear-gradient(to bottom, #c72200 30%, #ea2803 51%, #ff4300 75%, #c72200 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;
+}
+.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 {
+ display: block;
+ width: 180px;
+ height: 100px;
+ background: linear-gradient(to bottom, transparent, #fff);
+ margin: 20px 0 0 20px;
+}
+.forelock:after {
+ width: 150px;
+ height: 40px;
+ background: linear-gradient(to top, transparent, #fff);
+ margin: 20px 0 0 35px;
+}
diff --git a/flowers.css b/flowers.less
similarity index 100%
rename from flowers.css
rename to flowers.less
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..5d9c663
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,16 @@
+var gulp = require('gulp');
+var less = require('gulp-less');
+var watchLess = require('gulp-watch-less');
+
+gulp.task('showIt', function() {
+ return gulp.src('*.less')
+ .pipe(less())
+ .pipe(gulp.dest('./css'));
+});
+
+gulp.task('lessIt', function(){
+ return gulp.src('*.less')
+ .pipe(watchLess('*.less'))
+ .pipe(less())
+ .pipe(gulp.dest('./css'));
+});
\ No newline at end of file
diff --git a/human.html b/human.html
index 6bceb98..819dca4 100644
--- a/human.html
+++ b/human.html
@@ -3,8 +3,8 @@
A Human
-
-
+
+
diff --git a/human.css b/human.less
similarity index 96%
rename from human.css
rename to human.less
index e52f9b5..2b3ea0c 100644
--- a/human.css
+++ b/human.less
@@ -82,7 +82,7 @@ body {
.dress {
position: relative;
top: 35px;
- border-top: 120px solid #DDE2E9;
+ border-top: 120px solid #A8CCFF;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
@@ -96,7 +96,7 @@ body {
display: block;
position: relative;
width: 120px;
- border-bottom: 410px solid #DDE2E9;
+ border-bottom: 410px solid #A8CCFF;;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
margin-left: -80px;
@@ -205,7 +205,7 @@ body {
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
- border-top: 8px solid #D9C3B8;
+ border-top: 8px solid #f0cbb8;
margin: 18px 0 0px 74px;
z-index: 2;
border-radius: 20px;
@@ -213,7 +213,7 @@ body {
.nose:before {
content: '';
- border-bottom: 16px solid #E3D0C7;
+ border-bottom: 16px solid #F2D2C2;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
width: 13px;
@@ -225,7 +225,7 @@ body {
.nose:after {
content: '';
display: block;
- background-image: linear-gradient(to bottom, #FFE8DC, transparent);
+ background-image: linear-gradient(to top, #FFF6F2 15%, #ffe8dc);
width: 15px;
z-index: 4;
position: relative;
@@ -325,7 +325,7 @@ body {
}
.forelock:before, .forelock:after {
- content: '';
+ content: '';
position: absolute;
opacity: .3;
border-radius: 50%;
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..222665f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,25 @@
+{
+ "name": "css-girl",
+ "version": "1.0.0",
+ "description": "css art :)",
+ "main": "human.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://Aeternitas13@bitbucket.org/Aeternitas13/css-art.git"
+ },
+ "keywords": [
+ "css-art"
+ ],
+ "author": "Valentina Kozlova",
+ "license": "ISC",
+ "homepage": "https://bitbucket.org/Aeternitas13/css-art#readme",
+ "devDependencies": {
+ "browserify": "^13.0.1",
+ "gulp": "^3.9.1",
+ "gulp-less": "^3.1.0",
+ "gulp-watch-less": "^1.0.1"
+ }
+}