diff --git a/tree/park_N.html b/tree/park_N.html index 616cb99..eb6c3b0 100644 --- a/tree/park_N.html +++ b/tree/park_N.html @@ -46,8 +46,8 @@
- - + + @@ -91,12 +91,7 @@ } - - - - - - + //move the character $(document).keydown(function(e) { diff --git a/tree/spring_river.css b/tree/spring_river.css index 559d08d..2d27546 100644 --- a/tree/spring_river.css +++ b/tree/spring_river.css @@ -131,8 +131,8 @@ div#player_img { position: absolute; top:10%; left: 5%; - width: 450px; - height: 300px; + width: 350px; + height: 280px; } @@ -182,7 +182,7 @@ div#player_img { top:50%; left: 5%; position: absolute; - z-index:3; + z-index:2; } #fighter9 { top:50%; @@ -193,7 +193,7 @@ div#player_img { .children1 { top:5%; - right: 8%; + right: 6%; position: absolute; } @@ -201,36 +201,69 @@ div#player_img { top:40%; right: 2%; position: absolute; + z-index:3; } .decoration { top:35%; - right: 13.5%; + right: 10%; position: absolute; } .figure1{ - top:15%; - right: 13%; + bottom: 60%; + right: 5%; position: absolute; + z-index: 2; + cursor: pointer; } + .figure2{ top:40%; - right: 8%; + right: 6%; position: absolute; + cursor: pointer; } .figure3{ top:50%; - right: 15%; + right: 10%; position: absolute; + cursor: pointer; } .figure4{ top:30%; right: 3%; position: absolute; + cursor: pointer; +} + +.shooting_place1{ + top:60%; + right: 7%; + position: absolute; + z-index: 10; +} + +.shooting_place2{ + top:10%; + right: 2%; + position: absolute; + z-index: 10; } +.shooting_place3{ + top:15%; + right: 10%; + position: absolute; + z-index: 10; +} +#amanda{ + right: 11.5%; + top:33%; + position: absolute; + z-index: 10; +} /*images*/ @@ -275,6 +308,96 @@ div#player_img { z-index:1; } +/* amanda baloons*/ + +.bubble1 { + right: 8.5%; + top:12%; + position: absolute; + background: #ffffff; + color: #000000; + font-family: sinistre; + font-size: 16px; + line-height: 17px; + text-align: center; + width: 140px; + height: 57px; + border-radius: 10px; + padding: 18px; + border: #000000 solid 1px; + z-index: 50; +} +.bubble1:after { + content: ''; + position: absolute; + display: block; + width: 0; + z-index: 1; + border-style: solid; + border-width: 20px 20px 0 0; + border-color: #ffffff transparent transparent transparent; + bottom: -20px; + left: 32%; + margin-left: -10px; +} +.bubble1:before { + content: ''; + position: absolute; + width: 0; + z-index: 0; + border-style: solid; + border-width: 21px 21px 0 0; + border-color: #000000 transparent transparent transparent; + bottom: -22px; + left: 32%; + margin-left: -11px; + display: block; +} + +.bubble2 { + right: 13%; + top:10%; + position: absolute; + background: #ffffff; + color: #000000; + font-family: sinistre; + font-size: 16px; + line-height: 17px; + text-align: center; + width: 188px; + height: 57px; + border-radius: 10px; + padding: 18px; + border: #000000 solid 1px; + z-index: 50; +} +.bubble2:after { + content: ''; + position: absolute; + display: block; + width: 0; + z-index: 1; + border-style: solid; + border-width: 0 20px 20px 0; + border-color: transparent #ffffff transparent transparent; + bottom: -20px; + left: 81%; + margin-left: -10px; +} +.bubble2:before { + content: ''; + position: absolute; + width: 0; + z-index: 0; + border-style: solid; + border-width: 0 21px 21px 0; + border-color: transparent #000000 transparent transparent; + bottom: -22px; + left: 81%; + margin-left: -10px; + display: block; +} + @@ -298,4 +421,23 @@ div#player_img { /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: black; - } \ No newline at end of file + } + + .scrollbar { + overflow-x: hidden; + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: -100px !important; + + } + + .scrollbar::-webkit-scrollbar { + display: none; + + } + + .scroll-pane{ + width: 100%; + height: 200px; + overflow: auto; + +} diff --git a/tree/spring_river.html b/tree/spring_river.html index 0d110d5..fe37238 100644 --- a/tree/spring_river.html +++ b/tree/spring_river.html @@ -4,15 +4,15 @@