diff --git a/tree/imgs/.DS_Store b/tree/imgs/.DS_Store index 775b854..10367df 100644 Binary files a/tree/imgs/.DS_Store and b/tree/imgs/.DS_Store differ diff --git a/tree/imgs/monteferro/barn2.png b/tree/imgs/monteferro/barn2.png new file mode 100644 index 0000000..1b344f8 Binary files /dev/null and b/tree/imgs/monteferro/barn2.png differ diff --git a/tree/imgs/monteferro/bush.gif b/tree/imgs/monteferro/bush.gif new file mode 100644 index 0000000..8beb88d Binary files /dev/null and b/tree/imgs/monteferro/bush.gif differ diff --git a/tree/imgs/monteferro/cow.gif b/tree/imgs/monteferro/cow.gif new file mode 100644 index 0000000..d9c7127 Binary files /dev/null and b/tree/imgs/monteferro/cow.gif differ diff --git a/tree/imgs/monteferro/cow2.gif b/tree/imgs/monteferro/cow2.gif new file mode 100644 index 0000000..754bd87 Binary files /dev/null and b/tree/imgs/monteferro/cow2.gif differ diff --git a/tree/imgs/monteferro/farmer.gif b/tree/imgs/monteferro/farmer.gif new file mode 100644 index 0000000..1c21427 Binary files /dev/null and b/tree/imgs/monteferro/farmer.gif differ diff --git a/tree/imgs/monteferro/grass1.gif b/tree/imgs/monteferro/grass1.gif new file mode 100644 index 0000000..958e94d Binary files /dev/null and b/tree/imgs/monteferro/grass1.gif differ diff --git a/tree/imgs/monteferro/pill.gif b/tree/imgs/monteferro/pill.gif new file mode 100644 index 0000000..c560346 Binary files /dev/null and b/tree/imgs/monteferro/pill.gif differ diff --git a/tree/imgs/park/trash_bin.gif.pdf b/tree/imgs/park/trash_bin.gif.pdf new file mode 100644 index 0000000..e690878 Binary files /dev/null and b/tree/imgs/park/trash_bin.gif.pdf differ diff --git a/tree/monteferro.css b/tree/monteferro.css index 9426926..16f7da7 100644 --- a/tree/monteferro.css +++ b/tree/monteferro.css @@ -47,33 +47,39 @@ } - #player_img { - bottom: 20%; - left: 15%; - position:absolute ; - z-index: 20; -} - - #ground { position: fixed; - bottom:0px; - height:83%; + top: 130px; + bottom: 0px; + height: inherit; width: 100%; border-top: 0.1vw solid; + z-index: -1; } div.text_container { - bottom: 2%; - left:3%; - right:3%; + bottom: 40px; + left:40px; + right:40px; position:fixed; - margin-block-start: 1em; - margin-block-end: 1em; - margin-inline-start: 1em; - margin-inline-end: 1em; - + margin: auto; + line-height: 1.4em; + +} +.game_bar { + top:40px; + right:80px; + position:fixed; + background-color: #ccb3ff; + border-radius: 25vw; + padding: 3px; + font-family: sinistre; + -webkit-box-shadow: 0px 0px 8px 8px #ccb3ff; + -moz-box-shadow: 0px 0px 8px 8px #ccb3ff; + box-shadow: 0px 0px 8px 8px #ccb3ff; + font-size: 1.6vw; + } button{ @@ -100,20 +106,29 @@ span.button_text{ } #ned { - bottom: 21%; + bottom: 26%; + left: 13%; + position:absolute ; + z-index: 1; +} + +#player_img { + bottom: 24%; left: 8%; position:absolute ; - z-index: 20; + z-index: 0; } + #barn { - bottom: 60%; - right: 10%; + bottom: 16%; + right: 4%; position:absolute ; z-index: 10; } + #tree2 { - bottom: 70%; + bottom: 20%; right: 7%; position:absolute ; z-index: 5; @@ -122,33 +137,87 @@ span.button_text{ bottom: 47%; left: 8%; position:absolute ; - z-index: 11; + } + #cow { + bottom: 25%; + right: 12%; + position:absolute ; + + } -#farmer { - bottom: 75%; +#farmer_figure { + bottom: 30%; right: 8%; position:absolute ; + +} + +#farmer_baloon { + bottom: 50%; + right: 18%; + position:absolute ; z-index: 10; + background: #ffffff; + color: #000000; + font-family: sinistre; + font-size: 16px; + line-height: 17px; + text-align: center; + width: 50px; + height: 20px; + border-radius: 10px; + padding: 18px; + border: #000000 solid 1px; +} +#farmer_baloon: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: 68%; + margin-left: -10px; +} +#farmer_baloon: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: 68%; + margin-left: -10px; + display: block; } + + #mulino { - bottom: 70%; - left: 15%; + bottom: 65%; + left: 22%; position:absolute ; z-index: 10; } .field{ - width: 40%; - height: 40%; - top:10%; - left: 30%; - right: 30%; + max-width: 30%; + max-height: 55%; + top: 15%; + bottom: 10%; + left: 32.5%; + right: 32.5%; position: absolute; display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-template-rows: 1fr 1fr 1fr 1fr; + grid-template-columns: 25% 25% 25% 25% 25%; + grid-template-rows: 25% 25% 25% 25%; + } img.corn{ max-width: 100%; @@ -156,6 +225,99 @@ img.corn{ margin: auto; } +.corn { + cursor: pointer; +} + + +/* baloons*/ + +.ned_baloon1 { + left: 5%; + bottom: 47%; + position: absolute; + background: #ffffff; + color: #000000; + font-family: sinistre; + font-size: 16px; + line-height: 17px; + text-align: center; + width: 285px; + height: 135px; + border-radius: 10px; + padding: 18px; + border: #000000 solid 1px; + z-index:10; +} +.ned_baloon1:after { + content: ''; + position: absolute; + display: block; + width: 0; + z-index: 1; + border-style: solid; + border-color: #ffffff transparent; + border-width: 20px 20px 0; + bottom: -20px; + left: 60%; + margin-left: -20px; +} +.ned_baloon1:before { + content: ''; + position: absolute; + width: 0; + z-index: 0; + border-style: solid; + border-color: #000000 transparent; + border-width: 21px 21px 0; + bottom: -21.5px; + left: 60%; + margin-left: -21px; + display: block; +} +.ned_baloon2 { + bottom:23%; + left:26%; + position: absolute; + background: #ffffff; + color: #000000; + font-family: sinistre; + font-size: 16px; + line-height: 17px; + text-align: center; + width: 285px; + height: 85px; + border-radius: 10px; + padding: 18px; + border: #000000 solid 1px; + z-index: 11; +} +.ned_baloon2:after { + content: ''; + position: absolute; + display: block; + width: 0; + z-index: 1; + border-style: solid; + border-color: transparent #ffffff; + border-width: 20px 20px 20px 0; + top: 50%; + left: -20px; + margin-top: -20px; +} +.ned_baloon2:before { + content: ''; + position: absolute; + width: 0; + z-index: 0; + border-style: solid; + border-color: transparent #000000; + border-width: 21px 21px 21px 0; + top: 50%; + left: -21.5px; + margin-top: -21px; + display: block; +} /* hide scroll bar */ diff --git a/tree/monteferro.html b/tree/monteferro.html index 9cc32dc..6b30d10 100644 --- a/tree/monteferro.html +++ b/tree/monteferro.html @@ -10,18 +10,26 @@
- - - - + + + + + + + + + +