Attempting to adjust the size of the baseball field proved challenging, as it wasn't a simple task. Is there a way to achieve this effectively? Thanks, HTML - is using DIV the only method for resizing? I couldn't find a way to resize everything at once.
The code is also available through the following link, but I was aiming to resize the entire layout.
Code Snippet:
#field {
position: absolute;
top: -110px;
left: 145px;
height: 700px;
width: 700px;
border-radius: 1% 100% 1% 1%;
border: 1px solid green;
background-color: green;
-webkit-transform: rotate(-45deg);
}
#in-field {
position: absolute;
top: 170px;
left: 265px;
height: 450px;
width: 450px;
border-radius: 1% 50% 1% 1%;
border: 1px solid: #836539;
/*#9b7653; */
background-color: #836539;
/*#9b7653;*/
-webkit-transform: rotate(-45deg);
}
... (more CSS code) ...
<div id="stadium">
<div id="field" class="mowed-grass"></div>
<div id="in-field"></div>
<div id="in-field-grass" class="mowed-grass"></div>
... (more HTML code) ...
</div>