From c5b98a5c8e9b790e0b0d330989cbf79e490c52a6 Mon Sep 17 00:00:00 2001 From: Valentina Date: Thu, 12 May 2016 23:58:01 +0300 Subject: [PATCH] =?UTF-8?q?=D0=A7=D0=B8=D1=81=D1=82=D0=BA=D0=B0=20=D0=B3?= =?UTF-8?q?=D0=BE=D0=B2=D0=BD=D0=BE=D0=BA=D0=BE=D0=B4=D0=B0.=20=D0=A7?= =?UTF-8?q?=D0=B0=D1=81=D1=82=D1=8C=201.=20=D0=93=D0=BB=D0=B0=D0=B2=D0=BD?= =?UTF-8?q?=D1=8B=D0=B9=20=D0=B3=D0=B5=D1=80=D0=BE=D0=B9=20=D1=81=D1=83?= =?UTF-8?q?=D0=BC=D0=B5=D0=BB=20=D0=BF=D1=80=D0=B5=D0=B2=D0=B5=D1=81=D1=82?= =?UTF-8?q?=D0=B8=20=D0=B2=D1=81=D0=B5=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5?= =?UTF-8?q?=D0=BD=D1=82=D1=8B=20LESS=20=D0=B2=20=D0=BF=D0=BE=D1=80=D1=8F?= =?UTF-8?q?=D0=B4=D0=BE=D0=BA.=20=D0=9D=D0=BE=20=D0=BE=D0=BD=20=D0=BD?= =?UTF-8?q?=D0=B5=20=D0=BF=D1=80=D0=BE=D0=B2=D0=B5=D1=80=D1=8F=D0=BB,=20?= =?UTF-8?q?=D0=BA=D0=B0=D0=BA=20=D0=BE=D0=BD=D0=B8=20=D1=83=D1=81=D1=82?= =?UTF-8?q?=D1=80=D0=BE=D0=B5=D0=BD=D1=8B=20=D0=B2=D0=BD=D1=83=D1=82=D1=80?= =?UTF-8?q?=D0=B8.=20=D0=98=20=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=D1=8C?= =?UTF-8?q?=D0=BD=D0=BE=20=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB,=20=D0=B8?= =?UTF-8?q?=D0=BD=D0=B0=D1=87=D0=B5=20=D0=BF=D1=80=D0=B8=D1=88=D0=BB=D0=BE?= =?UTF-8?q?=D1=81=D1=8C=20=D0=B1=D1=8B=20=D0=BB=D0=B5=D1=87=D0=B8=D1=82?= =?UTF-8?q?=D1=8C=D1=81=D1=8F=20=D0=B2=D0=B8=D0=BD=D0=BE=D0=BC=20=D0=B5?= =?UTF-8?q?=D1=89=D0=B5=20=D0=BD=D0=B5=D0=B4=D0=B5=D0=BB=D1=8E=20=D0=BF?= =?UTF-8?q?=D0=BE=D1=81=D0=BB=D0=B5=20=D1=8D=D1=82=D0=BE=D0=B3=D0=BE.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit То, что отвечает за пейзажи переселили в отдельный файл. Девочка очень просит сделать ей пластику носа и новую прическу. Поэтому в следующих частях ГГ обязательно ее спасет. Но наш ГГ столкнулся с другой проблемой. В букете цветов девочки просто адский говнокод, которому поможет лишь javascript. ГГ не знает, что ему делать в первую очередь, спасать девочку или ее букет. Об этом вы сможете почитать в следующих частях. Приятного просмотра. Продолжение следует... --- css/human.css | 86 +++-------- css/nature.css | 39 +++++ human.html | 5 +- human.js | 15 ++ human.less | 381 ++++++++++++++++++++++--------------------------- nature.less | 42 ++++++ 6 files changed, 286 insertions(+), 282 deletions(-) create mode 100644 css/nature.css create mode 100644 nature.less diff --git a/css/human.css b/css/human.css index 82346eb..185d48f 100644 --- a/css/human.css +++ b/css/human.css @@ -3,7 +3,7 @@ body { padding: 0; } .person { - top: 160px; + bottom: 340px; left: 30%; position: absolute; z-index: 100; @@ -16,6 +16,17 @@ body { border-radius: 35px 35px 80px 80px; box-shadow: 0 1px 1px 0 #EBC3A9; } +.face:before, +.face:after { + position: absolute; + content: ''; + top: 70px; + width: 85px; + height: 120px; + background: #FFE8DC; + border-radius: 50px 50px 30px 30px; + z-index: 1; +} .face:before { transform: rotate(-45deg); transform-origin: 0 100%; @@ -28,17 +39,6 @@ body { 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; @@ -121,8 +121,7 @@ body { margin: 60px 0 0 33px; z-index: 2; } -.eye:before, -eye:after { +.eye:before { content: ''; display: block; width: 27px; @@ -136,17 +135,17 @@ eye:after { box-shadow: -1px -3px 4px 1px #2C1F1A, inset 0px 4px 2px 0px #323232, -2px -1px 6px 1px #0978D7; transform: rotate(-30deg); } -.left .hotspot { +.left .spot { 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 { +.right .spot { + transform: rotate(70deg); +} +.spot { width: 13px; height: 16px; border-radius: 50%; @@ -156,7 +155,7 @@ eye:after { margin: 12px 0 0 11px; box-shadow: 0 0 1px 1px #3B322A; } -.hotspot:before { +.spot:before { content: ''; width: 10px; position: absolute; @@ -167,7 +166,7 @@ eye:after { box-shadow: 0 0 5px 1px #FFFFFF, 0 0 5px 1px #CDF0FF; opacity: .8; } -.hotspot:after { +.spot:after { content: ''; width: 3px; position: absolute; @@ -246,51 +245,6 @@ eye:after { 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: ''; diff --git a/css/nature.css b/css/nature.css new file mode 100644 index 0000000..aa429ad --- /dev/null +++ b/css/nature.css @@ -0,0 +1,39 @@ +.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; +} diff --git a/human.html b/human.html index 819dca4..ca5e504 100644 --- a/human.html +++ b/human.html @@ -5,6 +5,7 @@ + @@ -20,10 +21,10 @@
-
+
-
+
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