body {
background-color: #F5F5F5;
font-family: Arial, sans-serif;
color: #333;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
font-size: 36px;
padding: 40px 0;
margin: 0;
}
.container {
width: 70%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-bottom: 60px;
}
.crane {
width: 200px;
height: 200px;
margin: 20px;
background-color: white;
border-radius: 50%;
box-shadow: 5px 5px 15px #e0e0e0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.crane .head {
width: 40px;
height: 40px;
margin-top: -10px;
border-radius: 50% 50% 0 0;
background-color: #fdd835;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
box-shadow: 2px 2px 6px #c0c0c0;
}
.crane .body {
width: 140px;
height: 140px;
border-radius: 50%;
background-color: #ffe0b2;
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
box-shadow: 2px 2px 6px #c0c0c0;
}
.crane .wing {
width: 0;
height: 0;
position: absolute;
top: 70px;
left: 50%;
transform: translateX(-50%);
border-bottom: 80px solid #ffe0b2;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
box-shadow: -2px 2px 6px #c0c0c0;
z-index: 2;
}
.crane .tail {
width: 20px;
height: 40px;
position: absolute;
top: 120px;
left: 50%;
transform: translateX(-50%) rotate(-45deg);
background-color: #fff9c4;
border-radius: 0 0 50% 50%;
box-shadow: 1px 1px 3px #c0c0c0;
z-index: 1;
}
.crane .tail:before,
.crane .tail:after {
content: '';
width: 10px;
height: 20px;
position: absolute;
bottom: 0;
transform: rotate(45deg);
background-color: #fff9c4;
box-shadow: 1px 1px 3px #c0c0c0;
z-index: 1;
}
.crane .tail:before {
left: -14px;
border-radius: 0 0 50% 50%;
}
.crane .tail:after {
right: -14px;
border-radius: 0 0 50% 50%;
}
.crane .fold {
width: 60px;
height: 20px;
background-color: #fdd835;
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
box-shadow: 1px 1px 3px #c0c0c0;
z-index: 1;
}
.crane .fold:before,
.crane .fold:after {
content: '';
width: 20px;
height: 10px;
background-color: #fdd835;
position: absolute;
bottom: 0;
transform: rotate(-45deg);
box-shadow: 1px 1px 3px #c0c0c0;
z-index: 1;
}
.crane .fold:before {
left: -18px;
border-radius: 0 50% 50% 0;
}
.crane .fold:after {
right: -18px;
border-radius: 50% 0 0 50%;
}
.crane .legs {
width: 80px;
height: 20px;
background-color: #fdd835;
position: absolute;
top: 170px;
left: 50%;
transform: translateX(-50%);
box-shadow: 1px 1px 3px #c0c0c0;
z-index: 1;
}
.crane .legs:before,
.crane .legs:after {
content: '';
width: 20px;
height: 10px;
background-color: #fdd835;
position: absolute;
bottom: 0;
transform: rotate(-45deg);
box-shadow: 1px 1px 3px #c0c0c0;
z-index: 1;
}
.crane .legs:before {
left: -24px;
border-radius: 0 50% 50% 0;
}
.crane .legs:after {
right: -24px;
border-radius: 50% 0 0 50%;
}
.crane:hover .head {
background-color: #ffc107;
}
.crane:hover .body {
background-color: #ffcc80;
}
.crane:hover .wing {
border-bottom-color: #ffcc80;
}
.crane:hover .tail,
.crane:hover .tail:before,
.crane:hover .tail:after,
.crane:hover .fold,
.crane:hover .fold:before,
.crane:hover .fold:after,
.crane:hover .legs,
.crane:hover .legs:before,
.crane:hover .legs:after {
background-color: #fffde7;
}