homework-html/HW4/markup4/css/main.css

.box {
    width: 550px;
    height: 550px;
    background: #0d5825;
    margin-left: 30px;
}

blockquote {
    color: white;
    padding-top: 30px;
    font-size: 25px;
    text-align: center;
}

.cards {
    position: relative;
    width: 150px;
    top: 130px;
    left: 255px;
}

.first,
.second,
.third {
    position: absolute;
    width: 150px; 
    transition: all 0.3s linear;
}

.first {
    z-index: 1;
    transform: rotate(7deg);
}

.second {
    transform: rotate(-25deg);
    left: -108px;
    top: -22px;
}

.third {
    transform: rotate(-11deg);
    left: -56px;
    top: -17px;
}

.first:hover {
    transform: translateY(-20px) rotate(7deg);
}

.second:hover {
   transform: translateY(-20px) rotate(-25deg);
}

.third:hover {
    transform: translateY(-20px) rotate(-11deg);
} 

.squares {
    padding: 150px;
    margin-bottom: 100px;
}

.square1,
.square2,
.square3 {
    position: absolute;
    width: 100px;
    height: 100px;
}

.square1 {
    transform: translateX(50px) translateY(-50px);
    background: rgb(238, 128, 165);
}

.square2 {
    z-index: 1;
    transform: translateX(110px) translateY(10px);
    background: rgb(139, 144, 219);
}

.square3 {
    transform: translateX(170px) translateY(70px);
    background: rgb(99, 238, 64);
}

.menu_block {
    position: relative;
    width: 200px;
    height: 400px;
    background: rgb(170, 168, 168);
    left: -180px;
    transition: all 0.3s linear;
}

.menu_btn {
    position: absolute;
    transform: translateX(145px) translateY(190px) rotate(90deg);
    color: white;
    font-size: 15px;
}

.menu {
    position: absolute;
    margin-top: 10px;
}

li > a {
    text-decoration: none;
    color: white;
    font-size: 13px;
}

li {
    list-style-type: none;
    margin-top: 2px;
}

li:before {
    content: "";
    width: 12px;
    height: 12px;
    background: orange;
    display: block;
    border: 1px solid black;
    transform: translateX(-20px) translateY(15px) rotate(45deg);
}

.menu_block:hover {
    left: 0;
}

li a:hover {
    color: orange;
}

.menu_block:hover .menu_btn {
    opacity: 0;
}

.animation {
	height: 300px;
	overflow: hidden;
    margin-top: 100px;
}

.square {
    width: 100px;
    height: 100px;
	animation: anim1 3s ease infinite, anim2 3s ease infinite;
}

@keyframes anim1{
	0%{margin-top: 0px; margin-left: 0px}
	25%{margin-top:200px; margin-left: 0px}
	50%{margin-top:200px; margin-left: 200px}
	75%{margin-top:0px; margin-left: 200px}
	100%{margin-left:0px; margin-top: 0px}
}

@keyframes anim2{
	0%{background :red;}
    25%{background: blue;}
	50%{background:green;}
	100%{background:yellow;}
}