*{ box-sizing: border-box; } blockquote{ display: block; text-align: center; margin: 50px auto; color: white; font-size: 25px; } .cards{ width: 100%; height: 600px; padding: 50px; background-color: #0d5825; position: relative; } img{ width: 150px; position: absolute; left: 50%; /* transform: translateX(-50%); */ } .first{ transform: translate(-85%, -3%) rotate(-21deg); } .second{ transform: translateX(-50%) rotate(-7deg); } .third{ transform: translate(-15%, 7%) rotate(7deg); } .menu{ position: relative; } nav{ position: absolute; padding-top: 50px; width: 25%; height: 100vh; background-color: grey; left: -22%; transition: left 1s ease-out; } .menu_btn{ position: absolute; font-size: 20px; top: 50%; right: 0px; transform: translate(40px, -50%) rotate(90deg); letter-spacing: 5px; } nav:hover{ left: 0; } nav:hover .menu_btn{ z-index: -100; } ul{ list-style-type: none; } li{ padding-bottom: 20px; padding-left: 25px; font-size: 20px; } li:hover{ color:rgb(177, 177, 66) } li::before{ content: ''; position: absolute; left: 30px; width: 16px; height: 16px; background-color: rgb(177, 177, 66); border: 2px solid black; transform: rotate(45deg) skew(5deg, 5deg); }